@versatiles/svelte 1.0.1 → 1.1.0

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

@@ -0,0 +1,123 @@
+import { derived, get, writable } from 'svelte/store';
+import { MapLayer } from './abstract.js';
+import { Color } from '@versatiles/style';
+import { getSymbol, getSymbolIndexByName } from '../symbols.js';
+import { removeDefaultFields } from '../utils.js';
+const defaultStyle = {
+    color: '#ff0000',
+    rotate: 0,
+    size: 1,
+    halo: 1,
+    pattern: 38,
+    label: ''
+};
+export class MapLayerSymbol extends MapLayer {
+    color = writable(defaultStyle.color);
+    halo = writable(defaultStyle.halo);
+    rotate = writable(defaultStyle.rotate);
+    size = writable(defaultStyle.size);
+    symbolIndex = writable(defaultStyle.pattern);
+    label = writable(defaultStyle.label);
+    haloWidth = derived([this.halo, this.size], ([halo, size]) => halo * size);
+    symbolInfo = derived(this.symbolIndex, (index) => getSymbol(index));
+    constructor(manager, id, source) {
+        super(manager, id);
+        this.addLayer(source, 'symbol', {
+            'icon-image': get(this.symbolInfo).image,
+            'icon-offset': get(this.symbolInfo).offset,
+            'icon-overlap': 'always',
+            'icon-rotate': defaultStyle.rotate,
+            'icon-size': defaultStyle.size,
+            'text-field': defaultStyle.label,
+            'text-font': ['noto_sans_regular'],
+            'text-justify': 'left',
+            'text-optional': true,
+            'text-offset': [0.7, 0.7],
+            'text-variable-anchor': ['right', 'left', 'top', 'bottom']
+        }, {
+            'icon-color': defaultStyle.color,
+            'icon-halo-blur': 0,
+            'icon-halo-color': '#FFFFFF',
+            'icon-halo-width': defaultStyle.halo,
+            'icon-opacity': 1,
+            'text-halo-blur': 0,
+            'text-halo-color': '#FFFFFF',
+            'text-halo-width': defaultStyle.halo
+        });
+        this.color.subscribe((v) => this.updatePaint('icon-color', Color.parse(v)));
+        this.haloWidth.subscribe((v) => {
+            this.updatePaint('icon-halo-width', v);
+            this.updatePaint('text-halo-width', v);
+        });
+        this.label.subscribe((v) => this.updateLayout('text-field', v));
+        this.rotate.subscribe((v) => this.updateLayout('icon-rotate', v));
+        this.size.subscribe((v) => {
+            this.updateLayout('icon-size', v);
+            this.updateLayout('text-size', v * 16);
+        });
+        this.symbolInfo.subscribe((v) => {
+            if (v.image == null) {
+                this.updateLayout('icon-image', undefined);
+                this.updateLayout('text-variable-anchor', ['center']);
+            }
+            else {
+                this.updateLayout('icon-image', v.image);
+                this.updateLayout('text-variable-anchor', ['right', 'left', 'top', 'bottom']);
+                this.updateLayout('icon-offset', v.offset);
+            }
+        });
+    }
+    getState() {
+        return removeDefaultFields({
+            color: get(this.color),
+            rotate: get(this.rotate),
+            size: get(this.size),
+            halo: get(this.halo),
+            pattern: get(this.symbolIndex),
+            label: get(this.label)
+        }, defaultStyle);
+    }
+    setState(state) {
+        if (state.color)
+            this.color.set(state.color);
+        if (state.rotate)
+            this.rotate.set(state.rotate);
+        if (state.size)
+            this.size.set(state.size);
+        if (state.halo)
+            this.halo.set(state.halo);
+        if (state.pattern)
+            this.symbolIndex.set(state.pattern);
+        if (state.label)
+            this.label.set(state.label);
+    }
+    getGeoJSONProperties() {
+        return {
+            'symbol-color': get(this.color),
+            'symbol-halo-width': get(this.halo),
+            'symbol-rotate': get(this.rotate),
+            'symbol-size': get(this.size),
+            'symbol-pattern': get(this.symbolInfo).name,
+            'symbol-label': get(this.label)
+        };
+    }
+    setGeoJSONProperties(properties) {
+        if (properties == null)
+            return;
+        if (properties['symbol-color'])
+            this.color.set(properties['symbol-color']);
+        if (properties['symbol-halo-width'])
+            this.halo.set(properties['symbol-halo-width']);
+        if (properties['symbol-rotate'])
+            this.rotate.set(properties['symbol-rotate']);
+        if (properties['symbol-size'])
+            this.size.set(properties['symbol-size']);
+        if (properties['symbol-label'])
+            this.label.set(properties['symbol-label']);
+        if (properties['symbol-pattern']) {
+            const index = getSymbolIndexByName(properties['symbol-pattern']);
+            if (index != null)
+                this.symbolIndex.set(index);
+        }
+    }
+}

