fixed display of where control point will be added on mouse moves. fixed clickable ink line to not select fill area unless its actually painted. added end cap properties to ink stroke ui. enabled more than one ink stroke to show editable control points when multiselected.

1 files changed, 22 insertions, 11 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index c539b1d0a..10c2a9898 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -3,6 +3,7 @@ import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-soli
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, Tooltip } from '@mui/material';
 import { Colors, EditableText, IconButton, NumberInput, Size, Slider, Toggle, ToggleType, Type } from 'browndash-components';
+import { Property } from 'csstype';
 import { concat } from 'lodash';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -830,11 +831,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     @computed get shapeHgt() { return NumCast(this.selectedDoc?._height); } // prettier-ignore
     set shapeHgt(value)  { this.selectedDoc && (this.selectedDoc._height = Math.round(value * 100) / 100); } // prettier-ignore
     @computed get strokeThk(){ return NumCast(this.selectedStrokes.lastElement()?.[DocData].stroke_width); } // prettier-ignore
-    set strokeThk(value) {
-        this.selectedStrokes.forEach(doc => {
-            doc[DocData].stroke_width = Math.round(value * 100) / 100;
-        });
-    }
+    set strokeThk(value) { this.selectedStrokes.forEach(doc => { doc[DocData].stroke_width = Math.round(value * 100) / 100; }); } // prettier-ignore
 
     @computed get hgtInput() {
         return this.inputBoxDuo(
@@ -1025,7 +1022,13 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
             doc[DocData].stroke_dash = value ? this._lastDash : undefined;
         });
     }
-    @computed get widthStk() { return this.getField('stroke_width') || '1'; } // prettier-ignore
+    @computed get lineCapStk() { return (this.getField('stroke_lineCap') || 'round' ) as Property.StrokeLinecap; } // prettier-ignore
+    set lineCapStk(value) {
+        this.selectedStrokes.forEach(doc => {
+            doc[DocData].stroke_lineCap = value;
+        });
+    }
+    @computed get widthStk() { return this.getField('stroke') || '1'; } // prettier-ignore
     set widthStk(value) {
         this.selectedStrokes.forEach(doc => {
             doc[DocData].stroke_width = Number(value);
@@ -1127,7 +1130,6 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                     <div className="arrows-head">
                         <div className="arrows-head-title">Arrow Head: </div>
                         <input
-                            key="markHead"
                             className="arrows-head-input"
                             type="checkbox"
                             checked={this.markHead !== ''}
@@ -1137,16 +1139,25 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                     <div className="arrows-tail">
                         <div className="arrows-tail-title">Arrow End: </div>
                         <input
-                            key="markTail"
                             className="arrows-tail-input"
                             type="checkbox"
                             checked={this.markTail !== ''}
-                            onChange={undoable(
-                                action(() => { this.markTail = this.markTail ? '' : 'arrow'; }) ,"change arrow tail"
-                            )}
+                            onChange={undoable(action(() => { this.markTail = this.markTail ? '' : 'arrow'; }) ,"change arrow tail")}
                         />
                     </div>
                 </div>
+                <div className="arrows">
+                    {["butt", "round", "square"].map(cap => 
+                    <div className="arrows-tail" key={cap}>
+                        <div className="arrows-tail-title">{cap}</div>
+                        <input
+                            className="arrows-tail-input"
+                            type="checkbox"
+                            checked={this.lineCapStk === cap}
+                            onChange={undoable(action(() => {  this.lineCapStk = cap as Property.StrokeLinecap;  }), `change lineCap ${cap}`)}
+                        />
+                    </div>)}
+                </div>
                 <div className="dashed">
                     <div className="dashed-title">Dashed Line:</div>
                     <input key="markHead" className="dashed-input" type="checkbox" checked={this.dashdStk === '2'} onChange={this.changeDash} />