added tutorial tool, still need to integrate with metadatatool

1 files changed, 85 insertions, 31 deletions

diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index aab8a183a..504c1491e 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -11,10 +11,85 @@ import { Cast, DocCast, StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl, TraceMobx } from '../../../fields/util';
 import { ObservableReactComponent, ObserverJsxParser } from '../ObservableReactComponent';
 import './DocumentView.scss';
-import { FieldViewProps } from './FieldView';
+import { FieldViewProps, FieldViewSharedProps } from './FieldView';
+import { DragManager } from '../../util/DragManager';
+import { dropActionType } from '../../util/DropActionTypes';
+import { Property } from 'csstype';
+
+interface DocOnlyProps {
+    LayoutTemplate?: () => Opt<Doc>;
+    LayoutTemplateString?: string;
+    hideDecorations?: boolean; // whether to suppress all DocumentDecorations when doc is selected
+    hideResizeHandles?: boolean; // whether to suppress resized handles on doc decorations when this document is selected
+    hideTitle?: boolean; // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
+    hideDecorationTitle?: boolean; // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
+    hideDocumentButtonBar?: boolean;
+    hideOpenButton?: boolean;
+    hideDeleteButton?: boolean;
+    hideLinkAnchors?: boolean;
+    hideLinkButton?: boolean;
+    hideCaptions?: boolean;
+    contentPointerEvents?: Property.PointerEvents | undefined; // pointer events allowed for content of a document view.  eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents
+    dontCenter?: 'x' | 'y' | 'xy';
+    showTags?: boolean;
+    showAIEditor?: boolean;
+    hideFilterStatus?: boolean;
+    childHideDecorationTitle?: boolean;
+    childHideResizeHandles?: boolean;
+    childDragAction?: dropActionType; // allows child documents to be dragged out of collection without holding the embedKey or dragging the doc decorations title bar.
+    dragWhenActive?: boolean;
+    dontHideOnDrag?: boolean;
+    onClickScriptDisable?: 'never' | 'always'; // undefined = only when selected
+    DataTransition?: () => string | undefined;
+    NativeWidth?: () => number;
+    NativeHeight?: () => number;
+    contextMenuItems?: () => { script?: ScriptField; method?: () => void; filter?: ScriptField; label: string; icon: string }[];
+    dragConfig?: (data: DragManager.DocumentDragData) => void;
+    dragStarting?: () => void;
+    dragEnding?: () => void;
+
+    reactParent?: React.Component; // parent React component view (see CollectionFreeFormDocumentView)
+}
+const DocOnlyProps = [
+    'layoutFieldKey',
+    'LayoutTemplate',
+    'LayoutTemplateString',
+    'hideDecorations', // whether to suppress all DocumentDecorations when doc is selected
+    'hideResizeHandles', // whether to suppress resized handles on doc decorations when this document is selected
+    'hideTitle', // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
+    'hideDecorationTitle', // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
+    'hideDocumentButtonBar',
+    'hideOpenButton',
+    'hideDeleteButton',
+    'hideLinkAnchors',
+    'hideLinkButton',
+    'hideCaptions',
+    'contentPointerEvents', // pointer events allowed for content of a document view.  eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents
+    'dontCenter',
+    'showTags',
+    'showAIEditor',
+    'hideFilterStatus',
+    'childHideDecorationTitle',
+    'childHideResizeHandles',
+    'childDragAction', // allows child documents to be dragged out of collection without holding the embedKey or dragging the doc decorations title bar.
+    'dragWhenActive',
+    'dontHideOnDrag',
+    'onClickScriptDisable', // undefined = only when selected
+    'DataTransition',
+    'NativeWidth',
+    'NativeHeight',
+    'contextMenuItems',
+    'dragConfig',
+    'dragStarting',
+    'dragEnding',
+
+    'reactParent', // parent React component view (see CollectionFreeFormDocumentView)
+];
+
+export interface DocumentViewProps extends DocOnlyProps, FieldViewSharedProps {}
 
 type BindingProps = Without<FieldViewProps, 'fieldKey'>;
