@versatiles/svelte 1.0.0 → 1.0.2

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

@@ -1,58 +0,0 @@
-import { MapLayer } from './map_layer.js';
-export class AbstractElement {
-    name;
-    canvas;
-    manager;
-    map;
-    layer;
-    source;
-    isActive = true;
-    slug = '_' + Math.random().toString(36).slice(2);
-    constructor(manager, name, type) {
-        this.manager = manager;
-        this.map = manager.map;
-        this.canvas = this.map.getCanvasContainer();
-        this.name = name;
-        this.map.addSource('source' + this.slug, {
-            type: 'geojson',
-            data: { type: 'FeatureCollection', features: [] }
-        });
-        this.source = this.map.getSource('source' + this.slug);
-        this.layer = new MapLayer(this.map, type + this.slug, 'source' + this.slug, type);
-        this.map.on('mouseenter', this.layer.id, () => {
-            if (this.isActive)
-                this.canvas.style.cursor = 'pointer';
-        });
-        this.map.on('mouseleave', this.layer.id, () => {
-            if (this.isActive)
-                this.canvas.style.cursor = 'default';
-        });
-        this.map.on('click', this.layer.id, (e) => {
-            if (this.isActive) {
-                this.manager.setActiveElement(this);
-                e.preventDefault();
-            }
-        });
-    }
-    randomPositions(name, length) {
-        let seed = name
-            .split('')
-            .reduce((acc, char) => (acc * 0x101 + char.charCodeAt(0)) % 0x100000000, 0);
-        const points = [];
-        for (let i = 0; i < length; i++) {
-            const xr = random() * 0.5 + 0.25;
-            const yr = 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;
-        function random() {
-            for (let i = 0; i < 10; i++)
-                seed = ((Math.cos(seed * 3.14 + 0.0159) + 1.1) * 9631) % 1;
-            return seed;
-        }
-    }
-}

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

@@ -1,14 +0,0 @@
-import { AbstractElement } from './element_abstract.js';
-import type { GeometryManager } from './geometry_manager.js';
-import type { ElementLine, LayerLine, SelectionNode } from './types.js';
-export declare const dashArrays: Map<string, number[] | undefined>;
-export declare class LineElement extends AbstractElement<LayerLine> {
-    readonly color: import("svelte/store").Writable<string>;
-    readonly dashed: import("svelte/store").Writable<string>;
-    readonly width: import("svelte/store").Writable<number>;
-    private line;
-    constructor(manager: GeometryManager, name: string, line?: ElementLine);
-    getFeature(): GeoJSON.Feature<GeoJSON.LineString>;
-    getSelectionNodes(): SelectionNode[];
-    getSelectionNodeUpdater(properties?: Record<string, unknown>): ((lng: number, lat: number) => void) | undefined;
-}

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

@@ -1,76 +0,0 @@
-import { Color } from '@versatiles/style';
-import { AbstractElement } from './element_abstract.js';
-import { get, writable } from 'svelte/store';
-import { getMiddlePoint } from './utils.js';
-export const dashArrays = new Map([
-    ['solid', undefined],
-    ['dashed', [2, 4]],
-    ['dotted', [0, 2]]
-]);
-export class LineElement extends AbstractElement {
-    color = writable('#ff0000');
-    dashed = writable('solid');
-    width = writable(2);
-    line = [
-        [0, 0],
-        [0, 0]
-    ];
-    constructor(manager, name, line) {
-        super(manager, name, 'line');
-        this.line = line ?? this.randomPositions(name, 2);
-        const getDashArray = () => dashArrays.get(get(this.dashed));
-        this.layer.setLayout({
-            'line-cap': 'round',
-            'line-join': 'round'
-        });
-        this.layer.setPaint({
-            'line-color': Color.parse(get(this.color)).asString(),
-            'line-dasharray': getDashArray(),
-            'line-width': get(this.width)
-        });
-        this.color.subscribe((value) => this.layer.updatePaint('line-color', Color.parse(value)));
-        this.width.subscribe((value) => this.layer.updatePaint('line-width', value));
-        this.dashed.subscribe(() => this.layer.updatePaint('line-dasharray', getDashArray()));
-        this.source.setData(this.getFeature());
-    }
-    getFeature() {
-        return {
-            type: 'Feature',
-            properties: {},
-            geometry: { type: 'LineString', coordinates: this.line }
-        };
-    }
-    getSelectionNodes() {
-        const points = [];
-        for (let i = 0; i < this.line.length; i++) {
-            points.push({ index: i, coordinates: this.line[i] });
-            if (i === this.line.length - 1)
-                continue;
-            points.push({
-                index: i + 0.5,
-                transparent: true,
-                coordinates: getMiddlePoint(this.line[i], this.line[i + 1])
-            });
-        }
-        return points;
-    }
-    getSelectionNodeUpdater(properties) {
-        if (properties == undefined)
-            return;
-        const index = properties.index;
-        let point;
-        if (index % 1 === 0) {
-            point = this.line[index];
-        }
-        else {
-            const i = Math.ceil(index);
-            this.line.splice(i, 0, [0, 0]);
-            point = this.line[i];
-        }
-        return (lng, lat) => {
-            point[0] = lng;
-            point[1] = lat;
-            this.source.setData(this.getFeature());
-        };
-    }
-}

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

@@ -1,20 +0,0 @@
-import { AbstractElement } from './element_abstract.js';
-import type { GeometryManager } from './geometry_manager.js';
-import type { ElementPoint, LayerSymbol, SelectionNode } from './types.js';
-export declare const symbols: Map<string, {
-    image: string;
-    offset?: [number, number];
-}>;
-export declare class MarkerElement extends AbstractElement<LayerSymbol> {
-    readonly color: import("svelte/store").Writable<string>;
-    readonly halo: import("svelte/store").Writable<number>;
-    readonly rotate: import("svelte/store").Writable<number>;
-    readonly size: import("svelte/store").Writable<number>;
-    readonly symbol: import("svelte/store").Writable<string>;
-    readonly label: import("svelte/store").Writable<string>;
-    private point;
-    constructor(manager: GeometryManager, name: string, point?: ElementPoint);
-    getFeature(): GeoJSON.Feature<GeoJSON.Point>;
-    getSelectionNodes(): SelectionNode[];
-    getSelectionNodeUpdater(): ((lng: number, lat: number) => void) | undefined;
-}

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

@@ -1,191 +0,0 @@
-import { Color } from '@versatiles/style';
-import { AbstractElement } from './element_abstract.js';
-import { get, writable } from 'svelte/store';
-export const symbols = new Map([
-    ['airplane', { image: 'basics:icon-airfield' }],
-    ['airport', { image: 'basics:icon-airport' }],
-    ['alcohol shop', { image: 'basics:icon-alcohol_shop' }],
-    ['art gallery', { image: 'basics:icon-art_gallery' }],
-    ['artwork', { image: 'basics:icon-artwork' }],
-    ['atm', { image: 'basics:icon-atm' }],
-    ['bakery', { image: 'basics:icon-bakery' }],
-    ['bank', { image: 'basics:icon-bank' }],
-    ['beauty', { image: 'basics:icon-beauty' }],
-    ['beer', { image: 'basics:icon-beer' }],
-    ['beergarden', { image: 'basics:icon-beergarden' }],
-    ['bench', { image: 'basics:icon-bench' }],
-    ['beverages', { image: 'basics:icon-beverages' }],
-    ['bicycle share', { image: 'basics:icon-bicycle_share' }],
-    ['books', { image: 'basics:icon-books' }],
-    ['bus', { image: 'basics:icon-bus' }],
-    ['butcher', { image: 'basics:icon-butcher' }],
-    ['cafe', { image: 'basics:icon-cafe', offset: [2, 0] }],
-    ['car rental', { image: 'basics:icon-car_rental' }],
-    ['car wash', { image: 'basics:icon-car_wash' }],
-    ['castle', { image: 'basics:icon-castle' }],
-    ['cemetery', { image: 'basics:icon-cemetery' }],
-    ['chalet', { image: 'basics:icon-chalet' }],
-    ['chemist', { image: 'basics:icon-chemist' }],
-    ['cinema', { image: 'basics:icon-cinema' }],
-    ['clothes', { image: 'basics:icon-clothes' }],
-    ['college', { image: 'basics:icon-college' }],
-    ['community', { image: 'basics:icon-community' }],
-    ['defibrillator', { image: 'basics:icon-defibrillator' }],
-    ['doctor', { image: 'basics:icon-doctor' }],
-    ['dog park', { image: 'basics:icon-dog_park' }],
-    ['doityourself', { image: 'basics:icon-doityourself' }],
-    ['drinking water', { image: 'basics:icon-drinking_water' }],
-    ['drycleaning', { image: 'basics:icon-drycleaning' }],
-    ['emergency phone', { image: 'basics:icon-emergency_phone' }],
-    ['fast food', { image: 'basics:icon-fast_food' }],
-    ['fire station', { image: 'basics:icon-fire_station' }],
-    ['flag', { image: 'basics:icon-embassy', offset: [7.5, -10] }],
-    ['florist', { image: 'basics:icon-florist' }],
-    ['fountain', { image: 'basics:icon-fountain' }],
-    ['furniture', { image: 'basics:icon-furniture' }],
-    ['garden centre', { image: 'basics:icon-garden_centre' }],
-    ['gift', { image: 'basics:icon-gift' }],
-    ['glasses', { image: 'basics:icon-optician' }],
-    ['golf', { image: 'basics:icon-golf' }],
-    ['greengrocer', { image: 'basics:icon-greengrocer' }],
-    ['hardware', { image: 'basics:icon-hardware' }],
-    ['hospital', { image: 'basics:icon-hospital' }],
-    ['huntingstand', { image: 'basics:icon-huntingstand' }],
-    ['hydrant', { image: 'basics:icon-hydrant' }],
-    ['icerink', { image: 'basics:icon-icerink' }],
-    ['information', { image: 'basics:transport-information' }],
-    ['jewelry store', { image: 'basics:icon-jewelry_store' }],
-    ['kiosk', { image: 'basics:icon-kiosk' }],
-    ['laundry', { image: 'basics:icon-laundry' }],
-    ['letter', { image: 'basics:icon-post' }],
-    ['library', { image: 'basics:icon-library' }],
-    ['lighthouse', { image: 'basics:icon-lighthouse' }],
-    ['marketplace', { image: 'basics:icon-marketplace' }],
-    ['money', { image: 'basics:icon-bar' }],
-    ['monument', { image: 'basics:icon-monument' }],
-    ['newsagent', { image: 'basics:icon-newsagent' }],
-    ['nightclub', { image: 'basics:icon-nightclub' }],
-    ['nursinghome', { image: 'basics:icon-nursinghome' }],
-    ['observation tower', { image: 'basics:icon-observation_tower' }],
-    ['outdoor', { image: 'basics:icon-outdoor' }],
-    ['pharmacy', { image: 'basics:icon-pharmacy' }],
-    ['picnic site', { image: 'basics:icon-picnic_site' }],
-    ['place of worship', { image: 'basics:icon-place_of_worship' }],
-    ['playground', { image: 'basics:icon-playground' }],
-    ['police', { image: 'basics:icon-police', offset: [-1, -3] }],
-    ['postbox', { image: 'basics:icon-postbox' }],
-    ['prison', { image: 'basics:icon-prison' }],
-    ['rail light', { image: 'basics:icon-rail_light' }],
-    ['rail metro', { image: 'basics:icon-rail_metro' }],
-    ['rail', { image: 'basics:icon-rail' }],
-    ['recycling', { image: 'basics:icon-recycling' }],
-    ['restaurant', { image: 'basics:icon-restaurant' }],
-    ['run', { image: 'basics:icon-pitch' }],
-    ['school', { image: 'basics:icon-school' }],
-    ['scissor', { image: 'basics:icon-hairdresser' }],
-    ['shield', { image: 'basics:icon-historic', offset: [0, -10] }],
-    ['shoes', { image: 'basics:icon-shoes', offset: [-5, 0] }],
-    ['shop', { image: 'basics:icon-shop' }],
-    ['shop', { image: 'basics:icon-shop' }],
-    ['shrine', { image: 'basics:icon-shrine' }],
-    ['sports', { image: 'basics:icon-sports' }],
-    ['stadium', { image: 'basics:icon-stadium' }],
-    ['stationery', { image: 'basics:icon-stationery' }],
-    ['surveillance', { image: 'basics:icon-surveillance' }],
-    ['swimming', { image: 'basics:icon-swimming' }],
-    ['telephone', { image: 'basics:icon-telephone' }],
-    ['theatre', { image: 'basics:icon-theatre' }],
-    ['toilet', { image: 'basics:icon-toilet' }],
-    ['tooth', { image: 'basics:icon-dentist' }],
-    ['town hall', { image: 'basics:icon-town_hall' }],
-    ['toys', { image: 'basics:icon-toys' }],
-    ['tram', { image: 'basics:transport-tram' }],
-    ['travel agent', { image: 'basics:icon-travel_agent' }],
-    ['vendingmachine', { image: 'basics:icon-vendingmachine' }],
-    ['veterinary', { image: 'basics:icon-veterinary' }],
-    ['video', { image: 'basics:icon-video' }],
-    ['viewpoint', { image: 'basics:icon-viewpoint', offset: [0, -6] }],
-    ['waste basket', { image: 'basics:icon-waste_basket' }],
-    ['watermill', { image: 'basics:icon-watermill' }],
-    ['waterpark', { image: 'basics:icon-waterpark' }],
-    ['windmill', { image: 'basics:icon-windmill' }],
-    ['zoo', { image: 'basics:icon-zoo' }]
-]);
-export class MarkerElement extends AbstractElement {
-    color = writable('#ff0000');
-    halo = writable(1);
-    rotate = writable(0);
-    size = writable(1);
-    symbol = writable('flag');
-    label = writable('');
-    point = [0, 0];
-    constructor(manager, name, point) {
-        super(manager, name, 'symbol');
-        this.point = point ?? this.randomPositions(name, 1)[0];
-        const getSymbol = () => {
-            const entry = symbols.get(get(this.symbol)) ?? symbols.get('flag');
-            return { image: entry.image, offset: entry.offset ?? [0, 0] };
-        };
-        this.layer.setLayout({
-            'icon-image': getSymbol().image,
-            'icon-offset': getSymbol().offset,
-            'icon-overlap': 'always',
-            'icon-rotate': get(this.rotate),
-            'icon-size': get(this.size),
-            'text-field': get(this.label),
-            'text-font': ['noto_sans_regular'],
-            'text-justify': 'left',
-            'text-anchor': 'right',
-            'text-offset': [-0.4, -0.6]
-        });
-        this.layer.setPaint({
-            'icon-color': Color.parse(get(this.color)).asString(),
-            'icon-halo-blur': 0,
-            'icon-halo-color': '#FFFFFF',
-            'icon-halo-width': get(this.halo) * get(this.size),
-            'icon-opacity': 1,
-            'text-halo-blur': 0,
-            'text-halo-color': '#FFFFFF',
-            'text-halo-width': get(this.halo) * get(this.size)
-        });
-        this.color.subscribe((value) => this.layer.updatePaint('icon-color', Color.parse(value)));
-        this.halo.subscribe((value) => {
-            this.layer.updatePaint('icon-halo-width', value * get(this.size));
-            this.layer.updatePaint('text-halo-width', value * get(this.size));
-        });
-        this.label.subscribe((value) => this.layer.updateLayout('text-field', value));
-        this.rotate.subscribe((value) => this.layer.updateLayout('icon-rotate', value));
-        this.size.subscribe((value) => {
-            this.layer.updateLayout('icon-size', value);
-            this.layer.updatePaint('icon-halo-width', value * get(this.halo));
-            this.layer.updateLayout('text-size', value * 16);
-            this.layer.updatePaint('text-halo-width', value * get(this.halo));
-        });
-        this.symbol.subscribe(() => {
-            const symbol = getSymbol();
-            this.layer.updateLayout('icon-image', symbol.image);
-            this.layer.updateLayout('icon-offset', symbol.offset);
-        });
-        this.source.setData(this.getFeature());
-    }
-    getFeature() {
-        return {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-                type: 'Point',
-                coordinates: this.point
-            }
-        };
-    }
-    getSelectionNodes() {
-        return [{ index: 0, coordinates: this.point }];
-    }
-    getSelectionNodeUpdater() {
-        return (lng, lat) => {
-            this.point[0] = lng;
-            this.point[1] = lat;
-            this.source.setData(this.getFeature());
-        };
-    }
-}

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

