Add dynamic suggestion to inputs

components/package.json

@@ -18,7 +18,7 @@
     "preference": "dist/components.js"
   },
   "dependencies": {
-    "@intechstudio/grid-uikit": "^1.20240813.1834",
+    "@intechstudio/grid-uikit": "^1.20241115.1558",
     "typescript": "^5.5.4",
     "ws": "^8.18.0"
   }

components/src/Preferences.svelte

@@ -6,7 +6,7 @@
   let currentlyConnected = false;
 
   // @ts-ignore
-  const messagePort = createPackageMessagePort("package-photoshop");
+  const messagePort = createPackageMessagePort("package-photoshop", "preferences");
 
 
   onMount(() => {

components/src/SingleEventDynamicAction.svelte

@@ -0,0 +1,81 @@
+<svelte:options customElement={{tag: 'single-event-dynamic-action', shadow: 'none'}} />
+<script>
+  import { AtomicInput, AtomicSuggestions } from "@intechstudio/grid-uikit";
+  import { onMount } from "svelte";
+  let eventType = "";
+  let eventId = "";
+  let currentCodeValue = "";
+  let ref;
+  let suggestionElement;
+  let suggestions = undefined;
+
+  $: eventType && loadSuggestions();
+
+  function loadSuggestions(){
+    // @ts-ignore
+    let port = createPackageMessagePort("package-photoshop", "dynamic-action");
+    port.onmessage = (e) => {
+      const data = e.data;
+      if (data.type === "init-suggestions") {
+        suggestions = data.suggestions[eventType];
+      }
+      port.close();
+    };
+    port.start();
+  }
+
+  function handleConfigUpdate(config) {
+    const regex =
+        /^gps\("package-photoshop", "*(.*?)", "*(.*?)"\)$/;
+    if (currentCodeValue != config.script){
+        currentCodeValue = config.script;
+        const match = config.script.match(regex);
+        if (match) {
+          eventType = match[1] ?? "";
+          eventId = match[2] ?? "";
+        }
+    }
+  }
+
+  onMount(() => {
+    const event = new CustomEvent("updateConfigHandler", {
+        bubbles: true,
+        detail: { handler: handleConfigUpdate },
+    });
+    ref.dispatchEvent(event);
+  });
+
+  $: eventId, function() {
+    var code = `gps("package-photoshop", "${eventType}", "${eventId}")`;
+    if (currentCodeValue != code){
+        currentCodeValue = code;    
+        const event = new CustomEvent("updateCode", {
+            bubbles: true,
+            detail: { script: String(code) },
+        });
+        if (ref){
+            ref.dispatchEvent(event);
+        }
+    }
+  }()
+</script>
+
+<single-event
+  class="{$$props.class} flex flex-col w-full pb-2 px-2 pointer-events-auto"
+  bind:this={ref}
+>
+    <div class="w-full flex">
+        <div class="atomicInput">
+            <div class="text-gray-500 text-sm pb-1">Parameter ID</div>
+            <AtomicInput
+                inputValue={eventId}
+                suggestions={suggestions}
+                suggestionTarget={suggestionElement}
+                on:change={(e) => {
+                    eventId = e.detail;
+                }}/>
+        </div>
+    </div>
+
+    <AtomicSuggestions bind:component={suggestionElement} />
+  </single-event>

components/src/SingleEventStaticAction.svelte

@@ -0,0 +1,67 @@
+<svelte:options customElement={{tag: 'single-event-static-action', shadow: 'none'}} />
+<script>
+  import { AtomicInput, AtomicSuggestions } from "@intechstudio/grid-uikit";
+  import { onMount } from "svelte";
+  import data from "./single_event_static_data.js"
+  let eventType = "";
+  let eventId = "";
+  let currentCodeValue = "";
+  let ref;
+  let suggestionElement;
+  $: suggestions = data[eventType];
+
+  function handleConfigUpdate(config) {
+    const regex =
+        /^gps\("package-photoshop", "*(.*?)", "*(.*?)"\)$/;
+    if (currentCodeValue != config.script){
+        currentCodeValue = config.script;
+        const match = config.script.match(regex);
+        if (match) {
+          eventType = match[1] ?? "";
+          eventId = match[2] ?? "";
+        }
+    }
+  }
+
+  onMount(() => {
+    const event = new CustomEvent("updateConfigHandler", {
+        bubbles: true,
+        detail: { handler: handleConfigUpdate },
+    });
+    ref.dispatchEvent(event);
+  });
+
+  $: eventId, function() {
+    var code = `gps("package-photoshop", "${eventType}", "${eventId}")`;
+    if (currentCodeValue != code){
+        currentCodeValue = code;    
+        const event = new CustomEvent("updateCode", {
+            bubbles: true,
+            detail: { script: String(code) },
+        });
+        if (ref){
+            ref.dispatchEvent(event);
+        }
+    }
+  }()
+</script>
+
+<single-event
+  class="{$$props.class} flex flex-col w-full pb-2 px-2 pointer-events-auto"
+  bind:this={ref}
+>
+    <div class="w-full flex">
+        <div class="atomicInput">
+            <div class="text-gray-500 text-sm pb-1">Parameter ID</div>
+            <AtomicInput
+                inputValue={eventId}
+                suggestions={suggestions}
+                suggestionTarget={suggestionElement}
+                on:change={(e) => {
+                    eventId = e.detail;
+                }}/>
+        </div>
+    </div>
+
+    <AtomicSuggestions bind:component={suggestionElement} />
+  </single-event>

components/src/main.js

@@ -1,3 +1,4 @@
 import Preferences from "./Preferences.svelte";
-import SingleEventAction from "./SingleEventAction.svelte";
+import SingleEventStaticAction from "./SingleEventStaticAction.svelte";
 import SingleParameterSetAction from "./SingleParameterSetAction.svelte";
+import SingleEventDynamicAction from "./SingleEventDynamicAction.svelte";

components/src/single_event_static_data.js

@@ -0,0 +1,23 @@
+export default {
+  "create-adjustment": [
+    { info: "Solid Color", value: "solidColorLayer" },
+    { info: "Gradient", value: "gradientLayer" },
+    { info: "Pattern", value: "patternLayer" },
+    { info: "Brightness", value: "brightnessEvent" },
+    { info: "Levels", value: "levels" },
+    { info: "Curves", value: "curves" },
+    { info: "Exposure", value: "exposure" },
+    { info: "Vibrance", value: "vibrance" },
+    { info: "Hue/Saturation", value: "hueSaturation" },
+    { info: "Color Balance", value: "colorBalance" },
+    { info: "Black and White", value: "blackAndWhite" },
+    { info: "Photo Filter", value: "photoFilter" },
+    { info: "Channel Mixer", value: "channelMixer" },
+    { info: "Color Lookup", value: "colorLookup" },
+    { info: "Invert", value: "invert" },
+    { info: "Posterize", value: "posterization" },
+    { info: "Threshold", value: "thresholdClassEvent" },
+    { info: "Gradient Map", value: "gradientMapClass" },
+    { info: "Selective Color", value: "selectiveColor" },
+  ],
+};

components/src/single_parameter_set_data.js

@@ -0,0 +1,28 @@
+export default {
+  "tool-parameter": [
+    { info: "Angle", value: "angle" },
+    { info: "Flow", value: "flow" },
+    { info: "Hardness", value: "hardness" },
+    //{info: "Mode", value : "mode"},
+    { info: "Opacity", value: "opacity" },
+    { info: "Pressure", value: "pressure" },
+    { info: "Roundness", value: "roundness" },
+    { info: "Size", value: "size" },
+    { info: "Smoothing", value: "smoothing" },
+    { info: "Spacing", value: "spacing" },
+  ],
+  "image-adjustment": [
+    { info: "Brightness", value: "brigthness" },
+    { info: "Contrast", value: "contrast" },
+    { info: "Hue", value: "hue" },
+    { info: "Lightness", value: "lightness" },
+    { info: "Saturation", value: "saturation" },
+  ],
+  "adjust-adjustment": [
+    { info: "Brightness", value: "brightness" },
+    { info: "Contrast", value: "contrast" },
+    { info: "Exposure", value: "exposure" },
+    { info: "Offset", value: "offset" },
+    { info: "Gamma", value: "gamma" },
+  ],
+};