From 6242be458d60bfc0e019286ff20ede8492cd140f Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 25 Aug 2020 19:17:18 -0400 Subject: fixed ink warnings. double-click turns on control point editing - esc reverts. made aliasing ink strokes possible & working. --- src/client/util/InteractionUtils.tsx | 3 +- src/client/views/DocumentDecorations.scss | 1 + src/client/views/DocumentDecorations.tsx | 4 +-- src/client/views/GlobalKeyHandler.ts | 2 ++ src/client/views/InkingStroke.tsx | 28 +++++----------- .../collectionFreeForm/FormatShapePane.tsx | 39 ++++++++-------------- src/client/views/nodes/DocumentView.tsx | 23 ++++++++----- src/fields/Doc.ts | 2 +- 8 files changed, 43 insertions(+), 59 deletions(-) (limited to 'src') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index d1e656e3f..4a203d41f 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -132,7 +132,6 @@ export namespace InteractionUtils { if (isNaN(scaley)) { scaley = 1; } - console.log(pts.length); return pts; } @@ -188,7 +187,7 @@ export namespace InteractionUtils { const addables = pts.map((pts, i) => - { console.log(i); }} pointerEvents="all" cursor="all-scroll" /> ); diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 1e8cfdff4..b5c32ca1d 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -79,6 +79,7 @@ $linkGap : 3px; top: 12; position: relative; pointer-events: all; + cursor: grab; .borderRadiusTooltip { width: 10px; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 19b9f20d9..3d6301ae9 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -283,7 +283,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> const newY = Math.sin(angle) * (ink.X - this._centerPoints[index].X) + Math.cos(angle) * (ink.Y - this._centerPoints[index].Y) + this._centerPoints[index].Y; newPoints.push({ X: newX, Y: newY }); } - doc.data = new InkField(newPoints); + Doc.GetProto(doc).data = new InkField(newPoints); const xs = newPoints.map(p => p.X); const ys = newPoints.map(p => p.Y); const left = Math.min(...xs); @@ -531,7 +531,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> const newY = ((doc.y || 0) - this._inkDocs[index].y) + (i.Y * (doc._height || 0)) / this._inkDocs[index].height; newPoints.push({ X: newX, Y: newY }); }); - doc.data = new InkField(newPoints); + Doc.GetProto(doc).data = new InkField(newPoints); } doc._nativeWidth = 0; diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index b29a04ea7..84b3d64fd 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -23,6 +23,7 @@ import { PDFMenu } from "./pdf/PDFMenu"; import { ContextMenu } from "./ContextMenu"; import { GroupManager } from "../util/GroupManager"; import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu"; +import { FormatShapePane } from "./collections/collectionFreeForm/FormatShapePane"; const modifiers = ["control", "meta", "shift", "alt"]; type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise; @@ -90,6 +91,7 @@ export class KeyManager { // } DocumentLinksButton.StartLink = undefined; DocumentLinksButton.StartLinkView = undefined; + FormatShapePane.Instance._controlBtn = false; const main = MainView.Instance; Doc.SetSelectedTool(InkTool.None); diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index d47d0d90c..18ecc225c 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -42,11 +42,6 @@ export class InkingStroke extends ViewBoxBaseComponent { - FormatShapePane.Instance.Pinned = true; - } - public _prevX = 0; public _prevY = 0; private _controlNum = 0; @@ -160,36 +155,31 @@ export class InkingStroke extends ViewBoxBaseComponent - - - + { FormatShapePane.Instance.addPoints(pts.X, pts.Y, apoints, i, controlPoints); }} pointerEvents="all" cursor="all-scroll" /> ); const controls = controlPoints.map((pts, i) => - - - + { this.changeCurrPoint(pts.I); this.onControlDown(e, pts.I); }} pointerEvents="all" cursor="all-scroll" /> ); const handles = handlePoints.map((pts, i) => - - - + this.onControlDown(e, pts.I)} pointerEvents="all" cursor="all-scroll" display={(pts.dot1 === FormatShapePane.Instance._currPoint || pts.dot2 === FormatShapePane.Instance._currPoint) ? "inherit" : "none"} /> ); const handleLines = handleLine.map((pts, i) => - - + - ); diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 1d3604d7f..91efe139e 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -118,9 +118,7 @@ export class FormatShapePane extends AntimodeMenu { this._lock && (i.rootDoc._height = (i.rootDoc._width / oldWidth * NumCast(i.rootDoc._height))); const doc = Document(i.rootDoc); if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { - console.log(doc.x, doc.y, doc._height, doc._width); const ink = Cast(doc.data, InkField)?.inkData; - console.log(ink); if (ink) { const newPoints: { X: number, Y: number }[] = []; ink.forEach(i => { @@ -129,7 +127,7 @@ export class FormatShapePane extends AntimodeMenu { const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight; newPoints.push({ X: newX, Y: newY }); }); - doc.data = new InkField(newPoints); + Doc.GetProto(doc).data = new InkField(newPoints); } } }); @@ -142,9 +140,7 @@ export class FormatShapePane extends AntimodeMenu { this._lock && (i.rootDoc._width = (i.rootDoc._height / oldHeight * NumCast(i.rootDoc._width))); const doc = Document(i.rootDoc); if (doc.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) { - console.log(doc.x, doc.y, doc._height, doc._width); const ink = Cast(doc.data, InkField)?.inkData; - console.log(ink); if (ink) { const newPoints: { X: number, Y: number }[] = []; ink.forEach(i => { @@ -153,7 +149,7 @@ export class FormatShapePane extends AntimodeMenu { const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight; newPoints.push({ X: newX, Y: newY }); }); - doc.data = new InkField(newPoints); + Doc.GetProto(doc).data = new InkField(newPoints); } } }); @@ -179,7 +175,7 @@ export class FormatShapePane extends AntimodeMenu { const spNum = Math.floor(counter / 2) * 4 + 2; for (var i = 0; i < spNum; i++) { - newPoints.push({ X: ink[i].X, Y: ink[i].Y }); + ink[i] && newPoints.push({ X: ink[i].X, Y: ink[i].Y }); } for (var j = 0; j < 4; j++) { newPoints.push({ X: x, Y: y }); @@ -189,7 +185,7 @@ export class FormatShapePane extends AntimodeMenu { newPoints.push({ X: ink[i].X, Y: ink[i].Y }); } this._currPoint = -1; - doc.data = new InkField(newPoints); + Doc.GetProto(doc).data = new InkField(newPoints); } } } @@ -206,25 +202,21 @@ export class FormatShapePane extends AntimodeMenu { const ink = Cast(doc.data, InkField)?.inkData; if (ink && ink.length > 4) { const newPoints: { X: number, Y: number }[] = []; - - console.log(ink.length, this._currPoint, Math.floor((this._currPoint + 2) / 4)); - const toRemove = Math.floor(((this._currPoint + 2) / 4)); for (var i = 0; i < ink.length; i++) { if (Math.floor((i + 2) / 4) !== toRemove) { - console.log(i, toRemove); newPoints.push({ X: ink[i].X, Y: ink[i].Y }); } } this._currPoint = -1; - doc.data = new InkField(newPoints); + Doc.GetProto(doc).data = new InkField(newPoints); if (newPoints.length === 4) { const newerPoints: { X: number, Y: number }[] = []; newerPoints.push({ X: newPoints[0].X, Y: newPoints[0].Y }); newerPoints.push({ X: newPoints[0].X, Y: newPoints[0].Y }); newerPoints.push({ X: newPoints[3].X, Y: newPoints[3].Y }); newerPoints.push({ X: newPoints[3].X, Y: newPoints[3].Y }); - doc.data = new InkField(newerPoints); + Doc.GetProto(doc).data = new InkField(newerPoints); } } @@ -267,7 +259,7 @@ export class FormatShapePane extends AntimodeMenu { const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y; newPoints.push({ X: newX, Y: newY }); }); - doc.data = new InkField(newPoints); + Doc.GetProto(doc).data = new InkField(newPoints); const xs = newPoints.map(p => p.X); const ys = newPoints.map(p => p.Y); const left = Math.min(...xs); @@ -317,7 +309,7 @@ export class FormatShapePane extends AntimodeMenu { const ys = ink.map(p => p.Y); const left = Math.min(...xs); const top = Math.min(...ys); - doc.data = new InkField(newPoints); + Doc.GetProto(doc).data = new InkField(newPoints); const xs2 = newPoints.map(p => p.X); const ys2 = newPoints.map(p => p.Y); const left2 = Math.min(...xs2); @@ -363,7 +355,7 @@ export class FormatShapePane extends AntimodeMenu { inputBox = (key: string, value: any, setter: (val: string) => {}) => { return <>

