Merge branch 'master' into alyssa-agent

1 files changed, 59 insertions, 39 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 10c2a9898..42aa6782f 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -2,8 +2,7 @@ import { IconLookup, IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 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 { Colors, EditableText, IconButton, NumberInput, Size, Slider, Toggle, ToggleType, Type } from '@dash/components';
 import { concat } from 'lodash';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -45,6 +44,7 @@ import { StyleProviderFuncType } from './nodes/FieldView';
 import { OpenWhere } from './nodes/OpenWhere';
 import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
 import { SmartDrawHandler } from './smartdraw/SmartDrawHandler';
+import { DrawingFillHandler } from './smartdraw/DrawingFillHandler';
 
 interface PropertiesViewProps {
     width: number;
@@ -111,6 +111,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     @observable openContexts: boolean = true;
     @observable openLinks: boolean = true;
     @observable openAppearance: boolean = true;
+    @observable openFirefly: boolean = true;
     @observable openTransform: boolean = true;
     @observable openFilters: boolean = false;
     @observable openStyling: boolean = true;
@@ -831,7 +832,11 @@ 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; }); } // prettier-ignore
+    set strokeThk(value) {
+        this.selectedStrokes.forEach(doc => {
+            doc[DocData].stroke_width = Math.round(value * 100) / 100;
+        });
+    }
 
     @computed get hgtInput() {
         return this.inputBoxDuo(
@@ -980,22 +985,24 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         );
         return (
             <div>
-                {!targetDoc.layout_isSvg && this.containsInkDoc && (
-                    <div className="color">
-                        <Toggle
-                            text={'Color with GPT'}
-                            color={SettingsManager.userColor}
-                            icon={<FontAwesomeIcon icon="fill-drip" />}
-                            iconPlacement="left"
-                            align="flex-start"
-                            fillWidth
-                            toggleType={ToggleType.BUTTON}
-                            onClick={undoable(() => {
-                                SmartDrawHandler.Instance.colorWithGPT(targetDoc);
-                            }, 'smoothStrokes')}
-                        />
-                    </div>
-                )}
+                <div>
+                    {!targetDoc.layout_isSvg && this.containsInkDoc && (
+                        <div className="color">
+                            <Toggle
+                                text={'Color with GPT'}
+                                color={SettingsManager.userColor}
+                                icon={<FontAwesomeIcon icon="fill-drip" />}
+                                iconPlacement="left"
+                                align="flex-start"
+                                fillWidth
+                                toggleType={ToggleType.BUTTON}
+                                onClick={undoable(() => {
+                                    SmartDrawHandler.Instance.colorWithGPT(targetDoc);
+                                }, 'colorWithGPT')}
+                            />
+                        </div>
+                    )}
+                </div>
                 <div className="smooth">
                     <Toggle
                         text={'Smooth Ink Strokes'}
@@ -1022,13 +1029,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
             doc[DocData].stroke_dash = value ? this._lastDash : undefined;
         });
     }
-    @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
+    @computed get widthStk() { return this.getField('stroke_width') || '1'; } // prettier-ignore
     set widthStk(value) {
         this.selectedStrokes.forEach(doc => {
             doc[DocData].stroke_width = Number(value);
@@ -1040,6 +1041,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
             doc[DocData].stroke_markerScale = Number(value);
         });
     }
+    @computed get refStrength() { return Number(this.getField('drawing_refStrength') || '50'); } // prettier-ignore
+    set refStrength(value) {
+        this.selectedDoc[DocData].drawing_refStrength = Number(value);
+    }
     @computed get smoothAmt() { return Number(this.getField('stroke_smoothAmount') || '5'); } // prettier-ignore
     set smoothAmt(value) {
         this.selectedStrokes.forEach(doc => {
@@ -1093,6 +1098,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         this.openTransform = false;
         this.openFields = false;
         this.openSharing = false;
+        this.openAppearance = false;
+        this.openFirefly = false;
         this.openLayout = false;
         this.openFilters = false;
     };
@@ -1130,6 +1137,7 @@ 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 !== ''}
@@ -1139,25 +1147,16 @@ 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} />
@@ -1311,11 +1310,32 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     }
 
     @computed get inkSubMenu() {
+        const strength = this.getNumber('Reference Strength', '', 1, 100, this.refStrength, (val: number) => {
+            !isNaN(val) && (this.refStrength = val);
+        });
+        const targetDoc = this.selectedLayoutDoc;
         return (
             <>
                 <PropertiesSection title="Appearance" isOpen={this.openAppearance} setIsOpen={bool => { this.openAppearance = bool; }} onDoubleClick={this.CloseAll}>
                     {this.selectedStrokes.length ? this.inkEditor : null}
                 </PropertiesSection>
+                <PropertiesSection  title="Firefly" isOpen={this.openFirefly} setIsOpen={bool => { this.openFirefly = bool; }} onDoubleClick={this.CloseAll}>
+                    <>
+                <div className="drawing-to-image">
+                        <Toggle
+                            text="Create Image"
+                            color={SettingsManager.userColor}
+                            icon={<FontAwesomeIcon icon="fill-drip" />}
+                            iconPlacement="left"
+                            align="flex-start"
+                            fillWidth
+                            toggleType={ToggleType.BUTTON}
+                            onClick={undoable(() => DrawingFillHandler.drawingToImage(targetDoc, this.refStrength, StrCast(targetDoc.title) !== 'grouping' ? StrCast(targetDoc.title) : ''), 'createImage')}
+                        />
+                    </div>
+                    <div className="strength-slider">{strength}</div>
+                    </>
+                </PropertiesSection>
                 <PropertiesSection title="Transform" isOpen={this.openTransform} setIsOpen={bool => { this.openTransform = bool; }} onDoubleClick={this.CloseAll}>
                     {this.transformEditor}
                 </PropertiesSection>