diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/DocumentDecorations.scss | 3 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 38 | ||||
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 40 | ||||
| -rw-r--r-- | src/client/views/InkingStroke.tsx | 30 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionMenu.tsx | 6 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/FormatShapePane.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 43 |
7 files changed, 121 insertions, 41 deletions
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<Doc, number>(); + @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 = <div id="documentDecorations-rotation" title="rotate" className="documentDecorations-rotation" + onPointerDown={this.onRotateDown}> ⟲ </div>; } + return (<div className="documentDecorations" style={{ background: darkScheme }} > <div className="documentDecorations-background" style={{ width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px", @@ -670,8 +699,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> <Tooltip title={<><div className="dash-tooltip">Open Document In Tab</div></>} placement="top"><div className="documentDecorations-openInTab" onPointerDown={this.onMaximizeDown}> {SelectionManager.SelectedDocuments().length === 1 ? <FontAwesomeIcon icon="external-link-alt" className="documentView-minimizedIcon" /> : "..."} </div></Tooltip> - <div id="documentDecorations-rotation" className="documentDecorations-rotation" - onPointerDown={this.onRotateDown}> ⟲ </div> + {rotButton} <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div> <div id="documentDecorations-topResizer" className="documentDecorations-resizer" diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 7c0a8635e..30df7cf9a 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -676,6 +676,15 @@ export default class GestureOverlay extends Touchable { var left = Math.min(...xs); var bottom = Math.max(...ys); var top = Math.min(...ys); + const firstx = this._points[0].X; + const firsty = this._points[0].Y; + const lastx = this._points[this._points.length - 2].X; + const lasty = this._points[this._points.length - 2].Y; + var fourth = (lastx - firstx) / 4; + if (isNaN(fourth) || fourth === 0) { fourth = 0.01; } + var m = (lasty - firsty) / (lastx - firstx); + if (isNaN(m) || m === 0) { m = 0.01; } + const b = firsty - m * firstx; if (shape === "noRec") { return false; } @@ -725,6 +734,8 @@ export default class GestureOverlay extends Touchable { this._points.push({ X: left, Y: top }); this._points.push({ X: left, Y: top }); // this._points.push({ X: left, Y: top }); + + // this._points.push({ X: left, Y: top }); // this._points.push({ X: left, Y: top }); // this._points.push({ X: left, Y: top - 1 }); @@ -797,8 +808,33 @@ export default class GestureOverlay extends Touchable { break; case "line": - this._points.push({ X: left, Y: top }); - this._points.push({ X: right, Y: bottom }); + // const firstx = this._points[0].X; + // const firsty = this._points[0].Y; + // const lastx = this._points[this._points.length - 1].X; + // const lasty = this._points[this._points.length - 1].Y; + // const fourth = (lastx - firstx) / 4; + // const m = (lasty - firsty) / (lastx - firstx); + // const b = firsty - m * firstx; + this._points.push({ X: firstx, Y: firsty }); + this._points.push({ X: firstx, Y: firsty }); + + this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); + this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); + this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); + this._points.push({ X: firstx + fourth, Y: m * (firstx + fourth) + b }); + + this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); + this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); + this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); + this._points.push({ X: firstx + 2 * fourth, Y: m * (firstx + 2 * fourth) + b }); + + this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); + this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); + this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); + this._points.push({ X: firstx + 3 * fourth, Y: m * (firstx + 3 * fourth) + b }); + + this._points.push({ X: firstx + 4 * fourth, Y: m * (firstx + 4 * fourth) + b }); + this._points.push({ X: firstx + 4 * fourth, Y: m * (firstx + 4 * fourth) + b }); break; case "arrow": const x1 = left; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 8e3f72cee..fe5bf1eb2 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -18,6 +18,8 @@ import { Doc } from "../../fields/Doc"; import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; import { action } from "mobx"; import { setupMoveUpEvents } from "../../Utils"; +import { undoBatch, UndoManager } from "../util/UndoManager"; + library.add(faPaintBrush); @@ -26,8 +28,12 @@ const InkDocument = makeInterface(documentSchema); @observer export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocument>(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<FieldViewProps, InkDocume @action onControlDown = (e: React.PointerEvent, i: number): void => { 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<FieldViewProps, InkDocume this._prevX = 0; this._prevY = 0; this._controlNum = 0; + this._controlUndo?.end(); + this._controlUndo = undefined; } public static MaskDim = 50000; @@ -125,18 +134,17 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume } handleLine.push({ X1: data[data.length - 2].X, Y1: data[data.length - 2].Y, X2: data[data.length - 1].X, Y2: data[data.length - 1].Y, X3: data[data.length - 1].X, Y3: data[data.length - 1].Y, dot1: data.length - 1, dot2: data.length - 1 }); - - } - if (data.length <= 4) { - handlePoints = []; - handleLine = []; - controlPoints = []; - for (var i = 0; i < data.length; i++) { - controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); - } - } - const dotsize = String(Math.min(width * scaleX, height * scaleY) / 40); + // if (data.length <= 4) { + // handlePoints = []; + // handleLine = []; + // controlPoints = []; + // for (var i = 0; i < data.length; i++) { + // controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); + // } + + // } + const dotsize = String(Math.max(width * scaleX, height * scaleY) / 40); const controls = controlPoints.map((pts, i) => 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<CollectionMenu style={{ backgroundColor: this._colorBtn ? "121212" : "", zIndex: 1001 }}> {/* <FontAwesomeIcon icon="pen-nib" size="lg" /> */} <div className="color-previewII" style={{ backgroundColor: color }} /> + {color === "" ? <p style={{ fontSize: 45, color: "red", marginTop: -16, marginLeft: -5, position: "fixed" }}>☒</p> : ""} + </button>)} </div>; } @@ -580,7 +582,9 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu <button className="antimodeMenu-button" key={color} onPointerDown={action(() => { this.changeColor(color, "fill"); this._fillBtn = false; this.editProperties(color, "fill"); })} style={{ backgroundColor: this._fillBtn ? "121212" : "", zIndex: 1001 }}> - <div className="color-previewII" style={{ backgroundColor: color }}></div> + <div className="color-previewII" style={{ backgroundColor: color }}> + {color === "" ? <p style={{ fontSize: 45, color: "red", marginTop: -16, marginLeft: -5, position: "fixed" }}>☒</p> : ""} + </div> </button>)} </div>; 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<PropertiesViewProps> { + private _widthUndo?: UndoManager.Batch; @computed get MAX_EMBED_HEIGHT() { return 200; } @@ -59,6 +60,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @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<PropertiesViewProps> { } } - @observable _controlBtn: boolean = false; - @observable _lock: boolean = false; + @computed get controlPointsButton() { return <div className="inking-button"> <Tooltip title={<><div className="dash-tooltip">{"Edit points"}</div></>}> - <div className="inking-button-points" onPointerDown={action(() => this._controlBtn = !this._controlBtn)} style={{ backgroundColor: this._controlBtn ? "black" : "" }}> + <div className="inking-button-points" onPointerDown={action(() => FormatShapePane.Instance._controlBtn = !FormatShapePane.Instance._controlBtn)} style={{ backgroundColor: FormatShapePane.Instance._controlBtn ? "black" : "" }}> <FontAwesomeIcon icon="bezier-curve" color="white" size="lg" /> </div> </Tooltip> - <Tooltip title={<><div className="dash-tooltip">{this._lock ? "Unlock points" : "Lock points"}</div></>}> - <div className="inking-button-lock" onPointerDown={action(() => this._lock = !this._lock)} > - <FontAwesomeIcon icon={this._lock ? "unlock" : "lock"} color="white" size="lg" /> + <Tooltip title={<><div className="dash-tooltip">{FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}</div></>}> + <div className="inking-button-lock" onPointerDown={action(() => FormatShapePane.Instance._lock = !FormatShapePane.Instance._lock)} > + <FontAwesomeIcon icon={FormatShapePane.Instance._lock ? "lock" : "unlock"} color="white" size="lg" /> </div> </Tooltip> <Tooltip title={<><div className="dash-tooltip">{"Rotate 90˚"}</div></>}> @@ -492,12 +495,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { 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<PropertiesViewProps> { 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<PropertiesViewProps> { 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<PropertiesViewProps> { </div> <input className="width-range" type="range" defaultValue={Number(this.widthStk)} min={1} max={100} - onChange={undoBatch(action((e) => 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; }} + /> </div> <div className="arrows"> @@ -701,7 +704,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { </div> </div> <div className="dashed"> - <div className="dashed-title">Dash:</div> + <div className="dashed-title">Dashed Line:</div> <input key="markHead" className="dashed-input" type="checkbox" checked={this.dashdStk === "2"} onChange={this.changeDash} /> |