0.8.8

src/modules/API.js

@@ -2,16 +2,14 @@ import { moduleId, SETTINGS } from '../constants.js';
 import { addArgSpec, addModifier, addSection, addHook, addAction } from "./Specs.js";
 import { sequences, actions } from "./stores.js";
 import { DSequence } from "./Sequencer.js";
+import { get } from "svelte/store";
 
 const API = {
   addArgSpec, addModifier, addSection, addHook, addAction,
 
   getSequence: async (name, overrides) => {
     let seq;
-    sequences.update(seqs => {
-      seq = seqs.find(s => s.title == name || s.id == name);
-      return seqs;
-    });
+    seq = get(sequences).find(s => s.title == name || s.id == name);
     if (!seq) {
       logger.error(`Sequence ${name} not found`);
       return null;
@@ -24,48 +22,26 @@ const API = {
 
   runAction: (id) => {
     let action;
-    actions.update(a => {
-      action = a.find(action => action.id == id || action.name == id);
-      return a;
-    });
+    action = get(actions).find(action => action.id == id || action.name == id);
     if (action) {
       action.run(new MouseEvent(""))
     }
   },
 
   listSequences: () => {
-    let seq;
-    sequences.update(seqs => {
-      seq = seqs;
-      return seqs;
-    });
-    return seq;
+    return get(sequences);
   },
 
   listActions: () => {
-    let acts;
-    actions.update(a => {
-      acts = a;
-      return a;
-    });
-    return acts;
+    return get(actions);
   },
 
   findSequence: (name) => {
-    let seq;
-    sequences.update(seqs => {
-      seq = seqs.find(s => s.title == name || s.id == name);
-      return seqs;
-    });
-    return seq;
+    return get(sequences).find(s => s.title == name || s.id == name);
   },
 
   playSequence: (name, overrides) => {
-    let seq;
-    sequences.update(seqs => {
-      seq = seqs.find(s => s.title == name || s.id == name);
-      return seqs;
-    });
+    let seq = get(sequences).find(s => s.title == name || s.id == name);
     if (!seq) {
       logger.error(`Sequence ${name} not found`);
     } else {

src/modules/Specs.js

@@ -33,6 +33,14 @@ export const actionTypes = [
     group: 'Tokens',
     execute: (object, action) => object && tools.revive(object?.document || object),
   },
+
+  {
+    id: 'another-action',
+    label: 'Another Action',
+    group: 'Macro',
+    args: [{ type: "action", label: "action" }],
+    execute: (object, action) => Director.runAction(action.args[0]),
+  },
   {
     id: 'macro',
     label: 'Run Macro',
@@ -736,6 +744,12 @@ export const argSpecs = [
     }
     , control: "select"
   },
+  {
+    id: "action", var_types: ["action"], options: (_) => {
+      return Director.listActions().filter(a => a.name != "").map(s => { return { value: s.id, label: s.name } });
+    }
+    , control: "select"
+  },
   {
     id: "animate-target", var_types: ["animate-target"], options: [
       { value: "sprite", label: "sprite" },

src/styles/main.scss

@@ -36,7 +36,7 @@
         max-width: 600px;
         border-radius: var(--rounded-btn, 0.5rem);
         background: #fff !important;
-        height: 3rem !important;
+        height: 2.5rem !important;
 
         input, .selection {
           font-size: 1rem !important;
@@ -79,7 +79,7 @@
 
     .ui-input-lg {
         border-color: #ddd !important;
-        height: 3rem !important;
+        height: 2.5rem !important;
     }
 
     .ui-text-base {
@@ -101,6 +101,16 @@
     button > i {
         margin: 0px !important;
     }
+
+    .ui-btn {
+      height: 2.5rem !important;
+      min-height: 2.5rem !important;
+    }
+    .ui-btn-square {
+      width: 2.5rem !important;
+      height: 2.5rem !important;
+}
+
     .ui-tabs {
         justify-content: center;
     }
@@ -112,7 +122,7 @@
     .ui-toggle {
         flex-shrink: 0 !important;
         flex-basis: auto !important;
-        width: 3rem !important;
+        width: 2.5rem !important;
         height: 1.5rem !important;
     }
 

src/view/MainUI.svelte

@@ -19,10 +19,13 @@
    import FaCompressArrowsAlt from "svelte-icons/fa/FaCompressArrowsAlt.svelte";
    import ArgInput from "./components/ArgInput.svelte";
 
+   import { getContext, onDestroy, setContext } from "svelte";
    import { tagsStore, actions } from "../modules/stores.js";
+   setContext("tagsStore", tagsStore);
+
    import Tag from "../modules/Tags.js";
+   import TagComponent from "./components/Tag.svelte";
 
-   import { getContext, onDestroy, setContext } from "svelte";
    import Action from "../modules/Actions";
    import { actionTypes } from "../modules/Specs";
    const { application } = getContext("external");
@@ -49,7 +52,7 @@
       });
       pickerOpen = !pickerOpen;
    }
-   setContext("onTagClick", onTagClick);
+   setContext("tagRClick", onTagClick);
 
    function createAction(_, tags) {
       actions.update((actions) => {
@@ -127,22 +130,7 @@
                      <!-- </ArgInput> -->
                   </div>
                   <div class="ui-flex ui-flex-none">
-                     <span
-                        class="ui-badge ui-badge-lg ui-p-4 !ui-text-2xl"
-                        style:background-color={editTag.color}
-                        style:color={contrastColor(editTag.color)}
-                     >
-                        {#if editTag.icon}
-                           <iconify-icon
-                              style:font-size="1.5rem"
-                              style:margin-right="0.5rem"
-                              icon={editTag.icon}
-                              style:color={contrastColor(editTag.color)}
-                           />
-                        {/if}
-
-                        {editTag.text}
-                     </span>
+                     <TagComponent tag={editTag} />
                   </div>
                </div>
                <div class="ui-modal-action">
@@ -157,7 +145,7 @@
          <div class="ui-tabs ui-tabs-boxed">
             {#each availableTabs as t (t.title)}
                <!-- <div class="ui-indicator"> -->
-               <a class="ui-tab ui-tab-lg" on:click={() => selectMode(t)} class:ui-tab-active={t.mode == mode}>
+               <a class="ui-tab ui-tab-md" on:click={() => selectMode(t)} class:ui-tab-active={t.mode == mode}>
                   {t.title}
                   {#if t.badge}
                      {@html t.badge}

src/view/components/ActionItem.svelte

@@ -92,11 +92,11 @@
             <svelte:fragment slot="right">
                {#if item.valueType == "hook" && hook}
                   {#if !hook?.enabled}
-                     <span style:color="indianred" title="hook is disabled" class="ui-h-12 ui-w-16">
+                     <span style:color="indianred" title="hook is disabled" class="ui-h-[2.5rem] ui-w-16">
                         <FaExclamationTriangle />
                      </span>
                   {:else}
-                     <span style:color="#232323" title="hook is enabled" class="ui-h-12 ui-w-16">
+                     <span style:color="#232323" title="hook is enabled" class="ui-h-[2.5rem] ui-w-16">
                         <GiFishingHook />
                      </span>
                   {/if}

src/view/components/ArgInput.svelte

@@ -167,7 +167,7 @@
 {/if}
 
 <label
-   class="arg-input ui-min-w-fit ui-input-group ui-justify-{justify} ui-min-h-12"
+   class="arg-input ui-min-w-fit ui-input-group ui-justify-{justify} ui-min-h-[2.5rem]"
    for=""
    class:!ui-w-auto={widthAuto}
    id="{type}-{value}-{extra?.id}"

src/view/components/ModifierItem.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <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"
+   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"
    id={modifier.id}
 >
    <div class="ui-flex ui-flex-1 ui-gap-2 ui-flex-row ui-flex-wrap">

src/view/components/Tag.svelte

@@ -0,0 +1,70 @@
+<script>
+   import { contrastColor } from "../../modules/helpers.js";
+   import { createEventDispatcher } from "svelte";
+   const dispatch = createEventDispatcher();
+
+   export let tag;
+   export let compact = false;
+</script>
+
+<span
+   class="tag ui-gap-1 ui-cursor-pointer"
+   draggable={true}
+   on:dragstart
+   on:pointerdown
+   style:background-color={tag.color}
+   style:color={contrastColor(tag.color)}
+   title={tag.text}
+   class:compact
+>
+   {#if tag.icon}
+      <iconify-icon icon={tag.icon} style:color={contrastColor(tag.color)} class:compact />
+   {/if}
+
+   {#if !tag.icon || !compact}
+      {tag.text}
+   {/if}
+   {#if !compact}
+      <iconify-icon
+         class="ui-h-4 ui-w-4 ui-cursor-pointer tag-remove"
+         icon="gridicons:cross"
+         style:color={contrastColor(tag.color)}
+         on:click={() => dispatch("remove", tag)}
+      />
+   {/if}
+</span>
+
+<style>
+   .tag {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
+         "Droid Sans", "Helvetica Neue", sans-serif;
+      display: flex;
+      white-space: nowrap;
+      list-style: none;
+      background: hsl(var(--n) / var(--tw-bg-opacity));
+      color: #fff;
+      border-radius: 6px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      padding: 0px 0.4rem;
+      height: unset !important;
+      align-items: center;
+   }
+
+   .tag.compact {
+      font-size: 0.8rem;
+   }
+
+   .tag-remove {
+      cursor: pointer;
+      font-size: 16px;
+   }
+   iconify-icon {
+      font-size: 1.2rem;
+   }
+
+   iconify-icon.compact {
+      margin: 2px 0px !important;
+      font-size: 1rem;
+   }
+</style>