From 10a89be0b184df2750a4b3eceb48db205cb83e95 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 5 Nov 2024 10:22:31 -0500
Subject:  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.

---
 src/client/views/PropertiesView.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

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

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} />
-- 
cgit v1.2.3-70-g09d2

