Add new instructions, run format

intechstudio · Dec 6, 2024 · fac6177 · fac6177
1 parent 433de12
commit fac6177
Show file tree

Hide file tree

Showing 21 changed files with 650 additions and 279 deletions.
diff --git a/build.js b/build.js
@@ -35,7 +35,7 @@ fs.renameSync("components/dist", `${subfolder}/components/dist`);
 //Copy ccx file
 fs.renameSync(
   "photoshop-plugin/ccx/f6c64709_PS.ccx",
-  `${subfolder}/f6c64709_PS.ccx`,
+  `${subfolder}/f6c64709_PS.ccx`
 );
 
 output.on("close", () => {

diff --git a/components/index.html b/components/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/components/package-lock.json b/components/package-lock.json
diff --git a/components/package.json b/components/package.json
@@ -18,7 +18,7 @@
     "preference": "dist/components.js"
   },
   "dependencies": {
-    "@intechstudio/grid-uikit": "^1.20241115.1558",
+    "@intechstudio/grid-uikit": "^1.20241203.904",
     "typescript": "^5.5.4",
     "ws": "^8.18.0"
   }

diff --git a/components/src/Preferences.svelte b/components/src/Preferences.svelte
@@ -1,13 +1,25 @@
-<svelte:options customElement={{tag: 'photoshop-preference', shadow: 'none'}} />
+<svelte:options
+  customElement={{ tag: "photoshop-preference", shadow: "none" }}
+/>
+
 <script>
-  import { Block, BlockBody, BlockRow, BlockTitle, MoltenButton, MoltenInput } from "@intechstudio/grid-uikit";
+  import {
+    Block,
+    BlockBody,
+    BlockRow,
+    BlockTitle,
+    MoltenButton,
+    MoltenInput,
+  } from "@intechstudio/grid-uikit";
   import { onMount } from "svelte";
 
   let currentlyConnected = false;
 
   // @ts-ignore
-  const messagePort = createPackageMessagePort("package-photoshop", "preferences");
-
+  const messagePort = createPackageMessagePort(
+    "package-photoshop",
+    "preferences"
+  );
 
   onMount(() => {
     messagePort.onmessage = (e) => {
@@ -19,19 +31,26 @@
     messagePort.start();
     return () => {
       messagePort.close();
-    }
-  })
+    };
+  });
 </script>
 
 <main-app>
-
   <div class="px-4">
     <Block>
       <BlockTitle>
-        <div class="flex flex-row content-center">Photoshop Preference <div style="margin-left: 12px; width: 12px; height: 12px; border-radius: 50%; background-color: {currentlyConnected ? "#00D248" : "#fb2323"}" /></div>
+        <div class="flex flex-row content-center">
+          Photoshop Preference <div
+            style="margin-left: 12px; width: 12px; height: 12px; border-radius: 50%; background-color: {currentlyConnected
+              ? '#00D248'
+              : '#fb2323'}"
+          />
+        </div>
       </BlockTitle>
       <BlockBody>
-        Connection to localhost:3542 : {currentlyConnected ? "Connected" : "Connecting"}
+        Connection to localhost:3542 : {currentlyConnected
+          ? "Connected"
+          : "Connecting"}
       </BlockBody>
       <BlockBody>
         Photoshop plugin must be installed!
@@ -42,9 +61,8 @@
               type: "open-plugin-folder",
             });
           }}
-          />
+        />
       </BlockBody>
     </Block>
   </div>
-
 </main-app>
diff --git a/components/src/SingleEventDynamicAction.svelte b/components/src/SingleEventDynamicAction.svelte
@@ -1,4 +1,7 @@
-<svelte:options customElement={{tag: 'single-event-dynamic-action', shadow: 'none'}} />
+<svelte:options
+  customElement={{ tag: "single-event-dynamic-action", shadow: "none" }}
+/>
+
 <script>
   import { AtomicInput, AtomicSuggestions } from "@intechstudio/grid-uikit";
   import { onMount } from "svelte";
@@ -11,7 +14,7 @@
 
   $: eventType && loadSuggestions();
 
-  function loadSuggestions(){
+  function loadSuggestions() {
     // @ts-ignore
     let port = createPackageMessagePort("package-photoshop", "dynamic-action");
     port.onmessage = (e) => {
@@ -25,57 +28,58 @@
   }
 
   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] ?? "";
-        }
+    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 },
+      bubbles: true,
+      detail: { handler: handleConfigUpdate },
     });
     ref.dispatchEvent(event);
   });
 
-  $: eventId, function() {
-    var code = `gps("package-photoshop", "${eventType}", "${eventId}")`;
-    if (currentCodeValue != code){
-        currentCodeValue = code;    
+  $: 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) },
+          bubbles: true,
+          detail: { script: String(code) },
         });
-        if (ref){
-            ref.dispatchEvent(event);
+        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 class="w-full flex">
+    <div class="atomicInput">
+      <div class="text-gray-500 text-sm pb-1">Parameter ID</div>
+      <AtomicInput
+        inputValue={eventId}
+        {suggestions}
+        suggestionTarget={suggestionElement}
+        on:change={(e) => {
+          eventId = e.detail;
+        }}
+      />
     </div>
+  </div>
 
-    <AtomicSuggestions bind:component={suggestionElement} />
-  </single-event>
+  <AtomicSuggestions bind:component={suggestionElement} />
+</single-event>
diff --git a/components/src/SingleEventStaticAction.svelte b/components/src/SingleEventStaticAction.svelte
@@ -1,8 +1,11 @@
-<svelte:options customElement={{tag: 'single-event-static-action', shadow: 'none'}} />
+<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"
+  import data from "./single_event_static_data.js";
   let eventType = "";
   let eventId = "";
   let currentCodeValue = "";
@@ -11,57 +14,58 @@
   $: 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] ?? "";
-        }
+    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 },
+      bubbles: true,
+      detail: { handler: handleConfigUpdate },
     });
     ref.dispatchEvent(event);
   });
 
-  $: eventId, function() {
-    var code = `gps("package-photoshop", "${eventType}", "${eventId}")`;
-    if (currentCodeValue != code){
-        currentCodeValue = code;    
+  $: 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) },
+          bubbles: true,
+          detail: { script: String(code) },
         });
-        if (ref){
-            ref.dispatchEvent(event);
+        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 class="w-full flex">
+    <div class="atomicInput">
+      <div class="text-gray-500 text-sm pb-1">Parameter ID</div>
+      <AtomicInput
+        inputValue={eventId}
+        {suggestions}
+        suggestionTarget={suggestionElement}
+        on:change={(e) => {
+          eventId = e.detail;
+        }}
+      />
     </div>
+  </div>
 
-    <AtomicSuggestions bind:component={suggestionElement} />
-  </single-event>
+  <AtomicSuggestions bind:component={suggestionElement} />
+</single-event>