From 43ffd20481c53138454cca0a7215bb1dbeabc4ac Mon Sep 17 00:00:00 2001 From: Cosmo Myzrail Gorynych Date: Sat, 9 Nov 2024 21:47:50 +1200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20a=20button=20to=20template=20?= =?UTF-8?q?and=20behavior=20editors=20for=20Catnip=20projects=20to=20hide?= =?UTF-8?q?=20left=20column=20and=20enlarge=20the=20blocks,=20useful=20for?= =?UTF-8?q?=20displaying=20them=20on=20a=20big=20screen=20or=20screencasti?= =?UTF-8?q?ng?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/icons/screen.svg | 3 + src/node_requires/events/index.ts | 32 ++++++++- src/riotTags/editors/behavior-editor.tag | 36 ++++++++-- src/riotTags/editors/template-editor.tag | 65 +++++++++++++------ .../scriptables/event-list-scriptable.tag | 24 ++----- src/styl/tags/editors/template-editor.styl | 23 +++++-- .../tags/shared/scriptables/catnip-block.styl | 4 +- .../scriptables/code-editor-scriptable.styl | 2 + 8 files changed, 135 insertions(+), 54 deletions(-) create mode 100644 src/icons/screen.svg diff --git a/src/icons/screen.svg b/src/icons/screen.svg new file mode 100644 index 000000000..bd5f588c7 --- /dev/null +++ b/src/icons/screen.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/node_requires/events/index.ts b/src/node_requires/events/index.ts index ded07fb3e..5cfed81b9 100644 --- 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 index 250446a05..9baebdd71 100644 --- 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 index a0df44290..5eee1b5a6 100644 --- 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 index e1bc2e2bd..e0a2931c8 100644 --- 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 index 1958a0cc6..e5d530b07 100644 --- 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 index 419388594..4f878749b 100644 --- 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 index cbad71d10..496bbe0ef 100644 --- 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