@@ -1,14 +0,0 @@
-import type { LayerFill, LayerLine, LayerSymbol } from './types.js';
-type LayerSpec = LayerFill | LayerLine | LayerSymbol;
-export declare class MapLayer<T extends LayerSpec> {
-    readonly map: maplibregl.Map;
-    readonly id: string;
-    readonly layoutProperties: T["layout"];
-    readonly paintProperties: T["paint"];
-    constructor(map: maplibregl.Map, id: string, source: string, type: 'symbol' | 'line' | 'fill');
-    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;
-}
-export {};

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

@@ -1,61 +0,0 @@
-import { Color } from '@versatiles/style';
-export class MapLayer {
-    map;
-    id;
-    layoutProperties = {};
-    paintProperties = {};
-    constructor(map, id, source, type) {
-        this.map = map;
-        this.id = id;
-        let filter;
-        switch (type) {
-            case 'symbol':
-                filter = 'Point';
-                break;
-            case 'line':
-                filter = 'LineString';
-                break;
-            case 'fill':
-                filter = 'Polygon';
-                break;
-            default:
-                throw new Error('Invalid layer type');
-        }
-        this.map.addLayer({
-            id,
-            source,
-            type,
-            layout: this.layoutProperties,
-            paint: this.paintProperties,
-            filter: ['==', '$type', filter]
-        }, 'selection_nodes');
-    }
-    setPaint(paint) {
-        if (paint === undefined)
-            return;
-        const keys = new Set(Object.keys(paint).concat(Object.keys(this.paintProperties)));
-        for (const key of keys.values())
-            this.updatePaint(key, paint[key]);
-    }
-    updatePaint(key, value) {
-        if (value instanceof Color)
-            value = value.asString();
-        if (this.paintProperties[key] == value)
-            return;
-        this.map.setPaintProperty(this.id, key, value);
-        this.paintProperties[key] = value;
-    }
-    setLayout(layout) {
-        if (layout === undefined)
-            return;
-        const keys = new Set(Object.keys(layout).concat(Object.keys(this.layoutProperties)));
-        for (const key of keys.values())
-            this.updateLayout(key, layout[key]);
-    }
-    updateLayout(key, value) {
-        if (this.layoutProperties[key] == value)
-            return;
-        this.map.setLayoutProperty(this.id, key, value);
-        this.layoutProperties[key] = value;
-    }
-}

