updated from master

1 files changed, 93 insertions, 42 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index c539b1d0a..bed96f600 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -2,7 +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 { 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';
@@ -44,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;
@@ -110,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;
@@ -117,6 +119,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     // Pres Trails booleans:
     @observable openPresTransitions: boolean = true;
     @observable openPresProgressivize: boolean = false;
+    @observable openPresMedia: boolean = false;
     @observable openPresVisibilityAndDuration: boolean = false;
     @observable openAddSlide: boolean = false;
     @observable openSlideOptions: boolean = false;
@@ -983,22 +986,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'}
@@ -1037,6 +1042,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 => {
@@ -1090,6 +1099,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;
     };
@@ -1300,11 +1311,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>
@@ -1905,74 +1937,74 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                         </div>
                     </div>
                     {!selectedItem ? null : (
-                        <div className="propertiesView-presentationTrails">
+                        <div className="propertiesView-section">
                             <div
-                                className="propertiesView-presentationTrails-title"
+                                className="propertiesView-sectionTitle"
                                 onPointerDown={action(() => {
-                                    this.openPresTransitions = !this.openPresTransitions;
+                                    this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration;
                                 })}
                                 style={{
                                     color: SnappingManager.userColor,
-                                    backgroundColor: this.openPresTransitions ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
+                                    backgroundColor: SnappingManager.userVariantColor,
                                 }}>
-                                &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> &nbsp; Transitions
+                                Visibility
                                 <div className="propertiesView-presentationTrails-title-icon">
-                                    <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg" />
+                                    <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg" />
                                 </div>
                             </div>
-                            {this.openPresTransitions ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.transitionDropdown}</div> : null}
+                            {this.openPresVisibilityAndDuration ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.visibilityDurationDropdown}</div> : null}
                         </div>
                     )}
                     {!selectedItem ? null : (
-                        <div className="propertiesView-presentationTrails">
+                        <div className="propertiesView-section">
                             <div
-                                className="propertiesView-presentationTrails-title"
+                                className="propertiesView-sectionTitle"
                                 onPointerDown={action(() => {
-                                    this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration;
+                                    this.openPresProgressivize = !this.openPresProgressivize;
                                 })}
                                 style={{
                                     color: SnappingManager.userColor,
-                                    backgroundColor: this.openPresVisibilityAndDuration ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
+                                    backgroundColor: SnappingManager.userVariantColor,
                                 }}>
-                                &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> &nbsp; Visibility
+                                Progressivize
                                 <div className="propertiesView-presentationTrails-title-icon">
-                                    <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg" />
+                                    <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg" />
                                 </div>
                             </div>
-                            {this.openPresVisibilityAndDuration ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.visibilityDurationDropdown}</div> : null}
+                            {this.openPresProgressivize ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.progressivizeDropdown}</div> : null}
                         </div>
                     )}
                     {!selectedItem ? null : (
-                        <div className="propertiesView-presentationTrails">
+                        <div className="propertiesView-section">
                             <div
-                                className="propertiesView-presentationTrails-title"
+                                className="propertiesView-sectionTitle"
                                 onPointerDown={action(() => {
-                                    this.openPresProgressivize = !this.openPresProgressivize;
+                                    this.openPresMedia = !this.openPresMedia;
                                 })}
                                 style={{
                                     color: SnappingManager.userColor,
-                                    backgroundColor: this.openPresProgressivize ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
+                                    backgroundColor: SnappingManager.userVariantColor,
                                 }}>
-                                &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> &nbsp; Progressivize
+                                Media
                                 <div className="propertiesView-presentationTrails-title-icon">
-                                    <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg" />
+                                    <FontAwesomeIcon icon={this.openPresMedia ? 'caret-down' : 'caret-right'} size="lg" />
                                 </div>
                             </div>
-                            {this.openPresProgressivize ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.progressivizeDropdown}</div> : null}
+                            {this.openPresMedia ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.mediaDropdown}</div> : null}
                         </div>
                     )}
                     {!selectedItem || (type !== DocumentType.VID && type !== DocumentType.AUDIO) ? null : (
-                        <div className="propertiesView-presentationTrails">
+                        <div className="propertiesView-section">
                             <div
-                                className="propertiesView-presentationTrails-title"
+                                className="propertiesView-sectionTitle"
                                 onPointerDown={action(() => {
                                     this.openSlideOptions = !this.openSlideOptions;
                                 })}
                                 style={{
                                     color: SnappingManager.userColor,
-                                    backgroundColor: this.openSlideOptions ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
+                                    backgroundColor: SnappingManager.userVariantColor,
                                 }}>
-                                &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={type === DocumentType.AUDIO ? 'file-audio' : 'file-video'} /> &nbsp; {type === DocumentType.AUDIO ? 'Audio Options' : 'Video Options'}
+                                {type === DocumentType.AUDIO ? 'file-audio' : 'file-video'}
                                 <div className="propertiesView-presentationTrails-title-icon">
                                     <FontAwesomeIcon icon={this.openSlideOptions ? 'caret-down' : 'caret-right'} size="lg" />
                                 </div>
@@ -1980,6 +2012,25 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                             {this.openSlideOptions ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.mediaOptionsDropdown}</div> : null}
                         </div>
                     )}
+                    {!selectedItem ? null : (
+                        <div className="propertiesView-section">
+                            <div
+                                className="propertiesView-sectionTitle"
+                                onPointerDown={action(() => {
+                                    this.openPresTransitions = !this.openPresTransitions;
+                                })}
+                                style={{
+                                    color: SnappingManager.userColor,
+                                    backgroundColor: SnappingManager.userVariantColor,
+                                }}>
+                                Transitions
+                                <div className="propertiesView-presentationTrails-title-icon">
+                                    <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg" />
+                                </div>
+                            </div>
+                            {this.openPresTransitions ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.transitionDropdown}</div> : null}
+                        </div>
+                    )}
                 </div>
             );
         }