@versatiles/svelte 1.0.0 → 1.0.2

package/dist/components/MapEditor/lib/__mocks__/geometry_manager.js

@@ -0,0 +1,21 @@
+import { writable } from 'svelte/store';
+import { vi } from 'vitest';
+import { MockMap } from './map.js';
+import { MockCursor } from './cursor.js';
+export class MockGeometryManager {
+    elements = writable([]);
+    activeElement = writable(undefined);
+    map = new MockMap();
+    cursor = new MockCursor();
+    constructor() { }
+    setActiveElement = vi.fn();
+    getState = vi.fn(() => ({ map: { point: [0, 0], zoom: 10 }, elements: [] }));
+    saveState = vi.fn();
+    loadState = vi.fn();
+    getElement = vi.fn((index) => ({ index }));
+    addNewMarker = vi.fn(() => ({}));
+    addNewLine = vi.fn(() => ({}));
+    addNewPolygon = vi.fn(() => ({}));
+    deleteElement = vi.fn();
+    drawSelectionNodes = vi.fn();
+}

package/dist/components/MapEditor/lib/__mocks__/map.d.ts

@@ -0,0 +1,36 @@
+export declare class MockMap {
+    getCanvasContainer: import("vitest").Mock<() => {
+        style: {
+            cursor: string;
+        };
+    }>;
+    addSource: import("vitest").Mock<(...args: any[]) => any>;
+    removeSource: import("vitest").Mock<(...args: any[]) => any>;
+    getSource: import("vitest").Mock<() => {
+        setData: import("vitest").Mock<(...args: any[]) => any>;
+    }>;
+    addLayer: import("vitest").Mock<(...args: any[]) => any>;
+    on: import("vitest").Mock<(...args: any[]) => any>;
+    setCenter: import("vitest").Mock<(...args: any[]) => any>;
+    setZoom: import("vitest").Mock<(...args: any[]) => any>;
+    getZoom: import("vitest").Mock<() => number>;
+    getCenter: import("vitest").Mock<() => {
+        lng: number;
+        lat: number;
+    }>;
+    queryRenderedFeatures: import("vitest").Mock<() => {
+        properties: {};
+    }[]>;
+    setPaintProperty: import("vitest").Mock<(...args: any[]) => any>;
+    setLayoutProperty: import("vitest").Mock<(...args: any[]) => any>;
+    removeLayer: import("vitest").Mock<(...args: any[]) => any>;
+    hasImage: import("vitest").Mock<(...args: any[]) => any>;
+    removeImage: import("vitest").Mock<(...args: any[]) => any>;
+    addImage: import("vitest").Mock<(...args: any[]) => any>;
+    getBounds: import("vitest").Mock<() => {
+        getWest: () => -180;
+        getEast: () => 180;
+        getSouth: () => -90;
+        getNorth: () => 90;
+    }>;
+}

package/dist/components/MapEditor/lib/__mocks__/map.js

@@ -0,0 +1,26 @@
+import { vi } from 'vitest';
+export class MockMap {
+    getCanvasContainer = vi.fn(() => ({ style: { cursor: 'default' } }));
+    addSource = vi.fn();
+    removeSource = vi.fn();
+    getSource = vi.fn(() => ({ setData: vi.fn() }));
+    addLayer = vi.fn();
+    on = vi.fn();
+    setCenter = vi.fn();
+    setZoom = vi.fn();
+    getZoom = vi.fn(() => 10);
+    getCenter = vi.fn(() => ({ lng: 0, lat: 0 }));
+    queryRenderedFeatures = vi.fn(() => [{ properties: {} }]);
+    setPaintProperty = vi.fn();
+    setLayoutProperty = vi.fn();
+    removeLayer = vi.fn();
+    hasImage = vi.fn();
+    removeImage = vi.fn();
+    addImage = vi.fn();
+    getBounds = vi.fn(() => ({
+        getWest: () => -180,
+        getEast: () => 180,
+        getSouth: () => -90,
+        getNorth: () => 90
+    }));
+}

package/dist/components/MapEditor/lib/cursor.d.ts

@@ -0,0 +1,9 @@
+export declare class Cursor {
+    #private;
+    private readonly element;
+    constructor(element: HTMLElement);
+    private update;
+    hover(increase: boolean): void;
+    precise(increase: boolean): void;
+    grab(increase: boolean): void;
+}

package/dist/components/MapEditor/lib/cursor.js

