@pixerate/editor-svelte 0.166.0 → 0.167.1

package/dist/canvas/CanvasEffectsPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { isShapeDescription, type CanvasEffectsController, type ShapeDescription } from '@pixerate/editor/canvas';
+	import { canvasEffectStatus, isShapeDescription, type CanvasEffectsController, type ShapeDescription } from '@pixerate/editor/canvas';
 	import type { EffectProvider } from '@pixerate/editor/effects';
 	import EffectsBrowser from '../effects/EffectsBrowser.svelte';
 	import CanvasEffectControls from './CanvasEffectControls.svelte';
@@ -27,6 +27,7 @@
 	let browse = $state<null | 'fill' | 'overlay' | 'transition'>(null);
 	let message = $state<string | null>(null);
 	const nodeEffect = $derived(isShapeDescription(shape) ? shape.effect : undefined);
+	const nodeEffectStatus = $derived(nodeEffect && provider ? canvasEffectStatus(nodeEffect, provider) : null);
 	const transition = $derived.by(() => {
 		void tick;
 		return sceneId ? controller.sceneTransition(sceneId) : undefined;
@@ -82,7 +83,9 @@
 				</label>
 				<button type="button" class={btn} aria-label="Remove effect" onclick={() => run(() => controller.removeNodeEffect(id))}>✕</button>
 			</div>
-			{#if provider}<CanvasEffectControls {controller} nodeId={id} effect={nodeEffect} />{/if}
+			{#if nodeEffectStatus && !nodeEffectStatus.ok}
+				<p class="text-[11px] text-amber-500" data-canvas-effect-unavailable="">{nodeEffectStatus.reason}</p>
+			{:else if provider}<CanvasEffectControls {controller} nodeId={id} effect={nodeEffect} />{/if}
 		</div>
 	{/if}
 	{#if sceneId && transition}

package/dist/canvas/CanvasNodeEffectLayer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { runCanvasNodeEffect, type CanvasShapeEffect } from '@pixerate/editor/canvas';
+	import { CANVAS_EFFECT_MISSING_PATTERN, canvasEffectErrorReason, canvasEffectStatus, runCanvasNodeEffect, type CanvasShapeEffect } from '@pixerate/editor/canvas';
 	import type { EffectProvider } from '@pixerate/editor/effects';
 
 	interface Props {
@@ -15,11 +15,14 @@
 
 	let { provider, effect: fx, width, height, clipPath, clipTransform }: Props = $props();
 	let canvas = $state<HTMLCanvasElement | null>(null);
-	let failed = $state(false);
+	let failed = $state<string | null>(null);
 	const dpr = typeof window !== 'undefined' ? Math.min(2, window.devicePixelRatio || 1) : 1;
 	const pw = $derived(Math.max(1, Math.round(width * dpr)));
 	const ph = $derived(Math.max(1, Math.round(height * dpr)));
 	const clipId = `pixerate-effect-clip-${Math.random().toString(36).slice(2)}`;
+	const missingId = `pixerate-effect-missing-${Math.random().toString(36).slice(2)}`;
+	const status = $derived(canvasEffectStatus(fx, provider));
+	const missing = $derived(!status.ok ? status.reason : failed);
 
 	$effect(() => {
 		const target = canvas;
@@ -27,15 +30,27 @@
 		const e = $state.snapshot(fx) as CanvasShapeEffect;
 		void pw;
 		void ph;
-		if (!target) return;
-		failed = false;
-		const run = untrack(() => runCanvasNodeEffect({ provider: p, effect: e, target, onError: () => (failed = true) }));
+		if (!target || !canvasEffectStatus(e, p).ok) return;
+		failed = null;
+		const run = untrack(() => runCanvasNodeEffect({ provider: p, effect: e, target, onError: (err) => (failed = canvasEffectErrorReason(e, err)) }));
 		return () => run.stop();
 	});
 </script>
 
-<!-- Draws a shape node's effect: `fill` inside the shape, `overlay` over the whole node. -->
-{#if !failed && width > 0 && height > 0}
+<!-- Draws a shape node's effect: `fill` inside the shape, `overlay` over the whole node; a faint hatch with the reason when it cannot be drawn. -->
+{#if missing && width > 0 && height > 0}
+	{#if fx.mode === 'overlay' || !clipPath}
+		<div role="img" aria-label={missing} title={missing} data-canvas-effect-missing={fx.effect} style="position:absolute;inset:0;pointer-events:none;background:{CANVAS_EFFECT_MISSING_PATTERN}"></div>
+	{:else}
+		<svg role="img" aria-label={missing} data-canvas-effect-missing={fx.effect} style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none" viewBox="0 0 {width} {height}" preserveAspectRatio="none">
+			<title>{missing}</title>
+			<defs>
+				<pattern id={missingId} width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="2" height="8" fill="rgba(128,128,128,0.28)" /></pattern>
+			</defs>
+			<path d={clipPath} transform={clipTransform} fill="url(#{missingId})" />
+		</svg>
+	{/if}
+{:else if width > 0 && height > 0}
 	{#if fx.mode === 'overlay' || !clipPath}
 		<div style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:{fx.opacity ?? 1}">
 			<canvas bind:this={canvas} width={pw} height={ph} style="width:100%;height:100%;display:block" data-canvas-effect={fx.effect}></canvas>

package/dist/paint-editor/ColorPanel.svelte

@@ -52,6 +52,12 @@
     return untrack(() => ({ width: MIXING_PAD_WIDTH, height: MIXING_PAD_HEIGHT, data: controller.mixingPad.pixels() }));
   });
   const R = $derived(wheelSize / 2);
+  /** Effect paint shows as a thumbnail of the effect in the paint well. */
+  const effectWell = $derived.by(() => {
+    const fx = snap.effectPaint;
+    const rendering = snap.effectPaintRendering;
+    return fx && !rendering ? untrack(() => controller.effectPaintThumbnail(64)) : null;
+  });
   const setHsv = (s: number, v: number) => controller.setColor(rgbToHexColor(...hsvToRgb(hsv.h, s, v)));
   const padPoint = (e: PointerEvent) => {
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
@@ -106,9 +112,10 @@
   <div class="flex items-center gap-2" data-testid="paint-source">
     <span
       class="h-5 flex-1 rounded ring-1 ring-slate-700"
-      aria-label={snap.paint.type === 'gradient' ? 'Gradient paint' : 'Paint colour'}
+      aria-label={snap.effectPaint ? `Effect paint: ${snap.effectPaint.effect}` : snap.paint.type === 'gradient' ? 'Gradient paint' : 'Paint colour'}
       data-testid="paint-well"
-      style:background={paintSourceCss(snap.paint, { paint: color, secondary: snap.secondaryColor })}
+      data-effect-paint={snap.effectPaint ? snap.effectPaint.effect : undefined}
+      style:background={effectWell ? `center / cover no-repeat url("${effectWell}")` : paintSourceCss(snap.paint, { paint: color, secondary: snap.secondaryColor })}
     ></span>
     <button
       type="button"

package/dist/paint-editor/PaintEffectsPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { PAPER_EFFECT_BLENDS, type PaintEditorController, type PaperEffectBlend } from '@pixerate/editor/paint-editor';
   import type { EffectUse } from '@pixerate/editor/effects';
   import EffectsBrowser from '../effects/EffectsBrowser.svelte';
@@ -21,14 +22,22 @@
       paper: controller.getPaperEffect(),
       layerEffect: activeId ? controller.getEffectLayer(activeId) : undefined,
       pixel: activeId ? controller.getLayer(activeId)?.type === 'pixel' : false,
+      effectPaint: editor.current.effectPaint,
+      rendering: editor.current.effectPaintRendering,
+      color: editor.current.color,
     };
   });
-  type Browse = null | 'paper' | 'layer' | 'fill' | 'light';
+  const thumbnail = $derived.by(() => {
+    const { effectPaint, rendering } = view;
+    return effectPaint && !rendering ? untrack(() => controller.effectPaintThumbnail(48)) : null;
+  });
+  type Browse = null | 'paper' | 'layer' | 'fill' | 'light' | 'paint';
   const BROWSERS: Record<Exclude<Browse, null>, { uses: EffectUse[]; title: string }> = {
     paper: { uses: ['generator'], title: 'Effect paper' },
     layer: { uses: ['generator', 'overlay', 'title'], title: 'Effect layer' },
     fill: { uses: ['generator', 'overlay', 'title'], title: 'Fill the layer' },
     light: { uses: ['filter'], title: 'Light on the paint' },
+    paint: { uses: ['generator', 'overlay', 'title'], title: 'Paint with an effect' },
   };
   let browse = $state<Browse>(null);
   let error = $state<string | null>(null);
@@ -57,13 +66,15 @@
     else if (kind === 'layer') run(() => controller.addEffectLayer(id));
     else if (kind === 'fill') run(() => controller.fillLayerWithEffect(id));
     else if (kind === 'light' && layerId) run(() => controller.applyLightEffect(layerId, id));
+    else if (kind === 'paint') run(() => controller.setEffectPaint({ effect: id }));
   }
 </script>
 
 <!--
   Provider effects in the paint editor: effect paper (a generator over the sheet, multiplied so the
-  grain shows), effect layers, effect fills and light baked onto the active layer's dried paint;
-  plus the controls of the effect paper and of an active effect layer. Each change is one undo
+  grain shows), effect layers, effect fills, light baked onto the active layer's dried paint and
+  effect paint (brushes take their colours from the effect); plus the controls of the effect
+  paper, of an active effect layer and of the effect paint. Each change is one undo
   step (a slider drag is one). Without a provider it says why nothing can be added.
 -->
 <div class={`${panel} ${className}`} data-testid="paint-effects-panel" aria-busy={busy}>
@@ -73,6 +84,7 @@
     <button type="button" class={button} disabled={!provider} aria-pressed={browse === 'layer'} onclick={() => toggle('layer')}>Layer…</button>
     <button type="button" class={button} disabled={!provider || !view.pixel} aria-pressed={browse === 'fill'} onclick={() => toggle('fill')}>Fill…</button>
     <button type="button" class={button} disabled={!provider || !view.pixel} aria-pressed={browse === 'light'} onclick={() => toggle('light')} title="Bake a light, glow or grade into the active layer's dried paint">Light…</button>
+    <button type="button" class={button} disabled={!provider} aria-pressed={browse === 'paint'} onclick={() => toggle('paint')} title="Paint with an effect: brushes take each pixel's colour from it">Paint…</button>
   </div>
   {#if !provider}<p class="text-[11px] text-slate-400">No effects provider is registered. Effects in the painting are kept.</p>{/if}
   {#if browse}
@@ -105,6 +117,23 @@
       />
     </div>
   {/if}
+  {#if view.effectPaint}
+    {@const fx = view.effectPaint}
+    <div class="flex flex-col gap-1 rounded border border-slate-700 p-1" data-effect-part="paint">
+      <div class="flex items-center gap-1">
+        {#if thumbnail}<img src={thumbnail} alt="" class="h-5 w-8 rounded object-cover ring-1 ring-slate-700" data-testid="effect-paint-thumbnail" />{/if}
+        <span class="flex-1 truncate">Paint: {fx.effect}{view.rendering ? ' (rendering…)' : ''}</span>
+        <button type="button" class={button} aria-label="Stop painting with the effect" onclick={() => run(() => controller.setColor(view.color))}>✕</button>
+      </div>
+      <ImageEffectControls
+        {provider}
+        effect={fx.effect}
+        values={fx.values}
+        onchange={(k, v) => run(() => controller.setEffectPaint({ effect: fx.effect, values: { ...fx.values, [k]: v as never }, time: fx.time }))}
+        onpreset={(values) => run(() => controller.setEffectPaint({ effect: fx.effect, values: { ...fx.values, ...values } as never, time: fx.time }))}
+      />
+    </div>
+  {/if}
   {#if view.layerEffect && view.activeId}
     {@const fx = view.layerEffect}
     {@const layerId = view.activeId}

package/package.json

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