{title2}

setter(e.target.value)} autoFocus /> {title2 === "" ? "" : <> setter2(e.target.value)} autoFocus />

; @@ -488,8 +479,6 @@ export class FormatShapePane extends AntimodeMenu { {this._fillBtn || this._lineBtn ? "" :
} {(this.solidStk || this.dashdStk) ? "Width" : ""} {(this.solidStk || this.dashdStk) ? this.stkInput : ""} - - {(this.solidStk || this.dashdStk) ? this.widthStk = e.target.value))} /> : (null)}
{(this.solidStk || this.dashdStk) ? <> @@ -499,10 +488,8 @@ export class FormatShapePane extends AntimodeMenu { this.markTail = this.markTail ? "" : "arrow"))} style={{ position: "absolute", right: 0, width: 20 }} />
: ""} - Dash: this.dashdStk = this.dashdStk === "2" ? "0" : "2"))} style={{ position: "absolute", right: 110, width: 20 }} /> - - - + Dash: + this.dashdStk = this.dashdStk === "2" ? "0" : "2"))} style={{ position: "absolute", right: 110, width: 20 }} /> ; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 56791fc81..171b33d42 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -38,6 +38,7 @@ import { LinkDescriptionPopup } from './LinkDescriptionPopup'; import { RadialMenu } from './RadialMenu'; import { TaskCompletionBox } from './TaskCompletedBox'; import React = require("react"); +import { FormatShapePane } from '../collections/collectionFreeForm/FormatShapePane'; export type DocFocusFunc = () => boolean; @@ -307,15 +308,19 @@ export class DocumentView extends DocComponent(Docu }, console.log); func(); } else if (!Doc.IsSystem(this.props.Document)) { - UndoManager.RunInBatch(() => { - let fullScreenDoc = this.props.Document; - if (StrCast(this.props.Document.layoutKey) !== "layout_fullScreen" && this.props.Document.layout_fullScreen) { - fullScreenDoc = Doc.MakeAlias(this.props.Document); - fullScreenDoc.layoutKey = "layout_fullScreen"; - } - this.props.addDocTab(fullScreenDoc, "inTab"); - }, "double tap"); - SelectionManager.DeselectAll(); + if (this.props.Document.type === DocumentType.INK) { + FormatShapePane.Instance._controlBtn = true; + } else { + UndoManager.RunInBatch(() => { + let fullScreenDoc = this.props.Document; + if (StrCast(this.props.Document.layoutKey) !== "layout_fullScreen" && this.props.Document.layout_fullScreen) { + fullScreenDoc = Doc.MakeAlias(this.props.Document); + fullScreenDoc.layoutKey = "layout_fullScreen"; + } + this.props.addDocTab(fullScreenDoc, "inTab"); + }, "double tap"); + SelectionManager.DeselectAll(); + } Doc.UnBrushDoc(this.props.Document); } } diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 6218fda26..e569dabc1 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -501,7 +501,7 @@ export namespace Doc { } export function MakeAlias(doc: Doc, id?: string) { - const alias = !GetT(doc, "isPrototype", "boolean", true) ? Doc.MakeCopy(doc, undefined, id) : Doc.MakeDelegate(doc, id); + const alias = !GetT(doc, "isPrototype", "boolean", true) && doc.proto ? Doc.MakeCopy(doc, undefined, id) : Doc.MakeDelegate(doc, id); const layout = Doc.LayoutField(alias); if (layout instanceof Doc && layout !== alias && layout === Doc.Layout(alias)) { Doc.SetLayout(alias, Doc.MakeAlias(layout)); -- cgit v1.2.3-70-g09d2