@pixerate/editor-svelte 0.127.1 → 0.128.0

package/README.md

@@ -4,6 +4,9 @@ Svelte 5 bindings for [`@pixerate/editor`](https://www.npmjs.com/package/@pixera
 
 ```bash
 npm install @pixerate/editor-svelte @pixerate/editor svelte
+# only if you use the rich-text or prompt editors (the root entry): TipTap, and the rich-text peers
+# listed in the @pixerate/editor README
+npm install @tiptap/extension-bubble-menu @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/extension-placeholder
 # only if you use @pixerate/editor-svelte/canvas:
 npm install @xyflow/svelte @dagrejs/dagre
 ```

package/dist/chart/ChartCanvas.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { onDestroy } from 'svelte';
+  import { onDestroy, type Snippet } from 'svelte';
   import {
     CSS_VARIABLE_CHART_THEME,
     chartClientToScene,
+    chartTooltipAt,
+    sameChartTooltip,
     describeChartSelection,
     handleChartKey,
     layoutChart,
@@ -12,7 +14,9 @@
     type ChartPresence,
     type ChartScene,
     type ChartTextMeasure,
-    type ChartTheme
+    type ChartTheme,
+    type ChartTooltip,
+    type ChartTooltipMode
   } from '@pixerate/editor/chart';
   import { chartStateOf } from './createChartEditor.svelte.js';
   import ChartMarks from './ChartMarks.svelte';
@@ -38,6 +42,10 @@
     presence?: ChartPresence;
     /** Receives the scene as drawn (e.g. for `ChartDirector`'s `scene`). */
     sceneRef?: { current: ChartScene | null };
+    /** Show a tooltip on hover: `point` (or `true`) for the bar, point or slice under the pointer, `category` for every series in the category under it (default off). */
+    tooltip?: boolean | ChartTooltipMode;
+    /** Draws the tooltip's content instead of the category label and one row per series. */
+    tooltipContent?: Snippet<[ChartTooltip]>;
   }
 
   let {
@@ -51,7 +59,9 @@
     emptyMessage,
     class: className = '',
     presence,
-    sceneRef
+    sceneRef,
+    tooltip = false,
+    tooltipContent
   }: Props = $props();
 
   const view = chartStateOf(() => controller);
@@ -94,6 +104,10 @@
   $effect(() => {
     if (sceneRef) sceneRef.current = scene;
   });
+  const tooltipMode = $derived<ChartTooltipMode | null>(tooltip === true ? 'point' : tooltip || null);
+  let tip = $state.raw<ChartTooltip | null>(null);
+  // In wrapper pixels; `flip` puts the tooltip left of the pointer near the right edge.
+  let tipAt = $state({ left: 0, top: 0, flip: false });
   const byKey = $derived(new Map(scene.marks.map((m) => [m.key, m])));
   const label = $derived(view.current.spec.title || 'Chart');
 
@@ -108,12 +122,26 @@
     controller.select(target ?? null);
     drag = startChartPointDrag(controller, scene, target, scenePoint(e));
     if (drag) {
+      tip = null;
       frozen = { valueDomain: drag.valueDomain, valueDomain2: drag.valueDomain2 ?? null, xDomain: drag.xDomain ?? null, readout: drag.target };
       svg?.setPointerCapture?.(e.pointerId);
     }
   }
   function pointermove(e: PointerEvent) {
     drag?.move(scenePoint(e), { fine: e.altKey, lockAxis: e.shiftKey, noSnap: e.ctrlKey || e.metaKey });
+    hover(e);
+  }
+  function hover(e: PointerEvent) {
+    if (!tooltipMode || drag || !wrapper) {
+      tip = null;
+      return;
+    }
+    const next = chartTooltipAt(view.current.spec, scene, scenePoint(e), { mode: tooltipMode, measureText });
+    if (!sameChartTooltip(tip, next)) tip = next;
+    if (!next) return;
+    const box = wrapper.getBoundingClientRect();
+    const left = e.clientX - box.left;
+    tipAt = { left, top: e.clientY - box.top, flip: left > box.width * 0.6 };
   }
   function endDrag() {
     drag?.end();
@@ -132,7 +160,7 @@
   }
 </script>
 
-<div bind:this={wrapper} class="w-full {className}" data-chart-canvas="">
+<div bind:this={wrapper} class="relative w-full {className}" data-chart-canvas="">
   <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
   <svg
     bind:this={svg}
