changed docking view thumbnails to be imagefields, not docs. allowed docking view to be nested to avoid crashes before when they became nested. fixed dropping docs with dropAction of 'alias' to never remove them. fixed clearing startLink to not deselect when link is already started

1 files changed, 24 insertions, 8 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 10b54edad..31c839af7 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -6,7 +6,7 @@ import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
-import { Cast, NumCast, StrCast } from '../../../fields/Types';
+import { Cast, ImageCast, NumCast, StrCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { inheritParentAcls } from '../../../fields/util';
 import { emptyFunction, incrementTitleCopy } from '../../../Utils';
@@ -56,7 +56,7 @@ export class CollectionDockingView extends CollectionSubView() {
 
     constructor(props: SubCollectionViewProps) {
         super(props);
-        runInAction(() => (CollectionDockingView.Instance = this));
+        if (this.props.renderDepth < 0) runInAction(() => (CollectionDockingView.Instance = this));
         //Why is this here?
         (window as any).React = React;
         (window as any).ReactDOM = ReactDOM;
@@ -73,7 +73,7 @@ export class CollectionDockingView extends CollectionSubView() {
     public StartOtherDrag = (e: { pageX: number; pageY: number }, dragDocs: Doc[], finishDrag?: (aborted: boolean) => void) => {
         this._flush = this._flush ?? UndoManager.StartBatch('golden layout drag');
         const config = dragDocs.length === 1 ? CollectionDockingView.makeDocumentConfig(dragDocs[0]) : { type: 'row', content: dragDocs.map(doc => CollectionDockingView.makeDocumentConfig(doc)) };
-        const dragSource = this._goldenLayout.createDragSource(document.createElement('div'), config);
+        const dragSource = CollectionDockingView.Instance?._goldenLayout.createDragSource(document.createElement('div'), config);
         this.tabDragStart(dragSource, finishDrag);
         dragSource._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: emptyFunction, button: 0 });
     };
@@ -395,10 +395,10 @@ export class CollectionDockingView extends CollectionSubView() {
             const _height = Number(getComputedStyle(content).height.replace('px', ''));
             return CollectionFreeFormView.UpdateIcon(this.layoutDoc[Id] + '-icon' + new Date().getTime(), content, _width, _height, _width, _height, 0, 1, true, this.layoutDoc[Id] + '-icon', (iconFile, _nativeWidth, _nativeHeight) => {
                 const img = Docs.Create.ImageDocument(new ImageField(iconFile), { title: this.rootDoc.title + '-icon', _width, _height, _nativeWidth, _nativeHeight });
-                const proto = Cast(img.proto, Doc, null)!;
-                proto['data-nativeWidth'] = _width;
-                proto['data-nativeHeight'] = _height;
-                this.dataDoc.thumb = img;
+                const proto = this.dataDoc; // Cast(img.proto, Doc, null)!;
+                proto['thumb-nativeWidth'] = _width;
+                proto['thumb-nativeHeight'] = _height;
+                this.dataDoc.thumb = new ImageField(iconFile);
             });
         }
     }
@@ -532,7 +532,23 @@ export class CollectionDockingView extends CollectionSubView() {
     };
 
     render() {
-        return <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} ref={this._containerRef} />;
+        const href = ImageCast(this.rootDoc.thumb)?.url.href;
+        return this.props.renderDepth > -1 ? (
+            <div>
+                {href ? (
+                    <img
+                        style={{ background: 'white', top: 0, position: 'absolute' }}
+                        src={href} // + '?d=' + (new Date()).getTime()}
+                        width={this.props.PanelWidth()}
+                        height={this.props.PanelHeight()}
+                    />
+                ) : (
+                    <p>nested dashboards has no thumbnail</p>
+                )}
+            </div>
+        ) : (
+            <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} ref={this._containerRef} />
+        );
     }
 }