diff options
author | Naafiyan Ahmed <naafiyan@gmail.com> | 2022-06-05 20:12:28 -0400 |
---|---|---|
committer | Naafiyan Ahmed <naafiyan@gmail.com> | 2022-06-05 20:12:28 -0400 |
commit | 2e42d66be1439de347305cfd43c6f7e7042127c6 (patch) | |
tree | 53aa424189bce404dccc4794f27b63235612082e | |
parent | bf8f127f5aa906280fa12dc1ea2cc01bcf9ff40f (diff) |
refactored writing mode code into InKTranscription
-rw-r--r-- | src/client/views/GestureOverlay.tsx | 8 | ||||
-rw-r--r-- | src/client/views/InkTranscription.tsx | 88 | ||||
-rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 86 |
3 files changed, 89 insertions, 93 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 226983138..1a7bb0808 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -24,7 +24,7 @@ import { RadialMenu } from "./nodes/RadialMenu"; import HorizontalPalette from "./Palette"; import { Touchable } from "./Touchable"; import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; -import { checkInksToGroup, createInkGroup } from "./nodes/button/FontIconBox"; +import { InkTranscription } from "./InkTranscription"; @observer export class GestureOverlay extends Touchable { @@ -127,7 +127,7 @@ export class GestureOverlay extends Touchable { // pen is also a touch, but with a radius of 0.5 (at least with the surface pens) // and this seems to be the only way of differentiating pen and touch on touch events if (pt.radiusX > 1 && pt.radiusY > 1) { - createInkGroup(); + InkTranscription.Instance.createInkGroup(); Doc.UserDoc().activeInkTool = InkTool.None; this.prevPoints.set(pt.identifier, pt); } @@ -499,7 +499,7 @@ export class GestureOverlay extends Touchable { if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) { setupMoveUpEvents(this, e, returnFalse, returnFalse, action((e: PointerEvent, doubleTap?: boolean) => { if (doubleTap) { - createInkGroup(); + InkTranscription.Instance.createInkGroup(); CurrentUserUtils.SelectedTool = InkTool.None; return; } @@ -649,8 +649,6 @@ export class GestureOverlay extends Touchable { if (controlPoints.length > 4 && dist < 10) controlPoints[controlPoints.length - 1] = controlPoints[0]; this._points = controlPoints; this.dispatchGesture(GestureUtils.Gestures.Stroke); - // TODO: nda - check inks to group here - checkInksToGroup(); } this._points = []; } diff --git a/src/client/views/InkTranscription.tsx b/src/client/views/InkTranscription.tsx index 231ab694d..e1a80ae50 100644 --- a/src/client/views/InkTranscription.tsx +++ b/src/client/views/InkTranscription.tsx @@ -2,7 +2,7 @@ import * as iink from 'iink-js'; import { action, observable } from 'mobx'; import * as React from 'react'; import { Doc, DocListCast, HeightSym, WidthSym } from '../../fields/Doc'; -import { InkData, InkField } from "../../fields/InkField"; +import { InkData, InkField, InkTool } from "../../fields/InkField"; import { Cast, DateCast, NumCast } from '../../fields/Types'; import { DocumentType } from "../documents/DocumentTypes"; import './InkTranscription.scss'; @@ -10,7 +10,7 @@ import { aggregateBounds } from '../../Utils'; import { CollectionFreeFormView } from './collections/collectionFreeForm'; import { DocumentManager } from "../util/DocumentManager"; import { InkingStroke } from './InkingStroke'; -import { groupInkDocs } from './nodes/button/FontIconBox'; +import { CurrentUserUtils } from '../util/CurrentUserUtils'; export class InkTranscription extends React.Component { @@ -174,7 +174,7 @@ export class InkTranscription extends React.Component { if (!docView) return; const marqViewRef = docView._marqueeViewRef.current; if (!marqViewRef) return; - groupInkDocs(selected, docView, word); + this.groupInkDocs(selected, docView, word); }); } @@ -238,6 +238,88 @@ export class InkTranscription extends React.Component { } } } + + /** + * Creates the ink grouping once the user leaves the writing mode + */ +createInkGroup() { + // 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; + const newCollection = this.groupInkDocs(selected, ffView); + ffView.unprocessedDocs = []; + + InkTranscription.Instance.transcribeInk(newCollection, ffView.layoutDoc, selected, false, ffView); + }); + } + CollectionFreeFormView.collectionsWithUnprocessedInk.clear(); +} + +/** + * Creates the groupings for a given list of ink docs on a specific doc view + * @param selected: the list of ink docs to create a grouping of + * @param docView: the view in which we want the grouping to be created + * @param word: optional param if the group we are creating is a word (subgrouping individual words) + * @returns a new collection Doc or undefined if the grouping fails + */ + groupInkDocs(selected: Doc[], docView: CollectionFreeFormView, word?: string): Doc | undefined { + const bounds: { x: number, y: number, width?: number, height?: number }[] = [] + + // calculate the necessary bounds from the selected ink docs + 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 }); + })) + + // calculate the aggregated bounds + const aggregBounds = aggregateBounds(bounds, 0, 0); + const marqViewRef = docView._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; + } + + // map through all the selected ink strokes and create the groupings + 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; + })); + docView.props.removeDocument?.(selected); + // Gets a collection based on the selected nodes using a marquee view ref + const newCollection = marqViewRef?.getCollection(selected, undefined, true); + if (newCollection) { + newCollection.height = newCollection[HeightSym](); + newCollection.width = newCollection[WidthSym](); + // if the grouping we are creating is an individual word + if (word) { + newCollection.title = word; + } + } + + // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs + newCollection && docView.props.addDocument?.(newCollection); + return newCollection; +} render() { return ( diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 7a527b767..e16c055e4 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -706,89 +706,6 @@ ScriptingGlobals.add(function toggleItalic(checkResult?: boolean) { else Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === "italics" ? undefined : "italics"; }); -/** - * Creates the ink grouping once the user leaves the writing mode - */ -export function createInkGroup() { - // 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; - const newCollection = groupInkDocs(selected, ffView); - ffView.unprocessedDocs = []; - - InkTranscription.Instance.transcribeInk(newCollection, ffView.layoutDoc, selected, false, ffView); - }); - } - CollectionFreeFormView.collectionsWithUnprocessedInk.clear(); -} - -/** - * Creates the groupings for a given list of ink docs on a specific doc view - * @param selected: the list of ink docs to create a grouping of - * @param docView: the view in which we want the grouping to be created - * @param word: optional param if the group we are creating is a word (subgrouping individual words) - * @returns a new collection Doc or undefined if the grouping fails - */ -export function groupInkDocs(selected: Doc[], docView: CollectionFreeFormView, word?: string): Doc | undefined { - const bounds: { x: number, y: number, width?: number, height?: number }[] = [] - - // calculate the necessary bounds from the selected ink docs - 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 }); - })) - - // calculate the aggregated bounds - const aggregBounds = aggregateBounds(bounds, 0, 0); - const marqViewRef = docView._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; - } - - // map through all the selected ink strokes and create the groupings - 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; - })); - docView.props.removeDocument?.(selected); - // Gets a collection based on the selected nodes using a marquee view ref - const newCollection = marqViewRef?.getCollection(selected, undefined, true); - if (newCollection) { - newCollection.height = newCollection[HeightSym](); - newCollection.width = newCollection[WidthSym](); - // if the grouping we are creating is an individual word - if (word) { - newCollection.title = word; - } - } - - // nda - bug: when deleting a stroke before leaving writing mode, delete the stroke from unprocessed ink docs - newCollection && docView.props.addDocument?.(newCollection); - return newCollection; -} - - /** INK * setActiveInkTool * setStrokeWidth @@ -796,8 +713,7 @@ export function groupInkDocs(selected: Doc[], docView: CollectionFreeFormView, w **/ ScriptingGlobals.add(function setActiveInkTool(tool: string, checkResult?: boolean) { - createInkGroup(); - + InkTranscription.Instance?.createInkGroup(); if (checkResult) { return ((Doc.UserDoc().activeInkTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool) ? Colors.MEDIUM_BLUE : "transparent"; |