@pixerate/editor-svelte 0.206.0 → 0.207.0

package/dist/paint-editor/FerroPanel.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { MAGNET_SLIDERS, readPath, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import PaintSlider from './PaintSlider.svelte';
+  import { attempt, button, paintEditorState, panel } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    class?: string;
+  }
+  let { controller, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const magnets = $derived(editor.current.document.magnets ?? []);
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+  const info = $derived.by(() => {
+    const activeId = editor.current.document.activeLayerId;
+    try {
+      return activeId ? controller.getFerrofluid(activeId) : null;
+    } catch {
+      return null;
+    }
+  });
+</script>
+
+<!-- Ferrofluid & magnets panel: add, adjust and remove magnets, inspect spikes and cure ferrofluid. -->
+<div class={`${panel} ${className}`} data-testid="ferro-panel">
+  <div class="flex items-center justify-between">
+    <span class="font-medium text-slate-300">Ferrofluid & magnets</span>
+    <div class="flex gap-1">
+      <button
+        type="button"
+        class={button}
+        onclick={() => run(() => controller.addMagnet({ x: Math.round(editor.current.document.canvas.width / 2), y: Math.round(editor.current.document.canvas.height / 2) }))}
+      >
+        Add magnet
+      </button>
+      {#if magnets.length > 0}
+        <button type="button" class={button} onclick={() => run(() => controller.removeMagnets())}>Clear magnets</button>
+      {/if}
+    </div>
+  </div>
+  {#each magnets as m (m.id)}
+    <div class="flex flex-col gap-1 rounded border border-slate-800 p-1.5" data-magnet={m.id}>
+      <div class="flex items-center justify-between text-[11px]">
+        <span class="font-mono text-slate-300">{m.id} ({Math.round(m.x)}, {Math.round(m.y)})</span>
+        <button type="button" aria-label={`Remove magnet ${m.id}`} class="px-1 text-slate-400 hover:text-white" onclick={() => run(() => controller.removeMagnets([m.id]))}>
+          ×
+        </button>
+      </div>
+      {#each MAGNET_SLIDERS as c (c.path)}
+        <PaintSlider
+          control={{ ...c, label: `${c.label} (${m.id})` }}
+          value={readPath(m, c.path)}
+          oncommit={(v) => run(() => controller.updateMagnet(m.id, { [c.path]: v }))}
+        />
+      {/each}
+    </div>
+  {/each}
+  <div class="flex items-center justify-between gap-2">
+    <span class="text-[11px] text-slate-400">
+      {info?.ferro ? `${info.activeSpikeArea} spike px · max ${Math.round(info.maxSpikeHeight * 100)}%` : 'No liquid ferrofluid on layer'}
+    </span>
+    <button type="button" class={button} disabled={!info?.ferro} onclick={() => run(() => controller.cureFerrofluid())}>Cure ferrofluid</button>
+  </div>
+  {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+</div>

package/dist/paint-editor/FerroPanel.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type PaintEditorController } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    class?: string;
+}
+declare const FerroPanel: import("svelte").Component<Props, {}, "">;
+type FerroPanel = ReturnType<typeof FerroPanel>;
+export default FerroPanel;

package/dist/paint-editor/PaintCanvas.svelte

@@ -2,6 +2,8 @@
   import {
     PaintCanvasPresenter,
     PaintGesture,
+    documentToScreen,
+    screenToDocument,
     drawWaterOverlay,
     fitZoom,
     startDeviceTilt,
@@ -68,6 +70,7 @@
   let size = $state({ width: 800, height: 600 });
   let predicted = $state<Array<{ x: number; y: number }>>([]);
   let strokeDrag = $state<{ id: string; dx: number; dy: number } | null>(null);
+  let magnetDrag: { id: string; moved: boolean } | null = null;
   const presenter = $derived(new PaintCanvasPresenter(controller));
   const gesture = $derived(
     new PaintGesture(controller, () => {
@@ -239,6 +242,43 @@
   {#each snap.guides.references.filter((r) => r.visible) as r (r.id)}
     <ReferencePanel {controller} reference={r} />
   {/each}
+  {#if showGuides}
+    {#each snap.document.magnets ?? [] as m (m.id)}
+      {@const p = documentToScreen(snap.view, doc, size, m.x, m.y)}
+      <button
+        type="button"
+        aria-label={`Magnet ${m.id}`}
+        data-testid={`paint-magnet-${m.id}`}
+        data-magnet={m.id}
+        title={`Magnet ${m.id} (${Math.round(m.x)}, ${Math.round(m.y)})`}
+        class="absolute -translate-x-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full border border-indigo-300 bg-slate-900/90 text-[9px] font-bold text-indigo-200 shadow cursor-move"
+        style={`left: ${p.x}px; top: ${p.y}px`}
+        onpointerdown={(e) => {
+          e.stopPropagation();
+          magnetDrag = { id: m.id, moved: false };
+          (e.target as Element).setPointerCapture?.(e.pointerId);
+        }}
+        onpointermove={(e) => {
+          if (!magnetDrag || magnetDrag.id !== m.id) return;
+          e.stopPropagation();
+          const r = viewport?.getBoundingClientRect();
+          const box = { width: r?.width || size.width, height: r?.height || size.height };
+          const pt = screenToDocument(snap.view, doc, box, e.clientX - (r?.left ?? 0), e.clientY - (r?.top ?? 0));
+          controller.updateMagnet(m.id, { x: Math.round(pt.x * 100) / 100, y: Math.round(pt.y * 100) / 100 }, !magnetDrag.moved);
+          magnetDrag.moved = true;
+        }}
+        onpointerup={(e) => {
+          e.stopPropagation();
+          magnetDrag = null;
+        }}
+        onpointercancel={() => {
+          magnetDrag = null;
+        }}
+      >
+        {m.strength >= 0 ? 'N' : 'S'}
+      </button>
+    {/each}
+  {/if}
   {#if proposals}<PaintProposalGhosts {proposals} {transform} zoom={snap.view.zoom} />{/if}
   {#if presence}<PaintPresenceLayer {presence} view={snap.view} canvas={doc} viewport={size} />{/if}
   <div class="absolute bottom-1 right-2 text-[10px] text-slate-500 pointer-events-none" data-testid="paint-view-status">

package/dist/paint-editor/PaperPanel.svelte

@@ -3,6 +3,7 @@
   import { untrack } from 'svelte';
   import PaintSlider from './PaintSlider.svelte';
   import PixelCanvas from './PixelCanvas.svelte';
+  import FerroPanel from './FerroPanel.svelte';
   import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
 
   interface Props {
@@ -102,5 +103,6 @@
       {#if editor.current.heat.hotCells > 0}<span class="text-[11px] text-amber-400">{Math.round(editor.current.heat.max * 100)}% warm</span>{/if}
     </div>
   </div>
+  <FerroPanel {controller} />
   {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
 </div>

package/dist/paint-editor/index.d.ts

@@ -6,6 +6,7 @@ import type BrushPanelComponent from './BrushPanel.svelte';
 import type BrushEditorComponent from '../brushes/BrushEditor.svelte';
 import type BrushLibraryBrowserComponent from '../brushes/BrushLibraryBrowser.svelte';
 import type PaperPanelComponent from './PaperPanel.svelte';
+import type FerroPanelComponent from './FerroPanel.svelte';
 import type ColorPanelComponent from './ColorPanel.svelte';
 import type PaintLayersPanelComponent from './PaintLayersPanel.svelte';
 import type WetPanelComponent from './WetPanel.svelte';
@@ -23,6 +24,7 @@ export { default as BrushPanel } from './BrushPanel.svelte';
 export { default as BrushEditor } from '../brushes/BrushEditor.svelte';
 export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.svelte';
 export { default as PaperPanel } from './PaperPanel.svelte';
+export { default as FerroPanel } from './FerroPanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
@@ -45,6 +47,7 @@ export type BrushPanelProps = ComponentProps<typeof BrushPanelComponent>;
 export type BrushEditorProps = ComponentProps<typeof BrushEditorComponent>;
 export type BrushLibraryBrowserProps = ComponentProps<typeof BrushLibraryBrowserComponent>;
 export type PaperPanelProps = ComponentProps<typeof PaperPanelComponent>;
+export type FerroPanelProps = ComponentProps<typeof FerroPanelComponent>;
 export type ColorPanelProps = ComponentProps<typeof ColorPanelComponent>;
 export type PaintLayersPanelProps = ComponentProps<typeof PaintLayersPanelComponent>;
 export type WetPanelProps = ComponentProps<typeof WetPanelComponent>;

package/dist/paint-editor/index.js

@@ -7,6 +7,7 @@ export { default as BrushEditor } from '../brushes/BrushEditor.svelte';
 // The library browser moved to `@pixerate/editor-svelte/brushes`; it is exported here too.
 export { default as BrushLibraryBrowser } from '../brushes/BrushLibraryBrowser.svelte';
 export { default as PaperPanel } from './PaperPanel.svelte';
+export { default as FerroPanel } from './FerroPanel.svelte';
 export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.206.0",
+  "version": "0.207.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -184,7 +184,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.276.0"
+    "@pixerate/editor": "0.277.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",