@@ -147,9 +175,31 @@
     onpointermove={pointermove}
     onpointerup={endDrag}
     onpointercancel={endDrag}
+    onpointerleave={() => (tip = null)}
     onkeydown={keydown}
   >
     <ChartMarks marks={scene.marks} fontFamily={scene.theme.fontFamily} interactive={editable} />
     {#if presence}<ChartPresenceLayer {presence} />{/if}
   </svg>
+  {#if tip}
+    <div
+      role="tooltip"
+      data-chart-tooltip=""
+      class="pointer-events-none absolute z-10 min-w-32 rounded-md border px-2.5 py-1.5 text-xs shadow-md"
+      style="left: {tipAt.left}px; top: {tipAt.top}px; transform: translate({tipAt.flip ? 'calc(-100% - 12px)' : '12px'}, calc(-100% - 8px)); background: var(--popover, #ffffff); color: var(--popover-foreground, #0f172a); border-color: var(--border, #e2e8f0); font-family: {scene.theme.fontFamily};"
+    >
+      {#if tooltipContent}
+        {@render tooltipContent(tip)}
+      {:else}
+        {#if tip.title}<div class="mb-1 font-medium">{tip.title}</div>{/if}
+        {#each tip.items as item (item.seriesId)}
+          <div class="flex items-center gap-2">
+            <span class="h-2 w-2 shrink-0 rounded-full" style="background: {item.color}"></span>
+            <span style="color: var(--muted-foreground, #64748b)">{item.name}</span>
+            <span class="ml-auto pl-3 font-medium tabular-nums">{item.text}</span>
+          </div>
+        {/each}
+      {/if}
+    </div>
+  {/if}
 </div>

package/dist/chart/ChartCanvas.svelte.d.ts

@@ -1,4 +1,5 @@
-import { type ChartController, type ChartPresence, type ChartScene, type ChartTextMeasure, type ChartTheme } from '@pixerate/editor/chart';
+import { type Snippet } from 'svelte';
+import { type ChartController, type ChartPresence, type ChartScene, type ChartTextMeasure, type ChartTheme, type ChartTooltip, type ChartTooltipMode } from '@pixerate/editor/chart';
 interface Props {
     controller: ChartController;
     /** Scene width; with `responsive` this is only the fallback before the container is measured (default 640). */
@@ -21,6 +22,10 @@ interface Props {
     sceneRef?: {
         current: ChartScene | null;
     };
+    /** Show a tooltip on hover: `point` (or `true`) for the bar, point or slice under the pointer, `category` for every series in the category under it (default off). */
+    tooltip?: boolean | ChartTooltipMode;
+    /** Draws the tooltip's content instead of the category label and one row per series. */
+    tooltipContent?: Snippet<[ChartTooltip]>;
 }
 declare const ChartCanvas: import("svelte").Component<Props, {}, "">;
 type ChartCanvas = ReturnType<typeof ChartCanvas>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.127.1",
+  "version": "0.128.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -165,15 +165,15 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.27.3",
-    "@tiptap/extension-placeholder": "^2.27.3",
-    "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.171.0"
+    "@pixerate/editor": "0.172.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@tiptap/core": "^2.27.3",
+    "@tiptap/extension-bubble-menu": "^2.27.3",
+    "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/pm": "^2.27.3",
+    "@tiptap/starter-kit": "^2.27.3",
     "@xyflow/svelte": "^1.6.0",
     "svelte": "^5.57.2"
   },
@@ -181,6 +181,21 @@
     "@dagrejs/dagre": {
       "optional": true
     },
+    "@tiptap/core": {
+      "optional": true
+    },
+    "@tiptap/extension-bubble-menu": {
+      "optional": true
+    },
+    "@tiptap/extension-placeholder": {
+      "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
     "@xyflow/svelte": {
       "optional": true
     }
@@ -190,7 +205,10 @@
     "@sveltejs/package": "^3.0.1",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tiptap/core": "^2.27.3",
+    "@tiptap/extension-bubble-menu": "^2.27.3",
+    "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/pm": "^2.27.3",
+    "@tiptap/starter-kit": "^2.27.3",
     "@types/dagre": "^0.7.52",
     "@xyflow/svelte": "^1.7.0",
     "svelte": "^5.57.2",