From 9accdb19ea34240ad2c7739ea72e51aeaae2a77b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 6 Jun 2023 20:50:27 -0400
Subject: more Symbol updating.

---
 src/client/views/PropertiesView.tsx | 224 +++++++++++-------------------------
 1 file changed, 65 insertions(+), 159 deletions(-)

(limited to 'src/client/views/PropertiesView.tsx')

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 1111886d8..00e077f96 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -127,9 +127,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             const aspect = Doc.NativeAspect(layoutDoc, undefined, !layoutDoc._layout_fitWidth);
             if (aspect) return Math.min(layoutDoc[Width](), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.width - 20));
             return Doc.NativeWidth(layoutDoc) ? Math.min(layoutDoc[Width](), this.props.width - 20) : this.props.width - 20;
-        } else {
-            return 0;
         }
+        return 0;
     };
 
     @action
@@ -435,9 +434,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @action
-    toggleCheckbox = () => {
-        this.layoutFields = !this.layoutFields;
-    };
+    toggleCheckbox = () => (this.layoutFields = !this.layoutFields);
 
     @computed get editableTitle() {
         const titles = new Set<string>();
@@ -535,18 +532,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     marginLeft: title === '∠:' ? '39px' : '',
                 }}>
                 <div className="inputBox-title"> {title} </div>
-                <input
-                    className="inputBox-input"
-                    type="text"
-                    value={value}
-                    readOnly={true}
-                    onChange={e => {
-                        setter(e.target.value);
-                    }}
-                    onKeyPress={e => {
-                        e.stopPropagation();
-                    }}
-                />
+                <input className="inputBox-input" type="text" value={value} onChange={e => setter(e.target.value)} onKeyPress={e => e.stopPropagation()} />
                 <div className="inputBox-button">
                     <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}>
                         <FontAwesomeIcon icon="caret-up" color="white" size="sm" />
