@pixerate/editor-svelte 0.167.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.167.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.227.0"
+    "@pixerate/editor": "0.227.1"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",