package/dist/utils/sprite_library.d.ts

@@ -1,19 +0,0 @@
-interface SpriteEntry {
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    pixelRatio: number;
-    sdf: boolean;
-    id: string;
-    name: string;
-    group: string;
-}
-export declare class SpriteLibrary {
-    private spriteList;
-    private pixelRatio;
-    constructor(pixelRatio?: number);
-    getSpriteList(): Promise<SpriteEntry[]>;
-    private loadSpriteList;
-}
-export default SpriteLibrary;

package/dist/utils/sprite_library.js

@@ -1,30 +0,0 @@
-export class SpriteLibrary {
-    spriteList = [];
-    pixelRatio;
-    constructor(pixelRatio = 2) {
-        this.pixelRatio = pixelRatio;
-    }
-    async getSpriteList() {
-        await this.loadSpriteList();
-        return this.spriteList;
-    }
-    async loadSpriteList() {
-        if (this.spriteList.length)
-            return;
-        const spriteGroupList = (await fetch('https://tiles.versatiles.org/assets/sprites/index.json').then((r) => r.json()));
-        await Promise.all(spriteGroupList.map(async (group) => {
-            const spriteGroup = (await fetch(`https://tiles.versatiles.org/assets/sprites/${group}/sprites@${this.pixelRatio}x.json`).then((r) => r.json()));
-            Object.entries(spriteGroup).forEach(([name, entry]) => {
-                this.spriteList.push({
-                    ...entry,
-                    pixelRatio: entry.pixelRatio ?? 1,
-                    sdf: entry.sdf ?? false,
-                    id: `${group}/${name}`,
-                    group,
-                    name
-                });
-            });
-        }));
-    }
-}
-export default SpriteLibrary;