aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts8
-rw-r--r--src/client/views/GestureOverlay.tsx2
-rw-r--r--src/client/views/InkControls.tsx18
-rw-r--r--src/client/views/InkHandles.tsx27
-rw-r--r--src/client/views/InkStrokeProperties.ts69
-rw-r--r--src/client/views/InkingStroke.tsx (renamed from src/client/views/InkStroke.tsx)16
-rw-r--r--src/client/views/PropertiesButtons.tsx4
-rw-r--r--src/client/views/collections/CollectionMenu.tsx2
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx2
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx4
-rw-r--r--src/client/views/nodes/ColorBox.tsx2
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx4
-rw-r--r--src/client/views/nodes/DocumentView.tsx6
13 files changed, 106 insertions, 58 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 188fe31c0..24682cbd0 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -31,7 +31,7 @@ import { CollectionView, CollectionViewType } from "../views/collections/Collect
import { ContextMenu } from "../views/ContextMenu";
import { ContextMenuProps } from "../views/ContextMenuItem";
import { DFLT_IMAGE_NATIVE_DIM } from "../views/globalCssVariables.scss";
-import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, InkStroke } from "../views/InkStroke";
+import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, InkingStroke } from "../views/InkingStroke";
import { AudioBox } from "../views/nodes/AudioBox";
import { ColorBox } from "../views/nodes/ColorBox";
import { ComparisonBox } from "../views/nodes/ComparisonBox";
@@ -432,7 +432,7 @@ export namespace Docs {
options: { links: ComputedField.MakeFunction("links(self)") as any, hideLinkButton: true }
}],
[DocumentType.INK, {
- layout: { view: InkStroke, dataField: defaultDataKey },
+ layout: { view: InkingStroke, dataField: defaultDataKey },
options: { _fontFamily: "cursive", backgroundColor: "transparent", links: ComputedField.MakeFunction("links(self)") as any }
}],
[DocumentType.SCREENSHOT, {
@@ -760,7 +760,7 @@ export namespace Docs {
const I = new Doc();
I[Initializing] = true;
I.type = DocumentType.INK;
- I.layout = InkStroke.LayoutString("data");
+ I.layout = InkingStroke.LayoutString("data");
I.color = color;
I.fillColor = fillColor;
I.strokeWidth = Number(strokeWidth);
@@ -1144,7 +1144,7 @@ export namespace DocUtils {
layout = AudioBox.LayoutString;
} else if (field instanceof InkField) {
created = Docs.Create.InkDocument(ActiveInkColor(), CurrentUserUtils.SelectedTool, ActiveInkWidth(), ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), (field).inkData, resolved);
- layout = InkStroke.LayoutString;
+ layout = InkingStroke.LayoutString;
} else if (field instanceof List && field[0] instanceof Doc) {
created = Docs.Create.StackingDocument(DocListCast(field), resolved);
layout = CollectionView.LayoutString;
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 455b3a935..491bf18b2 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -17,7 +17,7 @@ import { Scripting } from "../util/Scripting";
import { Transform } from "../util/Transform";
import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu";
import "./GestureOverlay.scss";
-import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, SetActiveArrowStart, SetActiveDash, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "./InkStroke";
+import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, SetActiveArrowStart, SetActiveDash, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "./InkingStroke";
import { DocumentView } from "./nodes/DocumentView";
import { RadialMenu } from "./nodes/RadialMenu";
import HorizontalPalette from "./Palette";
diff --git a/src/client/views/InkControls.tsx b/src/client/views/InkControls.tsx
index eeddfce4c..4d8b2c6b5 100644
--- a/src/client/views/InkControls.tsx
+++ b/src/client/views/InkControls.tsx
@@ -22,17 +22,17 @@ export class InkControls extends React.Component<InkControlProps> {
/**
* Handles the movement of a selected control point when the user clicks and drags.
- * @param controlNum The index of the currently selected control point.
+ * @param controlIndex The index of the currently selected control point.
*/
@action
- onControlDown = (e: React.PointerEvent, controlNum: number): void => {
+ onControlDown = (e: React.PointerEvent, controlIndex: number): void => {
if (InkStrokeProperties.Instance) {
InkStrokeProperties.Instance.moveControl(0, 0, 1);
const controlUndo = UndoManager.StartBatch("DocDecs set radius");
const screenScale = this.props.ScreenToLocalTransform().Scale;
setupMoveUpEvents(this, e,
(e: PointerEvent, down: number[], delta: number[]) => {
- InkStrokeProperties.Instance?.moveControl(-delta[0] * screenScale, -delta[1] * screenScale, controlNum);
+ InkStrokeProperties.Instance?.moveControl(-delta[0] * screenScale, -delta[1] * screenScale, controlIndex);
return false;
},
() => controlUndo?.end(), emptyFunction);
@@ -60,12 +60,20 @@ export class InkControls extends React.Component<InkControlProps> {
}
}
+ /**
+ * Updates whether a user has hovered over a particular control point or point that could be added
+ * on click.
+ */
@action onEnterControl = (i: number) => { this._overControl = i; };
@action onLeaveControl = () => { this._overControl = -1; };
@action onEnterAddPoint = (i: number) => { this._overAddPoint = i; };
@action onLeaveAddPoint = () => { this._overAddPoint = -1; };
render() {
+ const formatInstance = InkStrokeProperties.Instance;
+ if (!formatInstance) return (null);
+
+ // Accessing the current ink's data and extracting all control points.
const data = this.props.data;
const controlPoints: ControlPoint[] = [];
if (data.length >= 4) {
@@ -87,7 +95,7 @@ export class InkControls extends React.Component<InkControlProps> {
r={strokeWidth / 2}
stroke={this._overAddPoint === i ? "#1F85DE" : "transparent"}
strokeWidth={dotsize / 4} fill={this._overAddPoint === i ? "#1F85DE" : "transparent"}
- onPointerDown={() => { InkStrokeProperties.Instance?.addPoints(pts.X, pts.Y, addedPoints, i, controlPoints); }}
+ onPointerDown={() => { formatInstance?.addPoints(pts.X, pts.Y, addedPoints, i, controlPoints); }}
onMouseEnter={() => this.onEnterAddPoint(i)}
onMouseLeave={this.onLeaveAddPoint}
pointerEvents="all"
@@ -103,7 +111,7 @@ export class InkControls extends React.Component<InkControlProps> {
height={this._overControl === i ? strokeWidth * 1.5 : strokeWidth}
width={this._overControl === i ? strokeWidth * 1.5 : strokeWidth}
strokeWidth={strokeWidth / 6} stroke="#1F85DE"
- fill={InkStrokeProperties.Instance?._currentPoint === control.I ? "#1F85DE" : "white"}
+ fill={formatInstance?._currentPoint === control.I ? "#1F85DE" : "white"}
onPointerDown={(e) => { this.changeCurrPoint(control.I); this.onControlDown(e, control.I); }}
onMouseEnter={() => this.onEnterControl(i)}
onMouseLeave={this.onLeaveControl}
diff --git a/src/client/views/InkHandles.tsx b/src/client/views/InkHandles.tsx
index 993e427b3..a33380221 100644
--- a/src/client/views/InkHandles.tsx
+++ b/src/client/views/InkHandles.tsx
@@ -15,33 +15,38 @@ export interface InkControlProps {
@observer
export class InkHandles extends React.Component<InkControlProps> {
- @observable private _brokenIndices: number[] = [];
-
/**
* Handles the movement of a selected handle point when the user clicks and drags.
* @param handleNum The index of the currently selected handle point.
*/
- onHandleDown = (e: React.PointerEvent, handleNum: number): void => {
+ onHandleDown = (e: React.PointerEvent, handleIndex: number): void => {
if (InkStrokeProperties.Instance) {
InkStrokeProperties.Instance.moveControl(0, 0, 1);
const controlUndo = UndoManager.StartBatch("DocDecs set radius");
const screenScale = this.props.ScreenToLocalTransform().Scale;
- document.addEventListener("keydown", (e: KeyboardEvent) => this.onBreakTangent(e, handleNum), true);
+
+ const order = handleIndex % 4;
+ const oppositeHandleIndex = order === 1 ? handleIndex - 3 : handleIndex + 3;
+ const controlIndex = order === 1 ? handleIndex - 1 : handleIndex + 2;
+ document.addEventListener("keydown", (e: KeyboardEvent) => this.onBreakTangent(e, controlIndex), true);
setupMoveUpEvents(this, e, (e: PointerEvent, down: number[], delta: number[]) => {
- InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleNum, this._brokenIndices);
+ InkStrokeProperties.Instance?.moveHandle(-delta[0] * screenScale, -delta[1] * screenScale, handleIndex, oppositeHandleIndex, controlIndex);
return false;
}, () => controlUndo?.end(), emptyFunction
);
}
}
+ /**
+ * Breaks tangent handle movement when ‘Alt’ key is held down. Adds the current handle index and
+ * its matching (opposite) handle to a list of broken handle indices.
+ * @param handleNum The index of the currently selected handle point.
+ */
@action
- onBreakTangent = (e: KeyboardEvent, handleIndex: number) => {
+ onBreakTangent = (e: KeyboardEvent, controlIndex: number) => {
if (["Alt"].includes(e.key)) {
- const order = handleIndex % 4;
- const oppositeHandleIndex = order === 1 ? handleIndex - 3 : handleIndex + 3;
- if (!this._brokenIndices.includes(handleIndex) && !this._brokenIndices.includes(oppositeHandleIndex)) {
- this._brokenIndices.push(handleIndex, oppositeHandleIndex);
+ if (!InkStrokeProperties.Instance?._brokenIndices.includes(controlIndex)) {
+ InkStrokeProperties.Instance?._brokenIndices.push(controlIndex);
}
}
}
@@ -49,6 +54,8 @@ export class InkHandles extends React.Component<InkControlProps> {
render() {
const formatInstance = InkStrokeProperties.Instance;
if (!formatInstance) return (null);
+
+ // Accessing the current ink's data and extracting all handle points and handle lines.
const data = this.props.data;
const handlePoints: HandlePoint[] = [];
const handleLines: HandleLine[] = [];
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index 812e8ff6e..4ec03c560 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -1,7 +1,7 @@
import { action, computed, observable } from "mobx";
import { Doc, Field, Opt } from "../../fields/Doc";
import { Document } from "../../fields/documentSchemas";
-import { InkField, InkData, PointData } from "../../fields/InkField";
+import { InkField, InkData, PointData, ControlPoint } from "../../fields/InkField";
import { Cast, NumCast } from "../../fields/Types";
import { DocumentType } from "../documents/DocumentTypes";
import { SelectionManager } from "../util/SelectionManager";
@@ -13,6 +13,7 @@ export class InkStrokeProperties {
@observable _lock = false;
@observable _controlButton = false;
@observable _currentPoint = -1;
+ @observable _brokenIndices: number[] = [];
constructor() {
InkStrokeProperties.Instance = this;
@@ -73,6 +74,7 @@ export class InkStrokeProperties {
addPoints = (x: number, y: number, pts: { X: number, Y: number }[], index: number, control: { X: number, Y: number }[]) => {
this.selectedInk?.forEach(action(inkView => {
if (this.selectedInk?.length === 1) {
+ const newPoint = { X: x, Y: y };
const doc = Document(inkView.rootDoc);
if (doc.type === DocumentType.INK) {
const ink = Cast(doc.data, InkField)?.inkData;
@@ -88,12 +90,25 @@ export class InkStrokeProperties {
for (var i = 0; i < spNum; i++) {
ink[i] && newPoints.push({ X: ink[i].X, Y: ink[i].Y });
}
- for (var j = 0; j < 4; j++) {
- newPoints.push({ X: x, Y: y });
- }
+ // Updating the indices of the control points whose handle tangency has been broken.
+ this._brokenIndices = this._brokenIndices.map((control) => {
+ if (control >= spNum) {
+ return control + 4;
+ } else {
+ return control;
+ }
+ });
+
+ // const [handleA, handleB] = this.getNewHandlePoints(newPoint, pts[index-1], pts[index+1]);
+ newPoints.push(newPoint);
+ newPoints.push(newPoint);
+ newPoints.push(newPoint);
+ newPoints.push(newPoint);
+
for (var i = spNum; i < ink.length; i++) {
newPoints.push({ X: ink[i].X, Y: ink[i].Y });
+
}
this._currentPoint = -1;
Doc.GetProto(doc).data = new InkField(newPoints);
@@ -103,6 +118,20 @@ export class InkStrokeProperties {
}));
}
+ getNewHandlePoints = (newControl: PointData, a: PointData, b: PointData) => {
+ // find midpoint between the left and right control point of new control
+ // rotate midpoint by +-pi/2 to get new handle points
+ // multiplying x-y coordinates of both by 10/L where L is its current magnitude
+ const angle = this.angleChange(a, b, newControl);
+ const midpoint = this.rotatePoint(a, newControl, angle/2);
+ // const handleA = this.rotatePoint(midpoint, newControl, -Math.PI/2);
+ // const handleB = this.rotatePoint(midpoint, newControl, -Math.PI/2);
+ const handleA = { X: midpoint.X + (20 * Math.cos(-Math.PI/2)), Y: midpoint.Y + (20 * Math.sin(-Math.PI/2)) };
+ const handleB = { X: midpoint.X + (20 * Math.cos(Math.PI/2)), Y: midpoint.Y + (20 * Math.sin(Math.PI/2)) };
+
+ return [handleA, handleB];
+ }
+
/**
* Deletes the points of the current ink instance.
* @returns The changed x- and y-coordinates of the control points.
@@ -195,23 +224,27 @@ export class InkStrokeProperties {
return target;
}
+ angleBetweenTwoVectors = (vectorA: PointData, vectorB: PointData) => {
+ const magnitudeA = Math.sqrt(vectorA.X * vectorA.X + vectorA.Y * vectorA.Y);
+ const magnitudeB = Math.sqrt(vectorB.X * vectorB.X + vectorB.Y * vectorB.Y);
+ // Normalizing the vectors.
+ vectorA = { X: vectorA.X / magnitudeA, Y: vectorA.Y / magnitudeA };
+ vectorB = { X: vectorB.X / magnitudeB, Y: vectorB.Y / magnitudeB };
+ const dotProduct = vectorB.X * vectorA.X + vectorB.Y * vectorA.Y;
+ return Math.acos(dotProduct);
+ }
+
/**
* Finds the angle difference (in radians) between two vectors relative to an arbitrary origin.
*/
angleChange = (a: PointData, b: PointData, origin: PointData) => {
// Finding vector representation of inputted points relative to new origin.
- let vectorA = { X: a.X - origin.X, Y: a.Y - origin.Y };
- let vectorB = { X: b.X - origin.X, Y: b.Y - origin.Y };
+ const vectorA = { X: a.X - origin.X, Y: a.Y - origin.Y };
+ const vectorB = { X: b.X - origin.X, Y: b.Y - origin.Y };
const crossProduct = vectorB.X * vectorA.Y - vectorB.Y * vectorA.X;
// Determining whether rotation is clockwise or counterclockwise.
const sign = crossProduct < 0 ? 1 : -1;
- const magnitudeA = Math.sqrt(vectorA.X * vectorA.X + vectorA.Y * vectorA.Y);
- const magnitudeB = Math.sqrt(vectorB.X * vectorB.X + vectorB.Y * vectorB.Y);
- // Normalizing the vectors.
- vectorA = { X: vectorA.X / magnitudeA, Y: vectorA.Y / magnitudeA };
- vectorB = { X: vectorB.X / magnitudeB, Y: vectorB.Y / magnitudeB };
- const dotProduct = vectorB.X * vectorA.X + vectorB.Y * vectorA.Y;
- const theta = Math.acos(dotProduct);
+ const theta = this.angleBetweenTwoVectors(vectorA, vectorB);
return sign * theta;
}
@@ -220,20 +253,20 @@ export class InkStrokeProperties {
*/
@undoBatch
@action
- moveHandle = (deltaX: number, deltaY: number, handleIndex: number, brokenIndices: number[]) =>
+ moveHandle = (deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) =>
this.applyFunction((doc: Doc, ink: InkData, xScale: number, yScale: number) => {
const order = handleIndex % 4;
const oldHandlePoint = ink[handleIndex];
+ let oppositeHandlePoint = ink[oppositeHandleIndex];
+ const controlPoint = ink[controlIndex];
const newHandlePoint = { X: ink[handleIndex].X - deltaX / xScale, Y: ink[handleIndex].Y - deltaY / yScale };
ink[handleIndex] = newHandlePoint;
// Rotate opposite handle if user hasn't held 'Alt' key or not first/final control (which have only 1 handle).
- if (!brokenIndices.includes(handleIndex) && handleIndex !== 1 && handleIndex !== ink.length - 2) {
- let oppositeHandlePoint = order === 1 ? ink[handleIndex - 3] : ink[handleIndex + 3];
- const controlPoint = order === 1 ? ink[handleIndex - 1] : ink[handleIndex + 1];
+ if (!this._brokenIndices.includes(controlIndex) && handleIndex !== 1 && handleIndex !== ink.length - 2) {
const angle = this.angleChange(oldHandlePoint, newHandlePoint, controlPoint);
oppositeHandlePoint = this.rotatePoint(oppositeHandlePoint, controlPoint, angle);
- order === 1 ? ink[handleIndex - 3] = oppositeHandlePoint : ink[handleIndex + 3] = oppositeHandlePoint;
+ ink[oppositeHandleIndex] = oppositeHandlePoint;
}
return ink;
diff --git a/src/client/views/InkStroke.tsx b/src/client/views/InkingStroke.tsx
index 9ca8bdbea..b630c20cc 100644
--- a/src/client/views/InkStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -3,7 +3,7 @@ import { action, observable } from "mobx";
import { observer } from "mobx-react";
import { Doc } from "../../fields/Doc";
import { documentSchema } from "../../fields/documentSchemas";
-import { InkData, InkField, InkTool, ControlPoint, HandlePoint, HandleLine } from "../../fields/InkField";
+import { InkData, InkField, InkTool } from "../../fields/InkField";
import { makeInterface } from "../../fields/Schema";
import { Cast, StrCast } from "../../fields/Types";
import { TraceMobx } from "../../fields/util";
@@ -11,7 +11,6 @@ import { setupMoveUpEvents, emptyFunction, returnFalse } from "../../Utils";
import { CognitiveServices } from "../cognitive_services/CognitiveServices";
import { InteractionUtils } from "../util/InteractionUtils";
import { Scripting } from "../util/Scripting";
-import { UndoManager } from "../util/UndoManager";
import { ContextMenu } from "./ContextMenu";
import { ViewBoxBaseComponent } from "./DocComponent";
import "./InkStroke.scss";
@@ -25,7 +24,7 @@ type InkDocument = makeInterface<[typeof documentSchema]>;
const InkDocument = makeInterface(documentSchema);
@observer
-export class InkStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>(InkDocument) {
+export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>(InkDocument) {
static readonly MaskDim = 50000;
@observable private _properties?: InkStrokeProperties;
@@ -36,7 +35,7 @@ export class InkStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>
}
public static LayoutString(fieldStr: string) {
- return FieldView.LayoutString(InkStroke, fieldStr);
+ return FieldView.LayoutString(InkingStroke, fieldStr);
}
analyzeStrokes() {
@@ -55,7 +54,6 @@ export class InkStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>
/**
* Handles the movement of the entire ink object when the user clicks and drags.
- * @param e React Pointer Event.
*/
onPointerDown = (e: React.PointerEvent) => {
if (this.props.isSelected(true)) {
@@ -68,7 +66,7 @@ export class InkStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>
render() {
TraceMobx();
-
+ // Extracting the ink data and formatting information of the current ink stroke.
const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? [];
const strokeWidth = Number(this.layoutDoc.strokeWidth);
const lineTop = Math.min(...data.map(p => p.Y));
@@ -93,6 +91,7 @@ export class InkStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>
StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none",
this.props.isSelected() && strokeWidth <= 5 && lineBottom - lineTop > 1 && lineRight - lineLeft > 1,
false);
+ // Thin blue line indicating that the current ink stroke is selected.
const selectedLine = InteractionUtils.CreatePolyline(
data, lineLeft - strokeWidth * 3, lineTop - strokeWidth * 3, "#1F85DE", strokeWidth / 6,
strokeWidth / 6,StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"),
@@ -106,6 +105,7 @@ export class InkStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>
strokeWidth + 15, StrCast(this.layoutDoc.strokeBezier),
StrCast(this.layoutDoc.fillColor, "none"), "none", "none", undefined, scaleX, scaleY, "",
this.props.layerProvider?.(this.props.Document) === false ? "none" : "visiblepainted", false, true);
+ // Set of points rendered upon the ink that can be added if a user clicks on one.
const addedPoints = InteractionUtils.CreatePoints(data, left, top, strokeColor, strokeWidth, strokeWidth,
StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "none"),
StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker),
@@ -116,7 +116,7 @@ export class InkStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>
<svg className="inkStroke"
style={{
pointerEvents: this.props.Document.isInkMask && this.props.layerProvider?.(this.props.Document) !== false ? "all" : "none",
- transform: this.props.Document.isInkMask ? `translate(${InkStroke.MaskDim / 2}px, ${InkStroke.MaskDim / 2}px)` : undefined,
+ transform: this.props.Document.isInkMask ? `translate(${InkingStroke.MaskDim / 2}px, ${InkingStroke.MaskDim / 2}px)` : undefined,
mixBlendMode: this.layoutDoc.tool === InkTool.Highlighter ? "multiply" : "unset",
overflow: "visible",
}}
@@ -125,7 +125,7 @@ export class InkStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>
const cm = ContextMenu.Instance;
if (cm) {
!Doc.UserDoc().noviceMode && cm.addItem({ description: "Recognize Writing", event: this.analyzeStrokes, icon: "paint-brush" });
- cm.addItem({ description: "Toggle Mask", event: () => InkStroke.toggleMask(this.rootDoc), icon: "paint-brush" });
+ cm.addItem({ description: "Toggle Mask", event: () => InkingStroke.toggleMask(this.rootDoc), icon: "paint-brush" });
cm.addItem({ description: "Edit Points", event: action(() => {if (this._properties) { this._properties._controlButton = !this._properties._controlButton; }} ), icon: "paint-brush" });
}
}}
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 920244463..5c41a96d0 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -11,7 +11,7 @@ import { DocumentType } from '../documents/DocumentTypes';
import { SelectionManager } from '../util/SelectionManager';
import { undoBatch } from '../util/UndoManager';
import { CollectionViewType } from './collections/CollectionView';
-import { InkStroke } from './InkStroke';
+import { InkingStroke } from './InkingStroke';
import { DocumentView } from './nodes/DocumentView';
import './PropertiesButtons.scss';
import React = require("react");
@@ -56,7 +56,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
return this.propertyToggleBtn("Dictate", "_showAudio", on => `${on ? "Hide" : "Show"} dictation/recording controls`, on => "microphone");
}
@computed get maskButton() {
- return this.propertyToggleBtn("Mask", "isInkMask", on => on ? "Make plain ink" : "Make highlight mask", on => "paint-brush", (dv, doc) => InkStroke.toggleMask(dv?.layoutDoc || doc));
+ return this.propertyToggleBtn("Mask", "isInkMask", on => on ? "Make plain ink" : "Make highlight mask", on => "paint-brush", (dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc));
}
@computed get clustersButton() {
return this.propertyToggleBtn("Clusters", "_useClusters", on => `${on ? "Hide" : "Show"} clusters`, on => "braille");
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 65061d260..6e6fabd0d 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -25,7 +25,7 @@ import { undoBatch } from "../../util/UndoManager";
import { AntimodeMenu, AntimodeMenuProps } from "../AntimodeMenu";
import { EditableView } from "../EditableView";
import { GestureOverlay } from "../GestureOverlay";
-import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth, ActiveArrowStart, ActiveArrowEnd } from "../InkStroke";
+import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth, ActiveArrowStart, ActiveArrowEnd } from "../InkingStroke";
import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
import { DocumentView } from "../nodes/DocumentView";
import { RichTextMenu } from "../nodes/formattedText/RichTextMenu";
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 9e81a6cda..accb80c5a 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -32,7 +32,7 @@ import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss"
import { Timeline } from "../../animationtimeline/Timeline";
import { ContextMenu } from "../../ContextMenu";
import { DocumentDecorations } from "../../DocumentDecorations";
-import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth } from "../../InkStroke";
+import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth } from "../../InkingStroke";
import { LightboxView } from "../../LightboxView";
import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView";
import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment, ViewSpecPrefix } from "../../nodes/DocumentView";
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 744a9c5de..092823603 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -13,7 +13,7 @@ import { SelectionManager } from "../../util/SelectionManager";
import { Transform } from "../../util/Transform";
import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
import { DocComponent } from "../DocComponent";
-import { InkStroke } from "../InkStroke";
+import { InkingStroke } from "../InkingStroke";
import { StyleProp } from "../StyleProvider";
import "./CollectionFreeFormDocumentView.scss";
import { DocumentView, DocumentViewProps } from "./DocumentView";
@@ -38,7 +38,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
@observable _animPos: number[] | undefined = undefined;
@observable _contentView: DocumentView | undefined | null;
get displayName() { return "CollectionFreeFormDocumentView(" + this.rootDoc.title + ")"; } // this makes mobx trace() statements more descriptive
- get maskCentering() { return this.props.Document.isInkMask ? InkStroke.MaskDim / 2 : 0; }
+ get maskCentering() { return this.props.Document.isInkMask ? InkingStroke.MaskDim / 2 : 0; }
get transform() { return `translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${this.props.jitterRotation}deg)`; }
get X() { return this.dataProvider ? this.dataProvider.x : (this.Document.x || 0); }
get Y() { return this.dataProvider ? this.dataProvider.y : (this.Document.y || 0); }
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 2d466763b..8da5cd1b1 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -12,7 +12,7 @@ import { CurrentUserUtils } from "../../util/CurrentUserUtils";
import { SelectionManager } from "../../util/SelectionManager";
import { undoBatch } from "../../util/UndoManager";
import { ViewBoxBaseComponent } from "../DocComponent";
-import { ActiveInkColor, ActiveInkWidth, SetActiveInkColor, SetActiveInkWidth } from "../InkStroke";
+import { ActiveInkColor, ActiveInkWidth, SetActiveInkColor, SetActiveInkWidth } from "../InkingStroke";
import "./ColorBox.scss";
import { FieldView, FieldViewProps } from './FieldView';
import { RichTextMenu } from "./formattedText/RichTextMenu";
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 5da3a52d5..f0a54e4ac 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -10,7 +10,7 @@ import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
import { CollectionSchemaView } from "../collections/CollectionSchemaView";
import { CollectionView } from "../collections/CollectionView";
-import { InkStroke } from "../InkStroke";
+import { InkingStroke } from "../InkingStroke";
import { PresElementBox } from "../presentationview/PresElementBox";
import { SearchBox } from "../search/SearchBox";
import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo";
@@ -224,7 +224,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, EquationBox, SliderBox, FieldView,
CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox, FilterBox, FunctionPlotBox,
- ColorBox, DashWebRTCVideo, LinkAnchorBox, InkStroke, LinkBox, ScriptingBox,
+ ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, LinkBox, ScriptingBox,
ScreenshotBox,
HTMLtag, ComparisonBox
}}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 924b0e7d3..b861669f8 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -34,7 +34,7 @@ import { ContextMenu } from "../ContextMenu";
import { ContextMenuProps } from '../ContextMenuItem';
import { DocComponent } from "../DocComponent";
import { EditableView } from '../EditableView';
-import { InkStroke } from "../InkStroke";
+import { InkingStroke } from "../InkingStroke";
import { LightboxView } from "../LightboxView";
import { StyleLayers, StyleProp } from "../StyleProvider";
import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
@@ -1138,8 +1138,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
render() {
TraceMobx();
- const xshift = () => (this.props.Document.isInkMask ? InkStroke.MaskDim : Math.abs(this.Xshift) <= 0.001 ? this.props.PanelWidth() : undefined);
- const yshift = () => (this.props.Document.isInkMask ? InkStroke.MaskDim : Math.abs(this.Yshift) <= 0.001 ? this.props.PanelHeight() : undefined);
+ const xshift = () => (this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Xshift) <= 0.001 ? this.props.PanelWidth() : undefined);
+ const yshift = () => (this.props.Document.isInkMask ? InkingStroke.MaskDim : Math.abs(this.Yshift) <= 0.001 ? this.props.PanelHeight() : undefined);
return (<div className="contentFittingDocumentView">
{!this.props.Document || !this.props.PanelWidth() ? (null) : (
<div className="contentFittingDocumentView-previewDoc" ref={this.ContentRef}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 16:24:54 +0000