diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 87 |
1 files changed, 51 insertions, 36 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 8acfe6585..ae8abea2c 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -45,6 +45,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; @@ -141,7 +142,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps } @computed get isText() { - return [DocumentType.RTF, DocumentType.EQUATION, DocumentType.LABEL].includes(this.selectedDoc?.type as DocumentType); + return this.selectedDoc?.type === DocumentType.RTF; } @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; @@ -830,8 +831,12 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps set shapeWid(value) { this.selectedDoc && (this.selectedDoc._width = Math.round(value * 100) / 100); } // prettier-ignore @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, 1); } // prettier-ignore - set strokeThk(value) { this.selectedStrokes.forEach(doc => { doc[DocData].stroke_width = 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; + }); + } @computed get hgtInput() { return this.inputBoxDuo( @@ -978,22 +983,40 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps 10, 1 ); + const strength = this.getNumber('Reference Strength', '', 1, 100, this.refStrength, (val: number) => { + !isNaN(val) && (this.refStrength = val); + }); 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 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, 'fill in the details of this image'), 'createImage')} + /> + </div> + <div className="strength-slider">{strength}</div> + <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"> @@ -1022,13 +1045,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 +1057,12 @@ 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.selectedStrokes.forEach(doc => { + doc[DocData].drawing_refStrength = Number(value); + }); + } @computed get smoothAmt() { return Number(this.getField('stroke_smoothAmount') || '5'); } // prettier-ignore set smoothAmt(value) { this.selectedStrokes.forEach(doc => { @@ -1130,6 +1153,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 +1163,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} /> |