✨ Add a button to template and behavior editors for Catnip projects to hide left column and enlarge the blocks, useful for displaying them on a big screen or screencasting

Author: Cosmo Myzrail Gorynych

src/icons/screen.svg

@@ -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) {

src/node_requires/events/index.ts

@@ -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;

src/riotTags/editors/behavior-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;

src/riotTags/editors/template-editor.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
  );
 

src/riotTags/shared/scriptables/event-list-scriptable.tag

@@ -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

src/styl/tags/editors/template-editor.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%

src/styl/tags/shared/scriptables/catnip-block.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