package/dist/components/MapEditor/lib/{types.d.ts → map_layer/types.d.ts}

@@ -1,5 +1,4 @@
 import type { Color } from '@versatiles/style';
-import type { ExpressionSpecification, FormattedSpecification, PaddingSpecification, ResolvedImageSpecification, VariableAnchorOffsetCollectionSpecification } from 'maplibre-gl';
 export interface LayerFill {
     layout: {
         'fill-sort-key'?: number;
@@ -12,7 +11,7 @@ export interface LayerFill {
         'fill-outline-color'?: string | Color;
         'fill-translate'?: [number, number];
         'fill-translate-anchor'?: 'map' | 'viewport';
-        'fill-pattern'?: ResolvedImageSpecification;
+        'fill-pattern'?: maplibregl.ResolvedImageSpecification;
     };
 }
 export interface LayerLine {
@@ -34,8 +33,8 @@ export interface LayerLine {
         'line-offset'?: number;
         'line-blur'?: number;
         'line-dasharray'?: Array<number>;
-        'line-pattern'?: ResolvedImageSpecification;
-        'line-gradient'?: ExpressionSpecification;
+        'line-pattern'?: maplibregl.ResolvedImageSpecification;
+        'line-gradient'?: maplibregl.ExpressionSpecification;
     };
 }
 export interface LayerSymbol {
@@ -53,16 +52,16 @@ export interface LayerSymbol {
         'icon-size'?: number;
         'icon-text-fit'?: 'none' | 'width' | 'height' | 'both';
         'icon-text-fit-padding'?: [number, number, number, number];
-        'icon-image'?: ResolvedImageSpecification;
+        'icon-image'?: maplibregl.ResolvedImageSpecification;
         'icon-rotate'?: number;
-        'icon-padding'?: PaddingSpecification;
+        'icon-padding'?: maplibregl.PaddingSpecification;
         'icon-keep-upright'?: boolean;
         'icon-offset'?: [number, number];
         'icon-anchor'?: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
         'icon-pitch-alignment'?: 'map' | 'viewport' | 'auto';
         'text-pitch-alignment'?: 'map' | 'viewport' | 'auto';
         'text-rotation-alignment'?: 'map' | 'viewport' | 'viewport-glyph' | 'auto';
-        'text-field'?: FormattedSpecification;
+        'text-field'?: maplibregl.FormattedSpecification;
         'text-font'?: Array<string>;
         'text-size'?: number;
         'text-max-width'?: number;
@@ -71,7 +70,7 @@ export interface LayerSymbol {
         'text-justify'?: 'auto' | 'left' | 'center' | 'right';
         'text-radial-offset'?: number;
         'text-variable-anchor'?: Array<'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>;
-        'text-variable-anchor-offset'?: VariableAnchorOffsetCollectionSpecification;
+        'text-variable-anchor-offset'?: maplibregl.VariableAnchorOffsetCollectionSpecification;
         'text-anchor'?: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
         'text-max-angle'?: number;
         'text-writing-mode'?: Array<'horizontal' | 'vertical'>;
@@ -103,10 +102,3 @@ export interface LayerSymbol {
         'text-translate-anchor'?: 'map' | 'viewport';
     };
 }
-export type ElementPoint = [number, number];
-export type ElementLine = ElementPoint[];
-export interface SelectionNode {
-    coordinates: ElementPoint;
-    index: number;
-    transparent?: boolean;
-}

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

@@ -0,0 +1 @@
+export {};

package/dist/components/MapEditor/lib/state/reader.d.ts

@@ -0,0 +1,17 @@
+import type { StateObject } from './types.js';
+export declare class StateReader {
+    private buffer;
+    private offset;
+    constructor(buffer: Uint8Array | number[]);
+    readByte(): number;
+    readUnsignedInteger(): number;
+    readSignedInteger(): number;
+    readString(): string;
+    readBoolean(): boolean;
+    static fromBase64compressed(base64: string): Promise<StateReader>;
+    static fromBase64(base64: string): Promise<StateReader>;
+    readObject(): StateObject;
+    readDifferential(count: number): number[];
+    readColor(): string;
+    readType(): string;
+}

package/dist/components/MapEditor/lib/state/reader.js

@@ -0,0 +1,161 @@
+import { Color } from '@versatiles/style';
+import { base64ToUint8Array, decompress } from '../utils.js';
+export class StateReader {
+    buffer;
+    offset = 0;
+    constructor(buffer) {
+        if (buffer instanceof Uint8Array) {
+            this.buffer = buffer;
+        }
+        else if (Array.isArray(buffer)) {
+            this.buffer = new Uint8Array(buffer);
+        }
+        else {
+            throw new TypeError('Invalid buffer type');
+        }
+    }
+    readByte() {
+        if (this.offset >= this.buffer.length) {
+            throw new RangeError('Attempt to read past end of buffer');
+        }
+        return this.buffer[this.offset++];
+    }
+    readUnsignedInteger() {
+        let result = 0, shift = 0, byte;
+        do {
+            if (this.offset >= this.buffer.length) {
+                throw new RangeError('Unexpected end of buffer while reading integer');
+            }
+            byte = this.readByte();
+            result |= (byte & 0x7f) << shift;
+            shift += 7;
+        } while (byte & 0x80);
+        return result;
+    }
+    readSignedInteger() {
+        const result = this.readUnsignedInteger();
+        if (result & 1) {
+            return -((result + 1) / 2);
+        }
+        else {
+            return result / 2;
+        }
+    }
+    readString() {
+        const length = this.readUnsignedInteger();
+        let str = '';
+        for (let i = 0; i < length; i++) {
+            str += String.fromCharCode(this.readUnsignedInteger());
+        }
+        return str;
+    }
+    readBoolean() {
+        return this.readByte() !== 0;
+    }
+    static async fromBase64compressed(base64) {
+        return new StateReader(await decompress(base64ToUint8Array(base64)));
+    }
+    static async fromBase64(base64) {
+        return new StateReader(base64ToUint8Array(base64));
+    }
+    readObject() {
+        const state = {};
+        while (true) {
+            const key = this.readByte();
+            if (key === 0)
+                break;
+            switch (key) {
+                case 10:
+                    state.map = this.readObject();
+                    break;
+                case 11:
+                    state.style = this.readObject();
+                    break;
+                case 12:
+                    state.strokeStyle = this.readObject();
+                    break;
+                case 20:
+                    {
+                        const length = this.readUnsignedInteger();
+                        state.elements = Array.from({ length }, () => this.readObject());
+                    }
+                    break;
+                case 30:
+                    state.point = [this.readSignedInteger() / 1e5, this.readSignedInteger() / 1e5];
+                    break;
+                case 31:
+                    {
+                        const count = this.readUnsignedInteger();
+                        const x = this.readDifferential(count);
+                        const y = this.readDifferential(count);
+                        state.points = Array.from({ length: count }, (_, i) => [x[i] / 1e5, y[i] / 1e5]);
+                    }
+                    break;
+                case 40:
+                    state.color = this.readColor();
+                    break;
+                case 50:
+                    state.type = this.readType();
+                    break;
+                case 60:
+                    state.label = this.readString();
+                    break;
+                case 70:
+                    state.halo = this.readUnsignedInteger() / 10;
+                    break;
+                case 71:
+                    state.opacity = this.readUnsignedInteger() / 100;
+                    break;
+                case 72:
+                    state.pattern = this.readUnsignedInteger();
+                    break;
+                case 73:
+                    state.rotate = this.readUnsignedInteger();
+                    break;
+                case 74:
+                    state.size = this.readUnsignedInteger() / 10;
+                    break;
+                case 75:
+                    state.width = this.readUnsignedInteger() / 10;
+                    break;
+                case 76:
+                    state.zoom = this.readUnsignedInteger() / 20;
+                    break;
+                case 90:
+                    state.visible = this.readBoolean();
+                    break;
+                default:
+                    throw new Error(`Invalid state key: ${key}`);
+            }
+        }
+        return state;
+    }
+    readDifferential(count) {
+        const values = [];
+        if (count === 0)
+            return values;
+        let value = this.readSignedInteger();
+        values.push(value);
+        for (let i = 1; i < count; i++) {
+            value += +this.readSignedInteger();
+            values.push(value);
+        }
+        return values;
+    }
+    readColor() {
+        return new Color.RGB(this.readByte(), this.readByte(), this.readByte()).asHex();
+    }
+    readType() {
+        const type = this.readByte();
+        switch (type) {
+            case 0:
+                return 'marker';
+            case 1:
+                return 'line';
+            case 2:
+                return 'polygon';
+            default:
+                throw new Error(`Invalid type: ${type}`);
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+export interface StateObject {
+    [key: string]: StateObject | StateObject[] | [number, number] | [number, number][] | string | number | boolean | undefined;
+    map?: StateObject;
+    style?: StateObject;
+    strokeStyle?: StateObject;
+    elements?: StateObject[];
+    point?: [number, number];
+    points?: [number, number][];
+    color?: string;
+    type?: string;
+    label?: string;
+    halo?: number;
+    opacity?: number;
+    pattern?: number;
+    rotate?: number;
+    size?: number;
+    width?: number;
+    zoom?: number;
+    visible?: boolean;
+}

package/dist/components/MapEditor/lib/state/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/MapEditor/lib/state/writer.d.ts

@@ -0,0 +1,17 @@
+import type { StateObject } from './types.js';
+export declare class StateWriter {
+    buffer: Uint8Array<ArrayBuffer>;
+    offset: number;
+    constructor();
+    writeByte(num: number): void;
+    writeUnsignedInteger(i: number): void;
+    writeSignedInteger(i: number): void;
+    writeString(str: string): void;
+    writeBoolean(b: boolean): void;
+    getBase64(): string;
+    getBase64compressed(): Promise<string>;
+    getBuffer(): Uint8Array;
+    writeObject(state: StateObject): void;
+    writeColor(color: unknown): void;
+    writeDifferential(values: number[]): void;
+}

package/dist/components/MapEditor/lib/state/writer.js

@@ -0,0 +1,178 @@
+import { Color } from '@versatiles/style';
+import { compress, uint8ArrayToBase64 } from '../utils.js';
+const chunkSize = 65536;
+export class StateWriter {
+    buffer = new Uint8Array(chunkSize);
+    offset = 0;
+    constructor() { }
+    writeByte(num) {
+        if (this.offset >= this.buffer.length) {
+            const newBuffer = new Uint8Array(this.buffer.length + chunkSize);
+            newBuffer.set(this.buffer);
+            this.buffer = newBuffer;
+        }
+        this.buffer[this.offset++] = num;
+    }
+    writeUnsignedInteger(i) {
+        if (!Number.isSafeInteger(i)) {
+            throw new RangeError(`Number out of safe integer range: ${i}`);
+        }
+        while (i > 0x7f) {
+            this.writeByte((i & 0x7f) | 0x80);
+            i >>>= 7;
+        }
+        this.writeByte(i);
+    }
+    writeSignedInteger(i) {
+        if (!Number.isSafeInteger(i)) {
+            throw new RangeError(`Number out of safe integer range: ${i}`);
+        }
+        this.writeUnsignedInteger(i < 0 ? -i * 2 - 1 : i * 2);
+    }
+    writeString(str) {
+        const length = str.length;
+        this.writeUnsignedInteger(length);
+        for (let i = 0; i < length; i++)
+            this.writeUnsignedInteger(str.charCodeAt(i));
+    }
+    writeBoolean(b) {
+        this.writeByte(b ? 1 : 0);
+    }
+    getBase64() {
+        return uint8ArrayToBase64(this.getBuffer());
+    }
+    async getBase64compressed() {
+        return uint8ArrayToBase64(await compress(this.getBuffer()));
+    }
+    getBuffer() {
+        return this.buffer.slice(0, this.offset);
+    }
+    writeObject(state) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const me = this;
+        Object.entries(state).forEach(([key, value]) => {
+            if (value == null)
+                return;
+            switch (key) {
+                case 'map':
+                    writeObject(10, value);
+                    break;
+                case 'style':
+                    writeObject(11, value);
+                    break;
+                case 'strokeStyle':
+                    writeObject(12, value);
+                    break;
+                case 'elements':
+                    if (!Array.isArray(value))
+                        throw new Error(`Invalid elements: ${value}`);
+                    this.writeByte(20);
+                    this.writeUnsignedInteger(value.length);
+                    value.forEach((element) => this.writeObject(element));
+                    break;
+                case 'point':
+                    if (!Array.isArray(value) || value.length !== 2)
+                        throw new Error(`Invalid point: ${value}`);
+                    this.writeByte(30);
+                    me.writeSignedInteger(Math.round(value[0] * 1e5));
+                    me.writeSignedInteger(Math.round(value[1] * 1e5));
+                    break;
+                case 'points':
+                    if (!Array.isArray(value))
+                        throw new Error(`Invalid points: ${value}`);
+                    this.writeByte(31);
+                    this.writeUnsignedInteger(value.length);
+                    this.writeDifferential(value.map((p) => Math.round(p[0] * 1e5)));
+                    this.writeDifferential(value.map((p) => Math.round(p[1] * 1e5)));
+                    break;
+                case 'color':
+                    this.writeByte(40);
+                    this.writeColor(value);
+                    break;
+                case 'type':
+                    this.writeByte(50);
+                    switch (value) {
+                        case 'marker':
+                            this.writeByte(0);
+                            break;
+                        case 'line':
+                            this.writeByte(1);
+                            break;
+                        case 'polygon':
+                            this.writeByte(2);
+                            break;
+                        default:
+                            throw new Error(`Invalid type: ${value}`);
+                    }
+                    break;
+                case 'label':
+                    if (typeof value !== 'string')
+                        throw new Error(`Invalid string: ${value}`);
+                    this.writeByte(60);
+                    this.writeString(value);
+                    break;
+                case 'halo':
+                    writeInteger(70, value, 10);
+                    break;
+                case 'opacity':
+                    writeInteger(71, value, 100);
+                    break;
+                case 'pattern':
+                    writeInteger(72, value);
+                    break;
+                case 'rotate':
+                    writeInteger(73, value);
+                    break;
+                case 'size':
+                    writeInteger(74, value, 10);
+                    break;
+                case 'width':
+                    writeInteger(75, value, 10);
+                    break;
+                case 'zoom':
+                    writeInteger(76, value, 20);
+                    break;
+                case 'visible':
+                    if (typeof value !== 'boolean')
+                        throw new Error(`Invalid boolean: ${value}`);
+                    this.writeByte(90);
+                    this.writeBoolean(value);
+                    break;
+                default:
+                    throw new Error(`Invalid state key: ${key}`);
+            }
+        });
+        this.writeByte(0);
+        function writeObject(id, obj) {
+            if (typeof obj !== 'object' || obj == null)
+                throw new Error(`Invalid object: ${obj}`);
+            me.writeByte(id);
+            me.writeObject(obj);
+        }
+        function writeInteger(id, obj, factor = 1) {
+            if (typeof obj !== 'number')
+                throw new Error(`Invalid number: ${obj}`);
+            const value = Math.round(obj);
+            if (value < 0)
+                throw new Error(`Negative Number: ${obj}`);
+            me.writeByte(id);
+            me.writeUnsignedInteger(value * factor);
+        }
+    }
+    writeColor(color) {
+        if (typeof color !== 'string')
+            throw new Error(`Invalid color: ${color}`);
+        const c = Color.parse(color).asRGB().round().asArray();
+        this.writeByte(c[0]);
+        this.writeByte(c[1]);
+        this.writeByte(c[2]);
+    }
+    writeDifferential(values) {
+        if (values.length === 0)
+            return;
+        this.writeSignedInteger(values[0]);
+        for (let i = 1; i < values.length; i++) {
+            this.writeSignedInteger(values[i] - values[i - 1]);
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+export interface SymbolInfo {
+    index: number;
+    name: string;
+    image?: string;
+    offset?: [number, number];
+    icon?: string;
+}
+export declare function getSymbol(index: number): SymbolInfo;
+export declare function getSymbolIndexByName(name: string): number | undefined;
+export declare class SymbolLibrary {
+    private map;
+    constructor(map: maplibregl.Map);
+    getSymbol(index: number): SymbolInfo;
+    drawSymbol(canvas: HTMLCanvasElement, index: number, halo?: boolean): void;
+    asList(): SymbolInfo[];
+}