diff options
Diffstat (limited to 'src/client/views/collections/collectionFreeForm')
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 67 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 3 |
2 files changed, 66 insertions, 4 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index e2ea81392..a694ca2b3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -3,7 +3,7 @@ import { action, computed, IReactionDisposer, observable, reaction, runInAction import { observer } from "mobx-react"; import { computedFn } from "mobx-utils"; import { DateField } from "../../../../fields/DateField"; -import { Doc, HeightSym, Opt, StrListCast, WidthSym } from "../../../../fields/Doc"; +import { Doc, DocListCast, HeightSym, Opt, StrListCast, WidthSym } from "../../../../fields/Doc"; import { Id } from "../../../../fields/FieldSymbols"; import { InkData, InkField, InkTool, PointData, Segment } from "../../../../fields/InkField"; import { List } from "../../../../fields/List"; @@ -17,7 +17,7 @@ import { GestureUtils } from "../../../../pen-gestures/GestureUtils"; import { aggregateBounds, emptyFunction, intersectRect, returnFalse, setupMoveUpEvents, Utils } from "../../../../Utils"; import { CognitiveServices } from "../../../cognitive_services/CognitiveServices"; import { DocServer } from "../../../DocServer"; -import { Docs, DocUtils } from "../../../documents/Documents"; +import { Docs, DocumentOptions, DocUtils } from "../../../documents/Documents"; import { DocumentType } from "../../../documents/DocumentTypes"; import { CurrentUserUtils } from "../../../util/CurrentUserUtils"; import { DocumentManager } from "../../../util/DocumentManager"; @@ -97,6 +97,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection private _cachedPool: Map<string, PoolData> = new Map(); private _lastTap = 0; private _batch: UndoManager.Batch | undefined = undefined; + + // private isWritingMode: boolean = true; + // private writingModeDocs: Doc[] = []; private get isAnnotationOverlay() { return this.props.isAnnotationOverlay; } private get scaleFieldKey() { return this.props.scaleField || "_viewScale"; } @@ -114,6 +117,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @observable _deleteList: DocumentView[] = []; @observable _timelineRef = React.createRef<Timeline>(); @observable _marqueeRef = React.createRef<HTMLDivElement>(); + @observable _marqueeViewRef = React.createRef<MarqueeView>(); @observable _keyframeEditing = false; @observable ChildDrag: DocumentView | undefined; // child document view being dragged. needed to update drop areas of groups when a group item is dragged. @@ -432,6 +436,26 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } @action + onPenUp = (e: PointerEvent): void => { + if (!InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) { + document.removeEventListener("pointerup", this.onPenUp); + const currentCol = DocListCast(this.rootDoc.currentInkDoc) + const rootDocList = DocListCast(this.rootDoc.data); + console.log("rootDocList", rootDocList[rootDocList.length - 1]); + console.log("currentCol", currentCol); + // if (!currentCol[0].data) { + // currentCol[0].data = []; + // } + // let docList = DocListCast(currentCol[0]); + + currentCol.push(rootDocList[rootDocList.length - 1]); + console.log(currentCol); + + this._batch?.end(); + } + } + + @action onPointerDown = (e: React.PointerEvent): void => { this._downX = this._lastX = e.pageX; this._downY = this._lastY = e.pageY; @@ -442,7 +466,32 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection !InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) { switch (CurrentUserUtils.SelectedTool) { case InkTool.Highlighter: - case InkTool.Pen: break; // the GestureOverlay handles ink stroke input -- either as gestures, or drying as ink strokes that are added to document views + break; + // TODO: nda - this where we want to create the new "writingDoc" collection that we add strokes to + case InkTool.Pen: + // not the greatest solution + // want to have a currentInkDoc field + // const freeformOptions: DocumentOptions = { + // x: 0, + // y: 0, + // _width: 1500, + // _height: 1000, + // _fitWidth: true, + // _backgroundColor: 'pink', + // _backgroundGridShow: false, + // title: `Stroke-Col`, + // }; + // // TODO: nda - fix the null issues that occur here + // let currentInkDoc = Docs.Create.FreeformDocument([], freeformOptions) + // this.rootDoc.currentInkDoc = currentInkDoc; + // // example of creating the list + // this.addDocument(currentInkDoc) + // // wtf ... + // document.addEventListener("pointerup", this.onPenUp); + + // create a new collection + // list.push() + break; // the GestureOverlay handles ink stroke input -- either as gestures, or drying as ink strokes that are added to document views case InkTool.Eraser: document.addEventListener("pointermove", this.onEraserMove); document.addEventListener("pointerup", this.onEraserUp); @@ -486,6 +535,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } } + public unprocessedDocs: Doc[] =[]; + public static collectionsWithUnprocessedInk = new Set<CollectionFreeFormView>(); @undoBatch onGesture = (e: Event, ge: GestureUtils.GestureEvent) => { switch (ge.gesture) { @@ -494,7 +545,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const B = this.getTransform().transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height); const inkDoc = Docs.Create.InkDocument(ActiveInkColor(), CurrentUserUtils.SelectedTool, ActiveInkWidth(), ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), points, { title: "ink stroke", x: B.x - ActiveInkWidth() / 2, y: B.y - ActiveInkWidth() / 2, _width: B.width + ActiveInkWidth(), _height: B.height + ActiveInkWidth() }); - this.addDocument(inkDoc); + // const currentInkDoc = Cast(this.dataDoc.currentInkDoc, Doc, null); + // if (true) { + console.log("doc exists") + // Doc.AddDocToList(currentInkDoc.data as Doc, undefined, inkDoc) + this.unprocessedDocs.push(inkDoc); + CollectionFreeFormView.collectionsWithUnprocessedInk.add(this); + this.addDocument(inkDoc); + // } else this.addDocument(inkDoc); e.stopPropagation(); break; case GestureUtils.Gestures.Box: @@ -1598,6 +1656,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection TraceMobx(); return <MarqueeView {...this.props} + ref={this._marqueeViewRef} ungroup={this.props.Document._isGroup ? this.promoteCollection : undefined} nudge={this.isAnnotationOverlay || this.props.renderDepth > 0 ? undefined : this.nudge} addDocTab={this.addDocTab} diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index b10b0912f..eeb2b653b 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -60,7 +60,9 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque @computed get Transform() { return this.props.getTransform(); } @computed get Bounds() { + // nda - ternary argument to transformPoint is returning the lower of the downX/Y and lastX/Y and passing in as args x,y const topLeft = this.Transform.transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY); + // nda - args to transformDirection is just x and y diff btw downX/Y and lastX/Y const size = this.Transform.transformDirection(this._lastX - this._downX, this._lastY - this._downY); return { left: topLeft[0], top: topLeft[1], width: Math.abs(size[0]), height: Math.abs(size[1]) }; } @@ -437,6 +439,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque })); this.props.removeDocument?.(selected); } + // TODO: nda - this is the code to actually get a new grouped collection const newCollection = this.getCollection(selected, (e as KeyboardEvent)?.key === "t" ? Docs.Create.StackingDocument : undefined, [], group); this.props.addDocument?.(newCollection); this.props.selectDocuments([newCollection]); |
