poe-svelte-ui-lib 1.9.4 → 1.9.6

package/dist/Joystick/Joystick.svelte

@@ -6,11 +6,12 @@
     id = crypto.randomUUID(),
     wrapperClass = "",
     label = { name: "", class: "" },
-    value = $bindable([0, 0, 0, 0]),
+    value = $bindable([0, 0, 0]),
+    isHomeButton = false,
     readonly = false,
     axes = [
-      { name: "Roll", minNum: -360, maxNum: 360 },
       { name: "Pitch", minNum: -360, maxNum: 360 },
+      { name: "Roll", minNum: -360, maxNum: 360 },
       { name: "Yaw", minNum: -360, maxNum: 360 },
     ],
     buttonIcon,
@@ -33,7 +34,7 @@
       mainButton: false,
       onClick: () => {
         updateValue(2, +sensitivity)
-        updateValue(1, -sensitivity)
+        updateValue(0, -sensitivity)
         onUpdate(value)
       },
     },
@@ -42,7 +43,7 @@
       angle: 122,
       mainButton: true,
       onClick: () => {
-        updateValue(1, -sensitivity)
+        updateValue(0, -sensitivity)
         onUpdate(value)
       },
     },
@@ -52,7 +53,7 @@
       mainButton: false,
       onClick: () => {
         updateValue(2, -sensitivity)
-        updateValue(1, -sensitivity)
+        updateValue(0, -sensitivity)
         onUpdate(value)
       },
     },
@@ -70,7 +71,7 @@
       angle: 239,
       mainButton: false,
       onClick: () => {
-        updateValue(1, +sensitivity)
+        updateValue(0, +sensitivity)
         updateValue(2, -sensitivity)
         onUpdate(value)
       },
@@ -80,7 +81,7 @@
       angle: 301,
       mainButton: true,
       onClick: () => {
-        updateValue(1, +sensitivity)
+        updateValue(0, +sensitivity)
         onUpdate(value)
       },
     },
@@ -89,7 +90,7 @@
       angle: 328,
       mainButton: false,
       onClick: () => {
-        updateValue(1, +sensitivity)
+        updateValue(0, +sensitivity)
         updateValue(2, +sensitivity)
         onUpdate(value)
       },
@@ -97,7 +98,7 @@
   ]
 
   const updateValue = (index: number, delta: number) => {
-    const axis = axes[axes.length == 2 ? index - 1 : index]
+    const axis = axes[axes.length == 2 && index == 2 ? index - 1 : index]
     const min = axis.minNum ?? -360
     const max = axis.maxNum ?? 360
 
@@ -125,7 +126,7 @@
 
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-blue 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} {value}</h5>
   {/if}
 
   {#if !readonly}
@@ -176,11 +177,18 @@
           {/each}
         </div>
         <!-- Кнопка по центру -->
-        <div class="btn-segment z-20 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)]">
+        <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)]">
           <button
