added tutorial tool, still need to integrate with metadatatool

1 files changed, 34 insertions, 38 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 11adf7435..acf6f928a 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -13,7 +13,7 @@ import ResizeObserver from 'resize-observer-polyfill';
 import { ClientUtils, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../ClientUtils';
 import { emptyFunction } from '../../Utils';
 import { Doc, DocListCast, Field, FieldResult, FieldType, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast, returnEmptyDoclist } from '../../fields/Doc';
-import { AclAdmin, DocAcl, DocData } from '../../fields/DocSymbols';
+import { AclAdmin, DocAcl, DocData, DocLayout } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { InkField } from '../../fields/InkField';
 import { List } from '../../fields/List';
@@ -161,7 +161,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
             CollectionViewType.Card,
             CollectionViewType.Carousel,
             CollectionViewType.Grid,
-        ].includes(this.selectedDoc?.type_collection as CollectionViewType);
+        ].includes(this.selectedDoc?.type_collection as CollectionViewType) || this.selectedDoc.$type === DocumentType.SCRAPBOOK; // prettier-ignore
     }
 
     rtfWidth = () => (!this.selectedLayoutDoc ? 0 : Math.min(NumCast(this.selectedLayoutDoc?._width), this._props.width - 20));
@@ -181,7 +181,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     @action
     docHeight = () => {
         const layoutDoc = this.selectedLayoutDoc;
-        if (layoutDoc && this.dataDoc) {
+        if (layoutDoc) {
             return Math.max(
                 70,
                 Math.min(
@@ -205,7 +205,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
             const ids = new Set<string>(reqdKeys);
             const docs: Doc[] =
                 DocumentView.Selected().length < 2 //
-                    ? [this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc]
+                    ? [this.layoutFields ? this.selectedDoc[DocLayout] : this.dataDoc]
                     : DocumentView.Selected().map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc));
             docs.forEach(doc =>
                 Object.keys(doc)
@@ -264,7 +264,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         const docs =
             DocumentView.Selected().length < 2 && this.selectedDoc
                 ? [this.layoutFields
-                        ? Doc.Layout(this.selectedDoc) //
+                        ? this.selectedDoc[DocLayout] //
                         : this.dataDoc!]
                 : DocumentView.Selected().map(dv => (this.layoutFields ? dv.layoutDoc : dv.dataDoc)); // prettier-ignore
         docs.forEach(doc => {
@@ -282,7 +282,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                 const tags = StrListCast(doc.tags);
                 if (!tags.includes(value)) {
                     tags.push(value);
-                    doc[DocData].tags = tags.length ? new List<string>(tags) : undefined;
+                    doc.$tags = tags.length ? new List<string>(tags) : undefined;
                 }
                 return true;
             }
@@ -308,11 +308,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     }
 
     @computed get contextCount() {
-        if (this.selectedDocumentView) {
-            const target = this.selectedDocumentView.Document;
-            return Doc.GetEmbeddings(target).length - 1;
-        }
-        return 0;
+        return this.selectedDocumentView ? Doc.GetEmbeddings(this.selectedDocumentView.Document).length - 1 : 0;
     }
 
     @computed get links() {
@@ -334,7 +330,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
             return '-- multiple selected --';
         }
         if (this.selectedDoc) {
-            const layoutDoc = Doc.Layout(this.selectedDoc);
+            const layoutDoc = this.selectedDoc[DocLayout];
             const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes('FormattedTextBox') ? this.rtfHeight : this.docHeight;
             const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes('FormattedTextBox') ? this.rtfWidth : this.docWidth;
             return (
@@ -498,7 +494,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         const individualTableEntries = [];
         const usersAdded: string[] = []; // all shared users being added - organized by denormalized email
 
-        const seldoc = this.layoutDocAcls ? this.selectedLayoutDoc : this.selectedDoc?.[DocData];
+        const seldoc = this.layoutDocAcls ? this.selectedLayoutDoc : this.dataDoc;
         // adds each user to usersAdded
         SharingManager.Instance.users.forEach(eachUser => {
             let userOnDoc = true;
@@ -529,7 +525,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
             let permission;
             if (this.layoutDocAcls) {
                 if (target[DocAcl][userKey]) permission = HierarchyMapping.get(target[DocAcl][userKey])?.name;
-                else if (target.embedContainer) permission = StrCast(Doc.GetProto(DocCast(target.embedContainer))[userKey]);
+                else if (DocCast(target.embedContainer)) permission = StrCast(Doc.GetProto(DocCast(target.embedContainer)!)[userKey]);
                 else permission = StrCast(Doc.GetProto(target)?.[userKey]);
             } else permission = StrCast(target[userKey]);
             individualTableEntries.unshift(this.sharingItem(userEmail, showAdmin, permission!, false)); // adds each user
@@ -550,7 +546,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                     if (this.layoutDocAcls) {
                         if (target[DocAcl][groupKey]) {
                             permission = HierarchyMapping.get(target[DocAcl][groupKey])?.name;
-                        } else if (target.embedContainer) permission = StrCast(Doc.GetProto(DocCast(target.embedContainer))[groupKey]);
+                        } else if (DocCast(target.embedContainer)) permission = StrCast(Doc.GetProto(DocCast(target.embedContainer)!)[groupKey]);
                         else permission = StrCast(Doc.GetProto(target)?.[groupKey]);
                     } else permission = StrCast(target[groupKey]);
                     groupTableEntries.unshift(this.sharingItem(StrCast(group.title), showAdmin, permission!, false));
@@ -777,7 +773,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         switch (field) {
             case 'Xps': selDoc.x = NumCast(this.selectedDoc?.x) + (dirs === 'up' ? 10 : -10); break;
             case 'Yps': selDoc.y = NumCast(this.selectedDoc?.y) + (dirs === 'up' ? 10 : -10); break;
-            case 'stk': selDoc.stroke_width = NumCast(this.selectedDoc?.[DocData].stroke_width) + (dirs === 'up' ? 0.1 : -0.1); break;
+            case 'stk': selDoc.stroke_width = NumCast(this.selectedDoc?.$stroke_width) + (dirs === 'up' ? 0.1 : -0.1); break;
             case 'wid': {
                     const oldWidth = NumCast(selDoc._width);
                     const oldHeight = NumCast(selDoc._height);
@@ -825,11 +821,11 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     };
 
     getField(key: string) {
-        return Field.toString(this.selectedDoc?.[DocData][key] as FieldType);
+        return Field.toString(this.selectedDoc?.['$' + key] as FieldType);
     }
 
     @computed get selectedStrokes() {
-        return this.containsInkDoc ? DocListCast(this.selectedDoc[DocData].data) : DocumentView.SelectedSchemaDoc() ? [DocumentView.SelectedSchemaDoc()!] : DocumentView.SelectedDocs().filter(doc => doc.layout_isSvg);
+        return this.containsInkDoc ? DocListCast(this.selectedDoc.$data) : DocumentView.SelectedSchemaDoc() ? [DocumentView.SelectedSchemaDoc()!] : DocumentView.SelectedDocs().filter(doc => doc.layout_isSvg);
     }
     @computed get shapeXps() { return NumCast(this.selectedDoc?.x); } // prettier-ignore
     set shapeXps(value)  { this.selectedDoc && (this.selectedDoc.x = Math.round(value * 100) / 100); } // prettier-ignore
@@ -839,10 +835,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     set shapeWid(value)  { this.selectedDoc && (this.selectedDoc._width = Math.round(value * 100) / 100); } // prettier-ignore
     @computed get shapeHgt() { return NumCast(this.selectedDoc?._height); } // prettier-ignore
     set shapeHgt(value)  { this.selectedDoc && (this.selectedDoc._height = Math.round(value * 100) / 100); } // prettier-ignore
-    @computed get strokeThk(){ return NumCast(this.selectedStrokes.lastElement()?.[DocData].stroke_width); } // prettier-ignore
+    @computed get strokeThk(){ return NumCast(this.selectedStrokes.lastElement()?.$stroke_width); } // prettier-ignore
     set strokeThk(value) {
         this.selectedStrokes.forEach(doc => {
-            doc[DocData].stroke_width = Math.round(value * 100) / 100;
+            doc.$stroke_width = Math.round(value * 100) / 100;
         });
     }
 
@@ -881,28 +877,26 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
 
     private _lastDash: string = '2';
 
-    @computed get colorFil() { return StrCast(this.selectedStrokes.lastElement()?.[DocData].fillColor); } // prettier-ignore
+    @computed get colorFil() { return StrCast(this.selectedStrokes.lastElement()?.$fillColor); } // prettier-ignore
     set colorFil(value) {
         this.selectedStrokes.forEach(doc => {
             const inkStroke = DocumentView.getDocumentView(doc)?.ComponentView as InkingStroke;
             const { inkData } = inkStroke.inkScaledData();
             if (InkingStroke.IsClosed(inkData)) {
-                doc[DocData].fillColor = value || undefined;
+                doc.$fillColor = value || undefined;
             }
         });
     }
-    @computed get colorStk() { return StrCast(this.selectedStrokes.lastElement()?.[DocData].color); } // prettier-ignore
+    @computed get colorStk() { return StrCast(this.selectedStrokes.lastElement()?.$color); } // prettier-ignore
     set colorStk(value) {
         this.selectedStrokes.forEach(doc => {
-            doc[DocData].color = value || undefined;
+            doc.$color = value || undefined;
         });
     }
     @computed get borderColor() {
-        const doc = this.selectedDoc;
-        const layoutDoc = doc ? Doc.Layout(doc) : doc;
-        return StrCast(layoutDoc.color);
+        return StrCast(this.selectedDoc._color);
     }
-    set borderColor(value) { this.selectedDoc && (this.selectedDoc[DocData].color = value || undefined); } // prettier-ignore
+    set borderColor(value) { this.selectedDoc && (this.selectedDoc.$color = value || undefined); } // prettier-ignore
 
     colorButton(value: string, type: string, setter: () => void) {
         return (
@@ -1034,41 +1028,41 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     set dashdStk(value) {
         value && (this._lastDash = value as string);
         this.selectedStrokes.forEach(doc => {
-            doc[DocData].stroke_dash = value ? this._lastDash : undefined;
+            doc.$stroke_dash = value ? this._lastDash : undefined;
         });
     }
     @computed get widthStk() { return this.getField('stroke_width') || '1'; } // prettier-ignore
     set widthStk(value) {
         this.selectedStrokes.forEach(doc => {
-            doc[DocData].stroke_width = Number(value);
+            doc.$stroke_width = Number(value);
         });
     }
     @computed get markScal() { return Number(this.getField('stroke_markerScale') || '1'); } // prettier-ignore
     set markScal(value) {
         this.selectedStrokes.forEach(doc => {
-            doc[DocData].stroke_markerScale = Number(value);
+            doc.$stroke_markerScale = Number(value);
         });
     }
     @computed get refStrength() { return Number(this.getField('drawing_refStrength') || '50'); } // prettier-ignore
     set refStrength(value) {
-        this.selectedDoc[DocData].drawing_refStrength = Number(value);
+        this.selectedDoc.$drawing_refStrength = Number(value);
     }
     @computed get smoothAmt() { return Number(this.getField('stroke_smoothAmount') || '5'); } // prettier-ignore
     set smoothAmt(value) {
         this.selectedStrokes.forEach(doc => {
-            doc[DocData].stroke_smoothAmount = Number(value);
+            doc.$stroke_smoothAmount = Number(value);
         });
     }
     @computed get markHead() { return this.getField('stroke_startMarker') || ''; } // prettier-ignore
     set markHead(value) {
         this.selectedStrokes.forEach(doc => {
-            doc[DocData].stroke_startMarker = value;
+            doc.$stroke_startMarker = value;
         });
     }
     @computed get markTail() {  return this.getField('stroke_endMarker') || ''; } // prettier-ignore
     set markTail(value) {
         this.selectedStrokes.forEach(doc => {
-            doc[DocData].stroke_endMarker = value;
+            doc.$stroke_endMarker = value;
         });
     }
 
@@ -1356,7 +1350,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
      * of ink strokes in the properties menu.
      */
     containsInk = (selectedDoc: Doc) => {
-        const childDocs: Doc[] = DocListCast(selectedDoc[DocData].data);
+        const childDocs: Doc[] = DocListCast(selectedDoc.$data);
         for (let i = 0; i < childDocs.length; i++) {
             if (DocumentView.getDocumentView(childDocs[i])?.layoutDoc?.layout_isSvg) {
                 return true;
@@ -1454,7 +1448,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     @undoBatch
     setDescripValue = action((value: string) => {
         if (this.selectedLink) {
-            this.selectedLink[DocData].link_description = value;
+            this.selectedLink.$link_description = value;
         }
     });
 
@@ -1927,7 +1921,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
             const selectedItem: boolean = PresBox.Instance.selectedArray.size > 0;
             const type = [DocumentType.AUDIO, DocumentType.VID].includes(DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as DocumentType)
                 ? (DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as DocumentType)
-                : PresBox.targetRenderedDoc(PresBox.Instance.activeItem)?.type;
+                : PresBox.Instance.activeItem
+                  ? PresBox.targetRenderedDoc(PresBox.Instance.activeItem)?.type
+                  : undefined;
             return (
                 <div className="propertiesView" style={{ width: this._props.width }}>
                     <div className="propertiesView-sectionTitle" style={{ width: this._props.width }}>