1 files changed, 30 insertions, 10 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index d763753a5..f5c6a9273 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -22,7 +22,6 @@ import { DocumentType } from '../../documents/DocumentTypes';
 import { Networking } from '../../Network';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager } from '../../util/DragManager';
-import { SnappingManager } from '../../util/SnappingManager';
 import { undoBatch } from '../../util/UndoManager';
 import { ContextMenu } from '../../views/ContextMenu';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
@@ -37,7 +36,6 @@ import { FieldView, FieldViewProps } from './FieldView';
 import './ImageBox.scss';
 import { PinProps, PresBox } from './trails';
 import React = require('react');
-import Color = require('color');
 
 export const pageSchema = createSchema({
     googlePhotosUrl: 'string',
@@ -56,6 +54,17 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(ImageBox, fieldKey);
     }
+
+    @observable public static imageRootDoc: Doc | undefined;
+    @observable public static imageEditorOpen: boolean = false;
+    @observable public static imageEditorSource: string = '';
+    @observable public static addDoc: ((doc: Doc | Doc[], annotationKey?: string) => boolean) | undefined;
+    @action public static setImageEditorOpen(open: boolean) {
+        ImageBox.imageEditorOpen = open;
+    }
+    @action public static setImageEditorSource(source: string) {
+        ImageBox.imageEditorSource = source;
+    }
     private _ignoreScroll = false;
     private _forcedScroll = false;
     private _dropDisposer?: DragManager.DragDropDisposer;
@@ -80,10 +89,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             this._getAnchor?.(this._savedAnnotations, false) ?? // use marquee anchor, otherwise, save zoom/pan as anchor
             Docs.Create.ConfigDocument({
                 title: 'ImgAnchor:' + this.rootDoc.title,
-                presPanX: NumCast(this.layoutDoc._freeform_panX),
-                presPanY: NumCast(this.layoutDoc._freeform_panY),
-                presViewScale: Cast(this.layoutDoc._freeform_scale, 'number', null),
-                presTransition: 1000,
+                config_panX: NumCast(this.layoutDoc._freeform_panX),
+                config_panY: NumCast(this.layoutDoc._freeform_panY),
+                config_viewScale: Cast(this.layoutDoc._freeform_scale, 'number', null),
                 annotationOn: this.rootDoc,
             });
         if (anchor) {
@@ -248,6 +256,16 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             funcs.push({ description: `Show ${this.layoutDoc._showFullRes ? 'Dynamic Res' : 'Full Res'}`, event: this.resolution, icon: 'expand' });
             funcs.push({ description: 'Set Native Pixel Size', event: this.setNativeSize, icon: 'expand-arrows-alt' });
             funcs.push({ description: 'Copy path', event: () => Utils.CopyText(this.choosePath(field.url)), icon: 'copy' });
+            funcs.push({
+                description: 'Open Image Editor',
+                event: action(() => {
+                    ImageBox.setImageEditorOpen(true);
+                    ImageBox.setImageEditorSource(this.choosePath(field.url));
+                    ImageBox.addDoc = this.props.addDocument;
+                    ImageBox.imageRootDoc = this.rootDoc;
+                }),
+                icon: 'pencil-alt',
+            });
             if (!Doc.noviceMode) {
                 funcs.push({ description: 'Export to Google Photos', event: () => GooglePhotos.Transactions.UploadImages([this.props.Document]), icon: 'caret-square-right' });
 
@@ -289,13 +307,14 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     @computed private get url() {
         const data = Cast(this.dataDoc[this.fieldKey], ImageField);
-        return data ? data.url.href : undefined;
+        return data ? data.url?.href : undefined;
     }
 
     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 (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);
@@ -320,7 +339,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         if (!(data instanceof ImageField)) {
             return null;
         }
-        const primary = data.url.href;
+        const primary = data.url?.href;
         if (primary.includes(window.location.origin)) {
             return null;
         }
@@ -414,7 +433,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @computed get content() {
         TraceMobx();
 
-        const backAlpha = DashColor(this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor)).alpha();
+        const backColor = DashColor(this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor));
+        const backAlpha = backColor.red() === 0 && backColor.green() === 0 && backColor.blue() === 0 ? backColor.alpha() : 1;
         const srcpath = this.layoutDoc.hideImage ? '' : this.paths[0];
         const fadepath = this.layoutDoc.hideImage ? '' : this.paths.lastElement();
         const { nativeWidth, nativeHeight, nativeOrientation } = this.nativeSize;