diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Utils.ts | 6 | ||||
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 12 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 30 | ||||
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 85 |
4 files changed, 93 insertions, 40 deletions
diff --git a/src/Utils.ts b/src/Utils.ts index 6519b5d13..8d71ca6eb 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -5,6 +5,12 @@ import { Socket } from 'socket.io'; import { Colors } from './client/views/global/globalEnums'; import { Message } from './server/Message'; import Color = require('color'); +import { InkTool } from './fields/InkField'; +import { action } from 'mobx'; +import { CurrentUserUtils } from './client/util/CurrentUserUtils'; +import { CollectionFreeFormView } from './client/views/collections/collectionFreeForm'; +import { WidthSym, HeightSym } from './fields/Doc'; +import { NumCast } from './fields/Types'; export namespace Utils { export let DRAG_THRESHOLD = 4; diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 54fb50db9..24df3925b 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -24,6 +24,7 @@ import { RadialMenu } from "./nodes/RadialMenu"; import HorizontalPalette from "./Palette"; import { Touchable } from "./Touchable"; import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; +import { checkInksToGroup } from "./nodes/button/FontIconBox"; @observer export class GestureOverlay extends Touchable { @@ -82,6 +83,7 @@ export class GestureOverlay extends Touchable { const ntt: (React.Touch | Touch)[] = Array.from(e.targetTouches); const nct: (React.Touch | Touch)[] = Array.from(e.changedTouches); const nt: (React.Touch | Touch)[] = Array.from(e.touches); + console.log("getNewTouches"); this._hands.forEach((hand) => { for (let i = 0; i < e.targetTouches.length; i++) { const pt = e.targetTouches.item(i); @@ -108,6 +110,7 @@ export class GestureOverlay extends Touchable { } onReactTouchStart = (te: React.TouchEvent) => { + console.log("react touch start"); document.removeEventListener("touchmove", this.onReactHoldTouchMove); document.removeEventListener("touchend", this.onReactHoldTouchEnd); if (RadialMenu.Instance?._display === true) { @@ -204,6 +207,7 @@ export class GestureOverlay extends Touchable { } onReactTouchMove = (e: TouchEvent) => { + console.log("react touch move"); const nts: any = this.getNewTouches(e); this._holdTimer && clearTimeout(this._holdTimer); this._holdTimer = undefined; @@ -620,6 +624,7 @@ export class GestureOverlay extends Touchable { if (!actionPerformed) { const newPoints = this._points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]); newPoints.pop(); + console.log("getting to bezier math"); const controlPoints: { X: number, Y: number }[] = []; const bezierCurves = fitCurve(newPoints, 10); @@ -630,14 +635,15 @@ export class GestureOverlay extends Touchable { controlPoints.push({ X: curve[2][0], Y: curve[2][1] }); controlPoints.push({ X: curve[3][0], Y: curve[3][1] }); - } const dist = Math.sqrt((controlPoints[0].X - controlPoints.lastElement().X) * (controlPoints[0].X - controlPoints.lastElement().X) + (controlPoints[0].Y - controlPoints.lastElement().Y) * (controlPoints[0].Y - controlPoints.lastElement().Y)); if (controlPoints.length > 4 && dist < 10) controlPoints[controlPoints.length - 1] = controlPoints[0]; - this._points = controlPoints; - + this._points = controlPoints; + this.dispatchGesture(GestureUtils.Gestures.Stroke); + // TODO: nda - check inks to group here + checkInksToGroup(); } this._points = []; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 40164313c..f927c7934 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -441,13 +441,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection 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); @@ -471,28 +464,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection case InkTool.Write: break; 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); @@ -547,7 +518,6 @@ 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() }); - console.log("doc exists") if (CurrentUserUtils.SelectedTool === InkTool.Write) { this.unprocessedDocs.push(inkDoc); CollectionFreeFormView.collectionsWithUnprocessedInk.add(this); diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 4b7540e1d..862c16050 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -5,7 +5,7 @@ import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { ColorState, SketchPicker } from 'react-color'; -import { DataSym, Doc, DocListCast, HeightSym, StrListCast, WidthSym } from '../../../../fields/Doc'; +import { DataSym, Doc, DocListCast, HeightSym, LayoutSym, StrListCast, WidthSym } from '../../../../fields/Doc'; import { InkTool } from '../../../../fields/InkField'; import { createSchema } from '../../../../fields/Schema'; import { ScriptField } from '../../../../fields/ScriptField'; @@ -697,15 +697,24 @@ ScriptingGlobals.add(function toggleItalic(checkResult?: boolean) { -/** INK - * setActiveInkTool - * setStrokeWidth - * setStrokeColor - **/ +export function checkInksToGroup() { + console.log("getting here to inks group"); + if (CurrentUserUtils.SelectedTool === InkTool.Write) { + CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => { + // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those + // find all inkDocs in ffView.unprocessedDocs that are within 200 pixels of each other + const inksToGroup = ffView.unprocessedDocs.filter(inkDoc => { + console.log(inkDoc.x, inkDoc.y); + }); + }); + } +} -ScriptingGlobals.add(function setActiveInkTool(tool: string, checkResult?: boolean) { +export function createInkGroup(inksToGroup?: Doc[]) { + // TODO nda - if document being added to is a inkGrouping then we can just add to that group if (CurrentUserUtils.SelectedTool === InkTool.Write) { CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => { + // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those const selected = ffView.unprocessedDocs; // loop through selected an get the bound const bounds: { x: number, y: number, width?: number, height?: number }[] = [] @@ -750,10 +759,72 @@ ScriptingGlobals.add(function setActiveInkTool(tool: string, checkResult?: boole // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs newCollection && ffView.props.addDocument?.(newCollection); + // TODO: nda - will probably need to go through and only remove the unprocessed selected docs ffView.unprocessedDocs = []; }); } CollectionFreeFormView.collectionsWithUnprocessedInk.clear(); +} + + +/** INK + * setActiveInkTool + * setStrokeWidth + * setStrokeColor + **/ + +ScriptingGlobals.add(function setActiveInkTool(tool: string, checkResult?: boolean) { + createInkGroup(); + // if (CurrentUserUtils.SelectedTool === InkTool.Write) { + // CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => { + // const selected = ffView.unprocessedDocs; + // // loop through selected an get the bound + // const bounds: { x: number, y: number, width?: number, height?: number }[] = [] + + // selected.map(action(d => { + // const x = NumCast(d.x); + // const y = NumCast(d.y); + // const width = d[WidthSym](); + // const height = d[HeightSym](); + // bounds.push({x, y, width, height}); + // })) + + // const aggregBounds = aggregateBounds(bounds, 0, 0); + // const marqViewRef = ffView._marqueeViewRef.current; + + // // set the vals for bounds in marqueeView + // if (marqViewRef) { + // marqViewRef._downX = aggregBounds.x; + // marqViewRef._downY = aggregBounds.y; + // marqViewRef._lastX = aggregBounds.r; + // marqViewRef._lastY = aggregBounds.b; + // } + + // selected.map(action(d => { + // const dx = NumCast(d.x); + // const dy = NumCast(d.y); + // delete d.x; + // delete d.y; + // delete d.activeFrame; + // delete d._timecodeToShow; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection + // delete d._timecodeToHide; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection + // // calculate pos based on bounds + // if (marqViewRef?.Bounds) { + // d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2; + // d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2; + // } + // return d; + // })); + // ffView.props.removeDocument?.(selected); + // // TODO: nda - this is the code to actually get a new grouped collection + // const newCollection = marqViewRef?.getCollection(selected, undefined, [], true); + + // // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs + // newCollection && ffView.props.addDocument?.(newCollection); + // ffView.unprocessedDocs = []; + // }); + // } + // CollectionFreeFormView.collectionsWithUnprocessedInk.clear(); if (checkResult) { return ((Doc.UserDoc().activeInkTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool) ? |