trying novice tools

1 files changed, 104 insertions, 40 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 1f140e145..822979e32 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -387,7 +387,8 @@ export class CurrentUserUtils {
 
     static creatorBtnDescriptors(doc: Doc): {
         title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean,
-        click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc
+        click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, hidden?: any,
+        developerFeature?: boolean
     }[] {
         if (doc.emptyPresentation === undefined) {
             doc.emptyPresentation = Docs.Create.PresDocument(new List<Doc>(),
@@ -426,30 +427,90 @@ export class CurrentUserUtils {
         if (doc.activeMobileMenu === undefined) {
             this.setupActiveMobileMenu(doc);
         }
-        return [
-            { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
-            { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
-            { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc },
-            { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
-            { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc },
-            //  { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
-            { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc },
-            { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc },
-
-            { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc },
-            { toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc },
-            { toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
-            // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
-            { toolTip: "Drag a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
-            // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
-            // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
-            // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
-            // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
-            // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
-            // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
-            { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc },
-            { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
-        ];
+
+        // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
+        // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
+        // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
+        // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
+        // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
+        // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
+        // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
+        //  { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
+
+        const collection = {
+            toolTip: "Drag a collection", title: "Col",
+            icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc
+        };
+        const web = {
+            toolTip: "Drag a web page", title: "Web",
+            icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc
+        };
+        const cat = {
+            toolTip: "Drag a cat image", title: "Image",
+            icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc
+        };
+        const compare = {
+            toolTip: "Drag a comparison box", title: "Compare",
+            icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc
+        }
+        const screen = {
+            toolTip: "Drag a screengrabber", title: "Grab",
+            icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc,
+            developerFeature: true,
+        };
+        const audio = {
+            toolTip: "Drag a audio recorder", title: "Audio",
+            icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc
+        };
+        const button = {
+            toolTip: "Drag a button", title: "Button",
+            icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc
+        };
+        const pres = {
+            toolTip: "Drag a presentation view", title: "Pres", icon: "tv",
+            click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))',
+            drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`,
+            dragFactory: doc.emptyPresentation as Doc
+        };
+        const search = {
+            toolTip: "Drag a search box", title: "Query", icon: "search",
+            click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)',
+            dragFactory: doc.emptySearch as Doc, developerFeature: true,
+        };
+        const script = {
+            toolTip: "Drag a scripting box", title: "Script",
+            icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc,
+            developerFeature: true,
+        };
+        const mobile = {
+            toolTip: "Drag a mobile view", title: "Phone",
+            icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)',
+            drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc,
+            developerFeature: true,
+        };
+        const preview = {
+            toolTip: "Drag a document previewer", title: "Prev",
+            icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc,
+            developerFeature: true,
+        };
+        const repl = {
+            toolTip: "Toggle a Calculator REPL", title: "repl",
+            icon: "calculator",
+            click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })',
+            developerFeature: true,
+        };
+
+        // novice : [collection, web, compare, audio, button, pres] 
+        return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl];
 
     }
 
@@ -465,21 +526,24 @@ export class CurrentUserUtils {
             }
         }
         const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title));
-        const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
-            _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
-            icon,
-            title,
-            toolTip,
-            ignoreClick,
-            dropAction: "copy",
-            onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined,
-            onClick: click ? ScriptField.MakeScript(click) : undefined,
-            ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined,
-            activeInkPen,
-            backgroundColor,
-            removeDropProperties: new List<string>(["dropAction"]),
-            dragFactory,
-        }));
+        const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag,
+            click, ischecked, activeInkPen, backgroundColor, dragFactory,
+            developerFeature }) => Docs.Create.FontIconDocument({
+                _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
+                icon,
+                title,
+                toolTip,
+                ignoreClick,
+                dropAction: "copy",
+                onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined,
+                onClick: click ? ScriptField.MakeScript(click) : undefined,
+                ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined,
+                activeInkPen,
+                backgroundColor,
+                removeDropProperties: new List<string>(["dropAction"]),
+                dragFactory,
+                developerFeature,
+            }));
 
         if (dragCreatorSet === undefined) {
             doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, {