aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts15
-rw-r--r--src/client/util/CurrentUserUtils.ts6
-rw-r--r--src/client/util/InteractionUtils.scss4
-rw-r--r--src/client/util/InteractionUtils.tsx86
-rw-r--r--src/client/views/DocumentDecorations.scss50
-rw-r--r--src/client/views/DocumentDecorations.tsx87
-rw-r--r--src/client/views/GestureOverlay.tsx50
-rw-r--r--src/client/views/InkingStroke.scss4
-rw-r--r--src/client/views/InkingStroke.tsx48
-rw-r--r--src/client/views/MainView.tsx28
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx4
-rw-r--r--src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss7
-rw-r--r--src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx235
-rw-r--r--src/fields/InkField.ts4
14 files changed, 523 insertions, 105 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 6724df657..0fc58c39d 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -28,6 +28,13 @@ import { AudioBox } from "../views/nodes/AudioBox";
import { ColorBox } from "../views/nodes/ColorBox";
import { ComparisonBox } from "../views/nodes/ComparisonBox";
import { DocHolderBox } from "../views/nodes/DocHolderBox";
+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";
+import { MessageStore } from "../../server/Message";
+import { ContextMenuProps } from "../views/ContextMenuItem";
+import { ContextMenu } from "../views/ContextMenu";
import { FontIconBox } from "../views/nodes/FontIconBox";
import { FormattedTextBox } from "../views/nodes/formattedText/FormattedTextBox";
import { ImageBox } from "../views/nodes/ImageBox";
@@ -647,13 +654,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;
@@ -875,7 +886,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 76c1fc9f7..9a4c95571 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -762,7 +762,11 @@ export class CurrentUserUtils {
doc.activeInkPen = doc;
doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)");
doc.activeInkWidth = StrCast(doc.activeInkWidth, "1");
- doc.activeInkBezier = StrCast(doc.activeInkBezier, "");
+ doc.activeInkBezier = StrCast(doc.activeInkBezier, "0");
+ 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.scss b/src/client/util/InteractionUtils.scss
new file mode 100644
index 000000000..6707157d4
--- /dev/null
+++ b/src/client/util/InteractionUtils.scss
@@ -0,0 +1,4 @@
+.halo {
+ opacity: 0.2;
+ stroke: black;
+} \ No newline at end of file
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index df792c9c0..3634fb704 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -1,6 +1,8 @@
import React = require("react");
import * as beziercurve from 'bezier-curve';
import * as fitCurve from 'fit-curve';
+import "./InteractionUtils.scss";
+import { Utils } from "../../Utils";
export namespace InteractionUtils {
export const MOUSETYPE = "mouse";
@@ -89,15 +91,17 @@ export namespace InteractionUtils {
return myTouches;
}
- export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: number, strokeWidth: number, 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: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string,
+ 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) {
@@ -111,25 +115,55 @@ export namespace InteractionUtils {
}
const strpts = pts.reduce((acc: string, pt: { X: number, Y: number }) => acc +
`${(pt.X - left - width / 2) * scalex + width / 2},
- ${(pt.Y - top - width / 2) * scaley + width / 2} `, "");
+ ${(pt.Y - top - width / 2) * scaley + width / 2} `, "");
+ const dashArray = String(Number(width) * Number(dash));
+ 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={1} fill="context-stroke" />
+ </marker>
+ <marker id={`arrowHead${defGuid}`} orient="auto" overflow="visible" refX="3" refY="1" markerWidth="10" markerHeight="7">
+ <polygon points="3 0, 3 2, 0 1" />
+ </marker>
+ <marker id={`arrowEnd${defGuid}`} orient="auto" overflow="visible" refX="0" refY="1" markerWidth="10" markerHeight="7">
+ <polygon points="0 0, 3 1, 0 2" />
+ </marker>
+
+ </defs>}
- return (
<polyline
points={strpts}
style={{
- filter: drawHalo ? "url(#dangerShine)" : undefined,
- fill: "none",
+ filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
+ fill,
opacity: strokeWidth !== width ? 0.5 : undefined,
pointerEvents: pevents as any,
stroke: color ?? "rgb(0, 0, 0)",
strokeWidth: strokeWidth,
strokeLinejoin: "round",
- strokeLinecap: "round"
+ strokeLinecap: "round",
+ strokeDasharray: dashArray
}}
+ markerStart={`url(#${arrowStart + defGuid})`}
+ markerEnd={`url(#${arrowEnd + defGuid})`}
/>
- );
+
+ </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)
@@ -199,24 +233,24 @@ export namespace InteractionUtils {
}
points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top });
return points;
- case "arrow":
- const x1 = left;
- const y1 = top;
- const x2 = right;
- const y2 = bottom;
- const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2)));
- const L2 = L1 / 5;
- const angle = 0.785398;
- const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle));
- const y3 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) - (x1 - x2) * Math.sin(angle));
- const x4 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle));
- const y4 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) + (x1 - x2) * Math.sin(angle));
- points.push({ X: x1, Y: y1 });
- points.push({ X: x2, Y: y2 });
- points.push({ X: x3, Y: y3 });
- points.push({ X: x4, Y: y4 });
- points.push({ X: x2, Y: y2 });
- return points;
+ // case "arrow":
+ // const x1 = left;
+ // const y1 = top;
+ // const x2 = right;
+ // const y2 = bottom;
+ // const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2)));
+ // const L2 = L1 / 5;
+ // const angle = 0.785398;
+ // const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle));
+ // const y3 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) - (x1 - x2) * Math.sin(angle));
+ // const x4 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle));
+ // const y4 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) + (x1 - x2) * Math.sin(angle));
+ // points.push({ X: x1, Y: y1 });
+ // points.push({ X: x2, Y: y2 });
+ // points.push({ X: x3, Y: y3 });
+ // points.push({ X: x4, Y: y4 });
+ // points.push({ X: x2, Y: y2 });
+ // return points;
case "line":
points.push({ X: left, Y: top });
points.push({ X: right, Y: bottom });
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 11aaaaf8c..c8347165d 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;
@@ -208,8 +226,9 @@ $linkGap : 3px;
width: 8px;
height: $MINIMIZED_ICON_SIZE;
max-height: 20px;
- > svg {
- margin:0;
+
+ >svg {
+ margin: 0;
}
}
@@ -348,7 +367,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 d7b0ab7a9..6e8eed287 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -17,11 +17,14 @@ 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';
+import { Transform } from "../util/Transform";
library.add(faCaretUp);
library.add(faObjectGroup);
@@ -50,6 +53,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;
@@ -238,6 +245,82 @@ 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 });
+ this._centerPoints.push({ X: left, Y: top });
+ }
+ }
+ }));
+
+ }
+ @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) * element.props.ScreenToLocalTransform().Scale;
+ doc._width = (right - left) * element.props.ScreenToLocalTransform().Scale;
+
+ }
+ index++;
+ }
+ }));
+ return false;
+ }
+
+ onRotateUp = (e: PointerEvent) => {
+ this._centerPoints = [];
+ }
+
+
+
_initialAutoHeight = false;
_dragHeights = new Map<Doc, number>();
@action
@@ -526,6 +609,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 aeac1d4a9..85695bbac 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -18,12 +18,13 @@ 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";
import { Touchable } from "./Touchable";
import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
+import HeightLabel from "./collections/collectionMulticolumn/MultirowHeightLabel";
@observer
export default class GestureOverlay extends Touchable {
@@ -32,6 +33,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;
@@ -627,7 +632,9 @@ export default class GestureOverlay extends Touchable {
this.makePolygon(this.InkShape, false);
this.dispatchGesture(GestureUtils.Gestures.Stroke);
this._points = [];
- this.InkShape = "";
+ if (this.InkShape !== "noRec") {
+ this.InkShape = "";
+ }
}
// if we're not drawing in a toolglass try to recognize as gesture
else {
@@ -677,6 +684,10 @@ export default class GestureOverlay extends Touchable {
} else {
this._points = [];
}
+ SetActiveArrowStart("none");
+ GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart();
+ SetActiveArrowEnd("none");
+ GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd();
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
}
@@ -688,7 +699,9 @@ export default class GestureOverlay extends Touchable {
var left = Math.min(...xs);
var bottom = Math.max(...ys);
var top = Math.min(...ys);
-
+ if (shape === "noRec") {
+ return;
+ }
if (!gesture) {
//if shape options is activated in inkOptionMenu
//take second to last point because _point[length-1] is _points[0]
@@ -747,7 +760,7 @@ export default class GestureOverlay extends Touchable {
case "line":
this._points.push({ X: left, Y: top });
this._points.push({ X: right, Y: bottom });
- this._points.push({ X: right, Y: bottom - 1 });
+ // this._points.push({ X: right, Y: bottom - 1 });
break;
case "arrow":
const x1 = left;
@@ -766,7 +779,7 @@ export default class GestureOverlay extends Touchable {
this._points.push({ X: x3, Y: y3 });
this._points.push({ X: x4, Y: y4 });
this._points.push({ X: x2, Y: y2 });
- this._points.push({ X: x1, Y: y1 - 1 });
+ // this._points.push({ X: x1, Y: y1 - 1 });
}
}
@@ -802,19 +815,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(), 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(), 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>]
];
}
@@ -903,12 +925,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.scss b/src/client/views/InkingStroke.scss
index 433433a42..30ab1967e 100644
--- a/src/client/views/InkingStroke.scss
+++ b/src/client/views/InkingStroke.scss
@@ -4,4 +4,8 @@
stroke-linecap: round;
overflow: visible !important;
transform-origin: top left;
+
+ svg:not(:root) {
+ overflow: visible !important;
+ }
} \ No newline at end of file
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index cdabd213b..c32e76cec 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
import { documentSchema } from "../../fields/documentSchemas";
import { InkData, InkField, InkTool } from "../../fields/InkField";
import { makeInterface } from "../../fields/Schema";
-import { Cast, StrCast, BoolCast } from "../../fields/Types";
+import { Cast, StrCast } from "../../fields/Types";
import { TraceMobx } from "../../fields/util";
import { CognitiveServices } from "../cognitive_services/CognitiveServices";
import { InteractionUtils } from "../util/InteractionUtils";
@@ -54,10 +54,13 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
const scaleY = (this.props.PanelHeight() - strokeWidth) / (height - strokeWidth);
const strokeColor = StrCast(this.layoutDoc.color, ActiveInkColor());
const points = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth,
- StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), scaleX, scaleY, "", "none", (this.props.isSelected() || BoolCast(this.props.backgroundHalo?.())) && 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, false);
const hpoints = InteractionUtils.CreatePolyline(data, left, top,
this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15),
- StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), scaleX, scaleY, "", this.props.active() ? "visiblestroke" : "none", false);
+ StrCast(this.layoutDoc.strokeBezier, ActiveInkBezierApprox()), StrCast(this.layoutDoc.fillColor, ActiveFillColor()),
+ "none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblepainted" : "none", false, true);
return (
<svg className="inkingStroke"
width={width}
@@ -65,29 +68,14 @@ 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" });
ContextMenu.Instance.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" });
}}
><defs>
- <filter id="dangerShine">
- <feColorMatrix type="matrix"
- result="color"
- values="1 0 0 0 0
- 0 0 0 0 0
- 0 0 0 0 0
- 0 0 0 1 0">
- </feColorMatrix>
- <feGaussianBlur in="color" stdDeviation="4" result="blur"></feGaussianBlur>
- <feOffset in="blur" dx="0" dy="0" result="offset"></feOffset>
- <feMerge>
- <feMergeNode in="bg"></feMergeNode>
- <feMergeNode in="offset"></feMergeNode>
- <feMergeNode in="SourceGraphic"></feMergeNode>
- </feMerge>
- </filter>
</defs>
{hpoints}
{points}
@@ -100,17 +88,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/MainView.tsx b/src/client/views/MainView.tsx
index 4e2c067ac..d1957c4af 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -5,7 +5,7 @@ import {
faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
- faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faQuoteLeft, faSortAmountDown
+ faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown
} from '@fortawesome/free-solid-svg-icons';
import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -138,7 +138,7 @@ export class MainView extends React.Component {
faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell,
- faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faQuoteLeft, faSortAmountDown);
+ faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown);
this.initEventListeners();
this.initAuthenticationRouters();
}
@@ -569,8 +569,32 @@ export class MainView extends React.Component {
</div>;
}
+ @computed get inkResources() {
+ return <svg width={0} height={0}>
+ <defs>
+ <filter id="inkSelectionHalo">
+ <feColorMatrix type="matrix"
+ result="color"
+ values="1 0 0 0 0
+ 0 0 0 0 0
+ 0 0 0 0 0
+ 0 0 0 1 0">
+ </feColorMatrix>
+ <feGaussianBlur in="color" stdDeviation="4" result="blur"></feGaussianBlur>
+ <feOffset in="blur" dx="0" dy="0" result="offset"></feOffset>
+ <feMerge>
+ <feMergeNode in="bg"></feMergeNode>
+ <feMergeNode in="offset"></feMergeNode>
+ <feMergeNode in="SourceGraphic"></feMergeNode>
+ </feMerge>
+ </filter>
+ </defs>
+ </svg>;
+ }
+
render() {
return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} ref={this._mainViewRef}>
+ {this.inkResources}
<DictationOverlay />
<SharingManager />
<SettingsManager />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6632291c2..2e543f137 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 { ActiveInkColor, ActiveInkWidth, ActiveInkBezierApprox } from "../../InkingStroke";
+import { InkingStroke, ActiveArrowStart, ActiveArrowEnd, ActiveInkColor, ActiveFillColor, ActiveInkWidth, ActiveInkBezierApprox, ActiveDash } from "../../InkingStroke";
import { DocumentType } from "../../../documents/DocumentTypes";
import { DocumentLinksButton } from "../../nodes/DocumentLinksButton";
@@ -463,7 +463,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,
+ const inkDoc = Docs.Create.InkDocument(ActiveInkColor(), Doc.GetSelectedTool(), ActiveInkWidth(), ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), points,
{ title: "ink stroke", x: B.x - Number(ActiveInkWidth()) / 2, y: B.y - Number(ActiveInkWidth()) / 2, _width: B.width + Number(ActiveInkWidth()), _height: B.height + Number(ActiveInkWidth()) });
this.addDocument(inkDoc);
e.stopPropagation();
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
index a7f4d4e53..a9fab4c1e 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -1,5 +1,10 @@
.antimodeMenu-button {
- .color-preview {
+ .color-previewI {
+ width: 100%;
+ height: 40%;
+ }
+
+ .color-previewII {
width: 100%;
height: 100%;
}
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 4fac87ca5..f1032adaa 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -3,25 +3,44 @@ 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";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
+import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve);
@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 _width = ["1", "5", "10", "100", "200", "300"];
- private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"];
- private _icons = ["O", "∆", "ロ", "➜", "-"];
+ 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 = ["arrowHead", "arrowHead", "dot", "dot", "none"];
+ private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"];
+ private _arrowIcons = ["→", "↔︎", "•", "••", " "];
@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 +48,106 @@ export default class InkOptionsMenu extends AntimodeMenu {
this._canFade = false; // don't let the inking menu fade away
}
+ getColors = () => {
+ return this._palette;
+ }
+
@action
- changeColor = (color: string) => {
+ changeArrow = (arrowStart: string, arrowEnd: string) => {
+ SetActiveArrowStart(arrowStart);
+ SetActiveArrowEnd(arrowEnd);
+ }
+
+ @action
+ 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];
+ if (this._arrowIcons[i] === " ") {
+ currIcon = "➤";
+ }
+ }
+ }
+ 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() {
@@ -49,7 +156,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
key="width"
onPointerDown={action(e => this._widthBtn = !this._widthBtn)}
style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
- W
+ <FontAwesomeIcon icon="bars" size="lg" />
</button>;
if (this._widthBtn) {
widthPicker = <div className="btn2-group" key="width">
@@ -58,7 +165,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 +175,8 @@ export default class InkOptionsMenu extends AntimodeMenu {
return widthPicker;
}
+
+
@computed get colorPicker() {
var colorPicker = <button
className="antimodeMenu-button"
@@ -75,7 +184,9 @@ export default class InkOptionsMenu extends AntimodeMenu {
title="colorChanger"
onPointerDown={action(e => this._colorBtn = !this._colorBtn)}
style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
- <div className="color-preview" style={{ backgroundColor: ActiveInkColor() ?? "121212" }}></div>
+ <FontAwesomeIcon icon="pen-nib" size="lg" />
+ <div className="color-previewI" style={{ backgroundColor: ActiveInkColor() ?? "121212" }}></div>
+
</button>;
if (this._colorBtn) {
colorPicker = <div className="btn-group" key="color">
@@ -84,9 +195,10 @@ 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>
+ {/* <FontAwesomeIcon icon="pen-nib" size="lg" /> */}
+ <div className="color-previewII" style={{ backgroundColor: color }}></div>
</button>;
})}
</div>;
@@ -94,15 +206,75 @@ export default class InkOptionsMenu extends AntimodeMenu {
return colorPicker;
}
- @computed get shapeButtons() {
- return this._buttons.map((btn, i) => <button
+ @computed get fillPicker() {
+ var fillPicker = <button
className="antimodeMenu-button"
- title={`Draw ${btn}`}
- key={i}
- onPointerDown={action(e => GestureOverlay.Instance.InkShape = btn)}
- style={{ backgroundColor: btn === GestureOverlay.Instance.InkShape ? "121212" : "" }}>
- {this._icons[i]}
- </button>);
+ key="fill"
+ title="fillChanger"
+ onPointerDown={action(e => this._fillBtn = !this._fillBtn)}
+ style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
+ <FontAwesomeIcon icon="fill-drip" size="lg" />
+ <div className="color-previewI" 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-previewII" style={{ backgroundColor: color }}></div>
+ </button>;
+ })}
+
+ </div>;
+ }
+ return fillPicker;
+ }
+
+ @computed get shapePicker() {
+ var currIcon;
+ if (GestureOverlay.Instance.InkShape === "") {
+ currIcon = <FontAwesomeIcon icon="shapes" size="lg" />;
+ } 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._shapeBtn ? "121212" : "" }}>
+ {currIcon}
+ </button>;
+ if (this._shapeBtn) {
+ shapePicker = <div className="btn2-group" key="shape">
+ {shapePicker}
+ {this._buttons.map((btn, i) => {
+ var ttl = btn;
+ if (btn === "") {
+ ttl = "no shape";
+ }
+ if (btn === "noRec") {
+ ttl = "disable shape recognition";
+ }
+ return <button
+ className="antimodeMenu-button"
+ title={`Draw ${btn}`}
+ key={ttl}
+ 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() {
@@ -112,16 +284,35 @@ export default class InkOptionsMenu extends AntimodeMenu {
key="bezier"
onPointerDown={e => this.changeBezier(e)}
style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}>
- B
+ <FontAwesomeIcon icon="bezier-curve" size="lg" />
+
+ </button>;
+ }
+
+ @computed get dashButton() {
+ return <button
+ className="antimodeMenu-button"
+ title="dash changer"
+ key="dash"
+ onPointerDown={e => this.changeDash(e)}
+ style={{ backgroundColor: ActiveDash() !== "0" ? "121212" : "" }}>
+ <FontAwesomeIcon icon="ellipsis-h" size="lg" />
+
</button>;
}
render() {
const buttons = [
- ...this.shapeButtons,
+ // <button className="antimodeMenu-button" title="Drag" key="drag" onPointerDown={e => this.dragStart(e)}>
+ // <FontAwesomeIcon icon="arrows-alt" size="lg" />
+ // </button>,
+ this.shapePicker,
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 18:16:32 +0000