@snap-engine/snapsort-svelte 0.1.0 → 0.3.0

package/README.md

@@ -2,6 +2,10 @@
 
 Svelte components for SnapEngine drag-and-drop interactions.
 
+`Container` and `Item` are aliases for the Euclidean
+components. The explicit component pairs are available as Euclidean and
+Progressive variants.
+
 ## Install
 
 ```bash
@@ -10,13 +14,22 @@ npm install @snap-engine/snapsort-svelte @snap-engine/snapsort
 
 ## Includes
 
-- `ItemContainer`
+- `ContainerEuclidean`
+- `ItemEuclidean`
+- `ContainerProgressive`
+- `ItemProgressive`
+- `Container`
 - `Item`
 
 ## Usage
 
 ```svelte
 <script>
-  import { ItemContainer, Item } from "@snap-engine/snapsort-svelte";
+  import {
+    Container,
+    Item,
+    ContainerProgressive,
+    ItemProgressive,
+  } from "@snap-engine/snapsort-svelte";
 </script>
-```
+```

package/package.json

@@ -1,6 +1,11 @@
 {
   "name": "@snap-engine/snapsort-svelte",
-  "version": "0.1.0",
+  "version": "0.3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tfukaza/SnapEngineJS",
+    "directory": "assets/snapsort/svelte"
+  },
   "description": "Svelte components for drag-and-drop system",
   "type": "module",
   "svelte": "./src/index.ts",
@@ -8,8 +13,12 @@
     ".": {
       "svelte": "./src/index.ts"
     },
