diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 156 |
1 files changed, 110 insertions, 46 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index c6dccb4fb..11adf7435 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,12 +44,14 @@ 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; height: number; styleProvider?: StyleProviderFuncType; addDocTab: (doc: Doc, where: OpenWhere) => boolean; + addHotKey: (hotKey: string) => void; } @observer @@ -109,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; @@ -116,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; @@ -138,6 +142,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps Object.values(this._disposers).forEach(disposer => disposer?.()); } + @computed get isText() { + return this.selectedDoc?.type === DocumentType.RTF; + } @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } @@ -145,7 +152,16 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps return this.selectedDoc?.isGroup; } @computed get isStack() { - return [CollectionViewType.Masonry, CollectionViewType.Multicolumn, CollectionViewType.Multirow, CollectionViewType.Stacking, CollectionViewType.NoteTaking].includes(this.selectedDoc?.type_collection as CollectionViewType); + return [ + CollectionViewType.Masonry, + CollectionViewType.Multicolumn, + CollectionViewType.Multirow, + CollectionViewType.Stacking, + CollectionViewType.NoteTaking, + CollectionViewType.Card, + CollectionViewType.Carousel, + CollectionViewType.Grid, + ].includes(this.selectedDoc?.type_collection as CollectionViewType); } rtfWidth = () => (!this.selectedLayoutDoc ? 0 : Math.min(NumCast(this.selectedLayoutDoc?._width), this._props.width - 20)); @@ -977,22 +993,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'} @@ -1031,6 +1049,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 => { @@ -1084,6 +1106,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; }; @@ -1206,8 +1230,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps // prettier-ignore <div className="transform-editor"> {!this.isStack ? null : this.getNumber('Gap', ' px', 0, 200, NumCast(this.selectedDoc!.gridGap), this.setVal((doc: Doc, val: number) => { doc.gridGap = val; })) } - {!this.isStack ? null : this.getNumber('xMargin', ' px', 0, 500, NumCast(this.selectedDoc!.xMargin), this.setVal((doc: Doc, val: number) => { doc.xMargin = val; })) } - {!this.isStack ? null : this.getNumber('yMargin', ' px', 0, 500, NumCast(this.selectedDoc!.yMargin), this.setVal((doc: Doc, val: number) => { doc.yMargin = val; })) } + {!this.isStack && !this.isText? null : this.getNumber('xMargin', ' px', 0, 500, NumCast(this.selectedDoc!.xMargin), this.setVal((doc: Doc, val: number) => { doc.xMargin = val; })) } + {!this.isStack && !this.isText? null : this.getNumber('yMargin', ' px', 0, 500, NumCast(this.selectedDoc!.yMargin), this.setVal((doc: Doc, val: number) => { doc.yMargin = val; })) } {!this.isGroup ? null : this.getNumber('Padding', ' px', 0, 500, NumCast(this.selectedDoc!.xPadding), this.setVal((doc: Doc, val: number) => { doc.xPadding = doc.yPadding = val; })) } {this.isInk ? this.controlPointsButton : null} {this.getNumber('Width', ' px', 0, Math.max(1000, this.shapeWid), this.shapeWid, this.setVal((doc: Doc, val:number) => {this.shapeWid = val}), 1000, 1)} @@ -1287,18 +1311,39 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps return ( <PropertiesSection title="Filters" isOpen={this.openFilters} setIsOpen={action(bool => { this.openFilters = bool; })} onDoubleClick={this.CloseAll}> <div className="propertiesView-content filters" style={{ position: 'relative', height: 'auto' }}> - <FilterPanel Document={this.selectedDoc ?? Doc.ActiveDashboard!} /> + <FilterPanel Document={this.selectedDoc ?? Doc.ActiveDashboard!} addHotKey={this._props.addHotKey}/> </div> </PropertiesSection> ); // prettier-ignore } @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> @@ -1899,74 +1944,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, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> 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, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> 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, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> 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, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={type === DocumentType.AUDIO ? 'file-audio' : 'file-video'} /> {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> @@ -1974,6 +2019,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> ); } |