@@ -570,55 +556,50 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @action
     upDownButtons = (dirs: string, field: string) => {
+        const selDoc = this.selectedDoc;
+        if (!selDoc) return;
+        //prettier-ignore
         switch (field) {
-            case 'Xps':
-                this.selectedDoc && (this.selectedDoc.x = NumCast(this.selectedDoc?.x) + (dirs === 'up' ? 10 : -10));
-                break;
-            case 'Yps':
-                this.selectedDoc && (this.selectedDoc.y = NumCast(this.selectedDoc?.y) + (dirs === 'up' ? 10 : -10));
-                break;
-            case 'stk':
-                this.selectedDoc && (this.selectedDoc.stroke_width = NumCast(this.selectedDoc?.stroke_width) + (dirs === 'up' ? 0.1 : -0.1));
-                break;
+            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 'wid':
-                const oldWidth = NumCast(this.selectedDoc?._width);
-                const oldHeight = NumCast(this.selectedDoc?._height);
-                const oldX = NumCast(this.selectedDoc?.x);
-                const oldY = NumCast(this.selectedDoc?.y);
-                this.selectedDoc && (this.selectedDoc._width = oldWidth + (dirs === 'up' ? 10 : -10));
-                const doc = this.selectedDoc;
-                if (doc?.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) {
-                    const ink = Cast(doc.data, InkField)?.inkData;
+                const oldWidth = NumCast(selDoc._width);
+                const oldHeight = NumCast(selDoc._height);
+                const oldX = NumCast(selDoc.x);
+                const oldY = NumCast(selDoc.y);
+                selDoc._width = oldWidth + (dirs === 'up' ? 10 : -10);
+                if (selDoc.type === DocumentType.INK && selDoc.x && selDoc.y && selDoc._height && selDoc._width) {
+                    const ink = Cast(selDoc.data, InkField)?.inkData;
                     if (ink) {
                         const newPoints: { X: number; Y: number }[] = [];
                         for (var j = 0; j < ink.length; j++) {
                             // (new x — oldx) + (oldxpoint * newWidt)/oldWidth
-                            const newX = NumCast(doc.x) - oldX + (ink[j].X * NumCast(doc._width)) / oldWidth;
-                            const newY = NumCast(doc.y) - oldY + (ink[j].Y * NumCast(doc._height)) / oldHeight;
+                            const newX = NumCast(selDoc.x) - oldX + (ink[j].X * NumCast(selDoc._width)) / oldWidth;
+                            const newY = NumCast(selDoc.y) - oldY + (ink[j].Y * NumCast(selDoc._height)) / oldHeight;
                             newPoints.push({ X: newX, Y: newY });
                         }
-                        doc.data = new InkField(newPoints);
+                        selDoc.data = new InkField(newPoints);
                     }
                 }
                 break;
             case 'hgt':
-                const oWidth = NumCast(this.selectedDoc?._width);
-                const oHeight = NumCast(this.selectedDoc?._height);
-                const oX = NumCast(this.selectedDoc?.x);
-                const oY = NumCast(this.selectedDoc?.y);
-                this.selectedDoc && (this.selectedDoc._height = oHeight + (dirs === 'up' ? 10 : -10));
-                const docu = this.selectedDoc;
-                if (docu?.type === DocumentType.INK && docu.x && docu.y && docu._height && docu._width) {
-                    const ink = Cast(docu.data, InkField)?.inkData;
+                const oWidth = NumCast(selDoc._width);
+                const oHeight = NumCast(selDoc._height);
+                const oX = NumCast(selDoc.x);
+                const oY = NumCast(selDoc.y);
+                selDoc._height = oHeight + (dirs === 'up' ? 10 : -10);
+                if (selDoc.type === DocumentType.INK && selDoc.x && selDoc.y && selDoc._height && selDoc._width) {
+                    const ink = Cast(selDoc.data, InkField)?.inkData;
                     if (ink) {
                         const newPoints: { X: number; Y: number }[] = [];
                         for (var j = 0; j < ink.length; j++) {
                             // (new x — oldx) + (oldxpoint * newWidt)/oldWidth
-                            const newX = NumCast(docu.x) - oX + (ink[j].X * NumCast(docu._width)) / oWidth;
-                            const newY = NumCast(docu.y) - oY + (ink[j].Y * NumCast(docu._height)) / oHeight;
+                            const newX = NumCast(selDoc.x) - oX + (ink[j].X * NumCast(selDoc._width)) / oWidth;
+                            const newY = NumCast(selDoc.y) - oY + (ink[j].Y * NumCast(selDoc._height)) / oHeight;
                             newPoints.push({ X: newX, Y: newY });
                         }
-                        docu.data = new InkField(newPoints);
+                        selDoc.data = new InkField(newPoints);
                     }
                 }
                 break;
@@ -658,21 +639,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return this.inputBoxDuo(
             'hgt',
             this.shapeHgt,
-            undoable((val: string) => {
-                if (!isNaN(Number(val))) {
-                    this.shapeHgt = val;
-                }
-                return true;
-            }, 'set height'),
+            undoable((val: string) => !isNaN(Number(val)) && (this.shapeHgt = val), 'set height'),
             'H:',
             'wid',
             this.shapeWid,
-            undoable((val: string) => {
-                if (!isNaN(Number(val))) {
-                    this.shapeWid = val;
-                }
-                return true;
-            }, 'set width'),
+            undoable((val: string) => !isNaN(Number(val)) && (this.shapeWid = val), 'set width'),
             'W:'
         );
     }
@@ -680,21 +651,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return this.inputBoxDuo(
             'Xps',
             this.shapeXps,
-            undoable((val: string) => {
-                if (val !== '0' && !isNaN(Number(val))) {
-                    this.shapeXps = val;
-                }
-                return true;
-            }, 'set x coord'),
+            undoable((val: string) => val !== '0' && !isNaN(Number(val)) && (this.shapeXps = val), 'set x coord'),
             'X:',
             'Yps',
             this.shapeYps,
-            undoable((val: string) => {
-                if (val !== '0' && !isNaN(Number(val))) {
-                    this.shapeYps = val;
-                }
-                return true;
-            }, 'set y coord'),
+            undoable((val: string) => val !== '0' && !isNaN(Number(val)) && (this.shapeYps = val), 'set y coord'),
             'Y:'
         );
     }
@@ -702,36 +663,24 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @observable private _fillBtn = false;
     @observable private _lineBtn = false;
 
-    private _lastFill = '#D0021B';
-    private _lastLine = '#D0021B';
     private _lastDash: any = '2';
 
     @computed get colorFil() {
-        const ccol = this.getField('fillColor') || '';
-        ccol && (this._lastFill = ccol);
-        return ccol;
+        return StrCast(this.selectedDoc?.fillColor);
     }
     @computed get colorStk() {
-        const ccol = this.getField('color') || '';
-        ccol && (this._lastLine = ccol);
-        return ccol;
+        return StrCast(this.selectedDoc?.color);
     }
     set colorFil(value) {
-        value && (this._lastFill = value);
         this.selectedDoc && (this.selectedDoc.fillColor = value ? value : undefined);
     }
     set colorStk(value) {
-        value && (this._lastLine = value);
         this.selectedDoc && (this.selectedDoc.color = value ? value : undefined);
     }
 
-    colorButton(value: string, type: string, setter: () => {}) {
-        // return <div className="properties-flyout" onPointerEnter={e => this.changeScrolling(false)}
-        //     onPointerLeave={e => this.changeScrolling(true)}>
-        //     <Flyout anchorPoint={anchorPoints.LEFT_TOP}
-        //         content={type === "fill" ? this.fillPicker : this.linePicker}>
+    colorButton(value: string, type: string, setter: () => void) {
         return (
-            <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
+            <div className="color-button" key="color" onPointerDown={action(e => setter())}>
                 <div
                     className="color-button-preview"
                     style={{
@@ -744,31 +693,17 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 {value === '' || value === 'transparent' ? <p style={{ fontSize: 25, color: 'red', marginTop: -14 }}>☒</p> : ''}
             </div>
         );
-        //     </Flyout>
-        // </div>;
     }
 
-    @undoBatch
-    @action
-    switchStk = (color: ColorState) => {
-        const val = String(color.hex);
-        this.colorStk = val;
-        return true;
-    };
-    @undoBatch
-    @action
-    switchFil = (color: ColorState) => {
-        const val = String(color.hex);
-        this.colorFil = val;
-        return true;
-    };
-
-    colorPicker(setter: (color: string) => {}, type: string) {
+    colorPicker(color: string, setter: (color: string) => void) {
         return (
             <SketchPicker
-                onChange={type === 'stk' ? this.switchStk : this.switchFil}
+                onChange={undoable(
+                    action((color: ColorState) => setter(color.hex)),
+                    'set stroke color property'
+                )}
                 presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']}
-                color={type === 'stk' ? this.colorStk : this.colorFil}
+                color={color}
             />
         );
     }
@@ -777,22 +712,20 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return this.colorButton(this.colorFil, 'fill', () => {
             this._fillBtn = !this._fillBtn;
             this._lineBtn = false;
-            return true;
         });
     }
     @computed get lineButton() {
         return this.colorButton(this.colorStk, 'line', () => {
             this._lineBtn = !this._lineBtn;
             this._fillBtn = false;
-            return true;
         });
     }
 
     @computed get fillPicker() {
-        return this.colorPicker((color: string) => (this.colorFil = color), 'fil');
+        return this.colorPicker(this.colorFil, (color: string) => (this.colorFil = color));
     }
     @computed get linePicker() {
-        return this.colorPicker((color: string) => (this.colorStk = color), 'stk');
+        return this.colorPicker(this.colorStk, (color: string) => (this.colorStk = color));
     }
 
     @computed get strokeAndFill() {
@@ -814,15 +747,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         );
     }
 
-    @computed get solidStk() {
-        return this.selectedDoc?.color && (!this.selectedDoc?.stroke_dash || this.selectedDoc?.stroke_dash === '0') ? true : false;
-    }
     @computed get dashdStk() {
         return this.selectedDoc?.stroke_dash || '';
     }
-    @computed get unStrokd() {
-        return this.selectedDoc?.color ? true : false;
-    }
     @computed get widthStk() {
         return this.getField('stroke_width') || '1';
     }
@@ -835,12 +762,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get markTail() {
         return this.getField('stroke_endMarker') || '';
     }
-    set solidStk(value) {
-        this.dashdStk = '';
-        this.unStrokd = !value;
-    }
     set dashdStk(value) {
-        value && (this._lastDash = value) && (this.unStrokd = false);
+        value && (this._lastDash = value);
         this.selectedDoc && (this.selectedDoc.stroke_dash = value ? this._lastDash : undefined);
     }
     set markScal(value) {
@@ -849,9 +772,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     set widthStk(value) {
         this.selectedDoc && (this.selectedDoc.stroke_width = Number(value));
     }
-    set unStrokd(value) {
-        this.colorStk = value ? '' : this._lastLine;
-    }
     set markHead(value) {
         this.selectedDoc && (this.selectedDoc.stroke_startMarker = value);
     }
@@ -869,7 +789,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     regInput = (key: string, value: any, setter: (val: string) => {}) => {
         return (
             <div className="inputBox">
-                <input className="inputBox-input" type="text" readOnly={true} value={value} onChange={e => setter(e.target.value)} />
+                <input className="inputBox-input" type="text" value={value} onChange={e => setter(e.target.value)} />
                 <div className="inputBox-button">
                     <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}>
                         <FontAwesomeIcon icon="caret-up" color="white" size="sm" />
@@ -1164,27 +1084,28 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     // handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.link_description = e.target.value; }
     // handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.link_relationship = e.target.value; }
 
-    @undoBatch
-    handleDescriptionChange = action((value: string) => {
-        if (LinkManager.currentLink && this.selectedDoc) {
-            this.setDescripValue(value);
-            return true;
-        }
-    });
-
-    @undoBatch
-    handlelinkRelationshipChange = action((value: string) => {
-        if (LinkManager.currentLink && this.selectedDoc) {
-            this.setlinkRelationshipValue(value);
-            return true;
-        }
-    });
+    handleDescriptionChange = undoable(
+        action((value: string) => {
+            if (LinkManager.currentLink && this.selectedDoc) {
+                this.setDescripValue(value);
+            }
+        }),
+        'change link description'
+    );
+
+    handlelinkRelationshipChange = undoable(
+        action((value: string) => {
+            if (LinkManager.currentLink && this.selectedDoc) {
+                this.setlinkRelationshipValue(value);
+            }
+        }),
+        'change link relationship'
+    );
 
     @undoBatch
     setDescripValue = action((value: string) => {
         if (LinkManager.currentLink) {
             Doc.GetProto(LinkManager.currentLink).link_description = value;
-            return true;
         }
     });
 
@@ -1316,7 +1237,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 autoComplete={'off'}
                 id="link_relationship_input"
                 value={StrCast(LinkManager.currentLink?.link_relationship)}
-                readOnly={true}
                 onKeyDown={this.onRelationshipKey}
                 onBlur={this.onSelectOutRelationship}
                 onChange={e => this.handlelinkRelationshipChange(e.currentTarget.value)}
@@ -1333,8 +1253,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 autoComplete="off"
                 style={{ textAlign: 'left' }}
                 id="link_description_input"
-                value={Field.toString(LinkManager.currentLink?.link_description as any as Field)}
-                readOnly={true}
+                value={StrCast(LinkManager.currentLink?.link_description)}
                 onKeyDown={this.onDescriptionKey}
                 onBlur={this.onSelectOutDesc}
                 onChange={e => this.handleDescriptionChange(e.currentTarget.value)}
@@ -1688,19 +1607,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 {this.openSlideOptions ? <div className="propertiesView-presTrails-content">{PresBox.Instance.mediaOptionsDropdown}</div> : null}
                             </div>
                         )}
-                        {/* <div className="propertiesView-presTrails">
-                        <div className="propertiesView-presTrails-title"
-                            onPointerDown={action(() => { this.openAddSlide = !this.openAddSlide; })}
-                            style={{ backgroundColor: this.openAddSlide ? "black" : "" }}>
-                            &nbsp; <FontAwesomeIcon icon={"plus"} /> &nbsp; Add new slide
-                        <div className="propertiesView-presTrails-title-icon">
-                                <FontAwesomeIcon icon={this.openAddSlide ? "caret-down" : "caret-right"} size="lg" color="white" />
-                            </div>
-                        </div>
-                        {this.openAddSlide ? <div className="propertiesView-presTrails-content">
-                            {PresBox.Instance.newDocumentDropdown}
-                        </div> : null}
-                    </div> */}
                     </div>
                 );
             }
-- 
cgit v1.2.3-70-g09d2

