poe-svelte-ui-lib 1.2.26 → 1.2.28

package/dist/Button/ButtonProps.svelte

@@ -179,13 +179,6 @@
         value={$optionsStore.INFO_SIDE_OPTIONS.find((h) => h.value === component.properties.content.info.side)}
         onUpdate={(option) => updateProperty('content.info.side', option.value as string, component, onPropertyChange)}
       />
-      <UI.Input
-        label={{ name: $t('constructor.props.svgicon') }}
-        type="text-area"
-        maxlength={100000}
-        value={component.properties.content.icon}
-        onUpdate={(value) => updateProperty('content.icon', value as string, component, onPropertyChange)}
-      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
@@ -193,14 +186,6 @@
         value={component.properties.componentClass}
         onUpdate={(value) => updateProperty('componentClass', value as string, component, onPropertyChange)}
       />
-      <UI.Select
-        label={{ name: $t('constructor.props.height') }}
-        type="buttons"
-        options={$optionsStore.HEIGHT_OPTIONS}
-        value={initialHeight}
-        onUpdate={(option) =>
-          updateProperty('componentClass', twMerge(component.properties.componentClass, option.value), component, onPropertyChange)}
-      />
       <UI.Select
         wrapperClass="h-14"
         label={{ name: $t('constructor.props.colors') }}
@@ -210,6 +195,14 @@
         onUpdate={(option) =>
           updateProperty('componentClass', twMerge(component.properties.componentClass, option.value), component, onPropertyChange)}
       />
+
+      <UI.Input
+        label={{ name: $t('constructor.props.svgicon') }}
+        type="text-area"
+        maxlength={100000}
+        value={component.properties.content.icon}
+        onUpdate={(value) => updateProperty('content.icon', value as string, component, onPropertyChange)}
+      />
     </div>
   </div>
 {/if}

package/dist/FileAttach/FileAttachProps.svelte

@@ -31,6 +31,8 @@
         value={component.properties.wrapperClass}
         onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
       />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
       <UI.Input
         label={{ name: $t('constructor.props.label') }}
         value={component.properties.label.name}

package/dist/Input/InputProps.svelte

@@ -128,7 +128,10 @@
           maxlength={150}
           help={{ info: $t('constructor.props.regexp.info') }}
           componentClass={isValidRegExp === false ? '!border-2 !border-red-400' : ''}
-          onUpdate={(value) => updateProperty('help.regExp', value)}
+          onUpdate={(value) => {
+            console.log(value)
+            updateProperty('help.regExp', value as string)
+          }}
         />
       {:else if component.properties.type === 'number' && !component.properties.readonly && !component.properties.disabled}
         <UI.Input
@@ -170,7 +173,10 @@
         label={{ name: $t('constructor.props.readonly') }}
         value={component.properties.readonly}
         options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
-        onChange={(value) => updateProperty('readonly', value)}
+        onChange={(value) => {
+          updateProperty('readonly', value)
+          console.log(component.properties)
+        }}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.copy') }}

package/dist/Joystick/Joystick.svelte