-            class="flex size-18 cursor-pointer items-center justify-center rounded-full p-3.5 [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
-            style="background: {value[3] == 1 ? 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)' : 'var(--bg-color)'}"
-            onclick={() => (value[3] = value[3] == 0 ? 1 : 0)}
+            class="flex size-17 cursor-pointer rounded-full p-2 origin-center active:scale-95
+            [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+            style="background: {!isHomeButton && value[3] == 1 ? 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)' : 'var(--bg-color)'}"
+            onmouseenter={(e) => {
+              if (isHomeButton) e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 20%)"
+            }}
+            onmouseleave={(e) => {
+              if (isHomeButton) e.currentTarget.style.backgroundColor = "var(--bg-color)"
+            }}
+            onclick={() => (isHomeButton ? (value = [0, 0, 0]) : (value[3] = value[3] == 0 ? 1 : 0))}
           >
             {#if buttonIcon}
               {#if typeof buttonIcon === "string"}
@@ -190,7 +198,7 @@
                 <IconComponent />
               {/if}
             {:else}
-              <svg xmlns="http://www.w3.org/2000/svg" class="segment-icon" width="32" height="32" viewBox="0 0 24 24"
+              <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"
@@ -210,12 +218,12 @@
             class="btn-segment h-full cursor-pointer rounded-l-full px-3.5"
             title=""
             onclick={() => {
-              if (value[0] - sensitivity <= (axes[0].minNum ?? -360)) {
-                value[0] = axes[0].minNum ?? -360
+              if (value[1] - sensitivity <= (axes[1].minNum ?? -360)) {
+                value[1] = axes[1].minNum ?? -360
                 onUpdate(value)
                 return
               }
-              value[0] = roundToClean(value[0] - sensitivity)
+              value[1] = roundToClean(value[1] - sensitivity)
               onUpdate(value)
             }}
             onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)")}
@@ -234,12 +242,12 @@
             class="btn-segment h-full cursor-pointer rounded-r-full px-3.5"
             title=""
             onclick={() => {
-              if (value[0] + sensitivity >= (axes[0].maxNum ?? 360)) {
-                value[0] = axes[0].maxNum ?? 360
+              if (value[1] + sensitivity >= (axes[1].maxNum ?? 360)) {
+                value[1] = axes[1].maxNum ?? 360
                 onUpdate(value)
                 return
               }
-              value[0] = roundToClean(value[0] + sensitivity)
+              value[1] = roundToClean(value[1] + sensitivity)
               onUpdate(value)
             }}
             onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)")}
@@ -302,7 +310,7 @@
               [&::-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[axes.length == 3 ? index : index + 1]}
+            value={value[axes.length == 2 && index == 1 ? index + 1 : index]}
             id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
             readonly
           />

package/dist/Joystick/JoystickProps.svelte

@@ -3,12 +3,8 @@
   import { t } from "../locales/i18n"
   import { type UIComponent, type IGraphProps, updateProperty, type IOption, type IUIComponentHandler } from "../types"
   import * as UI from ".."
-  import Modal from "../Modal.svelte"
   import { ICONS } from "../icons"
-  import Button from "../Button/Button.svelte"
-  import CrossIcon from "../libIcons/CrossIcon.svelte"
   import { optionsStore } from "../options"
-  import { twMerge } from "tailwind-merge"
   import CommonSnippets from "../CommonSnippets.svelte"
 
   const {
@@ -21,8 +17,6 @@
     forConstructor?: boolean
   }>()
 
-  let showIconLib = $state(false)
-
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
@@ -96,6 +90,16 @@
   </div>
 {/snippet}
 
+{#snippet JoystickHomeButton()}
+  <UI.Switch
+    label={{ name: $t("constructor.props.joystick.homebutton") }}
+    value={component.properties.isHomeButton}
+    options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
+    onChange={(value) => {
+      updateProperty("isHomeButton", value, component, onPropertyChange)
+    }}
+  />{/snippet}
+
 {#if forConstructor}
   <div>
     <div class="relative flex flex-row items-start justify-center">
@@ -107,6 +111,7 @@
       <div class="flex w-1/3 flex-col px-2">
         <CommonSnippets snippet="Label" {component} {onPropertyChange} />
         <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
+        {@render JoystickHomeButton()}
       </div>
       <div class="flex w-1/3 flex-col px-2">
         <CommonSnippets
@@ -137,6 +142,7 @@
       <div class="flex w-1/3 flex-col px-2">
         <CommonSnippets snippet="Label" {component} {onPropertyChange} />
         <CommonSnippets snippet="LabelClass" {component} {onPropertyChange} />
+        {@render JoystickHomeButton()}
       </div>
       <div class="flex w-1/3 flex-col px-2">
         <CommonSnippets

package/dist/locales/translations.js

@@ -144,6 +144,7 @@ const translations = {
         "constructor.props.map.timeout": "Таймаут маркеров:",
         "constructor.props.joystick.axes": "Названия осей",
         "constructor.props.joystick.axes.info": "Поле для ввода названий осей, разделенных пробелами (2 или 3 названия)",
+        "constructor.props.joystick.homebutton": "Центральная кнопка сброса",
         "constructor.props.file.select": "Выберите файл",
         "constructor.props.file.notselected": "Файл не выбран",
         "constructor.props.map.loading": "Загрузка карты...",

package/dist/types.d.ts

@@ -189,6 +189,7 @@ export interface IJoystickProps {
         name?: string;
         class?: string;
     };
+    isHomeButton?: boolean;
     value?: number[];
     readonly?: boolean;
     axes?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -37,12 +37,12 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "^2.56.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.2.2",
     "@types/maplibre-gl": "^1.14.0",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.5.2",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
@@ -50,8 +50,8 @@
     "svelte": "^5.55.1",
     "tailwindcss": "^4.2.2",
     "tsx": "^4.21.0",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.3",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.5",
     "vite-plugin-compression": "^0.5.1"
   }
 }