aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/InteractionUtils.tsx31
-rw-r--r--src/client/views/GestureOverlay.tsx19
-rw-r--r--src/client/views/InkingStroke.tsx5
-rw-r--r--src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx6
4 files changed, 35 insertions, 26 deletions
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 9a9bb3d42..64facaca4 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -3,6 +3,7 @@ import * as beziercurve from 'bezier-curve';
import * as fitCurve from 'fit-curve';
import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu";
import "./InteractionUtils.scss";
+import { Utils } from "../../Utils";
export namespace InteractionUtils {
export const MOUSETYPE = "mouse";
@@ -93,15 +94,15 @@ export namespace InteractionUtils {
export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number,
color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string,
- dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean) {
+ dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) {
let pts: { X: number; Y: number; }[] = [];
if (shape) { //if any of the shape are true
pts = makePolygon(shape, points);
}
else if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y === points[0].Y) {
//pointer is up (first and last points are the same)
- points.pop();
const newPoints = points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]);
+ newPoints.pop();
const bezierCurves = fitCurve(newPoints, parseInt(bezier));
for (const curve of bezierCurves) {
@@ -117,28 +118,26 @@ export namespace InteractionUtils {
`${(pt.X - left - width / 2) * scalex + width / 2},
${(pt.Y - top - width / 2) * scaley + width / 2} `, "");
const dashArray = String(Number(width) * Number(dash));
-
- return (<svg>
- <defs>
- <marker id="dot" orient="auto" overflow="visible">
+ const defGuid = Utils.GenerateGuid();
+ return (<svg fill={fill === "none" ? color : fill}> {/* setting the svg fill sets the arrowhead fill */}
+ {nodefs ? (null) : <defs>
+ <marker id={`dot${defGuid}`} orient="auto" overflow="visible">
<circle r={0.5} fill="context-stroke" />
</marker>
- <marker id="arrowHead" orient="auto" overflow="visible" refX="3" refY="1" markerWidth="10" markerHeight="7">
- {/* <rect width={strokeWidth} height={strokeWidth} transform='rotate(45)' fill="dodgerblue" /> */}
- <polygon points="3 0, 3 2, 0 1" fill={fill} />
+ <marker id={`arrowHead${defGuid}`} orient="auto" overflow="visible" refX="3" refY="0" markerWidth="10" markerHeight="7">
+ <polygon points="10 -5, 10 5, 0 0" />
</marker>
- <marker id="arrowEnd" orient="auto" overflow="visible" refX="0" refY="1" markerWidth="10" markerHeight="7">
- {/* <rect width={strokeWidth} height={strokeWidth} transform='rotate(45)' fill="dodgerblue" /> */}
- <polygon points="0 0, 3 1, 0 2" fill={fill} />
+ <marker id={`arrowEnd${defGuid}`} orient="auto" overflow="visible" refX="3" refY="1" markerWidth="10" markerHeight="7">
+ <polygon points="0 0, 3 1, 0 2" />
</marker>
- </defs>
+ </defs>}
<polyline
points={strpts}
style={{
filter: drawHalo ? "url(#dangerShine)" : undefined,
- fill: "none",
+ fill,
opacity: strokeWidth !== width ? 0.5 : undefined,
pointerEvents: pevents as any,
stroke: color ?? "rgb(0, 0, 0)",
@@ -146,8 +145,8 @@ export namespace InteractionUtils {
strokeLinejoin: "round",
strokeLinecap: "round"
}}
- markerStart={arrowStart}
- markerEnd={arrowEnd}
+ markerStart={`url(#${arrowStart + defGuid})`}
+ markerEnd={`url(#${arrowEnd + defGuid})`}
/>
</svg>);
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 95dc2c7d4..43aa63eb1 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -24,6 +24,7 @@ import { RadialMenu } from "./nodes/RadialMenu";
import HorizontalPalette from "./Palette";
import { Touchable } from "./Touchable";
import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
+import HeightLabel from "./collections/collectionMulticolumn/MultirowHeightLabel";
@observer
export default class GestureOverlay extends Touchable {
@@ -812,20 +813,28 @@ export default class GestureOverlay extends Touchable {
}
@computed get elements() {
-
- const B = this.svgBounds;
const width = Number(ActiveInkWidth());
+ const B = this.svgBounds;
+ B.left = B.left - width / 2;
+ B.right = B.right + width / 2;
+ B.top = B.top - width / 2;
+ B.bottom = B.bottom + width / 2;
+ B.width += width;
+ B.height += width;
return [
this.props.children,
this._palette,
[this._strokes.map((l, i) => {
const b = this.getBounds(l);
return <svg key={i} width={b.width} height={b.height} style={{ transform: `translate(${b.left}px, ${b.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000, overflow: "visible" }}>
- {InteractionUtils.CreatePolyline(l, b.left, b.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false)}
+ {InteractionUtils.CreatePolyline(l, b.left, b.top, ActiveInkColor(), width, width,
+ ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(),
+ ActiveDash(), 1, 1, this.InkShape, "none", false, false)}
</svg>;
}),
- this._points.length <= 1 ? (null) : <svg key="svg" width={B.width} height={B.height} style={{ transform: `translate(${B.left}px, ${B.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000, overflow: "visible" }}>
- {InteractionUtils.CreatePolyline(this._points, B.left, B.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false)}
+ this._points.length <= 1 ? (null) : <svg key="svg" width={B.width} height={B.height}
+ style={{ transform: `translate(${B.left}px, ${B.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000, overflow: "visible" }}>
+ {InteractionUtils.CreatePolyline(this._points, B.left, B.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false, false)}
</svg>]
];
}
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index dc5d387d0..627760c38 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -15,6 +15,7 @@ import { FieldView, FieldViewProps } from "./nodes/FieldView";
import React = require("react");
import { Scripting } from "../util/Scripting";
import { Doc } from "../../fields/Doc";
+import { NodeFlags } from "typescript";
library.add(faPaintBrush);
@@ -56,11 +57,11 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
const points = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth,
StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), StrCast(this.layoutDoc.fillColor, ActiveFillColor()),
StrCast(this.layoutDoc.arrowStart, ActiveArrowStart()), StrCast(this.layoutDoc.arrowEnd, ActiveArrowEnd()),
- StrCast(this.layoutDoc.dash, ActiveDash()), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5);
+ StrCast(this.layoutDoc.dash, ActiveDash()), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5, false);
const hpoints = InteractionUtils.CreatePolyline(data, left, top,
this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15),
StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), StrCast(this.layoutDoc.fillColor, ActiveFillColor()),
- "none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblestroke" : "none", false);
+ "none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblestroke" : "none", false, true);
return (
<svg className="inkingStroke"
width={width}
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index f39f8f784..fb2640249 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -24,15 +24,15 @@ library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSup
export default class InkOptionsMenu extends AntimodeMenu {
static Instance: InkOptionsMenu;
- private _palette = ["D0021B", "F5A623", "F8E71C", "8B572A", "7ED321", "417505", "9013FE", "4A90E2", "50E3C2", "B8E986", "000000", "4A4A4A", "9B9B9B", "FFFFFF", "none"];
+ private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", "none"];
private _width = ["1", "5", "10", "100"];
// private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"];
// private _icons = ["O", "∆", "ロ", "➜", "-"];
private _buttons = ["circle", "triangle", "rectangle", "line", "", "noRec"];
private _icons = ["O", "∆", "ロ", "––", " ", "✖︎"];
//arrowStart and arrowEnd must match and defs must exist in Inking Stroke
- private _arrowStart = ["url(#arrowHead)", "url(#arrowHead)", "url(#dot)", "url(#dot)", "none"];
- private _arrowEnd = ["none", "url(#arrowEnd)", "none", "url(#dot)", "none"];
+ private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"];
+ private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"];
private _arrowIcons = ["→", "↔︎", "・", "・・", " "];
@observable _colorBtn = false;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 17:23:54 +0000