@@ -4,7 +4,6 @@
 
   let {
     id = crypto.randomUUID(),
-
     wrapperClass = '',
     label = { name: '', class: '' },
     value = $bindable([0, 0, 0]),

package/dist/Map/Map.svelte

@@ -0,0 +1,205 @@
+<!-- $lib/ElementsUI/Map.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import type { IDeviceGNSS, IMapProps } from '../types'
+  import { onDestroy, onMount } from 'svelte'
+  import { MapLibre, NavigationControl, ScaleControl, GeolocateControl, FullScreenControl, Marker, Popup, CustomControl } from 'svelte-maplibre-gl'
+  import { fade } from 'svelte/transition'
+  import { twMerge } from 'tailwind-merge'
+
+  let { id = crypto.randomUUID(), label = { name: '', class: '' }, data = $bindable(), markerIcon }: IMapProps = $props()
+
+  interface MapDevice extends IDeviceGNSS {
+    isFresh: boolean
+    timeoutId: number | null
+  }
+
+  let devices: MapDevice[] = $state([])
+  let isCopied = $state(false)
+  let isDarkMode = $state(false)
+  let markerTimeout = $state(30_000)
+
+  const restartFreshTimer = (index: number) => {
+    const device = devices[index]
+    // Очистить старый таймер, если есть
+    if (device.timeoutId !== null) {
+      clearTimeout(device.timeoutId)
+    }
+    // Запустить новый
+    const id = setTimeout(() => {
+      if (index < devices.length && devices[index].DevSN === device.DevSN) {
+        devices[index].isFresh = false
+        devices[index].timeoutId = null
+      }
+    }, markerTimeout) as unknown as number
+    devices[index].timeoutId = id
+    devices[index].isFresh = true
+  }
+
+  // Обработка входящих данных
+  $effect(() => {
+    if (data) {
+      const idx = devices.findIndex((d) => d.DevSN === data?.DevSN)
+      if (idx !== -1) {
+        // Обновление существующего
+        devices[idx] = { ...devices[idx], ...data }
+        restartFreshTimer(idx)
+      } else {
+        // Новое устройство
+        const newDevice: MapDevice = {
+          ...data,
+          isFresh: true,
+          timeoutId: null,
+        }
+        devices.push(newDevice)
+        restartFreshTimer(devices.length - 1)
+      }
+      data = null
+    }
+  })
+
+  const handleThemeChange = (event: CustomEvent) => {
+    isDarkMode = !event.detail.currentTheme
+  }
+
+  onMount(() => {
+    if (typeof window !== 'undefined') {
+      isDarkMode = localStorage.getItem('AppTheme') !== 'light'
+      window.addEventListener('ThemeChange', handleThemeChange as EventListener)
+    }
+  })
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') window.addEventListener('ThemeChange', handleThemeChange as EventListener)
+
+    for (const device of devices) {
+      if (device.timeoutId !== null) {
+        clearTimeout(device.timeoutId)
+      }
+    }
+  })
+
+  const timeoutOptions: { label: string; value: number }[] = [
+    { label: '30 sec', value: 30_000 },
+    { label: '1 min', value: 60_000 },
+    { label: '3 min', value: 180_000 },
+    { label: '5 min', value: 300_000 },
+    { label: '10 min', value: 600_000 },
+    { label: '30 min', value: 1_800_000 },
+    { label: '1 h', value: 3_600_000 },
+  ]
+
+  const changeTimeout = (val: number) => {
+    markerTimeout = val
+    // перезапускаем таймеры для всех устройств
+    devices.forEach((_, idx) => restartFreshTimer(idx))
+  }
+</script>
+
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="h-full min-h-[200px]">
+  {#if label.name}
+    <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
+  {/if}
+  <MapLibre
+    class="h-[calc(100%-2rem)] min-h-[200px]"
+    style={isDarkMode
+      ? 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
+      : 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json'}
+    zoom={1.5}
+    center={{ lat: 30, lng: 0 }}
+  >
+    <NavigationControl />
+    <ScaleControl />
+    <GeolocateControl />
+    <FullScreenControl />
+
+    <CustomControl position="top-left">
+      <div class="flex items-center gap-2 px-2 py-1 text-black">
+        <label for="timeout" class="text-sm font-medium">{$t('constructor.props.map.timeout')}</label>
+        <select
+          id="timeout"
+          class="rounded px-2 py-1 text-sm"
+          bind:value={markerTimeout}
+          onchange={(e) => changeTimeout(parseInt((e.target as HTMLSelectElement).value))}
+        >
+          {#each timeoutOptions as opt}
+            <option value={opt.value}>{opt.label}</option>
+          {/each}
+        </select>
+      </div>
+    </CustomControl>
+
+    {#each devices as device}
+      <Marker lnglat={{ lng: device.NavLon, lat: device.NavLat }}>
+        {#snippet content()}
+          <div class="flex flex-col items-center justify-center leading-none">
+            <div
+              class="flex size-8 shrink-0 items-center justify-center [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full
+            {device.isFresh ? 'text-green-500' : 'text-red-500'}"
+              style="rotate: {device.NavHeading - 90}deg;"
+            >
+              {@html markerIcon ||
+                '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.76 12H6.832m0 0c0-.275-.057-.55-.17-.808L4.285 5.814c-.76-1.72 1.058-3.442 2.734-2.591L20.8 10.217c1.46.74 1.46 2.826 0 3.566L7.02 20.777c-1.677.851-3.495-.872-2.735-2.591l2.375-5.378A2 2 0 0 0 6.83 12"/></svg>'}
+            </div>
+            <p class="font-bold">{device.DevName}</p>
+          </div>
+        {/snippet}
+        <Popup closeButton={false} class="rounded-2xl text-left">
+          <p>DevSN: {device.DevSN}</p>
+          <p>Lat: {`${device.NavLat.toFixed(3)} | Lon: ${device.NavLon.toFixed(3)} | Alt: ${device.NavAlt}`}</p>
+          <p>Heading: {device.NavHeading} | Sat Use: {device.NavSatUse}</p>
+
+          <div class="relative flex justify-between">
+            <button
+              class="absolute right-0 flex cursor-pointer border-none bg-transparent"
+              onclick={(e) => {
+                e.preventDefault()
+                navigator.clipboard.writeText(
+                  `DevName: ${device.DevName}\nDevSN: ${device.DevSN}\nLat: ${device.NavLat.toFixed(3)} | Lon: ${device.NavLon.toFixed(3)} | Alt: ${device.NavAlt}\nHeading: ${device.NavHeading} | Sat Use: ${device.NavSatUse}`,
+                )
+                isCopied = true
+                setTimeout(() => (isCopied = false), 1000)
+              }}
+              aria-label="Копировать текст"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
+                <g fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path
+                    d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
+                  />
+                  <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
+                </g>
+              </svg>
+            </button>
+            {#if isCopied}
+              <div
+                class="absolute top-1/2 right-0 -translate-y-1/2 transform rounded-md bg-(--green-color) px-2 py-1 text-sm shadow-lg"
+                transition:fade={{ duration: 200 }}
+              >
+                ✓
+              </div>
+            {/if}
+
+            <button
+              class="size-6 cursor-pointer"
+              aria-label="Удалить"
+              onclick={() => (devices = devices.filter((dev) => dev.DevSN !== device.DevSN))}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"
+                ><path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="1.5"
+                  d="m19.5 5.5l-.62 10.025c-.158 2.561-.237 3.842-.88 4.763a4 4 0 0 1-1.2 1.128c-.957.584-2.24.584-4.806.584c-2.57 0-3.855 0-4.814-.585a4 4 0 0 1-1.2-1.13c-.642-.922-.72-2.205-.874-4.77L4.5 5.5M3 5.5h18m-4.944 0l-.683-1.408c-.453-.936-.68-1.403-1.071-1.695a2 2 0 0 0-.275-.172C13.594 2 13.074 2 12.035 2c-1.066 0-1.599 0-2.04.234a2 2 0 0 0-.278.18c-.395.303-.616.788-1.058 1.757L8.053 5.5m1.447 11v-6m5 6v-6"
+                  color="currentColor"
+                /></svg
+              >
+            </button>
+          </div>
+        </Popup>
+      </Marker>
+    {/each}
+  </MapLibre>
+</div>

package/dist/Map/Map.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IMapProps } from '../types';
+declare const Map: import("svelte").Component<IMapProps, {}, "data">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/Map/MapProps.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type IGraphProps, updateProperty } 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'
+
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
+    component: UIComponent & { properties: Partial<IGraphProps> }
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void
+    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 : [])
+</script>
+
+{#if forConstructor}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
+        onUpdate={(value) => {
+          updateProperty('id', value.value as string, component, onPropertyChange)
+          updateProperty('eventHandler.Variables', value.value as string, component, onPropertyChange)
+          onPropertyChange(null, value.name?.split('—')[1].trim(), null)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <div class="mt-6 flex gap-2">
+        <UI.Button content={{ name: $t('constructor.props.markerIcon') }} onClick={() => (showIconLib = true)} />
+        {#if showIconLib}
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
+            {#snippet main()}
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('markerIcon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.markerIcon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('markerIcon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+{:else}
+  <div class="relative mb-2 flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+
+    <div class="flex w-1/3 flex-col px-2">
+      <div class="mt-6 flex gap-2">
+        <UI.Button content={{ name: $t('constructor.props.markerIcon') }} onClick={() => (showIconLib = true)} />
+        {#if showIconLib}
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
+            {#snippet main()}
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('markerIcon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.markerIcon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('markerIcon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/Map/MapProps.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type UIComponent, type IGraphProps } from '../types';
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<IGraphProps>;
+    };
+    onPropertyChange: (value?: string | object, name?: string, access?: string) => void;
+    forConstructor?: boolean;
+};
+declare const MapProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type MapProps = ReturnType<typeof MapProps>;
+export default MapProps;

package/dist/Select/SelectProps.svelte

@@ -144,9 +144,12 @@
           number={{ minNum: 0, maxNum: 31, step: 1 }}
           value={[component.properties.range.start, component.properties.range.end]}
           onUpdate={(value) => {
-            updateProperty('range.start', value[0] as [number, number], component, onPropertyChange)
-            updateProperty('range.end', value as number[][1] as number, component, onPropertyChange)
-            generateBitOptions(component.properties.range.start, component.properties.range.end)
+            if (Array.isArray(value)) {
+              if (value[1] - value[0] > 6) value = [value[0], value[0] + 6]
+              updateProperty('range.start', value[0] as number, component, onPropertyChange)
+              updateProperty('range.end', value[1] as number, component, onPropertyChange)
+              generateBitOptions(component.properties.range.start, component.properties.range.end)
+            }
           }}
         />
       {/if}

package/dist/Slider/Slider.svelte

@@ -25,6 +25,10 @@
   let lowerValue = $derived(isRange && Array.isArray(value) ? value[0] : number.minNum)
   let upperValue = $derived(isRange && Array.isArray(value) ? value[1] : number.maxNum)
 
+  let activeRound: 'floor' | 'ceil' = $state('floor')
+
+  let centerNum = $derived(lowerValue + Math[activeRound]((upperValue - lowerValue) / 2 / number.step) * number.step)
+
   $effect(() => {
     if (value === undefined || value === null) {
       if (type === 'single' && !value) value = number.minNum
@@ -36,15 +40,15 @@
     const stepValue = direction === 'increment' ? number.step : -number.step
     if (isRange && target !== 'single') {
       if (target === 'lower') {
-        lowerValue = Math.max(number.minNum, Math.min(lowerValue + stepValue, upperValue))
-        lowerValue = lowerValue == upperValue ? upperValue - number.step : lowerValue
+        lowerValue = roundToClean(Math.max(number.minNum, Math.min(lowerValue + stepValue, upperValue)))
+        lowerValue = roundToClean(lowerValue == upperValue ? upperValue - number.step : lowerValue)
       } else {
-        upperValue = Math.min(number.maxNum, Math.max(upperValue + stepValue, lowerValue))
-        upperValue = upperValue == lowerValue ? upperValue + number.step : upperValue
+        upperValue = roundToClean(Math.min(number.maxNum, Math.max(upperValue + stepValue, lowerValue)))
+        upperValue = roundToClean(upperValue == lowerValue ? upperValue + number.step : upperValue)
       }
       onUpdate([lowerValue, upperValue])
     } else {
-      singleValue = Math.max(number.minNum, Math.min(singleValue + stepValue, number.maxNum))
+      singleValue = roundToClean(Math.max(number.minNum, Math.min(singleValue + stepValue, number.maxNum)))
       onUpdate(singleValue)
     }
   }
@@ -58,79 +62,17 @@
     }
   })
 
-  let activeThumb = $state<'lower' | 'upper'>('lower')
-  const handleTrackClick = (e: MouseEvent) => {
-    e.stopPropagation()
-    const track = e.currentTarget as HTMLElement
-    const rect = track.getBoundingClientRect()
-    const clickPercent = ((e.clientX - rect.left) / rect.width) * 100
-    const rawValue = number.minNum + (clickPercent / 100) * (number.maxNum - number.minNum)
-    const clickValue = Math.round((rawValue - number.minNum) / number.step) * number.step + number.minNum
-
-    if (isRange) {
-      const lowerDiff = Math.abs(clickValue - lowerValue)
-      const upperDiff = Math.abs(clickValue - upperValue)
-
-      activeThumb = lowerDiff < upperDiff ? 'lower' : 'upper'
-
-      if (activeThumb === 'lower') {
-        lowerValue = Math.max(number.minNum, Math.min(clickValue, upperValue))
-        lowerValue = lowerValue == upperValue ? upperValue - number.step : lowerValue
-      } else {
-        upperValue = Math.min(number.maxNum, Math.max(clickValue, lowerValue))
-        upperValue = upperValue == lowerValue ? upperValue + number.step : upperValue
-      }
-      onUpdate([lowerValue, upperValue])
-    } else {
-      singleValue = Math.max(number.minNum, Math.min(clickValue, number.maxNum))
-      onUpdate(singleValue)
-    }
-  }
-
-  let rangeRefLower: HTMLElement | null = $state(null)
-  let rangeRefUpper: HTMLElement | null = $state(null)
-  let shadowWidth = $state()
+  const roundToClean = (num: number): number => {
+    if (Number.isInteger(num)) return num
 
-  const updateShadowWidth = () => {
-    let thumbCenterLower
-    let thumbCenterUpper
+    const rounded1 = Number(num.toFixed(1))
+    if (Math.abs(rounded1 - num) < 1e-10) return rounded1
 
-    if (rangeRefLower) {
-      const rect = rangeRefLower.getBoundingClientRect()
-      const percent = (lowerValue - number.minNum) / (number.maxNum - number.minNum)
-      thumbCenterLower = rect.left + rect.width * percent
-    }
+    const rounded2 = Number(num.toFixed(2))
+    if (Math.abs(rounded2 - num) < 1e-10) return rounded2
 
-    if (rangeRefUpper) {
-      const rect = rangeRefUpper.getBoundingClientRect()
-      const percent = (upperValue - number.minNum) / (number.maxNum - number.minNum)
-      thumbCenterUpper = rect.left + rect.width * percent
-    }
-
-    if (thumbCenterUpper && thumbCenterLower) {
-      shadowWidth = (thumbCenterUpper - thumbCenterLower) / 3.5
-    }
+    return rounded2
   }
-
-  $effect(() => {
-    lowerValue
-    upperValue
-    updateShadowWidth()
-  })
-
-  onMount(() => {
-    if (window.visualViewport) {
-      const handleResize = () => {
-        updateShadowWidth()
-      }
-
-      window.visualViewport.addEventListener('resize', handleResize)
-
-      onDestroy(() => {
-        if (window.visualViewport) window.visualViewport.removeEventListener('resize', handleResize)
-      })
-    }
-  })
 </script>
 
 <div class={twMerge(`bg-blue relative flex w-full flex-col items-center `, wrapperClass)}>
@@ -141,57 +83,42 @@
   <!-- Слайдер -->
   <div
     id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-    class="relative flex h-9 w-full justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}"
+    class="relative flex h-8 w-full items-center justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}"
   >
     {#if isRange}
       {@const userAgent = navigator.userAgent}
-      <!-- Трек и активная зона -->
-      <div
-        class={`absolute z-10 h-full w-full rounded-full bg-transparent ${disabled ? '' : 'cursor-pointer'}`}
-        role="button"
-        tabindex={null}
-        onkeydown={null}
-        onclick={(e) => {
-          disabled ? undefined : handleTrackClick(e)
-        }}
-      ></div>
-
-      <!-- Ползунки -->
-      <input
-        bind:this={rangeRefLower}
-        type="range"
-        min={number.minNum}
-        max={number.maxNum}
-        step={number.step}
-        bind:value={lowerValue}
-        oninput={disabled
-          ? undefined
-          : (e) => {
-              const newValue = Math.min(Number((e.target as HTMLInputElement).value), upperValue)
-              lowerValue = newValue
-              lowerValue = newValue == upperValue ? upperValue - number.step : newValue
-            }}
-        onmouseup={(e) => {
-          handleTrackClick(e)
-          disabled ? undefined : () => onUpdate([lowerValue, upperValue])
-        }}
-        {disabled}
-        class={twMerge(
-          `slider-bg absolute h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
-              [&::-webkit-slider-runnable-track]:rounded-full 
+      <div class="flex w-full">
+        <input
+          type="range"
+          min={number.minNum}
+          max={centerNum}
+          step={number.step}
+          bind:value={lowerValue}
+          oninput={disabled
+            ? undefined
+            : (e) => {
+                const newValue = Math.min(Number((e.target as HTMLInputElement).value), upperValue)
+                lowerValue = roundToClean(newValue == upperValue ? upperValue - number.step : newValue)
+                onUpdate([lowerValue, upperValue])
+              }}
+          onmousedown={() => (activeRound = 'ceil')}
+          {disabled}
+          class={twMerge(
+            `slider-bg basis-[calc(${(centerNum / number.maxNum) * 100}%+2rem+5px)] h-8 w-full appearance-none overflow-hidden 
+              accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-l-full
               [&::-webkit-slider-runnable-track]:bg-(--gray-color)
-              [&::-webkit-slider-thumb]:relative 
-              [&::-webkit-slider-thumb]:z-100 
-              [&::-webkit-slider-thumb]:ml-[-0.4rem] 
-              [&::-webkit-slider-thumb]:h-4
-              [&::-webkit-slider-thumb]:w-4
+              [&::-webkit-slider-runnable-track]:px-2
+              [&::-webkit-slider-thumb]:relative
+              [&::-webkit-slider-thumb]:z-100
+              [&::-webkit-slider-thumb]:size-4
               [&::-webkit-slider-thumb]:cursor-pointer
               [&::-webkit-slider-thumb]:rounded-full
-            [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
+              [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
             ${
               userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
-                ? 'pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]'
-                : 'pl-3 [&::-webkit-slider-thumb]:ring-[5px]'
+                ? '[&::-webkit-slider-thumb]:ring-[6.5px]'
+                : '[&::-webkit-slider-thumb]:ring-[5px] '
             }
             [&::-moz-range-thumb]:relative 
             [&::-moz-range-thumb]:ml-[-0.4rem]
@@ -203,45 +130,42 @@
             [&::-moz-range-track]:rounded-full
             [&::-moz-range-track]:bg-(--gray-color)
              `,
-          `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
-              [&::-webkit-slider-thumb]:shadow-[calc(${shadowWidth}px+0.5rem)_0_0_${shadowWidth}px]`,
-        )}
-      />
-
-      <input
-        bind:this={rangeRefUpper}
-        type="range"
-        min={number.minNum}
-        max={number.maxNum}
-        step={number.step}
-        bind:value={upperValue}
-        oninput={disabled
-          ? undefined
-          : (e) => {
-              const newValue = Math.max(Number((e.target as HTMLInputElement).value), lowerValue)
-              upperValue = newValue
-              upperValue = newValue == lowerValue ? newValue + number.step : upperValue
-            }}
-        onmouseup={(e) => {
-          handleTrackClick(e)
-          disabled ? undefined : () => onUpdate([lowerValue, upperValue])
-        }}
-        {disabled}
-        class={twMerge(
-          `slider-bg absolute h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
-              [&::-webkit-slider-runnable-track]:rounded-full
-              [&::-webkit-slider-thumb]:relative 
+            `[&::-moz-range-thumb]:shadow-[calc(100rem+0.5rem)_0_0_100rem] 
+              [&::-webkit-slider-thumb]:shadow-[calc(100rem+0.5rem)_0_0_100rem]`,
+          )}
+          style={`flex-basis: calc(${(centerNum / number.maxNum) * 100}%+2rem+5px)`}
+        />
+        <input
+          type="range"
+          min={centerNum}
+          max={number.maxNum}
+          step={number.step}
+          bind:value={upperValue}
+          oninput={disabled
+            ? undefined
+            : (e) => {
+                const newValue = Math.max(Number((e.target as HTMLInputElement).value), lowerValue)
+                upperValue = roundToClean(newValue == lowerValue ? newValue + number.step : upperValue)
+                onUpdate([lowerValue, upperValue])
+              }}
+          onmousedown={() => (activeRound = 'floor')}
+          {disabled}
+          class={twMerge(
+            `slider-bg basis-[calc(${100 - (centerNum / number.maxNum) * 100}%+2rem+5px)] h-8 w-full  appearance-none overflow-hidden  
+              accent-(--back-color) 
+              [&::-webkit-slider-runnable-track]:rounded-r-full
+              [&::-webkit-slider-runnable-track]:bg-(--gray-color)
+              [&::-webkit-slider-runnable-track]:px-2
+              [&::-webkit-slider-thumb]:relative
               [&::-webkit-slider-thumb]:z-100
-              [&::-webkit-slider-thumb]:ml-[-0.4rem] 
-              [&::-webkit-slider-thumb]:h-4
-              [&::-webkit-slider-thumb]:w-4
+              [&::-webkit-slider-thumb]:size-4
               [&::-webkit-slider-thumb]:cursor-pointer
               [&::-webkit-slider-thumb]:rounded-full
-            [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
+              [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
             ${
               userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
-                ? 'pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]'
-                : 'pl-3 [&::-webkit-slider-thumb]:ring-[5px]'
+                ? '[&::-webkit-slider-thumb]:ring-[6.5px]'
+                : '[&::-webkit-slider-thumb]:ring-[5px] '
             }
             [&::-moz-range-thumb]:relative 
             [&::-moz-range-thumb]:ml-[-0.4rem]
@@ -253,16 +177,23 @@
             [&::-moz-range-track]:rounded-full
             [&::-moz-range-track]:bg-(--gray-color)
              `,
-          `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
-            ${shadowWidth ? '' : ''}  [&::-webkit-slider-thumb]:shadow-[calc(${shadowWidth}px*-1-0.5rem)_0_0_${shadowWidth}px]`,
-        )}
-      />
+            `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
+              [&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
+          )}
+          style={`flex-basis: calc(${(centerNum / number.maxNum) * 100}%+2rem+5px)`}
+        />
+      </div>
     {:else}
       {@const userAgent = navigator.userAgent}
       <!-- Одиночный слайдер -->
       <div class="absolute h-full w-full">
         <input
           type="range"
+          min={number.minNum}
+          max={number.maxNum}
+          step={number.step}
+          bind:value={singleValue}
+          oninput={() => onUpdate(singleValue)}
           class={twMerge(
             `slider-bg  h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color) 
               [&::-webkit-slider-runnable-track]:rounded-full
@@ -293,10 +224,6 @@
             `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
               [&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
           )}
-          min={number.minNum}
-          max={number.maxNum}
-          step={number.step}
-          bind:value={singleValue}
         />
       </div>
     {/if}

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { default as InputProps } from './Input/InputProps.svelte';
 export { default as Joystick } from './Joystick/Joystick.svelte';
 export { default as JoystickProps } from './Joystick/JoystickProps.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as Map } from './Map/Map.svelte';
+export { default as MapProps } from './Map/MapProps.svelte';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
 export { default as ProgressBarProps } from './ProgressBar/ProgressBarProps.svelte';
 export { default as Select } from './Select/Select.svelte';
@@ -28,4 +30,4 @@ export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
 export * from './locales/i18n';
 export * from './locales/translations';
-export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, } from './types';
+export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, } from './types';

package/dist/index.js

@@ -13,6 +13,8 @@ export { default as InputProps } from './Input/InputProps.svelte';
 export { default as Joystick } from './Joystick/Joystick.svelte';
 export { default as JoystickProps } from './Joystick/JoystickProps.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as Map } from './Map/Map.svelte';
+export { default as MapProps } from './Map/MapProps.svelte';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
 export { default as ProgressBarProps } from './ProgressBar/ProgressBarProps.svelte';
 export { default as Select } from './Select/Select.svelte';

package/dist/locales/translations.js

@@ -72,6 +72,7 @@ const translations = {
         'constructor.props.align.content': 'Выравнивание контента',
         'constructor.props.image': 'Фоновое изображение',
         'constructor.props.labelicon': 'Иконка заголовка',
+        'constructor.props.markerIcon': 'Иконка маркера',
         'constructor.props.removeimage': 'Удалить изображение',
         'constructor.props.name': 'Текст',
         'constructor.props.height': 'Высота',
@@ -125,6 +126,7 @@ const translations = {
         'constructor.props.equal': 'Равные',
         'constructor.props.bitmode': 'Битовый режим',
         'constructor.props.access': 'Доступ (не для владельца)',
+        'constructor.props.map.timeout': 'Таймаут маркеров:',
         'constructor.props.table.columns': 'Колонки таблицы',
         'constructor.props.table.columns.key': 'Ключ',
         'constructor.props.table.columns.label': 'Название колонки',

package/dist/types.d.ts

@@ -8,8 +8,8 @@ export interface UIComponent {
     id: string;
     name?: string;
     access?: 'full' | 'viewOnly' | 'hidden';
-    type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'Joystick' | 'ProgressBar' | 'Graph' | 'Table' | 'Tabs' | 'FileAttach';
-    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | ITabsProps | IFileInputProps | IJoystickProps;
+    type: 'Button' | 'Accordion' | 'Input' | 'Select' | 'Switch' | 'ColorPicker' | 'Slider' | 'TextField' | 'Joystick' | 'ProgressBar' | 'Graph' | 'Table' | 'Tabs' | 'FileAttach' | 'Map';
+    properties: IAccordionProps | IButtonProps | IInputProps | ISelectProps | ISwitchProps | IColorPickerProps | ISliderProps | ITextFieldProps | IProgressBarProps | IGraphProps | ITableProps<object> | ITabsProps | IFileInputProps | IJoystickProps | IMapProps;
     position: Position;
     parentId: string;
 }
@@ -298,3 +298,21 @@ export interface IJoystickProps {
     }[];
     onUpdate?: (value: number[]) => void;
 }
+export interface IDeviceGNSS {
+    NavLat: number;
+    NavLon: number;
+    NavAlt: number;
+    DevName: string;
+    DevSN: string;
+    NavHeading: number;
+    NavSatUse: number;
+}
+export interface IMapProps {
+    id?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    data: IDeviceGNSS | null;
+    markerIcon?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.2.26",
+  "version": "1.2.28",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -36,6 +36,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.7.1",
+    "svelte-maplibre-gl": "^1.0.2",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
     "tsx": "^4.20.6",
@@ -43,14 +44,14 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.48.5",
-    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/kit": "^2.49.0",
+    "@sveltejs/package": "^2.5.6",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.43.12",
+    "svelte": "^5.43.14",
     "svelte-preprocess": "^6.0.3",
-    "vite": "^7.2.2",
+    "vite": "^7.2.4",
     "vite-plugin-compression": "^0.5.1"
   }
 }