✨ Add a button to template and behavior editors for Catnip projects t…

…o hide left column and enlarge the blocks, useful for displaying them on a big screen or screencasting
ct-js · Nov 9, 2024 · 43ffd20 · 43ffd20
1 parent 420585a
commit 43ffd20
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 54 deletions.
diff --git a/src/icons/screen.svg b/src/icons/screen.svg
diff --git a/src/node_requires/events/index.ts b/src/node_requires/events/index.ts
@@ -88,6 +88,12 @@ type EventMenu = {
     items: IEventMenuSubmenu[];
 };
 
+
+export const getFullKey = (scriptableEvt: IScriptableEvent) => `${scriptableEvt.lib}_${scriptableEvt.eventKey}`;
+
+const getEventByLib = (event: string, libName: string): IEventDeclaration | undefined =>
+    events[`${libName}_${event}`];
+
 const localizeCategoryName = (categoryKey: string): string => {
     const i18nScriptables = getLanguageJSON().scriptables;
     const category = categories[categoryKey];
@@ -96,6 +102,22 @@ const localizeCategoryName = (categoryKey: string): string => {
     }
     return localizeField(category, 'name');
 };
+
+export const getIsParametrized = (scriptableEvt: IScriptableEvent) => {
+    const event = getEventByLib(scriptableEvt.eventKey, scriptableEvt.lib);
+    if (!event) {
+        throw new Error(`Event "${getFullKey(scriptableEvt)}" was not found.`);
+    }
+    return event.arguments && Object.keys(event.arguments).length;
+};
+export const getHasLocalVars = (scriptableEvt: IScriptableEvent) => {
+    const event = getEventByLib(scriptableEvt.eventKey, scriptableEvt.lib);
+    if (!event) {
+        throw new Error(`Event "${getFullKey(scriptableEvt)}" was not found.`);
+    }
+    return event.locals && Object.keys(event.locals).length;
+};
+
 const timerPattern = /^Timer(\d)$/;
 const propToCoreDictionary = {
     category: 'coreEventsCategories',
@@ -153,6 +175,13 @@ const localizeLocalVarDesc = (eventFullCode: string, local: string): string => {
     }
     return localizeField(event.locals![local], 'description');
 };
