made various render methods in DocumentView computed getters for efficiency and to avoid artifacts (LInkanchorBox dragging) when something else invalidates causing components to regenerate. fixed linklines to animate when doing a zoom transition and to be able to target texts hyperlinks. fixed link lines to share properties with ink and updated the properties panel / menus to allow editing of either. addding toggling link lines on and off from linkitemmenu

1 files changed, 19 insertions, 85 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 07f285eaf..3ae2362a1 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -741,7 +741,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         switch (field) {
             case 'Xps': selDoc.x = NumCast(this.selectedDoc?.x) + (dirs === 'up' ? 10 : -10); break;
             case 'Yps': selDoc.y = NumCast(this.selectedDoc?.y) + (dirs === 'up' ? 10 : -10); break;
-            case 'stk': selDoc.stroke_width = NumCast(this.selectedDoc?.stroke_width) + (dirs === 'up' ? 0.1 : -0.1); break;
+            case 'stk': selDoc.stroke_width = NumCast(this.selectedDoc?.[DocData].stroke_width) + (dirs === 'up' ? 0.1 : -0.1); break;
             case 'wid':
                 const oldWidth = NumCast(selDoc._width);
                 const oldHeight = NumCast(selDoc._height);
@@ -786,7 +786,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     };
 
     getField(key: string) {
-        return Field.toString(this.selectedDoc?.[key] as Field);
+        return Field.toString(this.selectedDoc?.[DocData][key] as Field);
     }
 
     @computed get shapeXps() {
@@ -801,6 +801,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     @computed get shapeWid() {
         return NumCast(this.selectedDoc?._width);
     }
+    @computed get strokeThk() {
+        return NumCast(this.selectedDoc?.[DocData].stroke_width);
+    }
     set shapeXps(value) {
         this.selectedDoc && (this.selectedDoc.x = Math.round(value * 100) / 100);
     }
@@ -813,6 +816,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     set shapeHgt(value) {
         this.selectedDoc && (this.selectedDoc._height = Math.round(value * 100) / 100);
     }
+    set strokeThk(value) {
+        this.selectedDoc && (this.selectedDoc[DocData].stroke_width = Math.round(value * 100) / 100);
+    }
 
     @computed get hgtInput() {
         return this.inputBoxDuo(
@@ -845,16 +851,16 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     private _lastDash: any = '2';
 
     @computed get colorFil() {
-        return StrCast(this.selectedDoc?.fillColor);
+        return StrCast(this.selectedDoc?.[DocData].fillColor);
     }
     @computed get colorStk() {
-        return StrCast(this.selectedDoc?.color);
+        return StrCast(this.selectedDoc?.[DocData].color);
     }
     set colorFil(value) {
-        this.selectedDoc && (this.selectedDoc.fillColor = value ? value : undefined);
+        this.selectedDoc && (this.selectedDoc[DocData].fillColor = value ? value : undefined);
     }
     set colorStk(value) {
-        this.selectedDoc && (this.selectedDoc.color = value ? value : undefined);
+        this.selectedDoc && (this.selectedDoc[DocData].color = value ? value : undefined);
     }
 
     colorButton(value: string, type: string, setter: () => void) {
@@ -943,19 +949,19 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     }
     set dashdStk(value) {
         value && (this._lastDash = value);
-        this.selectedDoc && (this.selectedDoc.stroke_dash = value ? this._lastDash : undefined);
+        this.selectedDoc && (this.selectedDoc[DocData].stroke_dash = value ? this._lastDash : undefined);
     }
     set markScal(value) {
-        this.selectedDoc && (this.selectedDoc.stroke_markerScale = Number(value));
+        this.selectedDoc && (this.selectedDoc[DocData].stroke_markerScale = Number(value));
     }
     set widthStk(value) {
-        this.selectedDoc && (this.selectedDoc.stroke_width = Number(value));
+        this.selectedDoc && (this.selectedDoc[DocData].stroke_width = Number(value));
     }
     set markHead(value) {
-        this.selectedDoc && (this.selectedDoc.stroke_startMarker = value);
+        this.selectedDoc && (this.selectedDoc[DocData].stroke_startMarker = value);
     }
     set markTail(value) {
-        this.selectedDoc && (this.selectedDoc.stroke_endMarker = value);
+        this.selectedDoc && (this.selectedDoc[DocData].stroke_endMarker = value);
     }
 
     @computed get stkInput() {
@@ -996,53 +1002,11 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     @computed get widthAndDash() {
         return (
             <div className="widthAndDash">
-                <div className="width">
-                    <div className="width-top">
-                        <div className="width-title">Width:</div>
-                        <div className="width-input">{this.stkInput}</div>
-                    </div>
-                    <input
-                        className="width-range"
-                        type="range"
-                        style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
-                        defaultValue={Number(this.widthStk)}
-                        min={1}
-                        max={100}
-                        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="width">{this.getNumber('Thickness', '', 0, Math.max(50, this.strokeThk), this.strokeThk, (val: number) => !isNaN(val) && (this.strokeThk = val), 50, 1)}</div>
+                <div className="width">{this.getNumber('Arrow Scale', '', 0, Math.max(10, this.markScal), this.markScal, (val: number) => !isNaN(val) && (this.markScal = val), 10, 1)}</div>
 
                 <div className="arrows">
                     <div className="arrows-head">
-                        <div className="width-top">
-                            <div className="width-title">Arrow Scale:</div>
-                            {/* <div className="width-input">{this.markScalInput}</div> */}
-                        </div>
-                        <input
-                            className="width-range"
-                            type="range"
-                            defaultValue={this.markScal}
-                            style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
-                            min={0}
-                            max={10}
-                            onChange={action(e => (this.markScal = +e.target.value))}
-                            onMouseDown={e => {
-                                this._widthUndo = UndoManager.StartBatch('scale undo');
-                            }}
-                            onMouseUp={e => {
-                                this._widthUndo?.end();
-                                this._widthUndo = undefined;
-                            }}
-                        />
-                    </div>
-                    <div className="arrows-head">
                         <div className="arrows-head-title">Arrow Head: </div>
                         <input key="markHead" className="arrows-head-input" type="checkbox" checked={this.markHead !== ''} onChange={undoBatch(action(() => (this.markHead = this.markHead ? '' : 'arrow')))} />
                     </div>
@@ -1442,36 +1406,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                         <p>Description</p>
                         {this.editDescription}
                     </div>
-                    <div className="propertiesView-input inline">
-                        <p>Show link</p>
-                        <button
-                            style={{ background: !LinkManager.Instance.currentLink?.link_displayLine ? '' : '#4476f7', borderRadius: 3 }}
-                            onPointerDown={e => this.toggleLinkProp(e, 'link_displayLine')}
-                            onClick={e => e.stopPropagation()}
-                            className="propertiesButton">
-                            <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
-                        </button>
-                    </div>
-                    <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
-                        <p>Auto-move anchors</p>
-                        <button
-                            style={{ background: !LinkManager.Instance.currentLink?.link_autoMoveAnchors ? '' : '#4476f7', borderRadius: 3 }}
-                            onPointerDown={e => this.toggleLinkProp(e, 'link_autoMoveAnchors')}
-                            onClick={e => e.stopPropagation()}
-                            className="propertiesButton">
-                            <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                        </button>
-                    </div>
-                    <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
-                        <p>Display arrow</p>
-                        <button
-                            style={{ background: !LinkManager.Instance.currentLink?.link_displayArrow ? '' : '#4476f7', borderRadius: 3 }}
-                            onPointerDown={e => this.toggleLinkProp(e, 'link_displayArrow')}
-                            onClick={e => e.stopPropagation()}
-                            className="propertiesButton">
-                            <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
-                        </button>
-                    </div>
                 </div>
                 {!hasSelectedAnchor ? null : (
                     <div className="propertiesView-section">