-export interface JsxBindings {
+interface JsxBindings {
     props: BindingProps;
 }
 
@@ -23,7 +98,6 @@ interface HTMLtagProps {
     htmltag: string;
     onClick?: ScriptField;
     onInput?: ScriptField;
-    scaling: number;
     children?: JSX.Element[];
 }
 
@@ -43,7 +117,7 @@ interface HTMLtagProps {
 export class HTMLtag extends React.Component<HTMLtagProps> {
     click = () => {
         const clickScript = this.props.onClick as Opt<ScriptField>;
-        clickScript?.script.run({ this: this.props.Document, scale: this.props.scaling });
+        clickScript?.script.run({ this: this.props.Document });
     };
     onInput = (e: React.FormEvent<unknown>) => {
         const onInputScript = this.props.onInput as Opt<ScriptField>;
@@ -56,7 +130,6 @@ export class HTMLtag extends React.Component<HTMLtagProps> {
             'dragStarting',
             'dragEnding',
             'htmltag',
-            'scaling',
             'Document',
             'key',
             'onInput',
@@ -65,7 +138,7 @@ export class HTMLtag extends React.Component<HTMLtagProps> {
         ]).omit;
         const replacer = (match: string, expr: string) =>
             // bcz: this executes a script to convert a property expression string:  { script }  into a value
-            (ScriptField.MakeFunction(expr, { this: Doc.name, scale: 'number' })?.script.run({ this: this.props.Document, scale: this.props.scaling }).result as string) || '';
+            (ScriptField.MakeFunction(expr, { this: Doc.name })?.script.run({ this: this.props.Document }).result as string) || '';
         Object.keys(divKeys).forEach((prop: string) => {
             const p = (this.props as unknown as { [key: string]: string })[prop] as string;
             style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer);
@@ -79,7 +152,7 @@ export class HTMLtag extends React.Component<HTMLtagProps> {
     }
 }
 
-export interface DocumentContentsViewProps extends FieldViewProps {
+interface DocumentContentsViewProps extends DocumentViewProps, FieldViewProps {
     layoutFieldKey: string;
 }
 @observer
@@ -115,29 +188,11 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte
             this._props.LayoutTemplate?.() ||
             (this._props.LayoutTemplateString && this._props.Document) ||
             (this._props.layoutFieldKey && StrCast(this._props.Document[this._props.layoutFieldKey]) && this._props.Document) ||
-            Doc.Layout(this._props.Document, this._props.layoutFieldKey ? Cast(this._props.Document[this._props.layoutFieldKey], Doc, null) : undefined);
-        return Doc.expandTemplateLayout(template, this._props.Document);
+            Doc.LayoutDoc(this._props.Document, DocCast(this._props.Document[this._props.layoutFieldKey]));
+        return Doc.expandTemplateLayout(template, this._props.Document, this._props.layoutFieldKey);
     }
 
     CreateBindings(onClick: Opt<ScriptField>, onInput: Opt<ScriptField>): JsxBindings {
-        const docOnlyProps = [
-            // these are the properties in DocumentViewProps that need to be removed to pass on only DocumentSharedViewProps to the FieldViews
-            'hideResizeHandles',
-            'hideTitle',
-            'bringToFront',
-            'childContentPointerEvents',
-            'LayoutTemplateString',
-            'LayoutTemplate',
-            'showTags',
-            'layoutFieldKey',
-            'dontCenter',
-            'DataTransition',
-            'contextMenuItems',
-            // 'onClick', // don't need to omit this since it will be set
-            'onDoubleClickScript',
-            'onPointerDownScript',
-            'onPointerUpScript',
-        ];
         const templateDataDoc = this._props.TemplateDataDocument ?? (this.layoutDoc !== this._props.Document ? this._props.Document[DocData] : undefined);
         const list: BindingProps & React.DetailedHTMLProps<React.HtmlHTMLAttributes<HTMLDivElement>, HTMLDivElement> = {
             ...this._props,
@@ -148,7 +203,7 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte
         };
         return {
             props: {
-                ...OmitKeys(list, [...docOnlyProps], '').omit,
+                ...OmitKeys(list, DocOnlyProps, '').omit,
             } as BindingProps,
         };
     }
@@ -166,12 +221,11 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte
         layoutFrame = layoutFrame.replace(/(>[^{]*)[^=]\{([^.'][^<}]+)\}([^}]*<)/g, replacer);
 
         // replace HTML<tag> with corresponding HTML tag as in:  <HTMLdiv> becomes  <HTMLtag Document={props.Document} htmltag='div'>
-        const replacer2 = (match: string, p1: string) => `<HTMLtag Document={props.Document} scaling='${this._props.NativeDimScaling?.() || 1}' htmltag='${p1}'`;
+        const replacer2 = (match: string, p1: string) => `<HTMLtag Document={props.Document} htmltag='${p1}'`;
         layoutFrame = layoutFrame.replace(/<HTML([a-zA-Z0-9_-]+)/g, replacer2);
 
         // replace /HTML<tag> with </HTMLdiv>  as in:  </HTMLdiv> becomes  </HTMLtag>
         const replacer3 = (/* match: any, p1: string, offset: any, string: any */) => `</HTMLtag`;
-
         layoutFrame = layoutFrame.replace(/<\/HTML([a-zA-Z0-9_-]+)/g, replacer3);
 
         // add onClick function to props
@@ -181,7 +235,7 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte
                 const code = XRegExp.matchRecursive(splits[1], '{', '}', '', { valueNames: ['between', 'left', 'match', 'right', 'between'] });
                 layoutFrame = splits[0] + ` ${func}={props.${func}} ` + splits[1].substring(code[1].end + 1);
                 const script = code[1].value.replace(/^‘/, '').replace(/’$/, ''); // ‘’ are not valid quotes in javascript so get rid of them -- they may be present to make it easier to write complex scripts - see headerTemplate in currentUserUtils.ts
-                return ScriptField.MakeScript(script, { this: Doc.name, scale: 'number', value: 'string' });
+                return ScriptField.MakeScript(script, { this: Doc.name, value: 'string' });
             }
             return undefined;
             // add input function to props