@@ -0,0 +1,31 @@
+export class Cursor {
+    element;
+    #hover = 0;
+    #precise = 0;
+    #grab = 0;
+    constructor(element) {
+        this.element = element;
+        this.update();
+    }
+    update() {
+        if (this.#precise > 0)
+            return (this.element.style.cursor = 'crosshair');
+        if (this.#grab > 0)
+            return (this.element.style.cursor = 'grab');
+        if (this.#hover > 0)
+            return (this.element.style.cursor = 'pointer');
+        this.element.style.cursor = 'default';
+    }
+    hover(increase) {
+        this.#hover = Math.max(0, this.#hover + (increase ? 1 : -1));
+        this.update();
+    }
+    precise(increase) {
+        this.#precise = Math.max(0, this.#precise + (increase ? 1 : -1));
+        this.update();
+    }
+    grab(increase) {
+        this.#grab = Math.max(0, this.#grab + (increase ? 1 : -1));
+        this.update();
+    }
+}

package/dist/components/MapEditor/lib/element/abstract.d.ts

@@ -0,0 +1,21 @@
+import type { ElementPoint, SelectionNode, SelectionNodeUpdater } from './types.js';
+import type { GeometryManager } from '../geometry_manager.js';
+import type { StateObject } from '../state/types.js';
+export declare abstract class AbstractElement {
+    protected readonly canvas: HTMLElement;
+    protected readonly manager: GeometryManager;
+    protected readonly map: maplibregl.Map;
+    protected readonly source: maplibregl.GeoJSONSource;
+    protected readonly slug: string;
+    protected isSelected: boolean;
+    readonly sourceId: string;
+    constructor(manager: GeometryManager);
+    select(value: boolean): void;
+    protected randomPositions(length: number): ElementPoint[];
+    delete(): void;
+    abstract destroy(): void;
+    abstract getFeature(includeProperties: boolean): GeoJSON.Feature;
+    abstract getSelectionNodes(): SelectionNode[];
+    abstract getSelectionNodeUpdater(properties?: Record<string, unknown>): SelectionNodeUpdater | undefined;
+    abstract getState(): StateObject;
+}

package/dist/components/MapEditor/lib/element/abstract.js

@@ -0,0 +1,39 @@
+export class AbstractElement {
+    canvas;
+    manager;
+    map;
+    source;
+    slug = '_' + Math.random().toString(36).slice(2);
+    isSelected = false;
+    sourceId = 'source' + this.slug;
+    constructor(manager) {
+        this.manager = manager;
+        this.map = manager.map;
+        this.canvas = this.map.getCanvasContainer();
+        this.map.addSource(this.sourceId, {
+            type: 'geojson',
+            data: { type: 'FeatureCollection', features: [] }
+        });
+        this.source = this.map.getSource(this.sourceId);
+    }
+    select(value) {
+        this.isSelected = value;
+    }
+    randomPositions(length) {
+        const points = [];
+        for (let i = 0; i < length; i++) {
+            const xr = Math.random() * 0.5 + 0.25;
+            const yr = Math.random() * 0.5 + 0.25;
+            const bounds = this.map.getBounds();
+            points.push([
+                (1 - xr) * bounds.getWest() + xr * bounds.getEast(),
+                (1 - yr) * bounds.getSouth() + yr * bounds.getNorth()
+            ]);
+        }
+        return points;
+    }
+    delete() {
+        this.destroy();
+        this.manager.deleteElement(this);
+    }
+}

package/dist/components/MapEditor/lib/element/abstract_path.d.ts

@@ -0,0 +1,11 @@
+import { AbstractElement } from './abstract.js';
+import type { GeometryManager } from '../geometry_manager.js';
+import type { ElementPath, SelectionNode, SelectionNodeUpdater } from './types.js';
+export declare abstract class AbstractPathElement extends AbstractElement {
+    path: ElementPath;
+    protected readonly isLine: boolean;
+    constructor(manager: GeometryManager, isLine: boolean);
+    protected handleDrag(e: maplibregl.MapMouseEvent): void;
+    getSelectionNodes(): SelectionNode[];
+    getSelectionNodeUpdater(properties?: Record<string, unknown>): SelectionNodeUpdater | undefined;
+}

package/dist/components/MapEditor/lib/element/abstract_path.js

@@ -0,0 +1,79 @@
+import { AbstractElement } from './abstract.js';
+import { getMiddlePoint, lat2mercator, mercator2lat } from '../utils.js';
+export class AbstractPathElement extends AbstractElement {
+    path = [];
+    isLine;
+    constructor(manager, isLine) {
+        super(manager);
+        this.isLine = isLine;
+    }
+    handleDrag(e) {
+        const { lng, lat } = e.lngLat;
+        let x0 = lng;
+        let y0 = lat2mercator(lat);
+        const moveHandler = (e) => {
+            const { lng, lat } = e.lngLat;
+            const y = lat2mercator(lat);
+            const dx = lng - x0;
+            const dy = y - y0;
+            y0 = y;
+            x0 = lng;
+            this.path = this.path.map(([x, y]) => [x + dx, mercator2lat(lat2mercator(y) + dy)]);
+            this.source.setData(this.getFeature(false));
+            this.manager.drawSelectionNodes();
+            e.preventDefault();
+        };
+        this.manager.map.on('mousemove', moveHandler);
+        this.manager.map.once('mouseup', () => this.manager.map.off('mousemove', moveHandler));
+        e.preventDefault();
+    }
+    getSelectionNodes() {
+        const points = [];
+        for (let i = 0; i < this.path.length; i++) {
+            points.push({ index: i, coordinates: this.path[i] });
+            if (this.isLine && i === this.path.length - 1)
+                continue;
+            const j = (i + 1) % this.path.length;
+            points.push({
+                index: i + 0.5,
+                transparent: true,
+                coordinates: getMiddlePoint(this.path[i], this.path[j])
+            });
+        }
+        return points;
+    }
+    getSelectionNodeUpdater(properties) {
+        if (properties == undefined)
+            return;
+        const index = properties.index;
+        let point;
+        if (index % 1 === 0) {
+            point = this.path[index];
+        }
+        else {
+            const i = Math.floor(index);
+            const j = (i + 1) % this.path.length;
+            point = getMiddlePoint(this.path[i], this.path[j]);
+            this.path.splice(j, 0, point);
+        }
+        return {
+            update: (lng, lat) => {
+                point[0] = lng;
+                point[1] = lat;
+                this.source.setData(this.getFeature(false));
+            },
+            delete: () => {
+                if (this.isLine) {
+                    if (this.path.length <= 2)
+                        return this.delete();
+                }
+                else {
+                    if (this.path.length <= 3)
+                        return this.delete();
+                }
+                this.path.splice(index, 1);
+                this.source.setData(this.getFeature(false));
+            }
+        };
+    }
+}

package/dist/components/MapEditor/lib/element/line.d.ts

@@ -0,0 +1,16 @@
+import type { GeometryManager } from '../geometry_manager.js';
+import type { ElementPath } from './types.js';
+import { MapLayerLine } from '../map_layer/line.js';
+import { AbstractPathElement } from './abstract_path.js';
+import type { StateObject } from '../state/types.js';
+export declare class LineElement extends AbstractPathElement {
+    readonly layer: MapLayerLine;
+    readonly path: ElementPath;
+    constructor(manager: GeometryManager, line?: ElementPath);
+    select(value: boolean): void;
+    getFeature(includeProperties?: boolean): GeoJSON.Feature<GeoJSON.LineString>;
+    destroy(): void;
+    getState(): StateObject;
+    static fromState(manager: GeometryManager, state: StateObject): LineElement;
+    static fromGeoJSON(manager: GeometryManager, feature: GeoJSON.Feature<GeoJSON.LineString>): LineElement;
+}

package/dist/components/MapEditor/lib/element/line.js

@@ -0,0 +1,53 @@
+import { MapLayerLine } from '../map_layer/line.js';
+import { AbstractPathElement } from './abstract_path.js';
+export class LineElement extends AbstractPathElement {
+    layer;
+    path;
+    constructor(manager, line) {
+        super(manager, true);
+        this.path = line ?? this.randomPositions(2);
+        this.layer = new MapLayerLine(manager, 'line' + this.slug, this.sourceId);
+        this.layer.on('click', () => this.manager.selectElement(this));
+        this.layer.on('mousedown', (e) => {
+            if (!this.isSelected)
+                return;
+            if ('ignore' in e && e.ignore)
+                return;
+            this.handleDrag(e);
+        });
+        this.source.setData(this.getFeature());
+    }
+    select(value) {
+        super.select(value);
+        this.layer.isSelected = value;
+    }
+    getFeature(includeProperties = false) {
+        return {
+            type: 'Feature',
+            properties: includeProperties ? this.layer.getGeoJSONProperties() : {},
+            geometry: { type: 'LineString', coordinates: this.path }
+        };
+    }
+    destroy() {
+        this.layer.destroy();
+        this.map.removeSource(this.sourceId);
+    }
+    getState() {
+        return {
+            type: 'line',
+            points: this.path,
+            style: this.layer.getState()
+        };
+    }
+    static fromState(manager, state) {
+        const element = new LineElement(manager, state.points);
+        if (state.style)
+            element.layer.setState(state.style);
+        return element;
+    }
+    static fromGeoJSON(manager, feature) {
+        const element = new LineElement(manager, feature.geometry.coordinates);
+        element.layer.setGeoJSONProperties(feature.properties);
+        return element;
+    }
+}

package/dist/components/MapEditor/lib/element/marker.d.ts

@@ -0,0 +1,18 @@
+import { AbstractElement } from './abstract.js';
+import type { GeometryManager } from '../geometry_manager.js';
+import type { ElementPoint, SelectionNode, SelectionNodeUpdater } from './types.js';
+import { MapLayerSymbol } from '../map_layer/symbol.js';
+import type { StateObject } from '../state/types.js';
+export declare class MarkerElement extends AbstractElement {
+    readonly layer: MapLayerSymbol;
+    private point;
+    constructor(manager: GeometryManager, point?: ElementPoint);
+    select(value: boolean): void;
+    getFeature(includeProperties?: boolean): GeoJSON.Feature<GeoJSON.Point>;
+    getSelectionNodes(): SelectionNode[];
+    getSelectionNodeUpdater(): SelectionNodeUpdater | undefined;
+    destroy(): void;
+    getState(): StateObject;
+    static fromState(manager: GeometryManager, state: StateObject): MarkerElement;
+    static fromGeoJSON(manager: GeometryManager, feature: GeoJSON.Feature<GeoJSON.Point>): MarkerElement;
+}

package/dist/components/MapEditor/lib/element/marker.js

@@ -0,0 +1,62 @@
+import { AbstractElement } from './abstract.js';
+import { MapLayerSymbol } from '../map_layer/symbol.js';
+export class MarkerElement extends AbstractElement {
+    layer;
+    point = [0, 0];
+    constructor(manager, point) {
+        super(manager);
+        this.point = point ?? this.randomPositions(1)[0];
+        this.layer = new MapLayerSymbol(manager, 'symbol' + this.slug, this.sourceId);
+        this.layer.on('click', () => this.manager.selectElement(this));
+        this.source.setData(this.getFeature());
+    }
+    select(value) {
+        super.select(value);
+        this.layer.isSelected = value;
+    }
+    getFeature(includeProperties = false) {
+        return {
+            type: 'Feature',
+            properties: includeProperties ? this.layer.getGeoJSONProperties() : {},
+            geometry: {
+                type: 'Point',
+                coordinates: this.point
+            }
+        };
+    }
+    getSelectionNodes() {
+        return [{ index: 0, coordinates: this.point }];
+    }
+    getSelectionNodeUpdater() {
+        return {
+            update: (lng, lat) => {
+                this.point[0] = lng;
+                this.point[1] = lat;
+                this.source.setData(this.getFeature());
+            },
+            delete: () => this.delete()
+        };
+    }
+    destroy() {
+        this.layer.destroy();
+        this.map.removeSource(this.sourceId);
+    }
+    getState() {
+        return {
+            type: 'marker',
+            point: this.point,
+            style: this.layer.getState()
+        };
+    }
+    static fromState(manager, state) {
+        const element = new MarkerElement(manager, state.point);
+        if (state.style)
+            element.layer.setState(state.style);
+        return element;
+    }
+    static fromGeoJSON(manager, feature) {
+        const element = new MarkerElement(manager, feature.geometry.coordinates);
+        element.layer.setGeoJSONProperties(feature.properties);
+        return element;
+    }
+}

package/dist/components/MapEditor/lib/element/polygon.d.ts

@@ -0,0 +1,17 @@
+import type { GeometryManager } from '../geometry_manager.js';
+import type { ElementPath } from './types.js';
+import { MapLayerFill } from '../map_layer/fill.js';
+import { MapLayerLine } from '../map_layer/line.js';
+import { AbstractPathElement } from './abstract_path.js';
+import type { StateObject } from '../state/types.js';
+export declare class PolygonElement extends AbstractPathElement {
+    readonly fillLayer: MapLayerFill;
+    readonly strokeLayer: MapLayerLine;
+    constructor(manager: GeometryManager, polygon?: ElementPath);
+    select(value: boolean): void;
+    getFeature(includeProperties?: boolean): GeoJSON.Feature<GeoJSON.Polygon>;
+    destroy(): void;
+    getState(): StateObject;
+    static fromState(manager: GeometryManager, state: StateObject): PolygonElement;
+    static fromGeoJSON(manager: GeometryManager, feature: GeoJSON.Feature<GeoJSON.Polygon>): PolygonElement;
+}

package/dist/components/MapEditor/lib/element/polygon.js

@@ -0,0 +1,63 @@
+import { MapLayerFill } from '../map_layer/fill.js';
+import { MapLayerLine } from '../map_layer/line.js';
+import { AbstractPathElement } from './abstract_path.js';
+export class PolygonElement extends AbstractPathElement {
+    fillLayer;
+    strokeLayer;
+    constructor(manager, polygon) {
+        super(manager, false);
+        this.path = polygon ?? this.randomPositions(3);
+        this.fillLayer = new MapLayerFill(manager, 'fill' + this.slug, this.sourceId);
+        this.fillLayer.on('click', () => this.manager.selectElement(this));
+        this.fillLayer.on('mousedown', (e) => {
+            if (!this.isSelected)
+                return;
+            this.handleDrag(e);
+        });
+        this.strokeLayer = new MapLayerLine(manager, 'line' + this.slug, this.sourceId);
+        this.strokeLayer.on('click', () => this.manager.selectElement(this));
+        this.source.setData(this.getFeature());
+    }
+    select(value) {
+        super.select(value);
+        this.fillLayer.isSelected = value;
+        this.strokeLayer.isSelected = value;
+    }
+    getFeature(includeProperties = false) {
+        return {
+            type: 'Feature',
+            properties: includeProperties
+                ? { ...this.fillLayer.getGeoJSONProperties(), ...this.strokeLayer.getGeoJSONProperties() }
+                : {},
+            geometry: { type: 'Polygon', coordinates: [[...this.path, this.path[0]]] }
+        };
+    }
+    destroy() {
+        this.fillLayer.destroy();
+        this.strokeLayer.destroy();
+        this.map.removeSource(this.sourceId);
+    }
+    getState() {
+        return {
+            type: 'polygon',
+            points: this.path,
+            style: this.fillLayer.getState(),
+            strokeStyle: this.strokeLayer.getState()
+        };
+    }
+    static fromState(manager, state) {
+        const element = new PolygonElement(manager, state.points);
+        if (state.style)
+            element.fillLayer.setState(state.style);
+        if (state.strokeStyle)
+            element.strokeLayer.setState(state.strokeStyle);
+        return element;
+    }
+    static fromGeoJSON(manager, feature) {
+        const coordinates = feature.geometry.coordinates[0].slice(0, -1);
+        const element = new PolygonElement(manager, coordinates);
+        element.fillLayer.setGeoJSONProperties(feature.properties);
+        element.strokeLayer.setGeoJSONProperties(feature.properties);
+        return element;
+    }
+}

package/dist/components/MapEditor/lib/element/types.d.ts

@@ -0,0 +1,11 @@
+export type ElementPoint = [number, number];
+export type ElementPath = ElementPoint[];
+export interface SelectionNode {
+    coordinates: ElementPoint;
+    index: number;
+    transparent?: boolean;
+}
+export interface SelectionNodeUpdater {
+    update: (lng: number, lat: number) => void;
+    delete: () => void;
+}

package/dist/components/MapEditor/lib/geometry_manager.d.ts

@@ -1,18 +1,28 @@
 import { type Writable } from 'svelte/store';
-import type { AbstractElement } from './element_abstract.js';
-import type maplibregl from 'maplibre-gl';
+import type { AbstractElement } from './element/abstract.js';
+import { Cursor } from './cursor.js';
+import type { StateObject } from './state/types.js';
+import { SymbolLibrary } from './symbols.js';
 export declare class GeometryManager {
     readonly elements: Writable<AbstractElement[]>;
     readonly map: maplibregl.Map;
-    readonly activeElement: Writable<AbstractElement | undefined>;
-    private readonly selection_nodes;
-    private readonly canvas;
+    readonly selectedElement: Writable<AbstractElement | undefined>;
+    readonly canvas: HTMLElement;
+    readonly cursor: Cursor;
+    readonly symbolLibrary: SymbolLibrary;
+    private readonly selectionNodes;
     constructor(map: maplibregl.Map);
-    setActiveElement(element: AbstractElement | undefined): void;
-    private drawSelectionNodes;
+    selectElement(element: AbstractElement | undefined): void;
+    drawSelectionNodes(): void;
+    getState(): StateObject;
+    saveState(): Promise<void>;
+    loadState(hash: string): Promise<void>;
     getElement(index: number): AbstractElement;
-    getNewMarker(): AbstractElement;
-    getNewLine(): AbstractElement;
+    addNewMarker(): AbstractElement;
+    addNewLine(): AbstractElement;
+    addNewPolygon(): AbstractElement;
     private addElement;
-    private newName;
+    deleteElement(element: AbstractElement): void;
+    getGeoJSON(): GeoJSON.FeatureCollection;
+    addGeoJSON(geojson: GeoJSON.FeatureCollection): void;
 }