aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/documents/Documents.ts2
-rw-r--r--src/client/views/InkingStroke.tsx8
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx22
3 files changed, 17 insertions, 15 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index c5bf109a1..8c6aa2006 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -422,7 +422,7 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.TEXT), "", options);
}
- export function InkDocument(color: string, tool: number, strokeWidth: number, points: { x: number, y: number }[], options: DocumentOptions = {}) {
+ export function InkDocument(color: string, tool: number, strokeWidth: number, points: { X: number, Y: number }[], options: DocumentOptions = {}) {
let doc = InstanceFromProto(Prototypes.get(DocumentType.INK), new InkField(points), options);
doc.color = color;
doc.strokeWidth = strokeWidth;
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index a27f106e3..a2e9f0e55 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -13,8 +13,8 @@ import React = require("react");
type InkDocument = makeInterface<[typeof documentSchema]>;
const InkDocument = makeInterface(documentSchema);
-export function CreatePolyline(points: { x: number, y: number }[], left: number, top: number, color?: string, width?: number) {
- let pts = points.reduce((acc: string, pt: { x: number, y: number }) => acc + `${pt.x - left},${pt.y - top} `, "");
+export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color?: string, width?: number) {
+ let pts = points.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${pt.X - left},${pt.Y - top} `, "");
return (
<polyline
points={pts}
@@ -36,8 +36,8 @@ export class InkingStroke extends DocExtendableComponent<FieldViewProps, InkDocu
render() {
let data: InkData = Cast(this.Document.data, InkField)?.inkData ?? [];
- let xs = data.map(p => p.x);
- let ys = data.map(p => p.y);
+ let xs = data.map(p => p.X);
+ let ys = data.map(p => p.Y);
let left = Math.min(...xs);
let top = Math.min(...ys);
let right = Math.max(...xs);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index dcda13b00..6dd472c84 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -41,6 +41,7 @@ import { MarqueeView } from "./MarqueeView";
import React = require("react");
import { computedFn, keepAlive } from "mobx-utils";
import { TraceMobx } from "../../../../new_fields/util";
+import { GestureUtils } from "../../../../pen-gestures/GestureUtils";
library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload);
@@ -272,7 +273,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
return clusterColor;
}
- @observable private _points: { x: number, y: number }[] = [];
+ @observable private _points: { X: number, Y: number }[] = [];
@action
onPointerDown = (e: React.PointerEvent): void => {
@@ -288,7 +289,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
e.stopPropagation();
e.preventDefault();
let point = this.getTransform().transformPoint(e.pageX, e.pageY);
- this._points.push({ x: point[0], y: point[1] });
+ this._points.push({ X: point[0], Y: point[1] });
}
// if not using a pen and in no ink mode
else if (InkingControl.Instance.selectedTool === InkTool.None) {
@@ -336,11 +337,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
if (this._points.length > 1) {
let B = this.svgBounds;
- let points = this._points.map(p => ({ x: p.x - B.left, y: p.y - B.top }));
+ let points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top }));
- let result = Utils.GestureRecognizer.Recognize(new Array(points));
+ let result = GestureUtils.GestureRecognizer.Recognize(new Array(points));
if (result) {
console.log(result.Name);
+ this._points = [];
}
else {
let inkDoc = Docs.Create.InkDocument(InkingControl.Instance.selectedColor, InkingControl.Instance.selectedTool, parseInt(InkingControl.Instance.selectedWidth), points, { width: B.width, height: B.height, x: B.left, y: B.top });
@@ -405,7 +407,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
const selectedTool = InkingControl.Instance.selectedTool;
if (selectedTool === InkTool.Highlighter || selectedTool === InkTool.Pen || InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
let point = this.getTransform().transformPoint(e.clientX, e.clientY);
- this._points.push({ x: point[0], y: point[1] });
+ this._points.push({ X: point[0], Y: point[1] });
}
else if (selectedTool === InkTool.None) {
if (this._hitCluster && this.tryDragCluster(e)) {
@@ -440,7 +442,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
}
else if (InkingControl.Instance.selectedTool !== InkTool.Eraser && InkingControl.Instance.selectedTool !== InkTool.Scrubber) {
let point = this.getTransform().transformPoint(pt.clientX, pt.clientY);
- this._points.push({ x: point[0], y: point[1] });
+ this._points.push({ X: point[0], Y: point[1] });
}
}
e.stopPropagation();
@@ -846,8 +848,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
}
@computed get svgBounds() {
- let xs = this._points.map(p => p.x);
- let ys = this._points.map(p => p.y);
+ let xs = this._points.map(p => p.X);
+ let ys = this._points.map(p => p.Y);
let right = Math.max(...xs);
let left = Math.min(...xs);
let bottom = Math.max(...ys);
@@ -863,7 +865,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
let B = this.svgBounds;
return (
- <svg width={B.width} height={B.height} style={{ transform: `translate(${B.left}px, ${B.top}px)` }}>
+ <svg width={B.width} height={B.height} style={{ transform: `translate(${B.left}px, ${B.top}px)`, position: "relative", zIndex: 30000 }}>
{CreatePolyline(this._points, B.left, B.top)}
</svg>
);
@@ -932,7 +934,7 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
const pany = -this.props.panY();
const zoom = this.props.zoomScaling();
return <div className={freeformclass} style={{ touchAction: "none", borderRadius: "inherit", transform: `translate(${cenx}px, ${ceny}px) scale(${zoom}) translate(${panx}px, ${pany}px)` }}>
- {this.props.children}
+ {this.props.children()}
</div>;
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 06:08:47 +0000