-    "./ItemContainer.svelte": "./src/ItemContainer.svelte",
-    "./Item.svelte": "./src/Item.svelte"
+    "./Container.svelte": "./src/ContainerEuclidean.svelte",
+    "./Item.svelte": "./src/ItemEuclidean.svelte",
+    "./ContainerEuclidean.svelte": "./src/ContainerEuclidean.svelte",
+    "./ItemEuclidean.svelte": "./src/ItemEuclidean.svelte",
+    "./ContainerProgressive.svelte": "./src/ContainerProgressive.svelte",
+    "./ItemProgressive.svelte": "./src/ItemProgressive.svelte"
   },
   "keywords": [
     "drag-and-drop",
@@ -20,7 +29,7 @@
   "author": "Tomoki Fukazawa",
   "license": "MIT",
   "dependencies": {
-  "@snap-engine/snapsort": "^0.1.0"
+    "@snap-engine/snapsort": "^0.3.0"
   },
   "files": [
     "src",

package/src/ContainerEuclidean.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { ContainerEuclidean } from "@snap-engine/snapsort";
+  import type { ItemBase, ContainerConfig } from "@snap-engine/snapsort";
+
+  import { getContext, setContext, onMount, onDestroy } from "svelte";
+  import type { Engine } from "@snap-engine/core";
+
+  let { config, children, container = $bindable(), locked = true, className = "", metadata = {} }: { config: ContainerConfig; children: any; container?: ContainerEuclidean; locked?: boolean; className?: string; metadata?: Record<string, unknown> } =
+    $props();
+  const engine: Engine = getContext("engine");
+
+  let itemContainer: ContainerEuclidean = new ContainerEuclidean(engine, null, { ...config });
+  itemContainer.locked = locked;
+  itemContainer.metadata = metadata;
+  const justifyContent = $derived(config.mainAxisAlign === "center" ? "center" : "flex-start");
+  // If there's a parent container context, register this container as an item in it
+  const parent: ItemBase | null = getContext("container");
+  setContext("container", itemContainer);
+
+  onMount(() => {
+    container = itemContainer;
+    parent?.addItem(itemContainer);
+  });
+
+  onDestroy(() => {
+    itemContainer.destroy();
+  });
+</script>
+
+<div
+  class="snapsort-container snapsort-container-euclidean {className}"
+  style="flex-direction: {config.direction}; justify-content: {justifyContent}"
+  bind:this={itemContainer.element}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .snapsort-container {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+</style>

package/src/ContainerProgressive.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { ContainerProgressive } from "@snap-engine/snapsort";
+  import type { ItemBase, ContainerConfig } from "@snap-engine/snapsort";
+
+  import { getContext, setContext, onMount, onDestroy } from "svelte";
+  import type { Engine } from "@snap-engine/core";
+
+  let { config, children, container = $bindable(), locked = true, className = "", metadata = {} }: { config: ContainerConfig; children: any; container?: ContainerProgressive; locked?: boolean; className?: string; metadata?: Record<string, unknown> } =
+    $props();
+  const engine: Engine = getContext("engine");
+
+  let itemContainer: ContainerProgressive = new ContainerProgressive(engine, null, { ...config });
+  itemContainer.locked = locked;
+  itemContainer.metadata = metadata;
+  const justifyContent = $derived(config.mainAxisAlign === "center" ? "center" : "flex-start");
+  // If there's a parent container context, register this container as an item in it
+  const parent: ItemBase | null = getContext("container");
+  setContext("container", itemContainer);
+
+  onMount(() => {
+    container = itemContainer;
+    parent?.addItem(itemContainer);
+  });
+
+  onDestroy(() => {
+    itemContainer.destroy();
+  });
+</script>
+
+<div
+  class="snapsort-container snapsort-container-progressive {className}"
+  style="flex-direction: {config.direction}; justify-content: {justifyContent}"
+  bind:this={itemContainer.element}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .snapsort-container {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+</style>

package/src/ItemEuclidean.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { getContext, onDestroy, onMount } from "svelte";
+  import { ItemEuclidean } from "@snap-engine/snapsort";
+  import type {
+    ItemBase,
+    ContainerBase,
+    ItemMetadata,
+  } from "@snap-engine/snapsort";
+  import type { Engine } from "@snap-engine/core";
+
+  let {
+    children,
+    style = "",
+    className = "",
+    metadata = {},
+  }: {
+    children: any;
+    style?: string;
+    className?: string;
+    metadata?: ItemMetadata;
+  } = $props();
+
+  const engine: Engine = getContext("engine");
+  const container: ContainerBase | null = getContext("container");
+  const itemObject: ItemBase = new ItemEuclidean(engine, null);
+  itemObject.metadata = metadata;
+
+  const metadataItemKey = (value: ItemMetadata) => value.itemId ?? null;
+  let itemKey = $derived(metadataItemKey(metadata));
+
+  onMount(() => {
+    container?.addItem(itemObject);
+  });
+
+  onDestroy(() => {
+    itemObject.destroy();
+  });
+</script>
+
+<div
+  class="snapsort-item snapsort-item-euclidean {className}"
+  bind:this={itemObject.element}
+  data-snapsort-item-key={itemKey}
+  {style}
+>
+  {@render children()}
+</div>
+
+<style>
+  .snapsort-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--size-4);
+    box-sizing: border-box;
+  }
+</style>

package/src/ItemProgressive.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { getContext, onDestroy, onMount } from "svelte";
+  import { ItemProgressive } from "@snap-engine/snapsort";
+  import type {
+    ItemBase,
+    ContainerBase,
+    ItemMetadata,
+  } from "@snap-engine/snapsort";
+  import type { Engine } from "@snap-engine/core";
+
+  let {
+    children,
+    style = "",
+    className = "",
+    metadata = {},
+  }: {
+    children: any;
+    style?: string;
+    className?: string;
+    metadata?: ItemMetadata;
+  } = $props();
+
+  const engine: Engine = getContext("engine");
+  const container: ContainerBase | null = getContext("container");
+  const itemObject: ItemBase = new ItemProgressive(engine, null);
+  itemObject.metadata = metadata;
+
+  const metadataItemKey = (value: ItemMetadata) => value.itemId ?? null;
+  let itemKey = $derived(metadataItemKey(metadata));
+
+  onMount(() => {
+    container?.addItem(itemObject);
+  });
+
+  onDestroy(() => {
+    itemObject.destroy();
+  });
+</script>
+
+<div
+  class="snapsort-item snapsort-item-progressive {className}"
+  bind:this={itemObject.element}
+  data-snapsort-item-key={itemKey}
+  {style}
+>
+  {@render children()}
+</div>
+
+<style>
+  .snapsort-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--size-4);
+    box-sizing: border-box;
+  }
+</style>

