Merge branch 'master' into Merge

1 files changed, 41 insertions, 82 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 279317f49..017ef7191 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -436,6 +436,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
     getScrollHeight = () => (this._props.fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined);
 
+    @computed get usingAlternate() {
+        const usePath = StrCast(this.Document[this.fieldKey + '_usePath']);
+        return 'alternate' === usePath || ('alternate:hover' === usePath && this._isHovering) || (':hover' === usePath && !this._isHovering);
+    }
+
     @computed get nativeSize() {
         TraceMobx();
         if (this.paths.length && this.paths[0].includes('icon-hi')) return { nativeWidth: NumCast(this.layoutDoc._width), nativeHeight: NumCast(this.layoutDoc._height), nativeOrientation: 0 };
@@ -471,10 +476,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         <span style={{ color: usePath === 'alternate' ? 'black' : undefined }}>
                             <em>alternate, </em>
                         </span>
-                        and show
                         <span style={{ color: usePath === 'alternate:hover' ? 'black' : undefined }}>
                             <em> alternate on hover</em>
                         </span>
+                        and show
+                        <span style={{ color: usePath === ':hover' ? 'black' : undefined }}>
+                            <em> primary on hover</em>
+                        </span>
                     </div>
                 }>
                 <div
@@ -482,7 +490,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     ref={this._overlayIconRef}
                     onPointerDown={e =>
                         setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, () => {
-                            this.layoutDoc[`_${this.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined;
+                            this.layoutDoc[`_${this.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : usePath === 'alternate:hover' ? ':hover' : undefined;
                         })
                     }
                     style={{
@@ -527,7 +535,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 .filter(url => url)
                 .map(url => this.choosePath(url)) ?? []; // acc  ess the primary layout data of the alternate documents
         const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths;
-        return paths.length ? paths : [defaultUrl.href];
+        return paths.length ? paths.reverse() : [defaultUrl.href];
     }
 
     @computed get content() {
@@ -552,7 +560,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             transformOrigin = 'right top';
             transform = `translate(-100%, 0%) rotate(${rotation}deg) scale(${aspect})`;
         }
-        const usePath = this.layoutDoc[`_${this.fieldKey}_usePath`];
 
         return (
             <div
@@ -571,7 +578,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         ref={action((r: HTMLImageElement | null) => (this.imageRef = r))}
                         key="paths"
                         src={srcpath}
-                        style={{ transform, transformOrigin, objectFit: 'fill', height: '100%' }}
+                        style={{ transform, transformOrigin }}
                         onError={action(e => {
                             this._error = e.toString();
                         })}
@@ -579,7 +586,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         width={nativeWidth}
                     />
                     {fadepath === srcpath ? null : (
-                        <div className={`imageBox-fadeBlocker${(this._isHovering && usePath === 'alternate:hover') || usePath === 'alternate' ? '-hover' : ''}`} style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms') }}>
+                        <div className={`imageBox-fadeBlocker${this.usingAlternate ? '-hover' : ''}`} style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms') }}>
                             <img alt="" className="imageBox-fadeaway" key="fadeaway" src={fadepath} style={{ transform, transformOrigin }} draggable={false} width={nativeWidth} />
                         </div>
                     )}
@@ -619,37 +626,24 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return (
             <div className="imageBox-aiView">
                 <div className="imageBox-aiView-regenerate">
-                    <span className="imageBox-aiView-firefly">Firefly:</span>
+                    <span className="imageBox-aiView-firefly" style={{ color: SnappingManager.userColor }}>
+                        Firefly:
+                    </span>
                     <input
+                        style={{ color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}
                         className="imageBox-aiView-input"
                         aria-label="Edit instructions input"
                         type="text"
-                        value={this._regenInput}
+                        value={this._regenInput || StrCast(this.Document.title)}
                         onChange={action(e => this._canInteract && (this._regenInput = e.target.value))}
                         placeholder={this._regenInput || StrCast(this.Document.title)}
                     />
-                    <div className="imageBox-aiView-strength">
-                        <span className="imageBox-aiView-similarity">Similarity</span>
-                        <Slider
-                            className="imageBox-aiView-slider"
-                            sx={{
-                                '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
-                                '& .MuiSlider-rail': { color: SettingsManager.userBackgroundColor },
-                                '& .MuiSlider-thumb': { color: SettingsManager.userVariantColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
-                            }}
-                            min={0}
-                            max={100}
-                            step={1}
-                            size="small"
-                            value={this._fireflyRefStrength}
-                            onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))}
-                            valueLabelDisplay="auto"
-                        />
-                    </div>
                     <div className="imageBox-aiView-regenerate-createBtn">
                         <Button
                             text="Create"
-                            type={Type.SEC}
+                            type={Type.TERT}
+                            color={SnappingManager.userColor}
+                            background={SnappingManager.userBackgroundColor}
                             // style={{ alignSelf: 'flex-end' }}
                             icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
                             iconPlacement="right"
@@ -680,61 +674,24 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         />
                     </div>
                 </div>
-                <div className="imageBox-aiView-options">
-                    <span className="imageBox-aiView-subtitle"> More: </span>
-                    <Button
-                        type={Type.TERT}
-                        text="Get Text"
-                        icon={<FontAwesomeIcon icon="font" />}
-                        color={SettingsManager.userBackgroundColor}
-                        iconPlacement="right"
-                        onClick={() => {
-                            Networking.PostToServer('/queryFireflyImageText', {
-                                file: (file => {
-                                    const ext = extname(file);
-                                    return file.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
-                                })(ImageCast(this.Document[Doc.LayoutFieldKey(this.Document)])?.url.href),
-                            }).then(text => alert(text));
-                        }}
-                    />
-                    <Button
-                        type={Type.TERT}
-                        text="Generative Fill"
-                        icon={<FontAwesomeIcon icon="fill" />}
-                        color={SettingsManager.userBackgroundColor}
-                        iconPlacement="right"
-                        onClick={action(() => {
-                            ImageEditorData.Open = true;
-                            ImageEditorData.Source = (field && this.choosePath(field.url)) || '';
-                            ImageEditorData.AddDoc = this._props.addDocument;
-                            ImageEditorData.RootDoc = this.Document;
-                        })}
-                    />
-                    <Button
-                        type={Type.TERT}
-                        text="Expand"
-                        icon={<FontAwesomeIcon icon="expand" />}
-                        color={SettingsManager.userBackgroundColor}
-                        iconPlacement="right"
-                        onClick={() => {
-                            Networking.PostToServer('/expandImage', {
-                                prompt: 'sunny skies',
-                                file: (file => {
-                                    const ext = extname(file);
-                                    return file.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
-                                })(ImageCast(this.Document[Doc.LayoutFieldKey(this.Document)])?.url.href),
-                            }).then(res => {
-                                const info = res as Upload.ImageInformation;
-                                const img = Docs.Create.ImageDocument(info.accessPaths.agnostic.client, { title: 'expand:' + this.Document.title });
-                                DocUtils.assignImageInfo(info, img);
-                                const genratedDocs = this.Document.generatedDocs
-                                    ? DocCast(this.Document.generatedDocs)
-                                    : Docs.Create.MasonryDocument([], { _width: 400, _height: 400, x: NumCast(this.Document.x) + NumCast(this.Document.width), y: NumCast(this.Document.y) });
-                                Doc.AddDocToList(genratedDocs, undefined, img);
-                                this.Document[DocData].generatedDocs = genratedDocs;
-                                if (!DocumentView.getFirstDocumentView(genratedDocs)) this._props.addDocTab(genratedDocs, OpenWhere.addRight);
-                            });
+                <div className="imageBox-aiView-strength">
+                    <span className="imageBox-aiView-similarity" style={{ color: SnappingManager.userColor }}>
+                        Similarity
+                    </span>
+                    <Slider
+                        className="imageBox-aiView-slider"
+                        sx={{
+                            '& .MuiSlider-track': { color: SettingsManager.userColor },
+                            '& .MuiSlider-rail': { color: SettingsManager.userBackgroundColor },
+                            '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
                         }}
+                        min={0}
+                        max={100}
+                        step={1}
+                        size="small"
+                        value={this._fireflyRefStrength}
+                        onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))}
+                        valueLabelDisplay="auto"
                     />
                 </div>
             </div>
@@ -782,11 +739,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return { width, height };
     };
     savedAnnotations = () => this._savedAnnotations;
-
     render() {
         TraceMobx();
         const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding) as string;
         const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / (this._props.NativeDimScaling?.() || 1)}px` : borderRad;
+        const alts = DocListCast(this.dataDoc[this.fieldKey + '_alternates']);
+        const doc = this.usingAlternate ? (alts.lastElement() ?? this.Document) : this.Document;
         return (
             <div
                 className="imageBox"
@@ -811,6 +769,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 <CollectionFreeFormView
                     ref={this._ffref}
                     {...this._props}
+                    Document={doc}
                     setContentViewBox={emptyFunction}
                     NativeWidth={returnZero}
                     NativeHeight={returnZero}