fix: got styling to work again

1 files changed, 29 insertions, 20 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 818c754c3..8e415a407 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -53,6 +53,11 @@ import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannable
 import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors';
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
+import { PropertiesView } from '../../PropertiesView';
+import { ExtractColors } from '../../ExtractColors';
+import { StyleInputDocument } from '../../../apis/gpt/customization';
+import { RichTextField } from '../../../../fields/RichTextField';
+import { extname } from 'path';
 
 export interface collectionFreeformViewProps {
     NativeWidth?: () => number;
@@ -817,23 +822,26 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     eraserMax.X >= inkViewBounds.left &&
                     eraserMax.Y >= inkViewBounds.top
             )
-            .reduce((intersections, { inkStroke, inkView }) => {
-                const { inkData } = inkStroke.inkScaledData();
-                // Convert from screen space to ink space for the intersection.
-                const prevPointInkSpace = inkStroke.ptFromScreen(lastPoint);
-                const currPointInkSpace = inkStroke.ptFromScreen(currPoint);
-                for (var i = 0; i < inkData.length - 3; i += 4) {
-                    const rawIntersects = InkField.Segment(inkData, i).intersects({
-                        // compute all unique intersections
-                        p1: { x: prevPointInkSpace.X, y: prevPointInkSpace.Y },
-                        p2: { x: currPointInkSpace.X, y: currPointInkSpace.Y },
-                    });
-                    const intersects = Array.from(new Set(rawIntersects as (number | string)[])); // convert to more manageable union array type
-                    // return tuples of the inkingStroke intersected, and the t value of the intersection
-                    intersections.push(...intersects.map(t => ({ inkView, t: +t + Math.floor(i / 4) }))); // convert string t's to numbers and add start of curve segment to convert from local t value to t value along complete curve
-                }
-                return intersections;
-            }, [] as { t: number; inkView: DocumentView }[]);
+            .reduce(
+                (intersections, { inkStroke, inkView }) => {
+                    const { inkData } = inkStroke.inkScaledData();
+                    // Convert from screen space to ink space for the intersection.
+                    const prevPointInkSpace = inkStroke.ptFromScreen(lastPoint);
+                    const currPointInkSpace = inkStroke.ptFromScreen(currPoint);
+                    for (var i = 0; i < inkData.length - 3; i += 4) {
+                        const rawIntersects = InkField.Segment(inkData, i).intersects({
+                            // compute all unique intersections
+                            p1: { x: prevPointInkSpace.X, y: prevPointInkSpace.Y },
+                            p2: { x: currPointInkSpace.X, y: currPointInkSpace.Y },
+                        });
+                        const intersects = Array.from(new Set(rawIntersects as (number | string)[])); // convert to more manageable union array type
+                        // return tuples of the inkingStroke intersected, and the t value of the intersection
+                        intersections.push(...intersects.map(t => ({ inkView, t: +t + Math.floor(i / 4) }))); // convert string t's to numbers and add start of curve segment to convert from local t value to t value along complete curve
+                    }
+                    return intersections;
+                },
+                [] as { t: number; inkView: DocumentView }[]
+            );
     };
 
     /**
@@ -1637,7 +1645,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     @action
     openProperties = () => {
-        SettingsManager.propertiesWidth = 300;
+        SettingsManager.Instance.propertiesWidth = 300;
     };
 
     choosePath(url: URL) {
@@ -1661,7 +1669,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         PropertiesView.Instance.selectedStyle = -1;
         PropertiesView.Instance.useImageData = false;
 
-        console.log('Title', this.rootDoc.title);
+        console.log('Title', this.Document.title);
         console.log('bgcolor', this.layoutDoc._backgroundColor);
         // doc.backgroundColor
         const inputDocs = this.childDocs.filter(doc => doc.type == 'rich text');
@@ -1685,7 +1693,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             textSize: 16,
         }));
 
-        const collectionDescription = StrCast(this.rootDoc.title);
+        const collectionDescription = StrCast(this.Document.title);
 
         const styleInput = {
             collectionDescription,
@@ -1732,6 +1740,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             optionItems.push({ description: (this._showAnimTimeline ? 'Close' : 'Open') + ' Animation Timeline', event: action(() => (this._showAnimTimeline = !this._showAnimTimeline)), icon: 'eye' });
         this._props.renderDepth && optionItems.push({ description: 'Use Background Color as Default', event: () => (Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor)), icon: 'palette' });
         this._props.renderDepth && optionItems.push({ description: 'Fit Content Once', event: this.fitContentOnce, icon: 'object-group' });
+        this._props.renderDepth && optionItems.push({ description: 'Style with AI', event: this.gptStyling, icon: 'paint-brush' });
         if (!Doc.noviceMode) {
             optionItems.push({ description: (!Doc.NativeWidth(this.layoutDoc) || !Doc.NativeHeight(this.layoutDoc) ? 'Freeze' : 'Unfreeze') + ' Aspect', event: this.toggleNativeDimensions, icon: 'snowflake' });
         }