@versatiles/svelte 1.0.1 → 1.1.0

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

@@ -1,21 +1,30 @@
 import { get, writable } from 'svelte/store';
-import { MarkerElement } from './element_marker.js';
-import { LineElement } from './element_line.js';
+import { MarkerElement } from './element/marker.js';
+import { LineElement } from './element/line.js';
+import { PolygonElement } from './element/polygon.js';
+import { Cursor } from './cursor.js';
+import { StateWriter } from './state/writer.js';
+import { StateReader } from './state/reader.js';
+import { SymbolLibrary } from './symbols.js';
 export class GeometryManager {
     elements;
     map;
-    activeElement = writable(undefined);
-    selection_nodes;
+    selectedElement = writable(undefined);
     canvas;
+    cursor;
+    symbolLibrary;
+    selectionNodes;
     constructor(map) {
         this.elements = writable([]);
         this.map = map;
         this.canvas = this.map.getCanvasContainer();
+        this.cursor = new Cursor(this.canvas);
+        this.symbolLibrary = new SymbolLibrary(map);
         map.addSource('selection_nodes', {
             type: 'geojson',
             data: { type: 'FeatureCollection', features: [] }
         });
-        this.selection_nodes = map.getSource('selection_nodes');
+        this.selectionNodes = map.getSource('selection_nodes');
         map.addLayer({
             id: 'selection_nodes',
             source: 'selection_nodes',
@@ -24,54 +33,66 @@ export class GeometryManager {
             paint: {
                 'circle-color': '#ffffff',
                 'circle-opacity': ['get', 'opacity'],
-                'circle-radius': 4,
+                'circle-radius': 3,
                 'circle-stroke-color': '#000000',
                 'circle-stroke-opacity': ['get', 'opacity'],
-                'circle-stroke-width': 1.5
+                'circle-stroke-width': 1
             }
         });
         map.on('mousedown', 'selection_nodes', (e) => {
-            const element = get(this.activeElement);
+            const element = get(this.selectedElement);
             if (element == undefined)
                 return;
             const feature = map.queryRenderedFeatures(e.point, { layers: ['selection_nodes'] })[0];
-            const updateSelectionNode = element.getSelectionNodeUpdater(feature.properties);
-            if (updateSelectionNode == undefined)
+            const selectedNode = element.getSelectionNodeUpdater(feature.properties);
+            if (selectedNode == undefined)
                 return;
+            // @ts-expect-error ensure that the event is ignored by other layers
+            e.ignore = true;
             e.preventDefault();
-            const onMove = (e) => {
-                e.preventDefault();
-                this.canvas.style.cursor = 'grabbing';
-                updateSelectionNode(e.lngLat.lng, e.lngLat.lat);
-                this.drawSelectionNodes(element.getSelectionNodes());
-            };
-            const onUp = () => {
-                map.off('mousemove', onMove);
-                this.canvas.style.cursor = 'default';
-            };
-            map.once('mouseup', onUp);
-            map.on('mousemove', onMove);
+            if (e.originalEvent.shiftKey) {
+                selectedNode.delete();
+                this.drawSelectionNodes();
+                this.saveState();
+            }
+            else {
+                const onMove = (e) => {
+                    e.preventDefault();
+                    selectedNode.update(e.lngLat.lng, e.lngLat.lat);
+                    this.drawSelectionNodes();
+                };
+                map.on('mousemove', onMove);
+                map.once('mouseup', () => {
+                    this.saveState();
+                    map.off('mousemove', onMove);
+                });
+            }
+        });
+        map.on('mouseenter', 'selection_nodes', () => {
+            this.cursor.togglePrecise('selection_nodes');
+        });
+        map.on('mouseleave', 'selection_nodes', () => {
+            this.cursor.togglePrecise('selection_nodes', false);
         });
-        map.on('mouseover', 'selection_nodes', () => (this.canvas.style.cursor = 'move'));
-        map.on('mouseout', 'selection_nodes', () => (this.canvas.style.cursor = 'default'));
         map.on('click', (e) => {
-            this.setActiveElement(undefined);
+            if (!e.originalEvent.shiftKey)
+                this.selectElement(undefined);
             e.preventDefault();
         });
+        map.on('moveend', () => this.saveState());
+        const hash = location.hash.slice(1);
+        if (hash)
+            this.loadState(hash);
     }
-    setActiveElement(element) {
-        if (element) {
-            if (!get(this.elements).includes(element))
-                throw new Error('Element not in list');
-            this.drawSelectionNodes(element.getSelectionNodes());
-        }
-        else {
-            this.drawSelectionNodes([]);
-        }
-        this.activeElement.set(element);
+    selectElement(element) {
+        const elements = get(this.elements);
+        elements.forEach((e) => e.select(e == element));
+        this.selectedElement.set(element);
+        this.drawSelectionNodes();
     }
-    drawSelectionNodes(nodes) {
-        this.selection_nodes.setData({
+    drawSelectionNodes() {
+        const nodes = get(this.selectedElement)?.getSelectionNodes() ?? [];
+        this.selectionNodes.setData({
             type: 'FeatureCollection',
             features: nodes.map((n) => ({
                 type: 'Feature',
@@ -80,38 +101,123 @@ export class GeometryManager {
             }))
         });
     }
+    getState() {
+        const center = this.map.getCenter();
+        return {
+            map: {
+                point: [center.lng, center.lat],
+                zoom: this.map.getZoom()
+            },
+            elements: get(this.elements).map((element) => element.getState())
+        };
+    }
+    async saveState() {
+        const writer = new StateWriter();
+        writer.writeObject(this.getState());
+        location.hash = await writer.getBase64compressed();
+    }
+    async loadState(hash) {
+        if (!hash)
+            return;
+        try {
+            const reader = await StateReader.fromBase64compressed(hash);
+            const state = reader.readObject();
+            if (!state)
+                return;
+            if (state.map?.zoom)
+                this.map.setZoom(state.map.zoom);
+            if (state.map?.point) {
+                this.map.setCenter({ lng: state.map.point[0], lat: state.map.point[1] });
+            }
+            if (state.elements) {
+                const elements = state.elements.map((element) => {
+                    switch (element.type) {
+                        case 'marker':
+                            return MarkerElement.fromState(this, element);
+                        case 'line':
+                            return LineElement.fromState(this, element);
+                        case 'polygon':
+                            return PolygonElement.fromState(this, element);
+                        default:
+                            throw new Error('Unknown element type');
+                    }
+                });
+                this.elements.set(elements);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
     getElement(index) {
         return get(this.elements)[index];
     }
-    getNewMarker() {
-        const element = new MarkerElement(this, this.newName('Marker '));
+    addNewMarker() {
+        const element = new MarkerElement(this);
         this.addElement(element);
         return element;
     }
-    getNewLine() {
-        const element = new LineElement(this, this.newName('Line '));
+    addNewLine() {
+        const element = new LineElement(this);
+        this.addElement(element);
+        return element;
+    }
+    addNewPolygon() {
+        const element = new PolygonElement(this);
         this.addElement(element);
         return element;
     }
     addElement(element) {
         this.elements.update((elements) => [...elements, element]);
+        this.saveState();
     }
-    newName(prefix) {
-        const set = new Set();
-        const elements = get(this.elements);
-        elements.forEach((e) => {
-            const name = e.name;
-            if (!name.startsWith(prefix))
-                return;
-            const index = name.substring(prefix.length);
-            if (!/^[0-9]+/.test(index))
-                return;
-            set.add(parseInt(index, 10));
-        });
-        for (let i = 1; i <= elements.length + 1; i++) {
-            if (!set.has(i))
-                return prefix + i;
+    deleteElement(element) {
+        this.elements.update((elements) => elements.filter((e) => e !== element));
+        if (get(this.selectedElement) === element)
+            this.selectElement(undefined);
+        this.saveState();
+    }
+    getGeoJSON() {
+        const center = this.map.getCenter();
+        return {
+            type: 'FeatureCollection',
+            map: {
+                center: [center.lng, center.lat],
+                zoom: this.map.getZoom()
+            },
+            features: get(this.elements).map((element) => element.getFeature(true))
+        };
+    }
+    addGeoJSON(geojson) {
+        if ('map' in geojson) {
+            const { map } = geojson;
+            if (typeof map.zoom === 'number') {
+                this.map.setZoom(map.zoom);
+            }
+            if (Array.isArray(map.center)) {
+                const [lng, lat] = map.center;
+                if (typeof lng === 'number' && typeof lat === 'number') {
+                    this.map.setCenter({ lng, lat });
+                }
+            }
+        }
+        for (const feature of geojson.features) {
+            let element;
+            switch (feature.geometry.type) {
+                case 'Point':
+                    element = MarkerElement.fromGeoJSON(this, feature);
+                    break;
+                case 'LineString':
+                    element = LineElement.fromGeoJSON(this, feature);
+                    break;
+                case 'Polygon':
+                    element = PolygonElement.fromGeoJSON(this, feature);
+                    break;
+                default:
+                    throw new Error(`Unknown geometry type "${feature.geometry.type}"`);
+            }
+            this.addElement(element);
         }
-        throw new Error('Unreachable');
+        this.saveState();
     }
 }

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

@@ -0,0 +1,30 @@
+import type { LayerFill, LayerLine, LayerSymbol } from './types.js';
+import type { GeometryManager } from '../geometry_manager.js';
+import type { StateObject } from '../state/types.js';
+type LayerSpec = LayerFill | LayerLine | LayerSymbol;
+type Events = 'click' | 'mousedown' | 'mousemove' | 'mouseup';
+type MouseEventHandler = (event: maplibregl.MapMouseEvent) => void;
+export declare abstract class MapLayer<T extends LayerSpec> {
+    private layout;
+    private paint;
+    protected readonly id: string;
+    readonly manager: GeometryManager;
+    protected readonly map: maplibregl.Map;
+    eventHandlers: Map<Events, MouseEventHandler[]>;
+    isSelected: boolean;
+    constructor(manager: GeometryManager, id: string);
+    addLayer(source: string, type: 'symbol' | 'line' | 'fill', layout: T['layout'], paint: T['paint']): void;
+    on(event: Events, handler: MouseEventHandler): void;
+    off(event: Events, handler: MouseEventHandler): void;
+    private dispatchEvent;
+    private addEvents;
+    setPaint(paint: T['paint']): void;
+    updatePaint<K extends keyof T['paint'], V extends T['paint'][K]>(key: K, value: V): void;
+    setLayout(layout: T['layout']): void;
+    updateLayout<K extends keyof T['layout'], V extends T['layout'][K]>(key: K, value: V): void;
+    destroy(): void;
+    abstract getState(): StateObject | undefined;
+    abstract getGeoJSONProperties(): GeoJSON.GeoJsonProperties;
+    abstract setGeoJSONProperties(properties: GeoJSON.GeoJsonProperties): void;
+}
+export {};

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

@@ -0,0 +1,94 @@
+import { Color } from '@versatiles/style';
+export class MapLayer {
+    layout = {};
+    paint = {};
+    id;
+    manager;
+    map;
+    eventHandlers = new Map();
+    isSelected = false;
+    constructor(manager, id) {
+        this.manager = manager;
+        this.map = manager.map;
+        this.id = id;
+    }
+    addLayer(source, type, layout, paint) {
+        this.layout = layout;
+        this.paint = paint;
+        this.map.addLayer({ id: this.id, source, type, layout, paint }, 'selection_nodes');
+        this.addEvents();
+    }
+    on(event, handler) {
+        if (!this.eventHandlers.has(event))
+            this.eventHandlers.set(event, []);
+        this.eventHandlers.get(event).push(handler);
+    }
+    off(event, handler) {
+        if (!this.eventHandlers.has(event))
+            return;
+        const handlers = this.eventHandlers.get(event);
+        this.eventHandlers.set(event, handlers.filter((h) => h !== handler));
+    }
+    dispatchEvent(event, e) {
+        const handlers = this.eventHandlers.get(event);
+        if (handlers)
+            handlers.forEach((handler) => handler(e));
+    }
+    addEvents() {
+        this.map.on('mouseenter', this.id, () => {
+            if (this.isSelected)
+                this.manager.cursor.toggleGrab(this.id);
+            this.manager.cursor.toggleHover(this.id);
+        });
+        this.map.on('mouseleave', this.id, () => {
+            if (this.isSelected)
+                this.manager.cursor.toggleGrab(this.id, false);
+            this.manager.cursor.toggleHover(this.id, false);
+        });
+        this.map.on('click', this.id, (e) => {
+            this.dispatchEvent('click', e);
+            if (this.isSelected)
+                this.manager.cursor.toggleGrab(this.id);
+            this.manager.cursor.toggleHover(this.id);
+            e.preventDefault();
+        });
+        this.map.on('mousedown', this.id, (e) => {
+            if (this.manager.cursor.isPrecise())
+                return;
+            this.dispatchEvent('mousedown', e);
+        });
+        this.map.on('mouseup', this.id, (e) => this.dispatchEvent('mouseup', e));
+        this.map.on('mousemove', this.id, (e) => this.dispatchEvent('mousemove', e));
+    }
+    setPaint(paint) {
+        if (paint === undefined)
+            return;
+        const keys = new Set(Object.keys(paint).concat(Object.keys(this.paint)));
+        for (const key of keys.values())
+            this.updatePaint(key, paint[key]);
+    }
+    updatePaint(key, value) {
+        if (value instanceof Color)
+            value = value.asString();
+        if (this.paint[key] == value)
+            return;
+        this.map.setPaintProperty(this.id, key, value);
+        this.paint[key] = value;
+    }
+    setLayout(layout) {
+        if (layout === undefined)
+            return;
+        const keys = new Set(Object.keys(layout).concat(Object.keys(this.layout)));
+        for (const key of keys.values())
+            this.updateLayout(key, layout[key]);
+    }
+    updateLayout(key, value) {
+        if (this.layout[key] == value)
+            return;
+        this.map.setLayoutProperty(this.id, key, value);
+        this.layout[key] = value;
+    }
+    destroy() {
+        this.map.removeLayer(this.id);
+    }
+}

package/dist/components/MapEditor/lib/map_layer/fill.d.ts

@@ -0,0 +1,24 @@
+import type { LayerFill } from './types.js';
+import { MapLayer } from './abstract.js';
+import type { GeometryManager } from '../geometry_manager.js';
+import type { StateObject } from '../state/types.js';
+interface Fill {
+    xf: number;
+    yf: number;
+    pattern: string;
+}
+export declare const fillPatterns: Map<number, {
+    name: string;
+    fill: Fill | undefined;
+}>;
+export declare class MapLayerFill extends MapLayer<LayerFill> {
+    color: import("svelte/store").Writable<string>;
+    opacity: import("svelte/store").Writable<number>;
+    pattern: import("svelte/store").Writable<number>;
+    constructor(manager: GeometryManager, id: string, source: string);
+    getState(): StateObject | undefined;
+    setState(state: StateObject): void;
+    getGeoJSONProperties(): GeoJSON.GeoJsonProperties;
+    setGeoJSONProperties(properties: GeoJSON.GeoJsonProperties): void;
+}
+export {};

package/dist/components/MapEditor/lib/map_layer/fill.js

@@ -0,0 +1,104 @@
+import { get, writable } from 'svelte/store';
+import { MapLayer } from './abstract.js';
+import { Color } from '@versatiles/style';
+import { removeDefaultFields } from '../utils.js';
+const size = 32;
+export const fillPatterns = new Map([
+    [0, { name: 'solid', fill: undefined }],
+    [1, { name: 'diagonal', fill: { xf: 1, yf: 1, pattern: '00002552' } }],
+    [2, { name: 'diagonal-thin', fill: { xf: 1, yf: 1, pattern: '0252' } }]
+]);
+export class MapLayerFill extends MapLayer {
+    color = writable('#ff0000');
+    opacity = writable(1);
+    pattern = writable(0);
+    constructor(manager, id, source) {
+        super(manager, id);
+        this.addLayer(source, 'fill', {}, {
+            'fill-color': Color.parse(get(this.color)).asHex(),
+            'fill-opacity': get(this.opacity)
+        });
+        const updatePattern = () => {
+            const fill = fillPatterns.get(get(this.pattern))?.fill ?? undefined;
+            const color = Color.parse(get(this.color));
+            if (fill == null) {
+                this.updatePaint('fill-color', color);
+                this.updatePaint('fill-pattern', undefined);
+                return;
+            }
+            const { xf, yf, pattern: p } = fill;
+            const alpha = p.split('').map((c) => parseInt(c, 10) * 51);
+            const length = alpha.length;
+            const data = new Uint8ClampedArray(size * size * 4);
+            const c = color.asRGB().asArray();
+            for (let y = 0; y < size; y++) {
+                for (let x = 0; x < size; x++) {
+                    const v = x * xf + y * yf;
+                    const i = (y * size + x) * 4;
+                    data[i] = c[0];
+                    data[i + 1] = c[1];
+                    data[i + 2] = c[2];
+                    data[i + 3] = alpha[v % length];
+                }
+            }
+            const name = 'fill-pattern-' + this.id;
+            if (this.map.hasImage(name))
+                this.map.removeImage(name);
+            this.map.addImage(name, { width: size, height: size, data });
+            this.updatePaint('fill-pattern', name);
+        };
+        this.color.subscribe(() => {
+            updatePattern();
+            this.manager.saveState();
+        });
+        this.pattern.subscribe(() => {
+            updatePattern();
+            this.manager.saveState();
+        });
+        this.opacity.subscribe((value) => {
+            this.updatePaint('fill-opacity', value);
+            this.manager.saveState();
+        });
+    }
+    getState() {
+        return removeDefaultFields({
+            color: get(this.color),
+            opacity: get(this.opacity),
+            pattern: get(this.pattern)
+        }, {
+            color: '#ff0000',
+            opacity: 1,
+            pattern: 0
+        });
+    }
+    setState(state) {
+        if (state.color)
+            this.color.set(state.color);
+        if (state.opacity)
+            this.opacity.set(state.opacity);
+        if (state.pattern)
+            this.pattern.set(state.pattern);
+    }
+    getGeoJSONProperties() {
+        return {
+            'fill-color': get(this.color),
+            'fill-opacity': get(this.opacity),
+            'fill-pattern': fillPatterns.get(get(this.pattern))?.name
+        };
+    }
+    setGeoJSONProperties(properties) {
+        if (properties == null)
+            return;
+        if (properties['fill-color'])
+            this.color.set(properties['fill-color']);
+        if (properties['fill-opacity'])
+            this.opacity.set(properties['fill-opacity']);
+        if (properties['fill-pattern']) {
+            const pattern = fillPatterns
+                .entries()
+                .find(([, { name }]) => name === properties['fill-pattern']);
+            if (pattern)
+                this.pattern.set(pattern[0]);
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+import type { LayerLine } from './types.js';
+import { MapLayer } from './abstract.js';
+import type { GeometryManager } from '../geometry_manager.js';
+import type { StateObject } from '../state/types.js';
+export declare const dashArrays: Map<number, {
+    name: string;
+    array: number[] | undefined;
+}>;
+export declare class MapLayerLine extends MapLayer<LayerLine> {
+    color: import("svelte/store").Writable<string>;
+    dashed: import("svelte/store").Writable<number>;
+    visible: import("svelte/store").Writable<boolean>;
+    width: import("svelte/store").Writable<number>;
+    dashArray: import("svelte/store").Readable<number[]>;
+    constructor(manager: GeometryManager, id: string, source: string);
+    getState(): StateObject | undefined;
+    setState(state: StateObject): void;
+    getGeoJSONProperties(): GeoJSON.GeoJsonProperties;
+    setGeoJSONProperties(properties: GeoJSON.GeoJsonProperties): void;
+}

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

@@ -0,0 +1,90 @@
+import { derived, get, writable } from 'svelte/store';
+import { MapLayer } from './abstract.js';
+import { Color } from '@versatiles/style';
+import { removeDefaultFields } from '../utils.js';
+export const dashArrays = new Map([
+    [0, { name: 'solid', array: [100] }],
+    [1, { name: 'dashed', array: [2, 4] }],
+    [2, { name: 'dotted', array: [0, 2] }]
+]);
+export class MapLayerLine extends MapLayer {
+    color = writable('#ff0000');
+    dashed = writable(0);
+    visible = writable(true);
+    width = writable(2);
+    dashArray = derived(this.dashed, (dashed) => dashArrays.get(dashed)?.array ?? [100]);
+    constructor(manager, id, source) {
+        super(manager, id);
+        this.addLayer(source, 'line', {
+            'line-cap': 'round',
+            'line-join': 'round',
+            visibility: get(this.visible) ? 'visible' : 'none'
+        }, {
+            'line-color': Color.parse(get(this.color)).asHex(),
+            'line-dasharray': get(this.dashArray),
+            'line-width': get(this.width)
+        });
+        this.color.subscribe((v) => {
+            this.updatePaint('line-color', Color.parse(v));
+            this.manager.saveState();
+        });
+        this.dashArray.subscribe((v) => {
+            this.updatePaint('line-dasharray', v);
+            this.manager.saveState();
+        });
+        this.visible.subscribe((v) => {
+            this.updateLayout('visibility', v ? 'visible' : 'none');
+            this.manager.saveState();
+        });
+        this.width.subscribe((v) => {
+            this.updatePaint('line-width', v);
+            this.manager.saveState();
+        });
+    }
+    getState() {
+        return removeDefaultFields({
+            color: get(this.color),
+            pattern: get(this.dashed),
+            visible: get(this.visible),
+            width: get(this.width)
+        }, {
+            color: '#ff0000',
+            pattern: 0,
+            visible: true,
+            width: 2
+        });
+    }
+    setState(state) {
+        if (state.color)
+            this.color.set(state.color);
+        if (state.pattern)
+            this.dashed.set(state.pattern);
+        if (state.visible)
+            this.visible.set(state.visible);
+        if (state.width)
+            this.width.set(state.width);
+    }
+    getGeoJSONProperties() {
+        return {
+            'stroke-color': get(this.color),
+            'stroke-style': dashArrays.get(get(this.dashed))?.name,
+            'stroke-width': get(this.width),
+            'stroke-visibility': get(this.visible)
+        };
+    }
+    setGeoJSONProperties(properties) {
+        if (properties == null)
+            return;
+        if (properties['stroke-color'])
+            this.color.set(properties['stroke-color']);
+        if (properties['stroke-style']) {
+            const dash = dashArrays.entries().find(([, { name }]) => name === properties['stroke-style']);
+            if (dash)
+                this.dashed.set(dash[0]);
+        }
+        if (properties['stroke-width'])
+            this.width.set(properties['stroke-width']);
+        if (properties['stroke-visibility'])
+            this.visible.set(properties['stroke-visibility']);
+    }
+}

package/dist/components/MapEditor/lib/map_layer/symbol.d.ts

@@ -0,0 +1,19 @@
+import type { LayerSymbol } from './types.js';
+import { MapLayer } from './abstract.js';
+import type { GeometryManager } from '../geometry_manager.js';
+import type { StateObject } from '../state/types.js';
+export declare class MapLayerSymbol extends MapLayer<LayerSymbol> {
+    color: import("svelte/store").Writable<string>;
+    halo: import("svelte/store").Writable<number>;
+    rotate: import("svelte/store").Writable<number>;
+    size: import("svelte/store").Writable<number>;
+    symbolIndex: import("svelte/store").Writable<number>;
+    label: import("svelte/store").Writable<string>;
+    haloWidth: import("svelte/store").Readable<number>;
+    symbolInfo: import("svelte/store").Readable<import("../symbols.js").SymbolInfo>;
+    constructor(manager: GeometryManager, id: string, source: string);
+    getState(): StateObject | undefined;
+    setState(state: StateObject): void;
+    getGeoJSONProperties(): GeoJSON.GeoJsonProperties;
+    setGeoJSONProperties(properties: GeoJSON.GeoJsonProperties): void;
+}