aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts10
-rw-r--r--src/client/util/CurrentUserUtils.ts4
-rw-r--r--src/client/util/InteractionUtils.tsx64
-rw-r--r--src/client/views/DocumentDecorations.scss50
-rw-r--r--src/client/views/DocumentDecorations.tsx81
-rw-r--r--src/client/views/GestureOverlay.tsx21
-rw-r--r--src/client/views/InkingStroke.tsx41
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx4
-rw-r--r--src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx203
-rw-r--r--src/fields/InkField.ts4
10 files changed, 427 insertions, 55 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 8d867348f..cbf97e8e8 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -37,7 +37,7 @@ import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo";
import { QueryBox } from "../views/nodes/QueryBox";
import { ColorBox } from "../views/nodes/ColorBox";
import { DocHolderBox } from "../views/nodes/DocHolderBox";
-import { InkingStroke, ActiveInkColor, ActiveInkWidth, ActiveInkBezierApprox } from "../views/InkingStroke";
+import { InkingStroke, ActiveInkColor, ActiveInkWidth, ActiveInkBezierApprox, ActiveFillColor, ActiveArrowStart, ActiveArrowEnd, ActiveDash } from "../views/InkingStroke";
import { InkField } from "../../fields/InkField";
import { RichTextField } from "../../fields/RichTextField";
import { extname } from "path";
@@ -631,13 +631,17 @@ export namespace Docs {
return doc;
}
- export function InkDocument(color: string, tool: string, strokeWidth: string, strokeBezier: string, points: { X: number, Y: number }[], options: DocumentOptions = {}) {
+ export function InkDocument(color: string, tool: string, strokeWidth: string, strokeBezier: string, fillColor: string, arrowStart: string, arrowEnd: string, dash: string, points: { X: number, Y: number }[], options: DocumentOptions = {}) {
const I = new Doc();
I.type = DocumentType.INK;
I.layout = InkingStroke.LayoutString("data");
I.color = color;
I.strokeWidth = strokeWidth;
I.strokeBezier = strokeBezier;
+ I.fillColor = fillColor;
+ I.arrowStart = arrowStart;
+ I.arrowEnd = arrowEnd;
+ I.dash = dash;
I.tool = tool;
I.title = "ink";
I.x = options.x;
@@ -852,7 +856,7 @@ export namespace DocUtils {
created = Docs.Create.AudioDocument((field).url.href, resolved);
layout = AudioBox.LayoutString;
} else if (field instanceof InkField) {
- created = Docs.Create.InkDocument(ActiveInkColor(), Doc.GetSelectedTool(), ActiveInkWidth(), ActiveInkBezierApprox(), (field).inkData, resolved);
+ created = Docs.Create.InkDocument(ActiveInkColor(), Doc.GetSelectedTool(), ActiveInkWidth(), ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), (field).inkData, resolved);
layout = InkingStroke.LayoutString;
} else if (field instanceof List && field[0] instanceof Doc) {
created = Docs.Create.StackingDocument(DocListCast(field), resolved);
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b0cea9947..3d0c0ef4a 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -691,6 +691,10 @@ export class CurrentUserUtils {
doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)");
doc.activeInkWidth = StrCast(doc.activeInkWidth, "1");
doc.activeInkBezier = StrCast(doc.activeInkBezier, "");
+ doc.activeFillColor = StrCast(doc.activeFillColor, "none");
+ doc.activeArrowStart = StrCast(doc.activeArrowStart, "none");
+ doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none");
+ doc.activeDash = StrCast(doc.activeDash, "0");
doc.fontSize = NumCast(doc.fontSize, 12);
doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index 81f9b9362..c6b96df45 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -1,6 +1,7 @@
import React = require("react");
import * as beziercurve from 'bezier-curve';
import * as fitCurve from 'fit-curve';
+import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu";
export namespace InteractionUtils {
export const MOUSETYPE = "mouse";
@@ -89,7 +90,8 @@ export namespace InteractionUtils {
return myTouches;
}
- export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: string, bezier: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean) {
+
+ export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: string, bezier: string, fill: string, arrowStart: string, arrowEnd: string, dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean) {
var pts = "";
if (shape) {
//if any of the shape are true
@@ -116,22 +118,58 @@ export namespace InteractionUtils {
//in the middle of drawing
pts = points.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${pt.X * scalex - left * scalex},${pt.Y * scaley - top * scaley} `, "");
}
+ const dashArray = String(Number(width) * Number(dash));
+
return (
- <polyline
- points={pts}
- style={{
- filter: drawHalo ? "url(#dangerShine)" : undefined,
- fill: "none",
- pointerEvents: pevents as any,
- stroke: color ?? "rgb(0, 0, 0)",
- strokeWidth: parseInt(width),
- strokeLinejoin: "round",
- strokeLinecap: "round"
- }}
- />
+ <svg>
+ <defs>
+
+ {/* {makeArrow()} */}
+ <marker id="dot" orient="auto" overflow="visible">
+ <circle r={1} fill="red" />
+ </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="dodgerblue" />
+ </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={"#" + color} />
+ </marker>
+ </defs>
+
+ <polyline
+ points={pts}
+ style={{
+ filter: drawHalo ? "url(#dangerShine)" : undefined,
+ fill: fill,
+ pointerEvents: pevents as any,
+ stroke: color ?? "rgb(0, 0, 0)",
+ strokeWidth: parseInt(width),
+ strokeLinejoin: "round",
+ strokeLinecap: "round",
+ strokeDasharray: dashArray
+ }}
+ markerStart={arrowStart}
+ markerEnd={arrowEnd}
+ />
+ </svg>
+
);
}
+ // export function makeArrow() {
+ // return (
+ // InkOptionsMenu.Instance.getColors().map(color => {
+ // const id1 = "arrowHeadTest" + color;
+ // console.log(color);
+ // <marker id={id1} orient="auto" overflow="visible" refX="0" refY="1" markerWidth="10" markerHeight="7">
+ // <polygon points="0 0, 3 1, 0 2" fill={"#" + color} />
+ // </marker>;
+ // })
+ // );
+ // }
+
export function makePolygon(shape: string, points: { X: number, Y: number }[]) {
if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) {
//pointer is up (first and last points are the same)
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 0a96b058b..cf5871bda 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -22,11 +22,20 @@ $linkGap : 3px;
}
+ .documentDecorations-rotation {
+ pointer-events: auto;
+ // cursor: grabbing;
+ cursor: ns-resize;
+ width: 10px;
+ height: 10px;
+ }
+
.documentDecorations-resizer {
pointer-events: auto;
background: $alt-accent;
opacity: 0.1;
}
+
.documentDecorations-resizer:hover {
opacity: 1;
}
@@ -87,14 +96,17 @@ $linkGap : 3px;
background: unset;
opacity: 1;
}
+
#documentDecorations-topLeftResizer {
- border-left: 2px solid;
- border-top: solid 2px;
+ border-left: 2px solid;
+ border-top: solid 2px;
}
+
#documentDecorations-bottomRightResizer {
- border-right: 2px solid;
- border-bottom: solid 2px;
+ border-right: 2px solid;
+ border-bottom: solid 2px;
}
+
#documentDecorations-topLeftResizer:hover,
#documentDecorations-bottomRightResizer:hover {
opacity: 1;
@@ -110,14 +122,17 @@ $linkGap : 3px;
background: unset;
opacity: 1;
}
+
#documentDecorations-topRightResizer {
- border-right: 2px solid;
- border-top: 2px solid;
+ border-right: 2px solid;
+ border-top: 2px solid;
}
+
#documentDecorations-bottomLeftResizer {
- border-left: 2px solid;
- border-bottom: 2px solid;
+ border-left: 2px solid;
+ border-bottom: 2px solid;
}
+
#documentDecorations-topRightResizer:hover,
#documentDecorations-bottomLeftResizer:hover {
cursor: nesw-resize;
@@ -139,10 +154,11 @@ $linkGap : 3px;
width: 25px;
height: calc(100% + 8px); // 8px for the height of the top resizer bar
grid-column-start: 2;
- grid-column-end : 2;
+ grid-column-end: 2;
pointer-events: all;
padding-left: 5px;
}
+
.documentDecorations-title {
opacity: 1;
grid-column-start: 3;
@@ -150,14 +166,16 @@ $linkGap : 3px;
pointer-events: auto;
overflow: hidden;
text-align: center;
- display: flex;
+ display: flex;
border-bottom: solid 1px;
- margin-left:10px;
+ margin-left: 10px;
width: calc(100% - 10px);
}
+
.focus-visible {
- margin-left:0px;
+ margin-left: 0px;
}
+
.publishBox {
width: 20px;
height: 22px;
@@ -194,8 +212,9 @@ $linkGap : 3px;
width: 8px;
height: $MINIMIZED_ICON_SIZE;
max-height: 20px;
- > svg {
- margin:0;
+
+ >svg {
+ margin: 0;
}
}
@@ -332,7 +351,8 @@ $linkGap : 3px;
padding: 2px 12px;
list-style: none;
- .templateToggle, .chromeToggle {
+ .templateToggle,
+ .chromeToggle {
text-align: left;
}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 6ca7331d6..8cb0c83ed 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -17,11 +17,13 @@ import { DocumentButtonBar } from './DocumentButtonBar';
import './DocumentDecorations.scss';
import { DocumentView } from "./nodes/DocumentView";
import React = require("react");
-import { Id } from '../../fields/FieldSymbols';
+import { Id, Copy, Update } from '../../fields/FieldSymbols';
import e = require('express');
import { CollectionDockingView } from './collections/CollectionDockingView';
import { SnappingManager } from '../util/SnappingManager';
import { HtmlField } from '../../fields/HtmlField';
+import { InkData, InkField, InkTool } from "../../fields/InkField";
+import { update } from 'serializr';
library.add(faCaretUp);
library.add(faObjectGroup);
@@ -50,6 +52,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
private _resizeUndo?: UndoManager.Batch;
private _offX = 0; _offY = 0; // offset from click pt to inner edge of resize border
private _snapX = 0; _snapY = 0; // last snapped location of resize border
+ private _prevX = 0;
+ private _prevY = 0;
+ private _centerPoints: { X: number, Y: number }[] = [];
+
@observable private _accumulatedTitle = "";
@observable private _titleControlString: string = "#title";
@observable private _edtingTitle = false;
@@ -237,6 +243,77 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
return false;
}
+ @action
+ onRotateDown = (e: React.PointerEvent): void => {
+ setupMoveUpEvents(this, e, this.onRotateMove, this.onRotateUp, (e) => { });
+ this._prevX = e.clientX;
+ this._prevY = e.clientY;
+ SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+ const doc = Document(element.rootDoc);
+ if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
+ const ink = Cast(doc.data, InkField)?.inkData;
+ if (ink) {
+ const xs = ink.map(p => p.X);
+ const ys = ink.map(p => p.Y);
+ const left = Math.min(...xs);
+ const top = Math.min(...ys);
+ const right = Math.max(...xs);
+ const bottom = Math.max(...ys);
+ this._centerPoints.push({ X: ((right - left) / 2) + left, Y: ((bottom - top) / 2) + bottom });
+ }
+ }
+ }));
+
+ }
+ @action
+ onRotateMove = (e: PointerEvent, down: number[]): boolean => {
+ // const distance = Math.sqrt((this._prevY - e.clientY) * (this._prevY - e.clientY) + (this._prevX - e.clientX) * (this._prevX - e.clientX));
+ const distance = Math.abs(this._prevY - e.clientY);
+ var angle = 0;
+ //think of a better condition later...
+ // if ((down[0] < e.clientX && this._prevY < e.clientY) || (down[0] > e.clientX && this._prevY > e.clientY)) {
+ if (e.clientY > this._prevY) {
+ angle = distance * (Math.PI / 180);
+ // } else if ((down[0] < e.clientX && this._prevY > e.clientY) || (down[0] > e.clientX && this._prevY <= e.clientY)) {
+ } else if (e.clientY < this._prevY) {
+ angle = - distance * (Math.PI / 180);
+ }
+ this._prevX = e.clientX;
+ this._prevY = e.clientY;
+ var index = 0;
+ SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+ const doc = Document(element.rootDoc);
+ if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
+ const ink = Cast(doc.data, InkField)?.inkData;
+ if (ink) {
+ const newPoints: { X: number, Y: number }[] = [];
+ for (var i = 0; i < ink.length; i++) {
+ const newX = Math.cos(angle) * (ink[i].X - this._centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - this._centerPoints[index].Y) + this._centerPoints[index].X;
+ const newY = Math.sin(angle) * (ink[i].X - this._centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - this._centerPoints[index].Y) + this._centerPoints[index].Y;
+ newPoints.push({ X: newX, Y: newY });
+ }
+ doc.data = new InkField(newPoints);
+ const xs = newPoints.map(p => p.X);
+ const ys = newPoints.map(p => p.Y);
+ const left = Math.min(...xs);
+ const top = Math.min(...ys);
+ const right = Math.max(...xs);
+ const bottom = Math.max(...ys);
+ doc._height = bottom - top;
+ doc._width = right - left;
+ }
+ index++;
+ }
+ }));
+ return false;
+ }
+
+ onRotateUp = (e: PointerEvent) => {
+ this._centerPoints = [];
+ }
+
+
+
_initialAutoHeight = false;
_dragHeights = new Map<Doc, number>();
@action
@@ -521,6 +598,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
<div className="documentDecorations-closeButton" title="Open Document in Tab" onPointerDown={this.onMaximizeDown}>
{SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."}
</div>
+ <div id="documentDecorations-rotation" className="documentDecorations-rotation"
+ onPointerDown={this.onRotateDown}> ⟲ </div>
<div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer"
onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
<div id="documentDecorations-topResizer" className="documentDecorations-resizer"
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index d239a1d6f..5b6cbc372 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -18,7 +18,7 @@ import { LinkManager } from "../util/LinkManager";
import { Scripting } from "../util/Scripting";
import { Transform } from "../util/Transform";
import "./GestureOverlay.scss";
-import { ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from "./InkingStroke";
+import { ActiveInkBezierApprox, ActiveArrowStart, ActiveArrowEnd, ActiveFillColor, ActiveInkColor, ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "./InkingStroke";
import { DocumentView } from "./nodes/DocumentView";
import { RadialMenu } from "./nodes/RadialMenu";
import HorizontalPalette from "./Palette";
@@ -32,6 +32,10 @@ export default class GestureOverlay extends Touchable {
@observable public InkShape: string = "";
@observable public SavedColor?: string;
@observable public SavedWidth?: string;
+ @observable public SavedFill?: string;
+ @observable public SavedArrowStart: string = "none";
+ @observable public SavedArrowEnd: string = "none";
+ @observable public SavedDash: String = "0";
@observable public Tool: ToolglassTools = ToolglassTools.None;
@observable private _thumbX?: number;
@@ -802,6 +806,7 @@ export default class GestureOverlay extends Touchable {
}
@computed get elements() {
+
const B = this.svgBounds;
return [
this.props.children,
@@ -809,11 +814,11 @@ export default class GestureOverlay extends Touchable {
[this._strokes.map(l => {
const b = this.getBounds(l);
return <svg key={b.left} 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(), ActiveInkWidth(), ActiveInkBezierApprox(), 1, 1, this.InkShape)}
+ {InteractionUtils.CreatePolyline(l, b.left, b.top, ActiveInkColor(), ActiveInkWidth(), ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false)}
</svg>;
}),
this._points.length <= 1 ? (null) : <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(), ActiveInkWidth(), ActiveInkBezierApprox(), 1, 1, this.InkShape)}
+ {InteractionUtils.CreatePolyline(this._points, B.left, B.top, ActiveInkColor(), ActiveInkWidth(), ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false)}
</svg>]
];
}
@@ -901,12 +906,20 @@ Scripting.addGlobal("GestureOverlay", GestureOverlay);
Scripting.addGlobal(function setToolglass(tool: any) {
runInAction(() => GestureOverlay.Instance.Tool = tool);
});
-Scripting.addGlobal(function setPen(width: any, color: any) {
+Scripting.addGlobal(function setPen(width: any, color: any, fill: any, arrowStart: any, arrowEnd: any, dash: any) {
runInAction(() => {
GestureOverlay.Instance.SavedColor = ActiveInkColor();
SetActiveInkColor(color);
GestureOverlay.Instance.SavedWidth = ActiveInkWidth();
SetActiveInkWidth(width);
+ GestureOverlay.Instance.SavedFill = ActiveFillColor();
+ SetActiveFillColor(fill);
+ GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart();
+ SetActiveArrowStart(arrowStart);
+ GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd();
+ SetActiveArrowStart(arrowEnd);
+ GestureOverlay.Instance.SavedDash = ActiveDash();
+ SetActiveDash(dash);
});
});
Scripting.addGlobal(function resetPen() {
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index a7650163f..324665aea 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -58,11 +58,13 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
const points = InteractionUtils.CreatePolyline(data, left, top,
strokeColor,
strokeWidth.toString(),
- StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5);
+ 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);
const hpoints = InteractionUtils.CreatePolyline(data, left, top,
this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent",
+ // strokeColor,
(strokeWidth + 15).toString(),
- StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), scaleX, scaleY, "", this.props.active() ? "visiblestroke" : "none", false);
+ 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, "", this.props.active() ? "visiblestroke" : "none", false);
+ console.log("#" + strokeColor);
return (
<svg className="inkingStroke"
width={width}
@@ -70,7 +72,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
style={{
pointerEvents: this.props.Document.isInkMask ? "all" : "none",
transform: this.props.Document.isInkMask ? "translate(2500px, 2500px)" : undefined,
- mixBlendMode: this.layoutDoc.tool === InkTool.Highlighter ? "multiply" : "unset"
+ mixBlendMode: this.layoutDoc.tool === InkTool.Highlighter ? "multiply" : "unset",
+ overflow: "visible",
}}
onContextMenu={() => {
ContextMenu.Instance.addItem({ description: "Analyze Stroke", event: this.analyzeStrokes, icon: "paint-brush" });
@@ -93,6 +96,18 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
+ {/* <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
+ <path d="M0,0 L0,6 L9,3 z" fill="black" />
+ </marker> */}
+ {/* <marker id="arrowHead" orient="auto" overflow="visible" refX="10" refY="3.5" markerWidth="10" markerHeight="7">
+ <polygon points="10 0, 10 7, 0 3.5" fill="dodgerblue" />
+ </marker>
+ <marker id="arrowEnd" orient="auto" overflow="visible" refX="0" refY="3.5" markerWidth="10" markerHeight="7">
+ <polygon points="0 0, 10 3.5, 0 7" fill="dodgerblue" />
+ </marker> */}
+ {/* <marker id="dot" orient="auto" overflow="visible">
+ <circle r={strokeWidth} fill={"#" + strokeColor} />
+ </marker> */}
</defs>
{hpoints}
{points}
@@ -105,17 +120,33 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
export function SetActiveInkWidth(width: string): void { !isNaN(parseInt(width)) && ActiveInkPen() && (ActiveInkPen().activeInkWidth = width); }
export function SetActiveBezierApprox(bezier: string): void { ActiveInkPen() && (ActiveInkPen().activeInkBezier = isNaN(parseInt(bezier)) ? "" : bezier); }
export function SetActiveInkColor(value: string) { ActiveInkPen() && (ActiveInkPen().activeInkColor = value); }
+export function SetActiveFillColor(value: string) { ActiveInkPen() && (ActiveInkPen().activeFillColor = value); }
+export function SetActiveArrowStart(value: string) { ActiveInkPen() && (ActiveInkPen().activeArrowStart = value); }
+export function SetActiveArrowEnd(value: string) { ActiveInkPen() && (ActiveInkPen().activeArrowEnd = value); }
+export function SetActiveDash(dash: string): void { !isNaN(parseInt(dash)) && ActiveInkPen() && (ActiveInkPen().activeDash = dash); }
export function ActiveInkPen(): Doc { return Cast(Doc.UserDoc().activeInkPen, Doc, null); }
export function ActiveInkColor(): string { return StrCast(ActiveInkPen()?.activeInkColor, "black"); }
+export function ActiveFillColor(): string { return StrCast(ActiveInkPen()?.activeFillColor, "none"); }
+export function ActiveArrowStart(): string { return StrCast(ActiveInkPen()?.activeArrowStart, "none"); }
+export function ActiveArrowEnd(): string { return StrCast(ActiveInkPen()?.activeArrowEnd, "none"); }
+export function ActiveDash(): string { return StrCast(ActiveInkPen()?.activeDash, "0"); }
export function ActiveInkWidth(): string { return StrCast(ActiveInkPen()?.activeInkWidth, "1"); }
export function ActiveInkBezierApprox(): string { return StrCast(ActiveInkPen()?.activeInkBezier); }
-Scripting.addGlobal(function activateBrush(pen: any, width: any, color: any) {
+Scripting.addGlobal(function activateBrush(pen: any, width: any, color: any, fill: any, arrowStart: any, arrowEnd: any, dash: any) {
Doc.SetSelectedTool(pen ? InkTool.Highlighter : InkTool.None);
SetActiveInkWidth(width);
SetActiveInkColor(color);
+ SetActiveFillColor(fill);
+ SetActiveArrowStart(arrowStart);
+ SetActiveArrowEnd(arrowEnd);
+ SetActiveDash(dash);
});
Scripting.addGlobal(function activateEraser(pen: any) { return Doc.SetSelectedTool(pen ? InkTool.Eraser : InkTool.None); });
Scripting.addGlobal(function activateStamp(pen: any) { return Doc.SetSelectedTool(pen ? InkTool.Stamp : InkTool.None); });
Scripting.addGlobal(function deactivateInk() { return Doc.SetSelectedTool(InkTool.None); });
Scripting.addGlobal(function setInkWidth(width: any) { return SetActiveInkWidth(width); });
-Scripting.addGlobal(function setInkColor(color: any) { return SetActiveInkColor(color); }); \ No newline at end of file
+Scripting.addGlobal(function setInkColor(color: any) { return SetActiveInkColor(color); });
+Scripting.addGlobal(function setFillColor(fill: any) { return SetActiveFillColor(fill); });
+Scripting.addGlobal(function setActiveArrowStart(arrowStart: any) { return SetActiveArrowStart(arrowStart); });
+Scripting.addGlobal(function setActiveArrowEnd(arrowEnd: any) { return SetActiveArrowStart(arrowEnd); });
+Scripting.addGlobal(function setActiveDash(dash: any) { return SetActiveDash(dash); });
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 678ad2a53..b97ac286c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -45,7 +45,7 @@ import React = require("react");
import { CollectionViewType } from "../CollectionView";
import { Timeline } from "../../animationtimeline/Timeline";
import { SnappingManager } from "../../../util/SnappingManager";
-import { InkingStroke, ActiveInkColor, ActiveInkWidth, ActiveInkBezierApprox } from "../../InkingStroke";
+import { InkingStroke, ActiveArrowStart, ActiveArrowEnd, ActiveInkColor, ActiveFillColor, ActiveInkWidth, ActiveInkBezierApprox, ActiveDash } from "../../InkingStroke";
library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload);
@@ -456,7 +456,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
case GestureUtils.Gestures.Stroke:
const points = ge.points;
const B = this.getTransform().transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height);
- const inkDoc = Docs.Create.InkDocument(ActiveInkColor(), Doc.GetSelectedTool(), ActiveInkWidth(), ActiveInkBezierApprox(), points, { title: "ink stroke", x: B.x, y: B.y, _width: B.width, _height: B.height });
+ const inkDoc = Docs.Create.InkDocument(ActiveInkColor(), Doc.GetSelectedTool(), ActiveInkWidth(), ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), points, { title: "ink stroke", x: B.x, y: B.y, _width: B.width, _height: B.height });
this.addDocument(inkDoc);
e.stopPropagation();
break;
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 5a27f74e5..96a9cbbdb 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -3,25 +3,39 @@ import AntimodeMenu from "../../AntimodeMenu";
import { observer } from "mobx-react";
import { observable, action, computed } from "mobx";
import "./InkOptionsMenu.scss";
-import { ActiveInkColor, ActiveInkBezierApprox, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox } from "../../InkingStroke";
+import { ActiveInkColor, ActiveInkBezierApprox, ActiveFillColor, ActiveArrowStart, ActiveArrowEnd, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "../../InkingStroke";
import { Scripting } from "../../../util/Scripting";
import { InkTool } from "../../../../fields/InkField";
import { ColorState } from "react-color";
import { Utils } from "../../../../Utils";
import GestureOverlay from "../../GestureOverlay";
import { Doc } from "../../../../fields/Doc";
+import { SelectionManager } from "../../../util/SelectionManager";
+import { DocumentView } from "../../../views/nodes/DocumentView";
+import { Document } from "../../../../fields/documentSchemas";
+import { DocumentType } from "../../../documents/DocumentTypes";
@observer
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"];
+ private _palette = ["D0021B", "F5A623", "F8E71C", "8B572A", "7ED321", "417505", "9013FE", "4A90E2", "50E3C2", "B8E986", "000000", "4A4A4A", "9B9B9B", "FFFFFF", "none"];
private _width = ["1", "5", "10", "100", "200", "300"];
- private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"];
- private _icons = ["O", "∆", "ロ", "➜", "-"];
+ // private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"];
+ // private _icons = ["O", "∆", "ロ", "➜", "-"];
+ private _buttons = ["circle", "triangle", "rectangle", "line", ""];
+ 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 _arrowIcons = ["➡︎", "↔︎", "o-", "o-o", " "];
@observable _colorBtn = false;
@observable _widthBtn = false;
+ @observable _fillBtn = false;
+ @observable _arrowBtn = false;
+ @observable _dashBtn = false;
+ @observable _shapeBtn = false;
constructor(props: Readonly<{}>) {
super(props);
@@ -29,18 +43,103 @@ export default class InkOptionsMenu extends AntimodeMenu {
this._canFade = false; // don't let the inking menu fade away
}
+ getColors = () => {
+ return this._palette;
+ }
+
+ @action
+ changeArrow = (arrowStart: string, arrowEnd: string) => {
+ SetActiveArrowStart(arrowStart);
+ SetActiveArrowEnd(arrowEnd);
+ }
+
@action
- changeColor = (color: string) => {
+ changeColor = (color: string, type: string) => {
const col: ColorState = {
hex: color, hsl: { a: 0, h: 0, s: 0, l: 0, source: "" }, hsv: { a: 0, h: 0, s: 0, v: 0, source: "" },
rgb: { a: 0, r: 0, b: 0, g: 0, source: "" }, oldHue: 0, source: "",
};
- SetActiveInkColor(Utils.colorString(col));
+ if (type === "color") {
+ SetActiveInkColor(Utils.colorString(col));
+ } else if (type === "fill") {
+ SetActiveFillColor(Utils.colorString(col));
+ }
}
@action
+ editProperties = (value: any, field: string) => {
+ SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
+ const doc = Document(element.rootDoc);
+ if (doc.type === DocumentType.INK) {
+ switch (field) {
+ case "width":
+ doc.strokeWidth = Number(value);
+ break;
+ case "color":
+ doc.color = String(value);
+ break;
+ case "fill":
+ doc.fillColor = String(value);
+ break;
+ case "bezier":
+ // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300;
+ break;
+ case "arrowStart":
+ doc.arrowStart = String(value);
+ break;
+ case "arrowEnd":
+ doc.arrowEnd = String(value);
+ break;
+ case "dash":
+ doc.dash = Number(value);
+ default:
+ break;
+ }
+ }
+ }));
+ }
+
+
+ @action
changeBezier = (e: React.PointerEvent): void => {
SetActiveBezierApprox(!ActiveInkBezierApprox() ? "300" : "");
+ this.editProperties(0, "bezier");
+ }
+ @action
+ changeDash = (e: React.PointerEvent): void => {
+ SetActiveDash(ActiveDash() === "0" ? "2" : "0");
+ this.editProperties(ActiveDash(), "dash");
+ }
+
+ @computed get arrowPicker() {
+ var currIcon;
+ for (var i = 0; i < this._arrowStart.length; i++) {
+ if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) {
+ currIcon = this._arrowIcons[i];
+ }
+ }
+ var arrowPicker = <button
+ className="antimodeMenu-button"
+ key="arrow"
+ onPointerDown={action(e => this._arrowBtn = !this._arrowBtn)}
+ style={{ backgroundColor: this._arrowBtn ? "121212" : "" }}>
+ {currIcon}
+ </button>;
+ if (this._arrowBtn) {
+ arrowPicker = <div className="btn2-group" key="arrows">
+ {arrowPicker}
+ {this._arrowStart.map((arrowStart, i) => {
+ return <button
+ className="antimodeMenu-button"
+ key={arrowStart}
+ onPointerDown={action(() => { SetActiveArrowStart(arrowStart); SetActiveArrowEnd(this._arrowEnd[i]); this.editProperties(arrowStart, "arrowStart"), this.editProperties(this._arrowEnd[i], "arrowEnd"); this._arrowBtn = false; })}
+ style={{ backgroundColor: this._arrowBtn ? "121212" : "" }}>
+ {this._arrowIcons[i]}
+ </button>;
+ })}
+ </div>;
+ }
+ return arrowPicker;
}
@computed get widthPicker() {
@@ -58,7 +157,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
return <button
className="antimodeMenu-button"
key={wid}
- onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; })}
+ onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
{wid}
</button>;
@@ -68,6 +167,8 @@ export default class InkOptionsMenu extends AntimodeMenu {
return widthPicker;
}
+
+
@computed get colorPicker() {
var colorPicker = <button
className="antimodeMenu-button"
@@ -84,7 +185,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
return <button
className="antimodeMenu-button"
key={color}
- onPointerDown={action(() => { this.changeColor(color); this._colorBtn = false; })}
+ onPointerDown={action(() => { this.changeColor(color, "color"); this._colorBtn = false; this.editProperties(color, "color"); })}
style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
<div className="color-preview" style={{ backgroundColor: color }}></div>
</button>;
@@ -94,6 +195,35 @@ export default class InkOptionsMenu extends AntimodeMenu {
return colorPicker;
}
+ @computed get fillPicker() {
+ var fillPicker = <button
+ className="antimodeMenu-button"
+ key="fill"
+ title="fillChanger"
+ onPointerDown={action(e => this._fillBtn = !this._fillBtn)}
+ style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
+ <div className="color-preview" style={{ backgroundColor: ActiveFillColor() ?? "121212" }}></div>
+ </button>;
+ if (this._fillBtn) {
+ fillPicker = <div className="btn-group" key="fill">
+ {fillPicker}
+ {this._palette.map(color => {
+ return <button
+ className="antimodeMenu-button"
+ key={color}
+ onPointerDown={action(() => { this.changeColor(color, "fill"); this._fillBtn = false; this.editProperties(color, "fill"); })}
+ style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
+ <div className="color-preview" style={{ backgroundColor: color }}></div>
+ </button>;
+ })}
+
+ </div>;
+ }
+ return fillPicker;
+ }
+
+
+
@computed get shapeButtons() {
return <>
{this._buttons.map((btn, i) => <button
@@ -103,28 +233,79 @@ export default class InkOptionsMenu extends AntimodeMenu {
onPointerDown={action(e => GestureOverlay.Instance.InkShape = btn)}
style={{ backgroundColor: btn === GestureOverlay.Instance.InkShape ? "121212" : "" }}>
{this._icons[i]}
- </button>)},
+ </button>)}
</>;
}
+ @computed get shapePicker() {
+ var currIcon;
+ if (GestureOverlay.Instance.InkShape === "") {
+ currIcon = "S";
+ } else {
+ for (var i = 0; i < this._icons.length; i++) {
+ if (GestureOverlay.Instance.InkShape === this._buttons[i]) {
+ currIcon = this._icons[i];
+ }
+ }
+ }
+ var shapePicker = <button
+ className="antimodeMenu-button"
+ key="shape"
+ onPointerDown={action(e => this._shapeBtn = !this._shapeBtn)}
+ style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
+ {currIcon}
+ </button>;
+ if (this._shapeBtn) {
+ shapePicker = <div className="btn2-group" key="shape">
+ {shapePicker}
+ {this._buttons.map((btn, i) => {
+ return <button
+ className="antimodeMenu-button"
+ title={`Draw ${btn}`}
+ key={btn}
+ onPointerDown={action((e) => { GestureOverlay.Instance.InkShape = btn; this._shapeBtn = false; })}
+ style={{ backgroundColor: this._shapeBtn ? "121212" : "" }}>
+ {this._icons[i]}
+ </button>;
+ })}
+ </div>;
+ }
+ return shapePicker;
+ }
+
@computed get bezierButton() {
return <button
className="antimodeMenu-button"
title="Bezier changer"
key="bezier"
onPointerDown={e => this.changeBezier(e)}
- style={ { backgroundColor:ActiveInkBezierApprox() ? "121212":"" } }>
+ style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}>
B
</button>;
}
+ @computed get dashButton() {
+ return <button
+ className="antimodeMenu-button"
+ title="dash changer"
+ key="dash"
+ onPointerDown={e => this.changeDash(e)}
+ style={{ backgroundColor: ActiveDash() !== "0" ? "121212" : "" }}>
+ ...
+ </button>;
+ }
+
render() {
const buttons = [
<button className="antimodeMenu-button" title="Drag" key="drag" onPointerDown={e => this.dragStart(e)}> ✜ </button>,
- this.shapeButtons,
+ this.shapePicker,
+ // this.shapeButtons,
this.bezierButton,
this.widthPicker,
this.colorPicker,
+ this.fillPicker,
+ this.arrowPicker,
+ this.dashButton
];
return this.getElement(buttons);
}
diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
index 51a5768bf..7cfd74cc4 100644
--- a/src/fields/InkField.ts
+++ b/src/fields/InkField.ts
@@ -1,7 +1,7 @@
import { Deserializable } from "../client/util/SerializationHelper";
import { serializable, custom, createSimpleSchema, list, object, map } from "serializr";
import { ObjectField } from "./ObjectField";
-import { Copy, ToScriptString, ToString } from "./FieldSymbols";
+import { Copy, ToScriptString, ToString, Update } from "./FieldSymbols";
export enum InkTool {
None = "none",
@@ -31,6 +31,8 @@ const strokeDataSchema = createSimpleSchema({
export class InkField extends ObjectField {
@serializable(list(object(strokeDataSchema)))
readonly inkData: InkData;
+ // inkData: InkData;
+
constructor(data: InkData) {
super();
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 12:44:26 +0000