+export const localizeEventName = (scriptableEvt: IScriptableEvent) => {
+    if (getIsParametrized(scriptableEvt)) {
+        return localizeParametrized(getFullKey(scriptableEvt), scriptableEvt);
+    }
+    return localizeProp(getFullKey(scriptableEvt), 'name');
+};
+
 const tryGetIcon = (eventFullCode: string, scriptedEvent: IScriptableEvent): string | false => {
     const event = events[eventFullCode];
     if (!event.useAssetThumbnail) {
@@ -239,9 +268,6 @@ const bakeCategories = function bakeCategories(
     return menu;
 };
 
-const getEventByLib = (event: string, libName: string): IEventDeclaration | undefined =>
-    events[`${libName}_${event}`];
-
 const getArgumentsTypeScript = (event: IEventDeclaration): string => {
     let code = '';
     if (event.locals) {

diff --git a/src/riotTags/editors/behavior-editor.tag b/src/riotTags/editors/behavior-editor.tag
@@ -1,5 +1,5 @@
-behavior-editor.aPanel.aView.flexrow
-    .behavior-editor-Properties.nml
+behavior-editor.aPanel.aView.flexrow(class="{opts.class} {demonstrationmode: demonstrationMode}")
+    .behavior-editor-Properties.nml(if="{!demonstrationMode}")
         .tall.flexfix.aPanel.pad
             .flexfix-header
                 button.wide(onclick="{openFields}")
@@ -22,11 +22,22 @@ behavior-editor.aPanel.aView.flexrow
                     svg.feather
                         use(xlink:href="#check")
                     span {vocGlob.apply}
-    .behavior-editor-anEditorPanel
+    .behavior-editor-aCodeEditor(class="{demonstrationmode: demonstrationMode}")
+        .aDemonstrationTitle.center(if="{demonstrationMode}")
+            svg.feather
+                use(xlink:href="#behavior")
+            |
+            |
+            | {asset.name}
+            |
+            |
+            span(if="{currentSheet}") —
+            |
+            |
+            span(if="{currentSheet}") {localizeName(currentSheet)}
         .tabwrap.tall(style="position: relative" if="{currentSheet !== 'fields'}")
-            div
-                .tabbed.noborder
-                    code-editor-scriptable(event="{currentSheet}" asset="{asset}")
+            .tabbed.noborder
+                code-editor-scriptable(event="{currentSheet}" asset="{asset}")
         .aPanel.tall.pad(if="{currentSheet === 'fields'}")
             h1 {voc.customFields}
             p {voc.customFieldsDescription}
@@ -36,6 +47,10 @@ behavior-editor.aPanel.aView.flexrow
                 b {vocFull.scriptables.typedefs}
                 hover-hint(text="{vocFull.scriptables.typedefsHint}")
                 textarea.code.wide(style="min-height: 10rem;" value="{asset.extendTypes}" onchange="{wire('asset.extendTypes')}")
+    .aButtonGroup.behavior-editor-PresentationButtons(if="{currentProject.language === 'catnip'}")
+        button.square.tiny(onclick="{toggleDemonstration}")
+            svg.feather
+                use(xlink:href="#screen")
     script.
         this.namespace = 'behaviorEditor';
         this.mixin(require('src/node_requires/riotMixins/voc').default);
@@ -80,3 +95,12 @@ behavior-editor.aPanel.aView.flexrow
         this.on('unmount', () => {
             window.orders.off('forceCodeEditorLayout', update);
         });
+
+        this.demonstrationMode = false;
+        this.toggleDemonstration = () => {
+            this.demonstrationMode = !this.demonstrationMode;
+        };
+        const eventsAPI = require('src/node_requires/events');
+        this.allEvents = eventsAPI.events;
+        this.getEventByLib = eventsAPI.getEventByLib;
+        this.localizeName = eventsAPI.localizeEventName;
diff --git a/src/riotTags/editors/template-editor.tag b/src/riotTags/editors/template-editor.tag
@@ -229,8 +229,8 @@ mixin eventsList
         currentevent="{currentSheet}"
     ).tall
 
-template-editor.aPanel.aView.flexrow
-    .template-editor-Properties.nml(class="{alt: localStorage.altTemplateLayout === 'on'}")
+template-editor.aPanel.aView.flexrow(class="{opts.class} {demonstrationmode: demonstrationMode}")
+    .template-editor-Properties.nml(class="{alt: localStorage.altTemplateLayout === 'on'}" if="{!demonstrationMode}")
         .tall.flexfix.aPanel.pad
             .flexfix-header
                 // Main linked asset of a template
@@ -295,24 +295,42 @@ template-editor.aPanel.aView.flexrow
                 +eventsList()
         svg.feather.template-editor-aSlidingEventListIcon.unclickable
             use(xlink:href="#plus")
-    .template-editor-aCodeEditor
+    .template-editor-aCodeEditor(class="{demonstrationmode: demonstrationMode}")
+        .aDemonstrationTitle.center(if="{demonstrationMode}")
+            svg.feather
+                use(xlink:href="#template")
+            |
+            |
+            | {asset.name}
+            |
+            |
+            span(if="{currentSheet}") —
+            |
+            |
+            span(if="{currentSheet}") {localizeName(currentSheet)}
         .tabwrap.tall(style="position: relative")
-            div
-                .tabbed.noborder(show="{tab === 'javascript'}")
-                    code-editor-scriptable(
-                        event="{currentSheet}"
-                        entitytype="template"
-                        asset="{asset}"
-                    )
-    .template-editor-Properties.nmr(if="{localStorage.altTemplateLayout !== 'on' && !minimizeProps}")
+            .tabbed.noborder
+                code-editor-scriptable(
+                    event="{currentSheet}"
+                    entitytype="template"
+                    asset="{asset}"
+                )
+    .template-editor-Properties.nmr(if="{localStorage.altTemplateLayout !== 'on' && !minimizeProps && !demonstrationMode}")
         .tall.aPanel.pad.npt
             +templateProperties()
-    button.toright.template-editor-aPresentationButton.square.tiny(
-        onclick="{toggleProps}"
-        if="{localStorage.altTemplateLayout !== 'on'}"
-    )
-        svg.feather
-            use(xlink:href="#{minimizeProps ? 'maximize-2' : 'minimize-2'}")
+    .aButtonGroup.template-editor-PresentationButtons
+        button.square.tiny(
+            onclick="{toggleDemonstration}"
+            if="{currentProject.language === 'catnip'}"
+        )
+            svg.feather
+                use(xlink:href="#screen")
+        button.square.tiny(
+            onclick="{toggleProps}"
+            if="{localStorage.altTemplateLayout !== 'on'}"
+        )
+            svg.feather
+                use(xlink:href="#{minimizeProps ? 'maximize-2' : 'minimize-2'}")
     script.
         this.namespace = 'templateView';
         this.mixin(require('src/node_requires/riotMixins/voc').default);
@@ -325,7 +343,6 @@ template-editor.aPanel.aView.flexrow
 
         this.getTextureRevision = template => resources.getById(template.texture).lastmod;
 
-        this.tab = 'javascript';
         [this.currentSheet] = this.asset.events; // can be undefined, this is ok
 
         const {schemaToExtensions} = require('src/node_requires/resources/content');
@@ -371,9 +388,6 @@ template-editor.aPanel.aView.flexrow
             this.refs.baseClassMenu.toggle();
         };
 
-        this.changeTab = tab => () => {
-            this.tab = tab;
-        };
         this.applyTexture = id => {
             if (id === -1) {
                 this.asset.texture = -1;
@@ -508,3 +522,12 @@ template-editor.aPanel.aView.flexrow
             localStorage.minimizeTemplatesProps = this.minimizeProps ? 'yes' : 'no';
             window.orders.trigger('forceCodeEditorLayout');
         };
+
+        this.demonstrationMode = false;
+        this.toggleDemonstration = () => {
+            this.demonstrationMode = !this.demonstrationMode;
+        };
+        const eventsAPI = require('src/node_requires/events');
+        this.allEvents = eventsAPI.events;
+        this.getEventByLib = eventsAPI.getEventByLib;
+        this.localizeName = eventsAPI.localizeEventName;
diff --git a/src/riotTags/shared/scriptables/event-list-scriptable.tag b/src/riotTags/shared/scriptables/event-list-scriptable.tag
@@ -119,17 +119,11 @@ event-list-scriptable.flexfix(class="{opts.class}")
         this.allEvents = eventsAPI.events;
         this.getEventByLib = eventsAPI.getEventByLib;
 
-        const getFullKey = scriptableEvt => `${scriptableEvt.lib}_${scriptableEvt.eventKey}`;
-
         this.isValid = scriptableEvt =>
             this.getEventByLib(scriptableEvt.eventKey, scriptableEvt.lib);
-        this.localizeName = scriptableEvt => {
-            if (this.getIsParametrized(scriptableEvt)) {
-                return eventsAPI.localizeParametrized(getFullKey(scriptableEvt), scriptableEvt);
-            }
-            return eventsAPI.localizeProp(getFullKey(scriptableEvt), 'name');
-        };
-        this.getIcon = scriptableEvt => eventsAPI.tryGetIcon(getFullKey(scriptableEvt), scriptableEvt);
+        this.localizeName = eventsAPI.localizeEventName;
+        this.getIcon = scriptableEvt =>
+            eventsAPI.tryGetIcon(eventsAPI.getFullKey(scriptableEvt), scriptableEvt);
         this.isStatic = scriptableEvt => !eventsAPI
             .canBeDynamicBehavior(eventsAPI.getEventByLib(scriptableEvt.eventKey, scriptableEvt.lib));
         this.isRestricted = scriptableEvt => !eventsAPI
@@ -146,20 +140,14 @@ event-list-scriptable.flexfix(class="{opts.class}")
         this.namespace = 'scriptables';
         this.mixin(require('src/node_requires/riotMixins/voc').default);
 
-        this.getIsParametrized = scriptableEvt => {
-            const event = this.getEventByLib(scriptableEvt.eventKey, scriptableEvt.lib);
-            return event.arguments && Object.keys(event.arguments).length;
-        };
-        this.getHasLocalVars = scriptableEvt => {
-            const event = this.getEventByLib(scriptableEvt.eventKey, scriptableEvt.lib);
-            return event.locals && Object.keys(event.locals).length;
-        };
+        this.getIsParametrized = eventsAPI.getIsParametrized;
+        this.getHasLocalVars = eventsAPI.getIsParametrized;
         this.getLocals = scriptableEvt => this.getEventByLib(
             scriptableEvt.eventKey,
             scriptableEvt.lib
         ).locals;
         this.getLocalDescription = (varName, scriptableEvt) => eventsAPI.localizeLocalVarDesc(
-            getFullKey(scriptableEvt),
+            eventsAPI.getFullKey(scriptableEvt),
             varName
         );
 

diff --git a/src/styl/tags/editors/template-editor.styl b/src/styl/tags/editors/template-editor.styl
@@ -1,4 +1,10 @@
 template-editor, [data-is="template-editor"], behavior-editor, [data-is="behavior-editor"]
+    &.demonstrationmode
+        position fixed
+        left 0
+        right 0
+        bottom 0
+        top 0
     .aNav
         border-bottom-left-radius 0
         border-bottom-right-radius 0
@@ -46,6 +52,13 @@ template-editor, behavior-editor
             flex 0 0 19rem
     .&-aCodeEditor
         flex 1 1 auto
+        &.demonstrationmode
+            display flex
+            flex-flow column nowrap
+            catnip-editor > catnip-block-list
+                font-size 150%
+            catnip-block-list > catnip-block-list
+                font-size 100%
     .&-aSlidingEventListIcon
         position absolute
         left 0.87rem
@@ -86,13 +99,15 @@ template-editor, behavior-editor
                         margin-right 0.8rem
             & > .flexfix-footer
                 padding 1rem
-    .&-aPresentationButton
+    .aButtonGroup.&-PresentationButtons
         position absolute
         right 0
         top 0
-        border-top-right-radius 0
-        border-top-left-radius 0
-        border-bottom-right-radius 0
+        button
+            border-top-left-radius 0
+        :last-child
+            border-top-right-radius 0
+            border-bottom-right-radius 0
         margin 0
 
 .template-editor-Properties, .behavior-editor-Properties, room-properties

diff --git a/src/styl/tags/shared/scriptables/catnip-block.styl b/src/styl/tags/shared/scriptables/catnip-block.styl
@@ -166,9 +166,9 @@ catnip-block, .catnip-block
         border-color error
 
     & & .catnip-block-aTextLabel
-        font-size 15px
+        font-size 1500%/16
     & & & .catnip-block-aTextLabel
-        font-size 14px
+        font-size 1400%/16
 
     textarea
         width 100%

diff --git a/src/styl/tags/shared/scriptables/code-editor-scriptable.styl b/src/styl/tags/shared/scriptables/code-editor-scriptable.styl
@@ -15,3 +15,5 @@ code-editor-scriptable, script-editor
         height 100%
     &.tall
         overflow hidden
+    & > [ref="codebox"]
+        overflow visible // fixes scrollbars popping up in monaco when using a non-integer zoom value