package/src/index.ts

@@ -1,2 +1,7 @@
-export { default as ItemContainer } from "./ItemContainer.svelte";
-export { default as Item } from "./Item.svelte";
+export { default as ContainerEuclidean } from "./ContainerEuclidean.svelte";
+export { default as ItemEuclidean } from "./ItemEuclidean.svelte";
+export { default as ContainerProgressive } from "./ContainerProgressive.svelte";
+export { default as ItemProgressive } from "./ItemProgressive.svelte";
+
+export { default as Container } from "./ContainerEuclidean.svelte";
+export { default as Item } from "./ItemEuclidean.svelte";

package/src/Item.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import { onMount, getContext, onDestroy } from "svelte";
-  import { ItemContainer } from "@snap-engine/snapsort";
-  import { ItemObject } from "@snap-engine/snapsort";
-  import type { ItemMetadata } from "@snap-engine/snapsort";
-  import type { Engine } from "@snap-engine/core";
-
-  let { children, style = "", className = "", metadata = {} }: { children: any; style?: string; className?: string; metadata?: ItemMetadata } = $props();
-  const engine: Engine = getContext("engine");
-
-  const container: ItemContainer = getContext("container");
-  let itemObject: ItemObject = new ItemObject(engine, null);
-  const metadataItemKey = (value: ItemMetadata) => {
-    return value.itemId ?? null;
-  };
-  let itemKey = $derived(metadataItemKey(metadata));
-
-  onMount(() => {
-    if (container) {
-      container.addItem(itemObject);
-    }
-  });
-
-  $effect(() => {
-    itemObject.metadata = metadata;
-  });
-
-  onDestroy(() => {
-    itemObject.destroy();
-  });
-</script>
-
-<div
-  class="snapsort-item {className}"
-  bind:this={itemObject.element}
-  data-snapsort-item-key={itemKey}
-  {style}
->
-  {@render children()}
-</div>
-
-<style>
-  .snapsort-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: var(--size-4);
-    box-sizing: border-box;
-  }
-</style>

package/src/ItemContainer.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import { ItemContainer } from "@snap-engine/snapsort";
-  import type { ItemContainerConfig } from "@snap-engine/snapsort";
-
-  import { getContext, setContext, onMount, onDestroy } from "svelte";
-  import type { Engine } from "@snap-engine/core";
-  import Item from "./Item.svelte";
-
-  let { config, children, container = $bindable(), locked = true, className = "", metadata = {} }: { config: ItemContainerConfig; children: any; container?: ItemContainer; locked?: boolean; className?: string; metadata?: Record<string, unknown> } =
-    $props();
-  const engine: Engine = getContext("engine");
-
-  let itemContainer: ItemContainer = new ItemContainer(engine, null, config);
-  itemContainer.locked = locked;
-  itemContainer.metadata = metadata;
-  container = itemContainer;
-  // If there's a parent container context, register this container as an item in it
-  const parent: ItemContainer | Item = getContext("container");
-  setContext("container", itemContainer);
-
-  onMount(() => {
-    if (parent) {
-      parent.addItem(itemContainer);
-    }
-  });
-
-  onDestroy(() => {
-    itemContainer.destroy();
-  });
-
-  $effect(() => {
-    itemContainer.metadata = metadata;
-  });
-</script>
-
-<div
-  class="snapsort-container {className}"
-  style="flex-direction: {config.direction}"
-  bind:this={itemContainer.element}
->
-  {@render children?.()}
-</div>
-
-<style>
-  .snapsort-container {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-  }
-</style>