@snap-engine/snapsort-svelte 0.1.0

package/README.md

@@ -0,0 +1,22 @@
+# @snap-engine/snapsort-svelte
+
+Svelte components for SnapEngine drag-and-drop interactions.
+
+## Install
+
+```bash
+npm install @snap-engine/snapsort-svelte @snap-engine/snapsort
+```
+
+## Includes
+
+- `ItemContainer`
+- `Item`
+
+## Usage
+
+```svelte
+<script>
+  import { ItemContainer, Item } from "@snap-engine/snapsort-svelte";
+</script>
+```

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@snap-engine/snapsort-svelte",
+  "version": "0.1.0",
+  "description": "Svelte components for drag-and-drop system",
+  "type": "module",
+  "svelte": "./src/index.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/index.ts"
+    },
+    "./ItemContainer.svelte": "./src/ItemContainer.svelte",
+    "./Item.svelte": "./src/Item.svelte"
+  },
+  "keywords": [
+    "drag-and-drop",
+    "svelte",
+    "ui",
+    "snapengine"
+  ],
+  "author": "Tomoki Fukazawa",
+  "license": "MIT",
+  "dependencies": {
+  "@snap-engine/snapsort": "^0.1.0"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}

package/src/Item.svelte

@@ -0,0 +1,51 @@
+<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

@@ -0,0 +1,51 @@
+<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>

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as ItemContainer } from "./ItemContainer.svelte";
+export { default as Item } from "./Item.svelte";