poe-svelte-ui-lib 1.11.3 → 1.12.1

package/dist/Map/Map.svelte

@@ -4,14 +4,22 @@
   import { onDestroy, onMount } from "svelte"
   import { fade } from "svelte/transition"
   import { twMerge } from "tailwind-merge"
-  import { MapLibre, NavigationControl, ScaleControl, GeolocateControl, FullScreenControl, Marker, Popup, CustomControl } from "./mapWrapper"
+  import { MapLibre, NavigationControl, ScaleControl, GeolocateControl, FullScreenControl, Marker, Popup, Line, CustomControl } from "./mapWrapper"
 
-  let { id = crypto.randomUUID(), label = { name: "", class: "" }, data = $bindable(), markerIcon }: IMapProps = $props()
+  let {
+    id = crypto.randomUUID(),
+    label = { name: "", class: "" },
+    data = $bindable(),
+    markerIcon,
+    trackEnabled = $bindable(false),
+    trackLength = $bindable(1000),
+  }: IMapProps = $props()
 
   interface MapDevice extends IDeviceGNSS {
     isFresh: boolean
     staleTimeoutId: number | null
     removeTimeoutId: number | null
+    track: [number, number][]
   }
 
   let devices: MapDevice[] = $state([])
@@ -47,10 +55,13 @@
   // Обработка входящих данных
   $effect(() => {
     if (data) {
+      /* (0, 0) — признак отсутствия реального GPS-фикса, в траекторию такие точки не добавляем */
+      const hasFix = data.NavLat !== 0 || data.NavLon !== 0
       const idx = devices.findIndex((d) => d.DevSN === data?.DevSN)
       if (idx !== -1) {
         /* Обновление существующего */
-        devices[idx] = { ...devices[idx], ...data }
+        const track = hasFix ? [...devices[idx].track, [data.NavLon, data.NavLat] as [number, number]].slice(-trackLength) : devices[idx].track
+        devices[idx] = { ...devices[idx], ...data, track }
       } else {
         /* Новое устройство */
         const newDevice: MapDevice = {
@@ -58,6 +69,7 @@
           isFresh: true,
           staleTimeoutId: null,
           removeTimeoutId: null,
+          track: hasFix ? [[data.NavLon, data.NavLat]] : [],
         }
         devices.push(newDevice)
       }
@@ -66,6 +78,15 @@
     }
   })
 
+  // Подрезает уже накопленные траектории при уменьшении trackLength
+  $effect(() => {
+    if (trackLength > 0) {
+      devices.forEach((device) => {
+        if (device.track.length > trackLength) device.track = device.track.slice(-trackLength)
+      })
+    }
+  })
+
   const handleThemeChange = (event: CustomEvent) => {
     isDarkMode = !event.detail.currentTheme
   }
@@ -85,6 +106,15 @@
     }
   })
 
