@pixerate/editor-svelte 0.166.0 → 0.167.0

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.0",
   "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.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",