2 files changed, 97 insertions, 29 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index f0a31a8c6..1b9627bb6 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -266,7 +266,8 @@ export class CollectionFreeFormLinkView extends ObservableReactComponent<Collect
         const linkSize = Doc.noviceMode || currRelationshipIndex === -1 || currRelationshipIndex >= linkRelationshipSizes.length ? -1 : linkRelationshipSizes[currRelationshipIndex];
 
         //access stroke color using index of the relationship in the color list (default black)
-        const stroke = currRelationshipIndex === -1 || currRelationshipIndex >= linkColorList.length ? StrCast(link._backgroundColor, 'black') : linkColorList[currRelationshipIndex];
+        // const stroke = currRelationshipIndex === -1 || currRelationshipIndex >= linkColorList.length ? StrCast(link._backgroundColor, 'black') : linkColorList[currRelationshipIndex];
+        const stroke = link.link_color ? Field.toString(link.link_color as any as Field) : '#449ef7';
         // const hexStroke = this.rgbToHex(stroke)
 
         //calculate stroke width/thickness based on the relative importance of the relationshipship (i.e. how many links the relationship has)
@@ -305,13 +306,14 @@ export class CollectionFreeFormLinkView extends ObservableReactComponent<Collect
                     d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`}
                     markerEnd={link.link_displayArrow ? `url(#${link[Id] + 'arrowhead'})` : ''}
                 />
-                {textX === undefined || !linkDescription ? null : (
-                    <text filter={`url(#${link[Id] + 'background'})`} className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown}>
-                        <tspan>&nbsp;</tspan>
-                        <tspan dy="2">{linkDescription.substring(0, 50) + (linkDescription.length > 50 ? '...' : '')}</tspan>
-                        <tspan dy="2">&nbsp;</tspan>
-                    </text>
-                )}
+                {link.show_description &&
+                    (textX === undefined || !linkDescription ? null : (
+                        <text filter={`url(#${link[Id] + 'background'})`} className="collectionfreeformlinkview-linkText" x={textX} y={textY} onPointerDown={this.pointerDown}>
+                            <tspan>&nbsp;</tspan>
+                            <tspan dy="2">{linkDescription.substring(0, 50) + (linkDescription.length > 50 ? '...' : '')}</tspan>
+                            <tspan dy="2">&nbsp;</tspan>
+                        </text>
+                    ))}
             </>
         );
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 53dc389b4..818c754c3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -26,7 +26,7 @@ import { FollowLinkScript } from '../../../util/LinkFollower';
 import { ReplayMovements } from '../../../util/ReplayMovements';
 import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
 import { SelectionManager } from '../../../util/SelectionManager';
-import { freeformScrollMode } from '../../../util/SettingsManager';
+import { freeformScrollMode, SettingsManager } from '../../../util/SettingsManager';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
 import { undoBatch, UndoManager } from '../../../util/UndoManager';
@@ -817,26 +817,23 @@ 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 }[]);
     };
 
     /**
@@ -1631,6 +1628,75 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
     };
 
+    printDoc = (doc: Doc) => {
+        console.log('Printing keys');
+        Object.keys(doc).forEach(key => {
+            console.log(key, ':', doc[key]);
+        });
+    };
+
+    @action
+    openProperties = () => {
+        SettingsManager.propertiesWidth = 300;
+    };
+
+    choosePath(url: URL) {
+        if (!url?.href) return '';
+        const lower = url.href.toLowerCase();
+        if (url.protocol === 'data') return url.href;
+        if (url.href.indexOf(window.location.origin) === -1 && url.href.indexOf('dashblobstore') === -1) return Utils.CorsProxy(url.href);
+        if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower)) return `/assets/unknown-file-icon-hi.png`;
+
+        const ext = extname(url.href);
+        return url.href.replace(ext, '_m' + ext);
+    }
+
+    // gpt styling
+    @action
+    gptStyling = async () => {
+        // clear it in properties instead
+        if (!PropertiesView.Instance) return;
+        this.openProperties();
+        PropertiesView.Instance.setGeneratedStyles([]);
+        PropertiesView.Instance.selectedStyle = -1;
+        PropertiesView.Instance.useImageData = false;
+
+        console.log('Title', this.rootDoc.title);
+        console.log('bgcolor', this.layoutDoc._backgroundColor);
+        // doc.backgroundColor
+        const inputDocs = this.childDocs.filter(doc => doc.type == 'rich text');
+        const imgDocs = this.childDocs.filter(doc => doc.type == 'image');
+        const imgUrls = imgDocs.map(doc => this.choosePath((doc.data as ImageField).url));
+
+        const imageElements = await ExtractColors.loadImagesUrl(imgUrls);
+        const colors = await Promise.all(imageElements.map(elem => ExtractColors.getImgColors(elem)));
+        let colorHexes = colors
+            .reduce((acc, curr) => acc.concat(curr), [])
+            .map(color => color.hex)
+            .slice(0, 10);
+        console.log('Hexes', colorHexes);
+
+        PropertiesView.Instance?.setInputDocs(inputDocs);
+
+        // also pass it colors
+        const gptInput: StyleInputDocument[] = inputDocs.map((doc, i) => ({
+            id: i,
+            textContent: (doc.text as RichTextField)?.Text,
+            textSize: 16,
+        }));
+
+        const collectionDescription = StrCast(this.rootDoc.title);
+
+        const styleInput = {
+            collectionDescription,
+            documents: gptInput,
+            imageColors: colorHexes,
+        };
+
+        PropertiesView.Instance.styleInput = styleInput;
+        PropertiesView.Instance.gptStyling();
+    };
+
     onContextMenu = (e: React.MouseEvent) => {
         if (this._props.isAnnotationOverlay || !ContextMenu.Instance) return;