poe-svelte-ui-lib 1.2.29 → 1.2.31

package/dist/Input/InputProps.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import { t } from '../locales/i18n'
-  import type { IInputProps, UIComponent, ISelectOption } from '../types'
+  import type { IInputProps, UIComponent, ISelectOption, IUIComponentHandler } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
@@ -12,7 +12,7 @@
     forConstructor = true,
   } = $props<{
     component: UIComponent & { properties: Partial<IInputProps> }
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
 
@@ -33,7 +33,7 @@
   )
 
   /* Обновление свойства */
-  const updateProperty = (path: string, value: string | object | boolean | number | RegExp, name?: string) => {
+  const updateProperty = (path: string, value: string | object | boolean | number | RegExp) => {
     const newProperties = JSON.parse(JSON.stringify(component.properties))
     if (path === 'regExp') {
       try {
@@ -68,7 +68,7 @@
     }
 
     obj[parts[parts.length - 1]] = value
-    onPropertyChange(newProperties, name)
+    onPropertyChange({ properties: newProperties })
   }
 
   const handleOptionColorChange = (color: string) => {
@@ -96,8 +96,8 @@
         options={VARIABLE_OPTIONS}
         value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
         onUpdate={(value) => {
-          updateProperty('id', value.value as string, value.name?.split('—')[1].trim())
-          updateProperty('eventHandler.Variables', value.value as string)
+          updateProperty('id', value.value as string)
+          onPropertyChange({ name: value.name?.split('—')[1].trim(), eventHandler: { Variables: value.value as string } })
         }}
       />
       <UI.Select
@@ -105,7 +105,7 @@
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
       <UI.Select
         label={{ name: $t('constructor.props.type') }}
@@ -128,10 +128,7 @@
           maxlength={150}
           help={{ info: $t('constructor.props.regexp.info') }}
           componentClass={isValidRegExp === false ? '!border-2 !border-red-400' : ''}
-          onUpdate={(value) => {
-            console.log(value)
-            updateProperty('help.regExp', value as string)
-          }}
+          onUpdate={(value) => updateProperty('help.regExp', value as string)}
         />
       {:else if component.properties.type === 'number' && !component.properties.readonly && !component.properties.disabled}
         <UI.Input
@@ -173,10 +170,7 @@
         label={{ name: $t('constructor.props.readonly') }}
         value={component.properties.readonly}
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
-        onChange={(value) => {
-          updateProperty('readonly', value)
-          console.log(component.properties)
-        }}
+        onChange={(value) => updateProperty('readonly', value)}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.copy') }}
@@ -258,7 +252,7 @@
         type="buttons"
         options={$optionsStore.ACCESS_OPTION}
         value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}
-        onUpdate={(option) => onPropertyChange(null, null, option.value)}
+        onUpdate={(option) => onPropertyChange({ access: option.value })}
       />
       <UI.Input
         label={{ name: $t('constructor.props.value') }}

package/dist/Input/InputProps.svelte.d.ts

@@ -1,9 +1,14 @@
-import type { IInputProps, UIComponent } from '../types';
+import type { IInputProps, UIComponent, IUIComponentHandler } from '../types';
 type $$ComponentProps = {
     component: UIComponent & {
         properties: Partial<IInputProps>;
     };
-    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
     forConstructor?: boolean;
 };
 declare const InputProps: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Joystick/Joystick.svelte

@@ -6,12 +6,13 @@
     id = crypto.randomUUID(),
     wrapperClass = '',
     label = { name: '', class: '' },
-    value = $bindable([0, 0, 0]),
-    limits = [
-      { minNum: -100, maxNum: 100 },
-      { minNum: -100, maxNum: 100 },
-      { minNum: -100, maxNum: 100 },
+    value = $bindable([0, 0, 0, 0]),
+    axes = [
+      { name: 'Roll', minNum: -100, maxNum: 100 },
+      { name: 'Pitch', minNum: -100, maxNum: 100 },
+      { name: 'Yaw', minNum: -100, maxNum: 100 },
     ],
+    buttonIcon,
     onUpdate = () => {},
   }: IJoystickProps = $props()
 
@@ -21,8 +22,8 @@
       angle: 30.5,
       content: true,
       onClick: () => {
-        if (value[2] + sensitivity >= limits[2].maxNum) {
-          value[2] = limits[2].maxNum
+        if (value[2] + sensitivity >= axes[2].maxNum) {
+          value[2] = axes[2].maxNum
           onUpdate(value)
           return
         }
@@ -36,15 +37,15 @@
       angle: 58,
       content: false,
       onClick: () => {
-        if (value[2] + sensitivity >= limits[2].maxNum) {
-          value[2] = limits[2].maxNum
+        if (value[2] + sensitivity >= axes[2].maxNum) {
+          value[2] = axes[2].maxNum
           onUpdate(value)
         } else {
           value[2] = roundToClean(value[2] + sensitivity)
           onUpdate(value)
         }
-        if (value[1] - sensitivity <= limits[1].minNum) {
-          value[1] = limits[1].minNum
+        if (value[1] - sensitivity <= axes[1].minNum) {
+          value[1] = axes[1].minNum
           onUpdate(value)
         } else {
           value[1] = roundToClean(value[1] - sensitivity)
@@ -57,8 +58,8 @@
       angle: 122,
       content: true,
       onClick: () => {
-        if (value[1] - sensitivity <= limits[1].minNum) {
-          value[1] = limits[1].minNum
+        if (value[1] - sensitivity <= axes[1].minNum) {
+          value[1] = axes[1].minNum
           onUpdate(value)
           return
         }
@@ -71,15 +72,15 @@
       angle: 149.5,
       content: false,
       onClick: () => {
-        if (value[2] - sensitivity <= limits[2].minNum) {
-          value[2] = limits[2].minNum
+        if (value[2] - sensitivity <= axes[2].minNum) {
+          value[2] = axes[2].minNum
           onUpdate(value)
         } else {
           value[2] = roundToClean(value[2] - sensitivity)
           onUpdate(value)
         }
-        if (value[1] - sensitivity <= limits[1].minNum) {
-          value[1] = limits[1].minNum
+        if (value[1] - sensitivity <= axes[1].minNum) {
+          value[1] = axes[1].minNum
           onUpdate(value)
         } else {
           value[1] = roundToClean(value[1] - sensitivity)
@@ -92,8 +93,8 @@
       angle: 212,
       content: true,
       onClick: () => {
-        if (value[2] - sensitivity <= limits[2].minNum) {
-          value[2] = limits[2].minNum
+        if (value[2] - sensitivity <= axes[2].minNum) {
+          value[2] = axes[2].minNum
           onUpdate(value)
           return
         }
@@ -106,15 +107,15 @@
       angle: 239,
       content: false,
       onClick: () => {
-        if (value[1] + sensitivity >= limits[1].maxNum) {
-          value[1] = limits[1].maxNum
+        if (value[1] + sensitivity >= axes[1].maxNum) {
+          value[1] = axes[1].maxNum
           onUpdate(value)
         } else {
           value[1] = roundToClean(value[1] + sensitivity)
           onUpdate(value)
         }
-        if (value[2] - sensitivity <= limits[2].minNum) {
-          value[2] = limits[2].minNum
+        if (value[2] - sensitivity <= axes[2].minNum) {
+          value[2] = axes[2].minNum
           onUpdate(value)
         } else {
           value[2] = roundToClean(value[2] - sensitivity)
@@ -127,8 +128,8 @@
       angle: 301,
       content: true,
       onClick: () => {
-        if (value[1] + sensitivity >= limits[1].maxNum) {
-          value[1] = limits[1].maxNum
+        if (value[1] + sensitivity >= axes[1].maxNum) {
+          value[1] = axes[1].maxNum
           onUpdate(value)
           return
         }
@@ -141,15 +142,15 @@
       angle: 328,
       content: false,
       onClick: () => {
-        if (value[1] + sensitivity >= limits[1].maxNum) {
-          value[1] = limits[1].maxNum
+        if (value[1] + sensitivity >= axes[1].maxNum) {
+          value[1] = axes[1].maxNum
           onUpdate(value)
         } else {
           value[1] = roundToClean(value[1] + sensitivity)
           onUpdate(value)
         }
-        if (value[2] + sensitivity >= limits[2].maxNum) {
-          value[2] = limits[2].maxNum
+        if (value[2] + sensitivity >= axes[2].maxNum) {
+          value[2] = axes[2].maxNum
           onUpdate(value)
         } else {
           value[2] = roundToClean(value[2] + sensitivity)
@@ -180,7 +181,7 @@
 
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-red relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
+    <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
   <div class=" flex w-1/2 items-center justify-center">
@@ -204,16 +205,12 @@
               onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 20%)')}
               onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'var(--bg-color)')}
             >
-              {#if direction.content}
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
-                  ><path
-                    fill="currentColor"
-                    d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"
-                  /></svg
-                >
-              {:else}
-                •
-              {/if}
+              <svg xmlns="http://www.w3.org/2000/svg" width={direction.content ? 32 : 16} height={direction.content ? 32 : 16} viewBox="0 0 24 24"
+                ><path
+                  fill="currentColor"
+                  d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"
+                /></svg
+              >
             </span>
           </button>
         {/each}
@@ -230,81 +227,80 @@
           </span>
         {/each}
       </div>
-      <!-- Кнопка домой -->
+      <!-- Кнопка по центру -->
       <div
         class="z-20 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)] transition hover:scale-103"
       >
         <button
-          class="flex size-18 cursor-pointer items-center justify-center rounded-full bg-(--bg-color)"
-          title=""
+          class="flex size-18 cursor-pointer items-center justify-center rounded-full"
+          style="background: {value[3] == 1 ? 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)' : 'var(--bg-color)'}"
           onclick={() => {
-            value = [0, 0, 0]
-            onUpdate(value)
+            value[3] = value[3] == 0 ? 1 : 0
           }}
-          ><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
-            ><path
-              fill="currentColor"
-              d="M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75"
-            /></svg
-          ></button
         >
+          {@html buttonIcon
+            ? buttonIcon
+            : '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor"d="M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75"/></svg>'}
+        </button>
       </div>
     </div>
     <!-- Боковые кнопки (ось roll) -->
-    <div
-      class="absolute flex h-15 w-65 items-center justify-between rounded-full shadow-[0_0_15px_rgb(0_0_0_/0.25)]"
-      style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
-    >
-      <button
-        class="h-full cursor-pointer rounded-l-full px-3.5"
-        title=""
-        onclick={() => {
-          if (value[0] - sensitivity <= limits[0].minNum) {
-            value[0] = limits[0].minNum
-            onUpdate(value)
-            return
-          }
-          value[0] -= sensitivity
-          onUpdate(value)
-        }}
-        onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
-        onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
-        ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-          ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
-            ><path
-              stroke-miterlimit="10"
-              d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
-            /><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
-          ></svg
-        ></button
+    {#if axes.length == 3}
+      <div
+        class="absolute flex h-15 w-65 items-center justify-between rounded-full shadow-[0_0_15px_rgb(0_0_0_/0.25)]"
+        style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
       >
-      <button
-        class="h-full cursor-pointer rounded-r-full px-3.5"
-        title=""
-        onclick={() => {
-          if (value[0] + sensitivity >= limits[0].maxNum) {
-            value[0] = limits[0].maxNum
+        <button
+          class="h-full cursor-pointer rounded-l-full px-3.5"
+          title=""
+          onclick={() => {
+            if (value[0] - sensitivity <= axes[0].minNum) {
+              value[0] = axes[0].minNum
+              onUpdate(value)
+              return
+            }
+            value[0] = roundToClean(value[0] - sensitivity)
             onUpdate(value)
-            return
-          }
-          value[0] += sensitivity
-          onUpdate(value)
-        }}
-        onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
-        onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'vabackground: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
-        ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-          ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
-            ><path
-              stroke-miterlimit="10"
-              d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
-            /><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
-          ></svg
-        ></button
-      >
-    </div>
+          }}
+          onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
+          onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
+          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+            ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+              ><path
+                stroke-miterlimit="10"
+                d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
+              /><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
+            ></svg
+          ></button
+        >
+        <button
+          class="h-full cursor-pointer rounded-r-full px-3.5"
+          title=""
+          onclick={() => {
+            if (value[0] + sensitivity >= axes[0].maxNum) {
+              value[0] = axes[0].maxNum
+              onUpdate(value)
+              return
+            }
+            value[0] = roundToClean(value[0] + sensitivity)
+            onUpdate(value)
+          }}
+          onmouseenter={(e) => (e.currentTarget.style.backgroundColor = 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)')}
+          onmouseleave={(e) => (e.currentTarget.style.backgroundColor = 'vabackground: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)')}
+          ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+            ><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+              ><path
+                stroke-miterlimit="10"
+                d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
+              /><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
+            ></svg
+          ></button
+        >
+      </div>
+    {/if}
   </div>
 
-  <div class="right-10 flex items-center md:absolute">
+  <div class="flex items-center md:absolute md:left-[calc(50%+120px)]">
     <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full flex-col justify-center rounded-full p-10">
       {#each sensitivityOptions as option, index}
         <button
@@ -335,15 +331,15 @@
     </div>
 
     <div>
-      {#each [0, 1, 2] as num}
-        <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{num == 0 ? 'Roll' : num == 1 ? 'Pitch' : 'Yaw'}</h5>
+      {#each axes as axe, index}
+        <h5 class="w-full px-4 text-center">{axe.name}</h5>
         <input
           class={`w-20 rounded-2xl border border-(--border-color) px-4 py-1 text-center transition-all duration-300 outline-none
               hover:shadow-md 
               [&::-webkit-inner-spin-button]:hidden
               [&::-webkit-outer-spin-button]:hidden`}
           style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-          value={value[num]}
+          value={value[axes.length == 3 ? index : index + 1]}
           id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
           readonly
         />
@@ -351,4 +347,3 @@
     </div>
   </div>
 </div>
-<!-- sensitivity == 0.01 ? value[num].toFixed(2) : sensitivity == 0.1 ? value[num].toFixed(1) : value[num].toFixed(0) -->