From 9305752405807ac736795185ae30c6955f5b483f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 2 Apr 2025 10:18:57 -0400
Subject: fixed image box overlays to allow for transparent pngs.  allowed
 hover over background for image alternats to be set.

---
 src/client/views/nodes/ImageBox.scss |  1 -
 src/client/views/nodes/ImageBox.tsx  | 18 ++++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 3d6942e6f..36abf707c 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -114,7 +114,6 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        background: black;
         display: flex;
         flex-direction: row;
         align-items: center;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index f2eacb35c..75c298dc6 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -46,6 +46,7 @@ import { FocusViewOptions } from './FocusViewOptions';
 import './ImageBox.scss';
 import { OpenWhere } from './OpenWhere';
 import { RichTextField } from '../../../fields/RichTextField';
+import { ComputedField } from '../../../fields/ScriptField';
 
 const DefaultPath = '/assets/unknown-file-icon-hi.png';
 export class ImageEditorData {
@@ -210,6 +211,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 if (de.metaKey || hitDropTarget(e.target as HTMLElement, this._overlayIconRef.current)) {
                     added = de.complete.docDragData.droppedDocuments.reduce((last: boolean, drop: Doc) => {
                         this.layoutDoc[this.fieldKey + '_usePath'] = 'alternate:hover';
+                        this.Document.$backgroundColor_alternate = ComputedField.MakeFunction('this.data_alternates[0]?.$backgroundColor');
                         return last && Doc.AddDocToList(this.dataDoc, this.fieldKey + '_alternates', drop);
                     }, true);
                 } else if (hitDropTarget(e.target as HTMLElement, this._regenerateIconRef.current)) {
@@ -541,11 +543,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @computed get content() {
         TraceMobx();
 
+        const usePath = StrCast(this.Document[this.fieldKey + '_usePath']);
+        const alternate = '_' + usePath.replace(':hover', '');
+        const altColor = DashColor(StrCast(this.Document[this.fieldKey + alternate], StrCast(this.Document['$backgroundColor' + alternate], 'black')));
+
         const backColor = DashColor((this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string) ?? Colors.WHITE);
         // allow use case where the image is transparent when the alpha value is to smallest possible value from UI (alpha = 1 out of 255)
         const backAlpha = backColor.alpha() < 0.015 && backColor.alpha() > 0 ? backColor.alpha() : 1;
-        const srcpath = this.layoutDoc.hideImage ? '' : this.paths[0];
-        const fadepath = this.layoutDoc.hideImage ? '' : this.paths.lastElement();
+        const fadepath = this.layoutDoc.hideImage ? '' : this.paths[0];
+        const srcpath = this.layoutDoc.hideImage ? '' : this.paths.lastElement();
         const { nativeWidth, nativeHeight /* , nativeOrientation */ } = this.nativeSize;
         const rotation = NumCast(this.dataDoc[this.fieldKey + '_rotation']);
         const aspect = rotation % 180 ? nativeHeight / nativeWidth : 1;
@@ -579,14 +585,14 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         key="paths"
                         src={srcpath}
                         style={{ transform, transformOrigin }}
-                        onError={action(e => {
-                            this._error = e.toString();
-                        })}
+                        onError={action(e => (this._error = e.toString()))}
                         draggable={false}
                         width={nativeWidth}
                     />
                     {fadepath === srcpath ? null : (
-                        <div className={`imageBox-fadeBlocker${this.usingAlternate ? '-hover' : ''}`} style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms') }}>
+                        <div
+                            className={`imageBox-fadeBlocker${!this.usingAlternate ? '-hover' : ''}`}
+                            style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms'), background: altColor.alpha() === 0 ? 'transparent' : altColor.toString() }}>
                             <img alt="" className="imageBox-fadeaway" key="fadeaway" src={fadepath} style={{ transform, transformOrigin }} draggable={false} width={nativeWidth} />
                         </div>
                     )}
-- 
cgit v1.2.3-70-g09d2