aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/Touchable.tsx4
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx67
-rw-r--r--src/client/views/nodes/DocumentView.scss45
3 files changed, 71 insertions, 45 deletions
diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx
index 26779b168..ba87025c4 100644
--- a/src/client/views/Touchable.tsx
+++ b/src/client/views/Touchable.tsx
@@ -23,7 +23,7 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
switch (e.targetTouches.length) {
case 1:
- this.handle1PointerDown();
+ this.handle1PointerDown(e);
break;
case 2:
this.handle2PointersDown(e);
@@ -89,6 +89,6 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
e.preventDefault();
}
- handle1PointerDown = (): any => { };
+ handle1PointerDown = (e: React.TouchEvent): any => { };
handle2PointersDown = (e: React.TouchEvent): any => { };
} \ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index c7806a097..10aa93c36 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -24,6 +24,7 @@ import { undoBatch, UndoManager } from "../../../util/UndoManager";
import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss";
import { ContextMenu } from "../../ContextMenu";
import { ContextMenuProps } from "../../ContextMenuItem";
+import { InkingCanvas } from "../../InkingCanvas";
import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView";
import { DocumentViewProps } from "../../nodes/DocumentView";
import { FormattedTextBox } from "../../nodes/FormattedTextBox";
@@ -186,21 +187,24 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
NumCast(cd.cluster) : cluster;
}, -1);
}
- tryDragCluster(e: PointerEvent) {
- let cluster = this.pickCluster(this.getTransform().transformPoint(e.clientX, e.clientY));
- if (cluster !== -1) {
- let eles = this.childLayoutPairs.map(pair => pair.layout).filter(cd => NumCast(cd.cluster) === cluster);
- let clusterDocs = eles.map(ele => DocumentManager.Instance.getDocumentView(ele, this.props.CollectionView)!);
- let de = new DragManager.DocumentDragData(eles);
- de.moveDocument = this.props.moveDocument;
- const [left, top] = clusterDocs[0].props.ScreenToLocalTransform().scale(clusterDocs[0].props.ContentScaling()).inverse().transformPoint(0, 0);
- de.offset = this.getTransform().transformDirection(e.x - left, e.y - top);
- de.dropAction = e.ctrlKey || e.altKey ? "alias" : undefined;
- DragManager.StartDocumentDrag(clusterDocs.map(v => v.ContentDiv!), de, e.clientX, e.clientY, {
- handlers: { dragComplete: action(emptyFunction) },
- hideSource: !de.dropAction
- });
- return true;
+ tryDragCluster(e: PointerEvent | TouchEvent) {
+ let ptsParent = e instanceof PointerEvent ? e : e.targetTouches.item(0);
+ if (ptsParent) {
+ let cluster = this.pickCluster(this.getTransform().transformPoint(ptsParent.clientX, ptsParent.clientY));
+ if (cluster !== -1) {
+ let eles = this.childLayoutPairs.map(pair => pair.layout).filter(cd => NumCast(cd.cluster) === cluster);
+ let clusterDocs = eles.map(ele => DocumentManager.Instance.getDocumentView(ele, this.props.CollectionView)!);
+ let de = new DragManager.DocumentDragData(eles);
+ de.moveDocument = this.props.moveDocument;
+ const [left, top] = clusterDocs[0].props.ScreenToLocalTransform().scale(clusterDocs[0].props.ContentScaling()).inverse().transformPoint(0, 0);
+ de.offset = this.getTransform().transformDirection(ptsParent.clientX - left, ptsParent.clientY - top);
+ de.dropAction = e.ctrlKey || e.altKey ? "alias" : undefined;
+ DragManager.StartDocumentDrag(clusterDocs.map(v => v.ContentDiv!), de, ptsParent.clientX, ptsParent.clientY, {
+ handlers: { dragComplete: action(emptyFunction) },
+ hideSource: !de.dropAction
+ });
+ return true;
+ }
}
return false;
@@ -291,16 +295,22 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
}
@action
+ handle1PointerDown = (e: React.TouchEvent) => {
+ let pt = e.targetTouches.item(0);
+ if (pt) {
+ this._hitCluster = this.props.Document.useCluster ? this.pickCluster(this.getTransform().transformPoint(pt.clientX, pt.clientY)) !== -1 : false;
+ }
+ }
+
+ @action
onPointerUp = (e: PointerEvent): void => {
- if (InteractionUtils.IsType(e, InteractionUtils.TOUCH)) return;
+ if (InteractionUtils.IsType(e, InteractionUtils.TOUCH) && this._points.length <= 1) return;
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 }));
- UndoManager.RunInBatch(() => {
- 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 });
- this.addDocument(inkDoc);
- }, "addink");
+ 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 });
+ this.addDocument(inkDoc);
this._points = [];
}
@@ -386,10 +396,23 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
handle1PointerMove = (e: TouchEvent) => {
// panning a workspace
- if (!e.cancelBubble && this.props.active() && !SelectionManager.GetIsDragging()) {
+ if (!e.cancelBubble) {
let pt = e.targetTouches.item(0);
if (pt) {
- this.pan(pt);
+ if (InkingControl.Instance.selectedTool === InkTool.None) {
+ if (this._hitCluster && this.tryDragCluster(e)) {
+ e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document' however it does mark the event as cancelBubble=true which we test for in the move event handlers
+ e.preventDefault();
+ document.removeEventListener("pointermove", this.onPointerMove);
+ document.removeEventListener("pointerup", this.onPointerUp);
+ return;
+ }
+ this.pan(pt);
+ }
+ 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] });
+ }
}
e.stopPropagation();
e.preventDefault();
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 65df86d27..142036354 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,13 +1,14 @@
@import "../globalCssVariables";
-.documentView-node, .documentView-node-topmost {
+.documentView-node,
+.documentView-node-topmost {
position: inherit;
top: 0;
- left:0;
+ left: 0;
border-radius: inherit;
- transition : outline .3s linear;
+ transition: outline .3s linear;
cursor: grab;
-
+
// background: $light-color; //overflow: hidden;
transform-origin: left top;
@@ -37,44 +38,46 @@
position: absolute;
transform-origin: top left;
width: 100%;
- height: 100%;
+ height: 100%;
}
+
.documentView-styleWrapper {
- position: absolute;
+ position: absolute;
display: inline-block;
- width:100%;
- height:100%;
+ width: 100%;
+ height: 100%;
pointer-events: none;
.documentView-styleContentWrapper {
- width:100%;
+ width: 100%;
display: inline-block;
position: absolute;
}
+
.documentView-titleWrapper {
- overflow:hidden;
- color: white;
- transform-origin: top left;
- top: 0;
+ overflow: hidden;
+ color: white;
+ transform-origin: top left;
+ top: 0;
height: 25;
background: rgba(0, 0, 0, .4);
- padding: 4px;
- text-align: center;
- text-overflow: ellipsis;
+ padding: 4px;
+ text-align: center;
+ text-overflow: ellipsis;
white-space: pre;
}
.documentView-searchHighlight {
- position: absolute;
- background: yellow;
+ position: absolute;
+ background: yellow;
bottom: -20px;
border-radius: 5px;
- transform-origin: bottom left;
+ transform-origin: bottom left;
}
.documentView-captionWrapper {
- position: absolute;
- bottom: 0;
+ position: absolute;
+ bottom: 0;
transform-origin: bottom left;
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 14:56:49 +0000