From 80c4e34efd5ce34dfa4c3f0d1e55fd2ecf9d6a4d Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Sun, 8 Dec 2024 00:59:21 -0500
Subject: frontend and image creation working for drawingToImage()

---
 src/client/views/PropertiesView.tsx | 80 ++++++++++++++++++++-----------------
 1 file changed, 43 insertions(+), 37 deletions(-)

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

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 7e8087808..4e12e0b2d 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -3,7 +3,6 @@ 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';
@@ -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;
@@ -141,7 +141,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 +830,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(
@@ -981,19 +985,35 @@ 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);
-                            }, 'colorWithGPT')}
-                        />
+                    <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, 'fill in the details of this image');
+                                }, 'createImage')}
+                            />
+                        </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 +1042,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);
@@ -1130,6 +1144,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 +1154,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} />
-- 
cgit v1.2.3-70-g09d2