@versatiles/svelte 2.0.0 → 2.0.1

package/dist/components/MapEditor/components/Editor.svelte

@@ -33,7 +33,17 @@
 				<hr />
 
 				<InputRow id="showStroke" label="Draw Outline">
-					<input id="showStroke" type="checkbox" bind:checked={$strokeVisible} />
+					<input
+						id="showStroke"
+						type="checkbox"
+						bind:checked={
+							() => $strokeVisible,
+							(visible) => {
+								$strokeVisible = visible;
+								element.manager.state.log();
+							}
+						}
+					/>
 				</InputRow>
 
 				{#if $strokeVisible}

package/dist/components/MapEditor/components/EditorFill.svelte

@@ -10,11 +10,30 @@
 </script>
 
 <InputRow label="Color" id="color">
-	<input id="color" type="color" bind:value={$color} />
+	<input
+		id="color"
+		type="color"
+		bind:value={
+			() => $color,
+			(v) => {
+				$color = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
 </InputRow>
 
 <InputRow label="Pattern" id="pattern">
-	<select id="pattern" bind:value={$pattern}>
+	<select
+		id="pattern"
+		bind:value={
+			() => $pattern,
+			(v) => {
+				$pattern = v;
+				layer.manager.state.log();
+			}
+		}
+	>
 		{#each fillPatterns as [index, fill] (index)}
 			<option value={index}>{fill.name}</option>
 		{/each}
@@ -22,5 +41,18 @@
 </InputRow>
 
 <InputRow label="Opacity" id="opacity">
-	<input id="opacity" type="range" min="0" max="1" step="0.02" bind:value={$opacity} />
+	<input
+		id="opacity"
+		type="range"
+		min="0"
+		max="1"
+		step="0.02"
+		bind:value={
+			() => $opacity,
+			(v) => {
+				$opacity = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
 </InputRow>

package/dist/components/MapEditor/components/EditorStroke.svelte

@@ -10,11 +10,30 @@
 </script>
 
 <InputRow id="color" label="Color">
-	<input id="color" type="color" bind:value={$color} />
+	<input
+		id="color"
+		type="color"
+		bind:value={
+			() => $color,
+			(v) => {
+				$color = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
 </InputRow>
 
 <InputRow id="dashed" label="Dashed">
-	<select id="dashed" bind:value={$dashed}>
+	<select
+		id="dashed"
+		bind:value={
+			() => $dashed,
+			(v) => {
+				$dashed = v;
+				layer.manager.state.log();
+			}
+		}
+	>
 		{#each dashArrays as [index, dash] (index)}
 			<option value={index}>{dash.name}</option>
 		{/each}
@@ -22,5 +41,18 @@
 </InputRow>
 
 <InputRow id="width" label="Width">
-	<input id="width" type="range" min="0.5" max="5" step="0.5" bind:value={$width} />
+	<input
+		id="width"
+		type="range"
+		min="0.5"
+		max="5"
+		step="0.5"
+		bind:value={
+			() => $width,
+			(v) => {
+				$width = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
 </InputRow>

package/dist/components/MapEditor/components/EditorSymbol.svelte

@@ -15,31 +15,108 @@
 </script>
 
 <InputRow id="label" label="Symbol">
-	<SymbolSelector bind:symbolIndex={$symbolIndex} symbolLibrary={layer.manager.symbolLibrary} />
+	<SymbolSelector
+		bind:symbolIndex={
+			() => $symbolIndex,
+			(v) => {
+				$symbolIndex = v;
+				layer.manager.state.log();
+			}
+		}
+		symbolLibrary={layer.manager.symbolLibrary}
+	/>
 </InputRow>
 
 <InputRow id="color" label="Color">
-	<input id="color" type="color" bind:value={$color} />
+	<input
+		id="color"
+		type="color"
+		bind:value={
+			() => $color,
+			(v) => {
+				$color = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
 </InputRow>
 
 <InputRow id="size" label="Size">
-	<input id="size" type="range" min="0.5" max="3" step="0.1" bind:value={$size} />
+	<input
+		id="size"
+		type="range"
+		min="0.5"
+		max="3"
+		step="0.1"
+		bind:value={
+			() => $size,
+			(v) => {
+				$size = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
 </InputRow>
 
 <InputRow id="rotate" label="Rotation">
-	<input id="rotate" type="range" min="-180" max="180" step="15" bind:value={$rotate} />
+	<input
+		id="rotate"
+		type="range"
+		min="-180"
+		max="180"
+		step="15"
+		bind:value={
+			() => $rotate,
+			(v) => {
+				$rotate = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
 </InputRow>
 
 <InputRow id="halo" label="Halo">
-	<input id="halo" type="range" min="0" max="3" step="0.5" bind:value={$halo} />
+	<input
+		id="halo"
+		type="range"
+		min="0"
+		max="3"
+		step="0.5"
+		bind:value={
+			() => $halo,
+			(v) => {
+				$halo = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
 </InputRow>
 
 <InputRow id="label" label="Label">
-	<input id="label" type="label" bind:value={$label} />
+	<input
+		id="label"
+		type="label"
+		bind:value={
+			() => $label,
+			(v) => {
+				$label = v;
+				layer.manager.state.log();
+			}
+		}
+	/>
 </InputRow>
 
 <InputRow id="labelAlign" label="Align Label">
-	<select id="labelAlign" bind:value={$labelAlign}>
+	<select
+		id="labelAlign"
+		bind:value={
+			() => $labelAlign,
+			(v) => {
+				$labelAlign = v;
+				layer.manager.state.log();
+			}
+		}
+	>
 		{#each labelPositions as { index, name } (index)}
 			<option value={index}>{name}</option>
 		{/each}

package/dist/components/MapEditor/components/Sidebar.svelte

@@ -22,6 +22,7 @@
 					if (!evt.target) return alert('Failed to read file.');
 					const json = JSON.parse(evt.target.result as string);
 					geometryManager.addGeoJSON(json);
+					geometryManager.state.log();
 				} catch (error) {
 					console.error(error);
 					return alert('Failed to import GeoJSON. Please check the file format.');
@@ -97,15 +98,21 @@
 		<Editor element={$activeElement} />
 		<SidebarPanel title="Actions" disabled={!$activeElement}>
 			<div class="flex flex-two">
-				<button onclick={() => $activeElement!.delete()}>Delete</button>
+				<button
+					onclick={() => {
+						$activeElement!.delete();
+						geometryManager.state.log();
+					}}>Delete</button
+				>
 			</div>
 		</SidebarPanel>
-		<SidebarPanel title="Help">
+		<SidebarPanel title="Help" open={false}>
+			Submit bugs and feature requests as
 			<a
 				id="github_link"
 				href="https://github.com/versatiles-org/node-versatiles-svelte/issues"
 				target="_blank"
-				aria-label="Repository on GitHub">Report Bugs and Feature Requests as GitHub Issues</a
+				aria-label="Repository on GitHub">GitHub issues</a
 			>
 		</SidebarPanel>
 	</div>
@@ -175,10 +182,6 @@
 	}
 
 	a {
-		text-decoration: none;
 		color: var(--fg-color);
-		&:hover {
-			text-decoration: underline;
-		}
 	}
 </style>

package/dist/components/MapEditor/components/SidebarPanel.svelte

@@ -3,9 +3,9 @@
 
 	let {
 		children,
+		disabled = false,
 		open = true,
-		title,
-		disabled = false
+		title
 	}: { children: Snippet; disabled?: boolean; open?: boolean; title: string } = $props();
 </script>
 
@@ -40,9 +40,10 @@
 			width: 100%;
 
 			.title {
-				text-transform: uppercase;
 				opacity: 0.8;
+				text-transform: uppercase;
 			}
+
 			.chevron {
 				box-sizing: border-box;
 				display: block;
@@ -53,25 +54,30 @@
 				right: 0.4em;
 				top: 0;
 				width: 1em;
+
 				svg {
 					fill: var(--color-fg);
-					width: 100%;
 					height: 100%;
 					rotate: 0deg;
-					transition: rotate 0.1s linear;
 					transform-origin: 40% 50%;
+					transition: rotate 0.1s linear;
+					width: 100%;
 				}
 			}
 		}
+
 		.content {
+			box-sizing: border-box;
 			height: 0;
+			margin: var(--gap) 0;
 			overflow: hidden;
 			padding: 0;
-			box-sizing: border-box;
 		}
 	}
+
 	.open {
 		margin-bottom: 2em;
+
 		.header {
 			.chevron {
 				svg {
@@ -79,12 +85,15 @@
 				}
 			}
 		}
+
 		.content {
 			height: auto;
 		}
 	}
+
 	.disabled {
 		opacity: 0.3;
+
 		.content {
 			display: none;
 		}

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

@@ -3,11 +3,11 @@ import type { GeometryManager } from '../geometry_manager.js';
 import type { StateElement } 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 manager: GeometryManager;
     readonly sourceId: string;
     constructor(manager: GeometryManager);
     select(value: boolean): void;

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

@@ -1,10 +1,10 @@
 export class AbstractElement {
     canvas;
-    manager;
     map;
     source;
     slug = '_' + Math.random().toString(36).slice(2);
     isSelected = false;
+    manager;
     sourceId = 'source' + this.slug;
     constructor(manager) {
         this.manager = manager;

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

@@ -164,13 +164,11 @@ export class GeometryManager {
     }
     appendElement(element) {
         this.elements.update((elements) => [...elements, element]);
-        this.state.log();
     }
     removeElement(element) {
         if (get(this.selectedElement) === element)
             this.selectElement(undefined);
         this.elements.update((elements) => elements.filter((e) => e !== element));
-        this.state.log();
     }
     getGeoJSON() {
         const center = this.map.getCenter();

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

@@ -13,7 +13,6 @@ export declare abstract class MapLayer<T extends LayerSpec> {
     eventHandlers: Map<Events, MouseEventHandler[]>;
     isSelected: boolean;
     constructor(manager: GeometryManager, id: string);
-    pushState(): void;
     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;

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

@@ -12,9 +12,6 @@ export class MapLayer {
         this.map = manager.map;
         this.id = id;
     }
-    pushState() {
-        this.manager.state.log();
-    }
     addLayer(source, type, layout, paint) {
         layout = cloneClean(layout);
         paint = cloneClean(paint);

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

@@ -52,18 +52,9 @@ export class MapLayerFill extends MapLayer {
             this.map.addImage(name, { width: size, height: size, data });
             this.updatePaint('fill-pattern', name);
         };
-        this.color.subscribe(() => {
-            updatePattern();
-            this.manager.state.log();
-        });
-        this.pattern.subscribe(() => {
-            updatePattern();
-            this.manager.state.log();
-        });
-        this.opacity.subscribe((value) => {
-            this.updatePaint('fill-opacity', value);
-            this.manager.state.log();
-        });
+        this.color.subscribe(() => updatePattern());
+        this.pattern.subscribe(() => updatePattern());
+        this.opacity.subscribe((value) => this.updatePaint('fill-opacity', value));
     }
     getState() {
         return removeDefaultFields({

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

@@ -30,22 +30,10 @@ export class MapLayerLine extends MapLayer {
             'line-dasharray': get(this.dashArray),
             'line-width': get(this.width)
         });
-        this.color.subscribe((v) => {
-            this.updatePaint('line-color', Color.parse(v));
-            this.manager.state.log();
-        });
-        this.dashArray.subscribe((v) => {
-            this.updatePaint('line-dasharray', v);
-            this.manager.state.log();
-        });
-        this.visible.subscribe((v) => {
-            this.updateLayout('visibility', v ? 'visible' : 'none');
-            this.manager.state.log();
-        });
-        this.width.subscribe((v) => {
-            this.updatePaint('line-width', v);
-            this.manager.state.log();
-        });
+        this.color.subscribe((v) => this.updatePaint('line-color', Color.parse(v)));
+        this.dashArray.subscribe((v) => this.updatePaint('line-dasharray', v));
+        this.visible.subscribe((v) => this.updateLayout('visibility', v ? 'visible' : 'none'));
+        this.width.subscribe((v) => this.updatePaint('line-width', v));
     }
     getState() {
         return removeDefaultFields({

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

@@ -1,6 +1,7 @@
 import type { GeometryManager } from '../geometry_manager.js';
 export declare class StateManager {
     geometryManager: GeometryManager;
+    private disableLogging;
     constructor(geometryManager: GeometryManager);
     getHash(): string;
     setHash(hash: string): void;

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

@@ -4,6 +4,7 @@ import { StateWriter } from './writer.js';
 const MAXLENGTH = 100;
 export class StateManager {
     geometryManager;
+    disableLogging = false;
     constructor(geometryManager) {
         this.geometryManager = geometryManager;
         this.resetHistory();
@@ -18,8 +19,12 @@ export class StateManager {
             return;
         try {
             const state = StateReader.fromBase64(hash).readRoot();
+            this.disableLogging = true;
             this.geometryManager.setState(state);
-            this.resetHistory();
+            this.disableLogging = false;
+            this.history = [{ ...state, map: undefined }];
+            this.historyIndex = 0;
+            this.updateButtons();
         }
         catch (error) {
             console.error(error);
@@ -40,6 +45,8 @@ export class StateManager {
         this.updateButtons();
     }
     log() {
+        if (this.disableLogging)
+            return;
         const state = this.geometryManager.getState();
         state.map = undefined; // Remove map state from history
         if (this.historyIndex > 0) {
@@ -57,7 +64,9 @@ export class StateManager {
         if (this.historyIndex < this.history.length - 1) {
             this.historyIndex++;
             const state = this.history[this.historyIndex];
+            this.disableLogging = true;
             this.geometryManager.setState(state);
+            this.disableLogging = false;
             this.updateButtons();
         }
     }
@@ -65,7 +74,9 @@ export class StateManager {
         if (this.historyIndex > 0) {
             this.historyIndex--;
             const state = this.history[this.historyIndex];
+            this.disableLogging = true;
             this.geometryManager.setState(state);
+            this.disableLogging = false;
             this.updateButtons();
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/svelte",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "license": "MIT",
   "scripts": {
     "build": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && vite build && npm run package",