From 7e18d27de76bd2b58281841910aee3c4829269dd Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Thu, 6 Aug 2020 00:21:23 +0900 Subject: fixed bugs after testing --- src/client/views/DocumentDecorations.scss | 3 +- src/client/views/DocumentDecorations.tsx | 38 ++++++++++++++++--- src/client/views/GestureOverlay.tsx | 40 +++++++++++++++++++- src/client/views/InkingStroke.tsx | 30 +++++++++------ src/client/views/collections/CollectionMenu.tsx | 6 ++- .../collectionFreeForm/FormatShapePane.tsx | 2 + .../collectionFreeForm/PropertiesView.tsx | 43 ++++++++++++---------- 7 files changed, 121 insertions(+), 41 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 424a06431..5401623e8 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -24,8 +24,7 @@ $linkGap : 3px; .documentDecorations-rotation { pointer-events: auto; - // cursor: grabbing; - cursor: ns-resize; + cursor: alias; width: 10px; height: 10px; } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index f16cb273b..1ae7d6617 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -27,6 +27,8 @@ import { GetEffectiveAcl } from '../../fields/util'; import { DocumentIcon } from './nodes/DocumentIcon'; import { render } from 'react-dom'; import { createLessThan } from 'typescript'; +import FormatShapePane from './collections/collectionFreeForm/FormatShapePane'; +import { PropertiesView } from './collections/collectionFreeForm/PropertiesView'; library.add(faCaretUp); library.add(faObjectGroup); @@ -59,12 +61,15 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> private _linkBoxHeight = 20 + 3; // link button height + margin private _titleHeight = 20; private _resizeUndo?: UndoManager.Batch; + private _rotateUndo?: UndoManager.Batch; private _offX = 0; _offY = 0; // offset from click pt to inner edge of resize border private _snapX = 0; _snapY = 0; // last snapped location of resize border private _prevX = 0; private _prevY = 0; private _centerPoints: { X: number, Y: number }[] = []; private _inkDocs: { x: number, y: number, width: number, height: number }[] = []; + private _natWid = 0; + private _natHei = 0; @observable private _accumulatedTitle = ""; @observable private _titleControlString: string = "#title"; @@ -258,8 +263,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> return false; } + @undoBatch @action onRotateDown = (e: React.PointerEvent): void => { + this._rotateUndo = UndoManager.StartBatch("rotatedown"); + setupMoveUpEvents(this, e, this.onRotateMove, this.onRotateUp, (e) => { }); this._prevX = e.clientX; this._prevY = e.clientY; @@ -281,6 +289,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> })); } + + @undoBatch @action onRotateMove = (e: PointerEvent, down: number[]): boolean => { @@ -332,12 +342,15 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> onRotateUp = (e: PointerEvent) => { this._centerPoints = []; + this._rotateUndo?.end(); + this._rotateUndo = undefined; } _initialAutoHeight = false; _dragHeights = new Map(); + @action onPointerDown = (e: React.PointerEvent): void => { @@ -346,8 +359,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> const doc = Document(element.rootDoc); if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height) { this._inkDocs.push({ x: doc.x, y: doc.y, width: doc._width, height: doc._height }); + if (FormatShapePane.Instance._lock) { + doc._nativeHeight = doc._height; + doc._nativeWidth = doc._width; + } } - })); setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, (e) => { }); @@ -373,7 +389,15 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => { const first = SelectionManager.SelectedDocuments()[0]; let thisPt = { thisX: e.clientX - this._offX, thisY: e.clientY - this._offY }; - const fixedAspect = first.layoutDoc._nativeWidth ? NumCast(first.layoutDoc._nativeWidth) / NumCast(first.layoutDoc._nativeHeight) : 0; + var fixedAspect = first.layoutDoc._nativeWidth ? NumCast(first.layoutDoc._nativeWidth) / NumCast(first.layoutDoc._nativeHeight) : 0; + SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { + const doc = Document(element.rootDoc); + if (doc.type === DocumentType.INK && doc._width && doc._height && FormatShapePane.Instance._lock) { + fixedAspect = NumCast(doc._nativeWidth) / NumCast(doc._nativeHeight); + } + })); + + if (fixedAspect && (this._resizeHdlId === "documentDecorations-bottomRightResizer" || this._resizeHdlId === "documentDecorations-topLeftResizer")) { // need to generalize for bl and tr drag handles const project = (p: number[], a: number[], b: number[]) => { const atob = [b[0] - a[0], b[1] - a[1]]; @@ -544,7 +568,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> doc.data = new InkField(newPoints); } - + doc._nativeWidth = 0; + doc._nativeHeight = 0; } })); } @@ -639,10 +664,14 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> bounds.y = bounds.b - (this._resizeBorderWidth + this._linkBoxHeight + this._titleHeight); } var offset = 0; + var rotButton = <>; //make offset larger for ink to edit points if (seldoc.rootDoc.type === DocumentType.INK) { offset = 20; + rotButton =
⟲
; } + return (
Open Document In Tab
} placement="top">
{SelectionManager.SelectedDocuments().length === 1 ? : "..."}
-
⟲
+ {rotButton}
e.preventDefault()}>
(InkDocument) { + private _controlUndo?: UndoManager.Batch; + public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); } + + private analyzeStrokes = () => { const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? []; CognitiveServices.Inking.Appliers.ConcatenateHandwriting(this.dataDoc, ["inkAnalysis", "handwriting"], [data]); @@ -52,6 +58,7 @@ export class InkingStroke extends ViewBoxBaseComponent { setupMoveUpEvents(this, e, this.onControlMove, this.onControlup, (e) => { }); + this._controlUndo = UndoManager.StartBatch("DocDecs set radius"); this._prevX = e.clientX; this._prevY = e.clientY; this._controlNum = i; @@ -76,6 +83,8 @@ export class InkingStroke extends ViewBoxBaseComponent diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index a7d2c07fa..a1f5ff657 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -567,6 +567,8 @@ export class CollectionFreeFormViewChrome extends React.Component {/* */}
+ {color === "" ?

☒

: ""} + )}
; } @@ -580,7 +582,9 @@ export class CollectionFreeFormViewChrome extends React.Component { this.changeColor(color, "fill"); this._fillBtn = false; this.editProperties(color, "fill"); })} style={{ backgroundColor: this._fillBtn ? "121212" : "", zIndex: 1001 }}> -
+
+ {color === "" ?

☒

: ""} +
)}
; diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 6263be261..d526033a0 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -214,6 +214,7 @@ export default class FormatShapePane extends AntimodeMenu { @undoBatch @action control = (xDiff: number, yDiff: number, controlNum: number) => { + // console.log(controlNum, ink.length); this.selectedInk?.forEach(action(inkView => { if (this.selectedInk?.length === 1) { const doc = Document(inkView.rootDoc); @@ -221,6 +222,7 @@ export default class FormatShapePane extends AntimodeMenu { const ink = Cast(doc.data, InkField)?.inkData; if (ink) { + const newPoints: { X: number, Y: number }[] = []; const order = controlNum % 4; for (var i = 0; i < ink.length; i++) { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index f5e0cd077..1c2f0e9e4 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -22,7 +22,7 @@ import { DocumentType } from "../../../documents/DocumentTypes"; import FormatShapePane from "./FormatShapePane"; import { SharingPermissions, GetEffectiveAcl } from "../../../../fields/util"; import { InkField } from "../../../../fields/InkField"; -import { undoBatch } from "../../../util/UndoManager"; +import { undoBatch, UndoManager } from "../../../util/UndoManager"; import { ColorState, SketchPicker } from "react-color"; import AntimodeMenu from "../../AntimodeMenu"; import "./FormatShapePane.scss"; @@ -39,6 +39,7 @@ interface PropertiesViewProps { @observer export class PropertiesView extends React.Component { + private _widthUndo?: UndoManager.Batch; @computed get MAX_EMBED_HEIGHT() { return 200; } @@ -59,6 +60,9 @@ export class PropertiesView extends React.Component { @observable openAppearance: boolean = true; @observable openTransform: boolean = true; + @observable _controlBtn: boolean = false; + @observable _lock: boolean = false; + @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } @action @@ -424,20 +428,19 @@ export class PropertiesView extends React.Component { } } - @observable _controlBtn: boolean = false; - @observable _lock: boolean = false; + @computed get controlPointsButton() { return
{"Edit points"}
}> -
this._controlBtn = !this._controlBtn)} style={{ backgroundColor: this._controlBtn ? "black" : "" }}> +
FormatShapePane.Instance._controlBtn = !FormatShapePane.Instance._controlBtn)} style={{ backgroundColor: FormatShapePane.Instance._controlBtn ? "black" : "" }}>
-
{this._lock ? "Unlock points" : "Lock points"}
}> -
this._lock = !this._lock)} > - +
{FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}
}> +
FormatShapePane.Instance._lock = !FormatShapePane.Instance._lock)} > +
{"Rotate 90˚"}
}> @@ -492,12 +495,10 @@ export class PropertiesView extends React.Component { const oldX = NumCast(this.selectedDoc?.x); const oldY = NumCast(this.selectedDoc?.y); this.selectedDoc && (this.selectedDoc._width = oldWidth + (dirs === "up" ? 10 : - 10)); - this._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) / oldWidth * NumCast(this.selectedDoc?._height))); + FormatShapePane.Instance._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) / oldWidth * NumCast(this.selectedDoc?._height))); const doc = this.selectedDoc; 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 }[] = []; for (var j = 0; j < ink.length; j++) { @@ -516,12 +517,10 @@ export class PropertiesView extends React.Component { const oX = NumCast(this.selectedDoc?.x); const oY = NumCast(this.selectedDoc?.y); this.selectedDoc && (this.selectedDoc._height = oHeight + (dirs === "up" ? 10 : - 10)); - this._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) / oHeight * NumCast(this.selectedDoc?._width))); + FormatShapePane.Instance._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) / oHeight * NumCast(this.selectedDoc?._width))); const docu = this.selectedDoc; if (docu?.type === DocumentType.INK && docu.x && docu.y && docu._height && docu._width) { - console.log(docu.x, docu.y, docu._height, docu._width); const ink = Cast(docu.data, InkField)?.inkData; - console.log(ink); if (ink) { const newPoints: { X: number, Y: number }[] = []; for (var j = 0; j < ink.length; j++) { @@ -556,17 +555,18 @@ export class PropertiesView extends React.Component { set shapeWid(value) { const oldWidth = NumCast(this.selectedDoc?._width); this.selectedDoc && (this.selectedDoc._width = Number(value)); - this._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) * NumCast(this.selectedDoc?._height)) / oldWidth); + FormatShapePane.Instance._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) * NumCast(this.selectedDoc?._height)) / oldWidth); } set shapeHgt(value) { const oldHeight = NumCast(this.selectedDoc?._height); this.selectedDoc && (this.selectedDoc._height = Number(value)); - this._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) * NumCast(this.selectedDoc?._width)) / oldHeight); + FormatShapePane.Instance._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) * NumCast(this.selectedDoc?._width)) / oldHeight); } - @computed get hgtInput() { return this.inputBoxDuo("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val, "H:", "wid", this.shapeWid, (val: string) => this.shapeWid = val, "W:"); } - @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); } - @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); } + @computed get hgtInput() { return this.inputBoxDuo("hgt", this.shapeHgt, (val: string) => { if (!isNaN(Number(val))) { this.shapeHgt = val; } return true; }, "H:", "wid", this.shapeWid, (val: string) => { if (!isNaN(Number(val))) { this.shapeWid = val; } return true; }, "W:"); } + @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => { if (val !== "0" && !isNaN(Number(val))) { this.shapeXps = val; } return true; }, "X:", "Yps", this.shapeYps, (val: string) => { if (val !== "0" && !isNaN(Number(val))) { this.shapeYps = val; } return true; }, "Y:"); } + @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { if (!isNaN(Number(val))) { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; } return true; }, "∠:", "rot", this.shapeRot, (val: string) => { if (!isNaN(Number(val))) { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; } return true; }, ""); } + @observable private _fillBtn = false; @observable private _lineBtn = false; @@ -683,7 +683,10 @@ export class PropertiesView extends React.Component {
this.widthStk = e.target.value))} /> + onChange={(action((e) => this.widthStk = e.target.value))} + onMouseDown={(e) => { this._widthUndo = UndoManager.StartBatch("width undo");; }} + onMouseUp={(e) => { this._widthUndo?.end(); this._widthUndo = undefined; }} + />
@@ -701,7 +704,7 @@ export class PropertiesView extends React.Component {
-
Dash:
+
Dashed Line:
-- cgit v1.2.3-70-g09d2 From ffa36a87eb1093883dcc80128b08d24d2440f75a Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 5 Aug 2020 13:01:52 -0400 Subject: fixed perfectly horizontal/vertical lines to display. make InkFields script editable. --- src/client/util/type_decls.d | 5 +++++ src/client/views/DocumentDecorations.tsx | 2 -- src/client/views/InkingStroke.tsx | 8 ++++---- src/fields/InkField.ts | 5 ++++- 4 files changed, 13 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/util/type_decls.d b/src/client/util/type_decls.d index 08aec3724..ab6c94f83 100644 --- a/src/client/util/type_decls.d +++ b/src/client/util/type_decls.d @@ -187,6 +187,11 @@ declare class List extends ObjectField { [Copy](): ObjectField; } +declare class InkField extends ObjectField { + constructor(data:Array<{X:number, Y:number}>); + [Copy](): ObjectField; +} + // @ts-ignore declare const console: any; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 1ae7d6617..005df6fe0 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -68,8 +68,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> private _prevY = 0; private _centerPoints: { X: number, Y: number }[] = []; private _inkDocs: { x: number, y: number, width: number, height: number }[] = []; - private _natWid = 0; - private _natHei = 0; @observable private _accumulatedTitle = ""; @observable private _titleControlString: string = "#title"; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index fe5bf1eb2..6c5eda256 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -99,10 +99,10 @@ export class InkingStroke extends ViewBoxBaseComponent `{X: ${i.X}, Y: ${i.Y}} `) + "])"; } [ToString]() { return "InkField"; } } + +Scripting.addGlobal("InkField", InkField); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From d3c49ce7b1921dec4c27f425b2af788e3d6385e9 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 5 Aug 2020 13:05:31 -0400 Subject: from last --- src/client/views/collections/collectionFreeForm/FormatShapePane.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index d526033a0..6263be261 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -214,7 +214,6 @@ export default class FormatShapePane extends AntimodeMenu { @undoBatch @action control = (xDiff: number, yDiff: number, controlNum: number) => { - // console.log(controlNum, ink.length); this.selectedInk?.forEach(action(inkView => { if (this.selectedInk?.length === 1) { const doc = Document(inkView.rootDoc); @@ -222,7 +221,6 @@ export default class FormatShapePane extends AntimodeMenu { const ink = Cast(doc.data, InkField)?.inkData; if (ink) { - const newPoints: { X: number, Y: number }[] = []; const order = controlNum % 4; for (var i = 0; i < ink.length; i++) { -- cgit v1.2.3-70-g09d2