+  const trackLengthOptions: { label: string; value: number }[] = [
+    { label: "100", value: 100 },
+    { label: "500", value: 500 },
+    { label: "1000", value: 1000 },
+    { label: "5000", value: 5000 },
+    { label: "10000", value: 10000 },
+    { label: "50000", value: 50000 },
+  ]
+
   const timeoutOptions: { label: string; value: number }[] = [
     { label: "30 sec", value: 30_000 },
     { label: "1 min", value: 60_000 },
@@ -117,21 +147,47 @@
     <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 class="flex flex-wrap items-center gap-3 px-2 py-1 text-black">
+        <label class="flex items-center gap-1.5 text-sm font-medium">
+          <input type="checkbox" bind:checked={trackEnabled} />
+          {$T("constructor.props.map.track")}
+        </label>
+
+        {#if trackEnabled}
+          <div class="flex items-center gap-2">
+            <label for="trackLength" class="text-sm font-medium">{$T("constructor.props.map.trackLength")}</label>
+            <select id="trackLength" class="rounded px-2 py-1 text-sm" bind:value={trackLength}>
+              {#each trackLengthOptions as opt}
+                <option value={opt.value}>{opt.label}</option>
+              {/each}
+            </select>
+          </div>
+        {/if}
+
+        <div class="flex items-center gap-2">
+          <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>
       </div>
     </CustomControl>
 
+    {#if trackEnabled}
+      {#each devices as device (device.DevSN)}
+        {#if device.track.length >= 2}
+          <Line id={`track-${device.DevSN}`} coordinates={device.track} color={device.isFresh ? "#22c55e" : "#ef4444"} />
+        {/if}
+      {/each}
+    {/if}
+
     {#each devices as device}
       <Marker lnglat={{ lng: device.NavLon, lat: device.NavLat }}>
         {#snippet content()}

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

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

package/dist/Map/MapProps.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
   import { T } from "../locales/i18n"
-  import { type UIComponent, type IGraphProps, updateProperty, type IUIComponentHandler } from "../types"
+  import { type UIComponent, type IMapProps, updateProperty, type IUIComponentHandler } from "../types"
   import { ICONS } from "../icons"
   import { optionsStore } from "../options"
   import { getContext } from "svelte"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import { Switch, Select } from ".."
+
+  const TRACK_LENGTH_OPTIONS = [100, 500, 1000, 5000, 10000, 50000].map((value) => ({ id: crypto.randomUUID(), value, name: String(value) }))
 
   const {
     component,
     onPropertyChange,
     forConstructor = true,
   } = $props<{
-    component: UIComponent & { properties: Partial<IGraphProps> }
+    component: UIComponent & { properties: Partial<IMapProps> }
     onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
     forConstructor?: boolean
   }>()
@@ -48,6 +51,21 @@
         {component}
         {onPropertyChange}
       />
+      <Switch
+        label={{ name: $T("constructor.props.map.track") }}
+        value={component.properties.trackEnabled ? 1 : 0}
+        options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
+        onChange={(value) => updateProperty("trackEnabled", Boolean(value), component, onPropertyChange)}
+      />
+      {#if component.properties.trackEnabled}
+        <Select
+          label={{ name: $T("constructor.props.map.trackLength") }}
+          type="input"
+          options={TRACK_LENGTH_OPTIONS}
+          value={TRACK_LENGTH_OPTIONS.find((opt) => opt.value === (component.properties.trackLength ?? 1000))}
+          onUpdate={(option) => updateProperty("trackLength", (option as { value: number }).value, component, onPropertyChange)}
+        />
+      {/if}
     </div>
   </div>
 {:else}
@@ -73,6 +91,21 @@
         {component}
         {onPropertyChange}
       />
+      <Switch
+        label={{ name: $T("constructor.props.map.track") }}
+        value={component.properties.trackEnabled ? 1 : 0}
+        options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
+        onChange={(value) => updateProperty("trackEnabled", Boolean(value), component, onPropertyChange)}
+      />
+      {#if component.properties.trackEnabled}
+        <Select
+          label={{ name: $T("constructor.props.map.trackLength") }}
+          type="input"
+          options={TRACK_LENGTH_OPTIONS}
+          value={TRACK_LENGTH_OPTIONS.find((opt) => opt.value === (component.properties.trackLength ?? 1000))}
+          onUpdate={(option) => updateProperty("trackLength", (option as { value: number }).value, component, onPropertyChange)}
+        />
+      {/if}
     </div>
   </div>
 {/if}

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

@@ -1,7 +1,7 @@
-import { type UIComponent, type IGraphProps, type IUIComponentHandler } from "../types";
+import { type UIComponent, type IMapProps, type IUIComponentHandler } from "../types";
 type $$ComponentProps = {
     component: UIComponent & {
-        properties: Partial<IGraphProps>;
+        properties: Partial<IMapProps>;
     };
     onPropertyChange: (updates: Partial<{
         properties?: string | object;

package/dist/Map/README.md

@@ -6,12 +6,14 @@
 
 ## Пропсы
 
-| Название   | Тип                                                  | По умолчанию            | Описание                                       |
-| ---------- | ---------------------------------------------------- | ----------------------- | ---------------------------------------------- |
-| id         | string                                               | crypto.randomUUID()     | Уникальный идентификатор компонента            |
-| label      | { name?: string; class?: string }                    | { name: "", class: "" } | Настройки заголовка компонента                 |
-| data       | IDeviceGNSS                                          | $bindable()             | Данные GPS устройства для отображения на карте |
-| markerIcon | ConstructorOfATypedSvelteComponent \| string \| null | undefined               | Иконка для маркера устройства                  |
+| Название     | Тип                                                  | По умолчанию            | Описание                                                          |
+| ------------ | ----------------------------------------------------- | ----------------------- | ------------------------------------------------------------------ |
+| id           | string                                               | crypto.randomUUID()     | Уникальный идентификатор компонента                               |
+| label        | { name?: string; class?: string }                    | { name: "", class: "" } | Настройки заголовка компонента                                    |
+| data         | IDeviceGNSS                                          | $bindable()             | Данные GPS устройства для отображения на карте                    |
+| markerIcon   | ConstructorOfATypedSvelteComponent \| string \| null | undefined               | Иконка для маркера устройства                                     |
+| trackEnabled | boolean                                              | $bindable(false)        | Включает отрисовку траектории движения устройств                  |
+| trackLength  | number                                               | $bindable(1000)          | Максимальное количество последних точек в траектории на устройство (100 / 500 / 1000 / 5000 / 10000 / 50000) |
 
 ### Вложенные типы
 

package/dist/Map/mapWrapper/Line.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { onDestroy } from "svelte"
+  import { getMapContext } from "./contexts.svelte.js"
+
+  interface Props {
+    id: string
+    coordinates: [number, number][]
+    color?: string
+    width?: number
+    opacity?: number
+  }
+
+  let { id, coordinates, color = "#3b82f6", width = 3, opacity = 0.85 }: Props = $props()
+
+  const mapCtx = getMapContext()
+  if (!mapCtx.map) throw new Error("Map instance is not initialized.")
+
+  let added = false
+
+  const toGeoJSON = () => ({
+    type: "Feature" as const,
+    geometry: { type: "LineString" as const, coordinates: $state.snapshot(coordinates) },
+    properties: {},
+  })
+
+  $effect(() => {
+    if (!mapCtx.map || added) return
+
+    mapCtx.addSource(id, { type: "geojson", data: toGeoJSON() })
+    mapCtx.addLayer({
+      id,
+      type: "line",
+      source: id,
+      layout: { "line-join": "round", "line-cap": "round" },
+      paint: { "line-color": color, "line-width": width, "line-opacity": opacity },
+    })
+    added = true
+  })
+
+  $effect(() => {
+    if (!added || !mapCtx.map) return
+    const source = mapCtx.map.getSource(id) as any
+    source?.setData(toGeoJSON())
+  })
+
+  $effect(() => {
+    if (!added || !mapCtx.map || !mapCtx.map.getLayer(id)) return
+    mapCtx.map.setPaintProperty(id, "line-color", color)
+    mapCtx.map.setPaintProperty(id, "line-width", width)
+    mapCtx.map.setPaintProperty(id, "line-opacity", opacity)
+  })
+
+  onDestroy(() => {
+    if (added) {
+      mapCtx.removeLayer(id)
+      mapCtx.removeSource(id)
+    }
+  })
+</script>

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

@@ -0,0 +1,10 @@
+interface Props {
+    id: string;
+    coordinates: [number, number][];
+    color?: string;
+    width?: number;
+    opacity?: number;
+}
+declare const Line: import("svelte").Component<Props, {}, "">;
+type Line = ReturnType<typeof Line>;
+export default Line;

package/dist/Map/mapWrapper/index.d.ts

@@ -5,5 +5,6 @@ export { default as GeolocateControl } from "./controls/GeolocateControl.svelte"
 export { default as FullScreenControl } from "./controls/FullScreenControl.svelte";
 export { default as Marker } from "./Marker.svelte";
 export { default as Popup } from "./Popup.svelte";
+export { default as Line } from "./Line.svelte";
 export { default as CustomControl } from "./controls/CustomControl.svelte";
 export { getMapContext, getSourceContext, getMarkerContext } from "./contexts.svelte.js";

package/dist/Map/mapWrapper/index.js

@@ -5,5 +5,6 @@ export { default as GeolocateControl } from "./controls/GeolocateControl.svelte"
 export { default as FullScreenControl } from "./controls/FullScreenControl.svelte";
 export { default as Marker } from "./Marker.svelte";
 export { default as Popup } from "./Popup.svelte";
+export { default as Line } from "./Line.svelte";
 export { default as CustomControl } from "./controls/CustomControl.svelte";
 export { getMapContext, getSourceContext, getMarkerContext } from "./contexts.svelte.js";

package/dist/locales/translations.js

@@ -170,6 +170,8 @@ const translations = {
         "constructor.props.multiselect": "Мультивыбор",
         "constructor.props.access": "Доступ (не для владельца)",
         "constructor.props.map.timeout": "Таймаут маркеров:",
+        "constructor.props.map.track": "Траектория",
+        "constructor.props.map.trackLength": "Точек в траектории:",
         "constructor.props.joystick.pitch.axe": "Ocь ⮃",
         "constructor.props.joystick.roll.axe": "Ось ↶ ↷",
         "constructor.props.joystick.yaw.axe": "Ось ⮂",

package/dist/types.d.ts

@@ -224,6 +224,8 @@ export interface IMapProps {
     };
     data: IDeviceGNSS | null;
     markerIcon?: ConstructorOfATypedSvelteComponent | string;
+    trackEnabled?: boolean;
+    trackLength?: number;
 }
 export interface IProgressBarProps {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.11.3",
+  "version": "1.12.1",
   "license": "MIT",
   "type": "module",
   "scripts": {