0.8.2

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
 
 ## [Unreleased]
 
+## [0.8.2](https://github.com/averrin/director/compare/0.8.1...0.8.2)
+Added:
+  * More compact collapsed mode
+  * Actions and Hooks can be global
+
+Fixed:
+  * Tagger component acts weird sometimes if there are more than one instance on page
+
 ## [0.8.1](https://github.com/averrin/director/compare/0.8.0...0.8.1)
 Fixed:
   * Changing variable type doesnt change list of available variables in arg inputs

README.md

@@ -46,7 +46,10 @@ It's not going to be MATT's alternative, so actions are pretty basic
 
 ## Plans
 - [ ] Actual Documentation
-- [ ] Better `multiply`
+- [ ] API for adding toolbar icon
+- [ ] "In scene" tags and icons for them
+- [ ] Better `multiply` (mode args, nested modifiers, e.g. playIf)
+- [ ] "Undo" for actions
 - [ ] Migrate to Active Effects Manager
 - [ ] Automated Animations integration
 - [ ] Token Attacher integration

src/constants.js

@@ -10,13 +10,21 @@ export function evalExpression(expr, ...args) {
 // import { foundry } from '../modules/foundry.js';
 // import { moduleId, SETTINGS } from '../constants.js';
 
+export const FLAGS = {
+  SEQUENCES: "director-sequences",
+  HOOKS: "director-hooks",
+  ACTIONS: "director-actions",
+}
+
 export const SETTINGS = {
   GLOBAL_TAGS: "global-tags",
   TAG_COLORS: "tag-colors",
   SHOW: "show",
   UI_SCALE: "ui-scale",
   RESOLUTION: "resolution",
   SEQUENCES: "sequences",
+  ACTIONS: "actions",
+  HOOKS: "hooks",
   SHOW_SEQUENCER: "show-sequencer",
 
   MANUAL_MODE: "warpgate-mode",

src/modules/Actions.js

@@ -13,6 +13,7 @@ export default class Action {
     this.name = "";
     this.hidden = false;
     this.version = 1;
+    this.global = false;
   }
 
   toJSON() {

src/modules/Hooks.js

@@ -11,6 +11,7 @@ export default class Hook {
     this.target = undefined;
     this.args = [];
     this.version = 1;
+    this.global = false;
   }
 
   static fromPlain(plain) {

src/modules/Specs.js

@@ -33,6 +33,14 @@ export const actionTypes = [
     group: 'Tokens',
     execute: (object, action) => object && tools.revive(object?.document || object),
   },
+  {
+    id: 'macro',
+    label: 'Run Macro',
+    group: 'Macro',
+    args: [{ type: "macro", label: "macro" }],
+    execute: (object, action) => Array.from(globalThis.game.macros.values()).find(m => m.data.name == action.args[0]).execute({ actor: object?.actor, token: object }),
+  },
+
   {
     id: 'playSequence',
     label: 'Play sequence',

src/modules/settings.js

@@ -54,6 +54,20 @@ export function initSettings(app) {
     default: [],
   });
 
+  game.settings.register(moduleId, SETTINGS.ACTIONS, {
+    scope: "world",
+    config: false,
+    type: Array,
+    default: [],
+  });
+
+  game.settings.register(moduleId, SETTINGS.HOOKS, {
+    scope: "world",
+    config: false,
+    type: Array,
+    default: [],
+  });
+
   game.settings.register(moduleId, SETTINGS.TAG_COLORS, {
     scope: "world",
     config: false,

src/modules/stores.js

@@ -1,4 +1,4 @@
-import { moduleId, SETTINGS } from '../constants.js';
+import { moduleId, SETTINGS, FLAGS } from '../constants.js';
 import { writable } from 'svelte/store';
 import { DSequence } from "./Sequencer.js";
 import Action from "./Actions.js";
@@ -32,8 +32,8 @@ function updateSequences() {
   const global = game.settings.get(moduleId, SETTINGS.SEQUENCES);
   let inScene = [];
   if (globalThis.canvas.scene) {
-    inScene = hasFlag(globalThis.canvas.scene, "director-sequences")
-      ? getFlag(globalThis.canvas.scene, "director-sequences").filter((a) => a).map(a => DSequence.fromPlain(a))
+    inScene = hasFlag(globalThis.canvas.scene, FLAGS.SEQUENCES)
+      ? getFlag(globalThis.canvas.scene, FLAGS.SEQUENCES).filter((a) => a).map(a => DSequence.fromPlain(a))
       : [];
   }
   sequences.set(
@@ -54,20 +54,36 @@ export function initSequences() {
 }
 
 export const actions = writable([]);
+
+function loadActions(scene) {
+  const inScene = hasFlag(scene, FLAGS.ACTIONS)
+    ? getFlag(scene, FLAGS.ACTIONS)
+    : [];
+  const global = game.settings.get(moduleId, SETTINGS.ACTIONS);
+
+  actions.set([...global, ...inScene].flat().filter((a) => a).map(a => Action.fromPlain(a)));
+}
+
 export const hooks = writable([]);
+
+function loadHooks(scene) {
+  const inScene = hasFlag(scene, FLAGS.HOOKS)
+    ? getFlag(scene, FLAGS.HOOKS)
+    : [];
+  const global = game.settings.get(moduleId, SETTINGS.HOOKS);
+
+  hooks.set([...global, ...inScene].flat().filter((a) => a).map(a => Hook.fromPlain(a)));
+}
+
 let _scene;
 export function initCurrentScene() {
   currentScene.subscribe(async (result) => {
     const scene = await result;
     if (!scene || scene == null || _scene == scene) return;
     _scene = scene;
 
-    hooks.set(hasFlag(scene, "director-hooks")
-      ? getFlag(scene, "director-hooks").filter((a) => a).map(a => Hook.fromPlain(a))
-      : []);
-    actions.set(hasFlag(scene, "director-actions")
-      ? getFlag(scene, "director-actions").filter((a) => a).map(a => Action.fromPlain(a))
-      : []);
+    loadHooks(scene);
+    loadActions(scene);
 
     await HookManager.onSceneChange(scene);
 
@@ -82,8 +98,11 @@ export function initActions() {
     currentScene.update(async (result) => {
       const scene = await result;
       if (!scene || scene == null) return scene;
-      if (getFlag(scene, "director-actions")?.filter((a) => a) != actions) {
-        scene.update({ "flags.director-actions": actions.map(a => a.toJSON()) });
+      if (getFlag(scene, FLAGS.ACTIONS)?.filter((a) => a) != actions) {
+        const updates = {};
+        updates[`flags.${FLAGS.ACTIONS}`] = actions.filter(a => !a.global).map(a => a.toJSON())
+        scene.update(updates);
+        game.settings.set(moduleId, SETTINGS.ACTIONS, actions.filter(a => a.global));
         await HookManager.onActionsChange(actions);
         globalThis.Hooks.call("DirectorUpdateActions", actions);
       }
@@ -99,8 +118,12 @@ export function initHooks() {
     currentScene.update(async (result) => {
       const scene = await result;
       if (!scene || scene == null) return scene;
-      if (getFlag(scene, "director-hooks")?.filter((a) => a) != hooks) {
-        scene.update({ "flags.director-hooks": hooks });
+      if (getFlag(scene, FLAGS.HOOKS)?.filter((a) => a) != hooks) {
+        const updates = {};
+        updates[`flags.${FLAGS.HOOKS}`] = hooks.filter(a => !a.global);
+        scene.update(updates);
+        game.settings.set(moduleId, SETTINGS.HOOKS, hooks.filter(a => a.global));
+
         await HookManager.onHooksChange(hooks);
         globalThis.Hooks.call("DirectorUpdateHooks", hooks);
       }

src/view/MainUI.svelte

@@ -15,6 +15,8 @@
    import HooksTab from "./components/HooksTab.svelte";
    import ImportTab from "./components/ImportTab.svelte";
    import FaPlay from "svelte-icons/fa/FaPlay.svelte";
+   import FaExpandArrowsAlt from "svelte-icons/fa/FaExpandArrowsAlt.svelte";
+   import FaCompressArrowsAlt from "svelte-icons/fa/FaCompressArrowsAlt.svelte";
 
    import { HsvPicker } from "svelte-color-picker";
 
@@ -102,8 +104,8 @@
 
 <ApplicationShell bind:elementRoot>
    <main class="director-ui">
-      <TagsBar {onTagClick} on:collapsed={toggleCollapsed} />
       {#if !collapsed}
+         <TagsBar {onTagClick} on:collapsed={toggleCollapsed} />
          <div class="ui-tabs ui-tabs-boxed">
             {#each availableTabs as t (t.title)}
                <!-- <div class="ui-indicator"> -->
@@ -133,31 +135,53 @@
             <ImportTab />
          {/if}
       {:else}
-         <div class="ui-flex ui-flex row ui-gap-2 ui-p-2 ui-items-center ui-justify-center">
-            {#each currentActions as item (item.id)}
-               {#if !item.hidden}
-                  <div class="ui-tooltip" data-tip={item.name || item.id}>
-                     <button
-                        class="ui-btn ui-btn-square"
-                        on:pointerdown|preventDefault|stopPropagation={() => null}
-                        on:click={(e) => run(e, item)}
-                        style:background-color={item.color}
-                        style:color={contrastColor(item.color)}
-                        class:!ui-p-[8px]={!item.icon}
+         <div class="ui-flex ui-flex row ui-gap-2 ui-p-2 ui-bg-base-100">
+            <div class="ui-flex ui-flex row flex-1 ui-items-center ui-justify-center ui-w-full">
+               {#each currentActions as item (item.id)}
+                  {#if !item.hidden}
+                     <div
+                        class="ui-tooltip ui-tooltip-left ui-tooltip-primary"
+                        data-tip={item.name || item.id}
+                        style="--tooltip-color: {item.color || '#46525D'}; --tooltip-text-color: {contrastColor(
+                           item.color
+                        )};"
                      >
-                        {#if item.icon}
-                           <iconify-icon
-                              style:font-size="2rem"
-                              icon={item.icon}
-                              style:color={contrastColor(item.color)}
-                           />
-                        {:else}
-                           <FaPlay />
-                        {/if}
-                     </button>
-                  </div>
-               {/if}
-            {/each}
+                        <button
+                           class="ui-btn ui-btn-square"
+                           on:pointerdown|preventDefault|stopPropagation={() => null}
+                           on:click={(e) => run(e, item)}
+                           style:background-color={item.color}
+                           style:color={contrastColor(item.color)}
+                           class:!ui-p-[8px]={!item.icon}
+                        >
+                           {#if item.icon}
+                              <iconify-icon
+                                 style:font-size="2rem"
+                                 icon={item.icon}
+                                 style:color={contrastColor(item.color)}
+                              />
+                           {:else}
+                              <FaPlay />
+                           {/if}
+                        </button>
+                     </div>
+                  {/if}
+               {/each}
+            </div>
+            <div class="ui-flex ui-flex-none">
+               <button
+                  title="toggle collapsed"
+                  class="ui-btn ui-btn-square ui-justify-self-end !ui-p-[8px]"
+                  class:ui-btn-outline={!collapsed}
+                  on:click={(e) => toggleCollapsed({ detail: !collapsed })}
+               >
+                  {#if collapsed}
+                     <FaExpandArrowsAlt />
+                  {:else}
+                     <FaCompressArrowsAlt />
+                  {/if}
+               </button>
+            </div>
          </div>
       {/if}
    </main>

src/view/components/ActionItem.svelte

@@ -73,6 +73,7 @@
 </script>
 
 <div
+   id={item.id}
    class="ui-border-2 ui-border-solid ui-flex ui-flex-col ui-bg-white ui-rounded-xl ui-shadow-lg ui-p-2 ui-items-center ui-my-1 ui-gap-3"
    style:border-color={item.color || "#ffffff"}
    on:pointerdown={(e) => onItemClickHandler(e, item)}

src/view/components/ActionsTab.svelte

@@ -112,7 +112,7 @@
       <div class="ui-modal-box ui-w-11/12 ui-max-w-5xl">
          <h3 class="ui-py-4 ui-font-bold ui-text-lg">Edit action</h3>
          <div class="ui-flex ui-flex-row ui-items-center ui-gap-2">
-            <div class="ui-flex ui-flex-row ui-flex-1 ui-items-center ui-gap-2">
+            <div class="ui-flex ui-flex-row ui-flex-1 ui-items-center ui-gap-2 ui-flex-wrap">
                <ArgInput type="color" label="color" bind:value={editItem.color} hideSign={true} widthAuto={true} />
                <ArgInput type="icon" label="icon" bind:value={editItem.icon} hideSign={true} widthAuto={true} />
                <ArgInput
@@ -122,6 +122,7 @@
                   hideSign={true}
                   widthAuto={true}
                />
+               <ArgInput type="bool" label="global" bind:value={editItem.global} hideSign={true} widthAuto={true} />
             </div>
             <div class="ui-flex ui-flex-none">
                <button

src/view/components/HooksTab.svelte

@@ -58,6 +58,7 @@
    {#each currentHooks as hook (hook.id)}
       <div
          class="ui-flex ui-flex-col ui-bg-white ui-rounded-xl ui-shadow-lg ui-p-2 ui-my-1 ui-items-start ui-gap-3 ui-justify-start"
+         id={hook.id}
       >
          <div class="ui-flex ui-flex-row ui-items-start ui-gap-3 ui-w-full">
             <ArgInput
@@ -101,25 +102,37 @@
          </div>
          {#if !hook.collapsed}
             <div class="ui-flex ui-flex-row ui-items-center ui-gap-3 ui-w-full ui-justify-start">
-               <ArgInput
-                  hideSign={true}
-                  bind:value={hook.target}
-                  type="targets"
-                  label="Target"
-                  on:change={saveHooks}
-                  widthAuto={true}
-               />
-               {#if hookSpecs.find((s) => s.id == hook.event)?.args}
-                  {#each hookSpecs.find((s) => s.id == hook.event)?.args as arg, i}
-                     <ArgInput
-                        hideSign={true}
-                        bind:value={hook.args[i]}
-                        type={arg.type}
-                        label={arg.label}
-                        on:change={saveHooks}
-                     />
-                  {/each}
-               {/if}
+               <div class="ui-flex ui-flex-row ui-items-center ui-gap-3 ui-flex-1">
+                  <ArgInput
+                     hideSign={true}
+                     bind:value={hook.target}
+                     type="targets"
+                     label="Target"
+                     on:change={saveHooks}
+                     widthAuto={true}
+                  />
+                  {#if hookSpecs.find((s) => s.id == hook.event)?.args}
+                     {#each hookSpecs.find((s) => s.id == hook.event)?.args as arg, i}
+                        <ArgInput
+                           hideSign={true}
+                           bind:value={hook.args[i]}
+                           type={arg.type}
+                           label={arg.label}
+                           on:change={saveHooks}
+                        />
+                     {/each}
+                  {/if}
+               </div>
+               <div class="ui-flex ui-flex-none">
+                  <ArgInput
+                     type="bool"
+                     label="global"
+                     bind:value={hook.global}
+                     hideSign={true}
+                     widthAuto={true}
+                     on:change={saveHooks}
+                  />
+               </div>
             </div>
          {/if}
       </div>

src/view/components/ModifierItem.svelte

@@ -19,6 +19,7 @@
 
 <div
    class="ui-border-solid ui-border ui-border-zinc-200 ui-flex ui-flex-row ui-bg-white ui-rounded-xl ui-shadow-lg ui-py-2 ui-px-4 ui-gap-2 ui-my-1"
+   id={modifier.id}
 >
    <div class="ui-flex ui-flex-1 ui-gap-2 ui-flex-row ui-flex-wrap">
       <Select

src/view/components/SelectionTab.svelte

@@ -137,7 +137,7 @@
          </div>
       {/if}
       {#each selection as tile, i}
-         <div class="ui-card ui-card-side ui-bg-base-100 ui-shadow-xl">
+         <div class="ui-card ui-card-side ui-bg-base-100 ui-shadow-xl" id={tile.id}>
             <figure>
                <img
                   class="ui-h-[170px]"