@pixerate/editor-svelte 0.165.12 → 0.167.0

package/dist/image-editor/ImageProviderEffectsPanel.svelte

@@ -23,7 +23,9 @@
     return untrack(() => c.subscribe(() => tick++));
   });
   /** The open effect browser: filters to apply, or effects to change an effect layer to. */
-  let browse = $state<null | 'filter' | 'change'>(null);
+  let browse = $state<null | 'filter' | 'change' | 'layer'>(null);
+  /** Clip the next effect layer to the layer below it. */
+  let clip = $state(false);
   let message = $state<string | null>(null);
   let open = $state<string | null>(null);
   const snapshot = $derived.by(() => {
@@ -84,9 +86,10 @@
   Provider effects for the active layer. An effect layer first: its effect (change it or
   rasterize it), a still frame or an animation for an effect that moves, and its controls. Then
   the provider filters applied to the layer (smart filters; applying one converts a pixel layer to
-  a smart object in the same undo step). Layer styles (drop shadow, stroke…) are not here: they
-  are part of the layer's properties (LayerEffectsPanel). New effect layers come from the layers
-  panel. Without a provider it says why nothing can be added.
+  a smart object in the same undo step), each keeping the layer's transparency unless "Keep
+  transparency" is cleared. Then adding an effect layer, above the active layer and optionally
+  clipped to it. Layer styles (drop shadow, stroke…) are not here: they are part of the layer's
+  properties (LayerEffectsPanel). Without a provider it says why nothing can be added.
 -->
 <section class="flex flex-col gap-2 text-xs {className}" aria-label="Effects" data-image-provider-effects="">
   {#if !provider}<p class="text-[11px] text-muted-foreground">No effects provider is registered. Effects in the document are kept.</p>{/if}
@@ -162,7 +165,7 @@
     </div>
     {#if browse === 'filter'}
       {@const id = layer.id}
-      <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id, { useSelection: true })))} />
+      <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id, { useSelection: true, preserveTransparency: true })))} />
     {/if}
   {/if}
   {#if layer && all.some((f) => f.kind === 'effect')}
@@ -181,6 +184,12 @@
               <button type="button" class={imageOutlineButtonClass} disabled={index === 0} aria-label="Move down" onclick={() => run(() => controller.updateEffectFilter(id, f.id, { index: index - 1 }))}>↓</button>
               <button type="button" class={imageOutlineButtonClass} aria-label="Remove {label}" onclick={() => run(() => controller.removeSmartFilter(id, f.id))}>✕</button>
             </div>
+            <label class="mt-0.5 flex items-center gap-1 pl-0.5 text-[11px] text-muted-foreground" title="Draw the filter only over the layer's own pixels; clear it to let the effect fill transparent areas">
+              <ImageCheckbox checked={f.preserveTransparency === true} label="{label}: keep transparency" onchange={(preserveTransparency) => {
+                run(() => controller.updateEffectFilter(id, f.id, { preserveTransparency }));
+              }} />
+              Keep transparency
+            </label>
             {#if open === f.id}
               <div class="mt-1 space-y-2">
                 <label class="flex items-center gap-1">
@@ -206,7 +215,22 @@
     </ol>
   {/if}
   {#if layer && canFilter && !generator && !all.some((f) => f.kind === 'effect')}
-    <p class="text-[11px] text-muted-foreground">No filters yet. A filter changes the layer's pixels and stays editable. Layer styles such as a drop shadow are in the layer's properties; new effect layers are added from the layers panel.</p>
+    <p class="text-[11px] text-muted-foreground">No filters yet. A filter changes the layer's pixels and stays editable. Layer styles such as a drop shadow are in the layer's properties.</p>
+  {/if}
+  {#if provider}
+    <div class="space-y-1" data-effect-part="add-layer">
+      <div class="flex items-center gap-1">
+        <span class="flex-1 text-[11px] font-semibold uppercase tracking-wider text-foreground">Effect layers</span>
+        <button type="button" class={imageOutlineButtonClass} aria-pressed={browse === 'layer'} onclick={() => (browse = browse === 'layer' ? null : 'layer')}>Add effect layer…</button>
+      </div>
+      <label class="flex items-center gap-1 text-[11px] text-muted-foreground" title="Show the new effect layer only over the pixels of the layer below it (a clipping mask)">
+        <ImageCheckbox checked={clip} label="Clip to layer below" onchange={(v) => (clip = v)} />
+        Clip to layer below
+      </label>
+      {#if browse === 'layer'}
+        <EffectsBrowser {provider} uses={EFFECT_LAYER_USES} title="Add an effect layer" onpick={(e) => ((browse = null), run(() => controller.addEffectLayer(e.id, { clipped: clip })))} />
+      {/if}
+    </div>
   {/if}
   {#if !layer}<p class="text-[11px] text-muted-foreground">Select a layer to apply effects to it.</p>{/if}
   {#if message}<p role="alert" class="text-[11px] text-destructive">{message}</p>{/if}

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.165.12",
+  "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.225.0"
+    "@pixerate/editor": "0.227.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",