1 files changed, 33 insertions, 37 deletions
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index 4a22766cc..23d934edb 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -3,12 +3,11 @@ import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { factory } from 'typescript';
-import { Field } from '../../../fields/Doc';
+import { FieldType } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
-import { DocumentManager } from '../../util/DocumentManager';
+import { StrCast } from '../../../fields/Types';
 import { Transformer, ts } from '../../util/Scripting';
-import { SettingsManager } from '../../util/SettingsManager';
-import { LightboxView } from '../LightboxView';
+import { SnappingManager } from '../../util/SnappingManager';
 import { ObservableReactComponent } from '../ObservableReactComponent';
 import { DocumentView } from './DocumentView';
 
@@ -24,26 +23,23 @@ export class DocumentIcon extends ObservableReactComponent<DocumentIconProps> {
         makeObservable(this);
     }
 
-    static get DocViews() {
-        return LightboxView.LightboxDoc ? DocumentManager.Instance.DocumentViews.filter(v => LightboxView.Contains(v)) : DocumentManager.Instance.DocumentViews;
-    }
     render() {
-        const view = this._props.view;
-        const { left, top, right, bottom } = view.getBounds || { left: 0, top: 0, right: 0, bottom: 0 };
+        const { view } = this._props;
+        const { left, top, right } = view.getBounds || { left: 0, top: 0, right: 0, bottom: 0 };
 
         return (
             <div
                 className="documentIcon-outerDiv"
-                onPointerEnter={action(e => (this._hovered = true))}
-                onPointerLeave={action(e => (this._hovered = false))}
+                onPointerEnter={action(() => { this._hovered = true; })} // prettier-ignore
+                onPointerLeave={action(() => { this._hovered = false; })} // prettier-ignore
                 style={{
                     pointerEvents: 'all',
                     opacity: this._hovered ? 0.3 : 1,
                     position: 'absolute',
-                    background: SettingsManager.userBackgroundColor,
+                    background: SnappingManager.userBackgroundColor,
                     transform: `translate(${(left + right) / 2}px, ${top}px)`,
                 }}>
-                <Tooltip title={<>{this._props.view.Document.title}</>}>
+                <Tooltip title={<div>{StrCast(this._props.view.Document?.title)}</div>}>
                     <p>d{this._props.index}</p>
                 </Tooltip>
             </div>
@@ -56,40 +52,40 @@ export class DocumentIconContainer extends React.Component {
     public static getTransformer(): Transformer {
         const usedDocuments = new Set<number>();
         return {
-            transformer: context => {
-                return root => {
-                    function visit(node: ts.Node) {
-                        node = ts.visitEachChild(node, visit, context);
+            transformer: context => root => {
+                function visit(nodeIn: ts.Node) {
+                    const node = ts.visitEachChild(nodeIn, visit, context);
 
-                        if (ts.isIdentifier(node)) {
-                            const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node;
-                            const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node;
-                            const isntParameter = !ts.isParameter(node.parent);
-                            if (isntPropAccess && isntPropAssign && isntParameter && !(node.text in globalThis)) {
-                                const match = node.text.match(/d([0-9]+)/);
-                                if (match) {
-                                    const m = parseInt(match[1]);
-                                    const doc = DocumentIcon.DocViews[m].Document;
-                                    usedDocuments.add(m);
-                                    return factory.createIdentifier(`idToDoc("${doc[Id]}")`);
-                                }
+                    if (ts.isIdentifier(node)) {
+                        const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node;
+                        const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node;
+                        const isntParameter = !ts.isParameter(node.parent);
+                        if (isntPropAccess && isntPropAssign && isntParameter && !(node.text in globalThis)) {
+                            const match = node.text.match(/d([0-9]+)/);
+                            if (match) {
+                                const m = parseInt(match[1]);
+                                const doc = DocumentView.allViews()[m].Document;
+                                usedDocuments.add(m);
+                                return factory.createIdentifier(`idToDoc("${doc[Id]}")`);
                             }
                         }
-
-                        return node;
                     }
-                    return ts.visitNode(root, visit);
-                };
+
+                    return node;
+                }
+                return ts.visitNode(root, visit);
             },
             getVars() {
-                const docs = DocumentIcon.DocViews;
-                const capturedVariables: { [name: string]: Field } = {};
-                usedDocuments.forEach(index => (capturedVariables[`d${index}`] = docs.length > index ? docs[index].Document : `d${index}`));
+                const docs = DocumentView.allViews();
+                const capturedVariables: { [name: string]: FieldType } = {};
+                usedDocuments.forEach(index => {
+                    capturedVariables[`d${index}`] = docs.length > index ? docs[index].Document : `d${index}`;
+                });
                 return capturedVariables;
             },
         };
     }
     render() {
-        return DocumentIcon.DocViews.map((dv, i) => <DocumentIcon key={i} index={i} view={dv} />);
+        return DocumentView.allViews().map((dv, i) => <DocumentIcon key={dv.DocUniqueId} index={i} view={dv} />);
     }
 }