diff options
Diffstat (limited to 'src/client/views')
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 27 |
1 files changed, 26 insertions, 1 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index febccbfcc..f0064d15e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -5,7 +5,7 @@ import { DateField } from "../../../../fields/DateField"; import { Doc, HeightSym, Opt, StrListCast, WidthSym } from "../../../../fields/Doc"; import { collectionSchema, documentSchema } from "../../../../fields/documentSchemas"; import { Id } from "../../../../fields/FieldSymbols"; -import { InkData, InkField, InkTool } from "../../../../fields/InkField"; +import { InkData, InkField, InkTool, PointData } from "../../../../fields/InkField"; import { List } from "../../../../fields/List"; import { ObjectField } from "../../../../fields/ObjectField"; import { RichTextField } from "../../../../fields/RichTextField"; @@ -51,6 +51,7 @@ import "./CollectionFreeFormView.scss"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); import { ColorScheme } from "../../../util/SettingsManager"; +import { Bezier } from "bezier-js"; export const panZoomSchema = createSchema({ _panX: "number", @@ -111,6 +112,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P @observable _pullDirection: string = ""; @observable _showAnimTimeline = false; @observable _clusterSets: (Doc[])[] = []; + @observable _prevPoint: PointData = { X: -1, Y: -1 }; + @observable _currPoint: PointData = { X: -1, Y: -1 }; @observable _timelineRef = React.createRef<Timeline>(); @observable _marqueeRef = React.createRef<HTMLDivElement>(); @observable _keyframeEditing = false; @@ -450,6 +453,11 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P } // eraser plus anything else mode else { + if (InteractionUtils.IsType(e, InteractionUtils.ERASERTYPE)) { + this._prevPoint = this._currPoint = { X: e.clientX, Y: e.clientY }; + const intersectStroke = this.getInkIntersection(); + if (intersectStroke) intersectStroke.props.removeDocument?.(intersectStroke.props.Document); + } e.stopPropagation(); e.preventDefault(); } @@ -595,6 +603,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P onPointerUp = (e: PointerEvent): void => { if (!InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) { + this._prevPoint = this._currPoint = { X: -1, Y: -1 }; document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); this.removeMoveListeners(); @@ -627,6 +636,10 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P onPointerMove = (e: PointerEvent): void => { if (this.props.Document._isGroup) return; // groups don't pan when dragged -- instead let the event go through to allow the group itself to drag if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) return; + if (InteractionUtils.IsType(e, InteractionUtils.ERASERTYPE)) { + this._prevPoint = this._currPoint; + this._currPoint = { X: e.clientX, Y: e.clientY } + } if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) { if (this.props.isContentActive(true)) e.stopPropagation(); } else if (!e.cancelBubble) { @@ -642,6 +655,18 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P } } + getInkIntersection = (): DocumentView | null => { + // this.children.filter((doc: Doc) => doc.type === DocumentType.INK) + // .forEach((doc: Doc) => { + // const inkView = DocumentManager.Instance.getDocumentView(doc, this.props.CollectionView); + // const ctrlPoints = inkView?.ComponentView?.inkScaledData().inkData.slice(); + // const array = [ctrlPoints[i], ctrlPoints[i + 1], ctrlPoints[i + 2], ctrlPoints[i + 3]]; + // const intersects = new Bezier(array.map(p => ({ x: p.X, y: p.Y }))).intersects({p1: {x: this._prevPoint.X, y: this._prevPoint.Y}, p2: {x: this._currPoint.X, y: this._currPoint.Y}}); + // if (intersects) return inkView; + // }); + return null; + } + handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => { if (!e.cancelBubble) { const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true); |