Merge branch 'master' into sophie-ai-images

1 files changed, 60 insertions, 25 deletions

diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 4439be0cd..10eeff08d 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -1,10 +1,10 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, DocListCast } from '../../../fields/Doc';
+import { Doc, DocListCast, Field } from '../../../fields/Doc';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
-import { Cast, StrCast, NumCast, BoolCast } from '../../../fields/Types';
+import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types';
 import { DragManager } from '../../util/DragManager';
 import { undoBatch } from '../../util/UndoManager';
 import { ContextMenu } from '../ContextMenu';
@@ -14,13 +14,15 @@ import { StyleProp } from '../StyleProvider';
 import { FieldView, FieldViewProps } from './FieldView';
 import BigText from './LabelBigText';
 import './LabelBox.scss';
+import { PinProps, PresBox } from './trails';
+import { Docs } from '../../documents/Documents';
 
-export interface LabelBoxProps {
+export interface LabelBoxProps extends FieldViewProps {
     label?: string;
 }
 
 @observer
-export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProps>() {
+export class LabelBox extends ViewBoxBaseComponent<LabelBoxProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(LabelBox, fieldKey);
     }
@@ -29,21 +31,27 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
     }
     private dropDisposer?: DragManager.DragDropDisposer;
     private _timeout: any;
+
+    constructor(props: LabelBoxProps) {
+        super(props);
+        makeObservable(this);
+    }
+
     componentDidMount() {
-        this.props.setContentView?.(this);
+        this._props.setContentViewBox?.(this);
     }
     componentWillUnMount() {
         this._timeout && clearTimeout(this._timeout);
     }
 
-    getTitle() {
-        return this.rootDoc.title_custom ? StrCast(this.rootDoc.title) : this.props.label ? this.props.label : typeof this.rootDoc[this.fieldKey] === 'string' ? StrCast(this.rootDoc[this.fieldKey]) : StrCast(this.rootDoc.title);
+    @computed get Title() {
+        return this.dataDoc.title_custom ? StrCast(this.Document.title) : this._props.label ? this._props.label : Field.toString(this.dataDoc[this.fieldKey] as Field);
     }
 
     protected createDropTarget = (ele: HTMLDivElement) => {
         this.dropDisposer?.();
         if (ele) {
-            this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.props.Document);
+            this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document);
         }
     };
 
@@ -66,7 +74,6 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
     };
 
     @undoBatch
-    @action
     drop = (e: Event, de: DragManager.DropEvent) => {
         const docDragData = de.complete.docDragData;
         const params = Cast(this.paramsDoc['onClick-paramFieldKeys'], listSpec('string'), []);
@@ -81,16 +88,44 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
 
     @observable _mouseOver = false;
     @computed get hoverColor() {
-        return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+        return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor);
     }
 
-    fitTextToBox = (r: any) => {
-        const singleLine = BoolCast(this.rootDoc._singleLine, true);
+    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
+        if (!pinProps) return this.Document;
+        const anchor = Docs.Create.ConfigDocument({ title: StrCast(this.Document.title), annotationOn: this.Document });
+
+        if (anchor) {
+            if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
+            //  addAsAnnotation && this.addDocument(anchor);
+            PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}) } }, this.Document);
+            return anchor;
+        }
+        return anchor;
+    };
+
+    fitTextToBox = (
+        r: any
+    ):
+        | NodeJS.Timeout
+        | {
+              rotateText: null;
+              fontSizeFactor: number;
+              minimumFontSize: number;
+              maximumFontSize: number;
+              limitingDimension: string;
+              horizontalAlign: string;
+              verticalAlign: string;
+              textAlign: string;
+              singleLine: boolean;
+              whiteSpace: string;
+          } => {
+        const singleLine = BoolCast(this.layoutDoc._singleLine, true);
         const params = {
             rotateText: null,
             fontSizeFactor: 1,
-            minimumFontSize: NumCast(this.rootDoc._label_minFontSize, 8),
-            maximumFontSize: NumCast(this.rootDoc._label_maxFontSize, 1000),
+            minimumFontSize: NumCast(this.layoutDoc._label_minFontSize, 8),
+            maximumFontSize: NumCast(this.layoutDoc._label_maxFontSize, 1000),
             limitingDimension: 'both',
             horizontalAlign: 'center',
             verticalAlign: 'center',
@@ -119,7 +154,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
         const params = Cast(this.paramsDoc['onClick-paramFieldKeys'], listSpec('string'), []);
         const missingParams = params?.filter(p => !this.paramsDoc[p]);
         params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ...
-        const label = this.getTitle();
+        const label = this.Title;
         return (
             <div
                 className="labelBox-outerDiv"
@@ -127,7 +162,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
                 onMouseOver={action(() => (this._mouseOver = true))}
                 ref={this.createDropTarget}
                 onContextMenu={this.specificContextMenu}
-                style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}>
+                style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) }}>
                 <div
                     className="labelBox-mainButton"
                     style={{
@@ -137,15 +172,15 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
                         fontFamily: StrCast(this.layoutDoc._text_fontFamily) || 'inherit',
                         letterSpacing: StrCast(this.layoutDoc.letterSpacing),
                         textTransform: StrCast(this.layoutDoc.textTransform) as any,
-                        paddingLeft: NumCast(this.rootDoc._xPadding),
-                        paddingRight: NumCast(this.rootDoc._xPadding),
-                        paddingTop: NumCast(this.rootDoc._yPadding),
-                        paddingBottom: NumCast(this.rootDoc._yPadding),
-                        width: this.props.PanelWidth(),
-                        height: this.props.PanelHeight(),
-                        whiteSpace: typeof boxParams !== 'number' && boxParams.singleLine ? 'pre' : 'pre-wrap',
+                        paddingLeft: NumCast(this.layoutDoc._xPadding),
+                        paddingRight: NumCast(this.layoutDoc._xPadding),
+                        paddingTop: NumCast(this.layoutDoc._yPadding),
+                        paddingBottom: NumCast(this.layoutDoc._yPadding),
+                        width: this._props.PanelWidth(),
+                        height: this._props.PanelHeight(),
+                        whiteSpace: 'singleLine' in boxParams && boxParams.singleLine ? 'pre' : 'pre-wrap',
                     }}>
-                    <span style={{ width: typeof boxParams !== 'number' && boxParams.singleLine ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}>
+                    <span style={{ width: 'singleLine' in boxParams ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}>
                         {label.startsWith('#') ? null : label.replace(/([^a-zA-Z])/g, '$1\u200b')}
                     </span>
                 </div>