@pixerate/editor-svelte 0.182.0 → 0.184.0

package/dist/image-editor/LayerEffectsPanel.svelte

@@ -4,8 +4,9 @@
   import ImageRange from './controls/ImageRange.svelte';
   import ImageSelect from './controls/ImageSelect.svelte';
   import { imageIconButtonClass } from './styles.js';
-  import type { EffectControl, ImageEditorController, LayerEffectKind } from '@pixerate/editor/image-editor';
-  import { LAYER_EFFECT_MENU, effectControlChange, layerEffectControls, layerEffectsPanel } from '@pixerate/editor/image-editor';
+  // From the raster entry, not the image editor's: the paint editor shows this panel too.
+  import type { EffectControl, LayerEffectKind, LayerEffectsController } from '@pixerate/editor/raster';
+  import { LAYER_EFFECT_MENU, effectControlChange, layerEffectControls, layerEffectsPanel } from '@pixerate/editor/raster';
   import { untrack } from 'svelte';
 
   /**
@@ -14,7 +15,8 @@
    * settings. Every change is one undo step (a slider drag is one step too).
    */
   interface Props {
-    controller: ImageEditorController;
+    /** The image editor's controller, the paint editor's, or anything else with layer effects. */
+    controller: LayerEffectsController;
     /** The layer whose effects to show (default: the active layer). */
     layerId?: string | null;
     /**

package/dist/image-editor/LayerEffectsPanel.svelte.d.ts

@@ -1,11 +1,12 @@
-import type { ImageEditorController } from '@pixerate/editor/image-editor';
+import type { LayerEffectsController } from '@pixerate/editor/raster';
 /**
  * A layer's effects (Photoshop's layer styles): the master switch, Scale Effects, an "Add
  * style" menu, and each effect with its enabled toggle, remove button and, when expanded, its
  * settings. Every change is one undo step (a slider drag is one step too).
  */
 interface Props {
-    controller: ImageEditorController;
+    /** The image editor's controller, the paint editor's, or anything else with layer effects. */
+    controller: LayerEffectsController;
     /** The layer whose effects to show (default: the active layer). */
     layerId?: string | null;
     /**

package/dist/paint-editor/BrushPanel.svelte

@@ -20,11 +20,21 @@
     PARTICLE_KIND_LABELS,
     PARTICLE_RENDERS,
     PARTICLE_RENDER_LABELS,
+    RIBBON_PAIRS,
+    RIBBON_PAIR_LABELS,
+    DOT_TEXTURE_ORDERS,
+    DOT_TEXTURE_ORDER_LABELS,
+    DOT_ROTATIONS,
+    DOT_ROTATION_LABELS,
+    toggleDotTexture,
     STAMP_KINDS,
     STAMP_LABELS,
     toggleStamp,
     type ParticleKind,
     type ParticleRender,
+    type RibbonPairs,
+    type DotTextureOrder,
+    type DotRotation,
     type ImpastoTool,
     type WetMediumKind,
     type BlendMode,
@@ -150,6 +160,42 @@
             {#each PARTICLE_RENDERS as k (k)}<option value={k}>{PARTICLE_RENDER_LABELS[k]}</option>{/each}
           </select>
         </label>
+        {#if brush.particle.render === 'ribbon'}
+          <label class="flex items-center justify-between gap-2">
+            <span class="text-slate-400">Ribbon joins</span>
+            <select aria-label="Ribbon pairs" value={brush.particle.ribbonPairs} onchange={(e) => controller.setBrush({ particle: { ribbonPairs: e.currentTarget.value as RibbonPairs } })} class="rounded bg-slate-800 px-1 py-0.5">
+              {#each RIBBON_PAIRS as k (k)}<option value={k}>{RIBBON_PAIR_LABELS[k]}</option>{/each}
+            </select>
+          </label>
+        {/if}
+        {#if brush.particle.render === 'dot' || brush.particle.render === 'sequence'}
+          <div class="flex flex-wrap gap-1" role="group" aria-label="Dot textures" title="Stamps drawn instead of round dots (up to 4; none: round)">
+            {#each STAMP_KINDS as k (k)}
+              <button
+                type="button"
+                aria-pressed={brush.particle.dotTextures.includes(k)}
+                class={`px-1.5 py-0.5 rounded text-[10px] ${brush.particle.dotTextures.includes(k) ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300'}`}
+                onclick={() => controller.setBrush({ particle: { dotTextures: toggleDotTexture(brush.particle.dotTextures, k) } })}
+              >
+                {STAMP_LABELS[k]}
+              </button>
+            {/each}
+          </div>
+          {#if brush.particle.dotTextures.length > 0}
+            <label class="flex items-center justify-between gap-2">
+              <span class="text-slate-400">Texture order</span>
+              <select aria-label="Dot texture order" value={brush.particle.dotTextureOrder} onchange={(e) => controller.setBrush({ particle: { dotTextureOrder: e.currentTarget.value as DotTextureOrder } })} class="rounded bg-slate-800 px-1 py-0.5">
+                {#each DOT_TEXTURE_ORDERS as k (k)}<option value={k}>{DOT_TEXTURE_ORDER_LABELS[k]}</option>{/each}
+              </select>
+            </label>
+            <label class="flex items-center justify-between gap-2">
+              <span class="text-slate-400">Texture turn</span>
+              <select aria-label="Dot rotation" value={brush.particle.dotRotation} onchange={(e) => controller.setBrush({ particle: { dotRotation: e.currentTarget.value as DotRotation } })} class="rounded bg-slate-800 px-1 py-0.5">
+                {#each DOT_ROTATIONS as k (k)}<option value={k}>{DOT_ROTATION_LABELS[k]}</option>{/each}
+              </select>
+            </label>
+          {/if}
+        {/if}
       {/if}
       {#if engine.stickerStamps}
         <div class="flex flex-wrap gap-1" role="group" aria-label="Sticker stamps">

package/dist/paint-editor/PaintLayersPanel.svelte

@@ -2,6 +2,7 @@
   import { BLEND_MENU_GROUPS, type BlendMode, type PaintEditorController, type PaintLayerInfo } from '@pixerate/editor/paint-editor';
   import { untrack } from 'svelte';
   import { attempt, button, chip, paintEditorState, panel } from './paintEditorRune.svelte.js';
+  import LayerEffectsPanel from '../image-editor/LayerEffectsPanel.svelte';
 
   interface Props {
     controller: PaintEditorController;
@@ -128,6 +129,9 @@
           </label>
         </div>
       {/if}
+      <div class="border-t border-slate-800 pt-1.5" data-testid="paint-layer-effects" title="Live layer styles drawn from this layer's paint: glows, shadows, strokes">
+        <LayerEffectsPanel {controller} layerId={active.id} />
+      </div>
     </div>
   {/if}
   {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}

package/package.json

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