@pixerate/editor 0.25.0 → 0.26.1

package/dist/commands/index.cjs

@@ -239,10 +239,10 @@ var CommandRegistry = (_class = class {
   }
   /** Like `execute`, but awaits async commands (rejections become `failed` results). */
   async executeAsync(id, params, context = this.context) {
-    const outcome = this.execute(id, params, context);
-    if (!outcome.ok || !isThenable(outcome.result)) return outcome;
+    const outcome2 = this.execute(id, params, context);
+    if (!outcome2.ok || !isThenable(outcome2.result)) return outcome2;
     try {
-      const result = await outcome.result;
+      const result = await outcome2.result;
       this.notify();
       return { ok: true, id, result };
     } catch (error) {
@@ -872,6 +872,182 @@ function createShapeCommands(controller, options = {}) {
     }
   ];
 }
+var outcome = (result) => {
+  if (!result.ok) throw new Error(result.reason);
+  return { ids: result.ids };
+};
+var ID_PARAM = { type: "string", description: "Instance (or layer inside one) to act on (default: the first selected node)." };
+function createComponentCommands(controller, options = {}) {
+  const prefix = _nullishCoalesce(options.prefix, () => ( "canvas."));
+  const group = _nullishCoalesce(options.group, () => ( "Components"));
+  const scope = options.scope === null ? void 0 : _nullishCoalesce(options.scope, () => ( "canvas"));
+  const base = { group, ...scope ? { scope } : {} };
+  const idParams = { type: "object", properties: { id: ID_PARAM } };
+  return [
+    {
+      ...base,
+      id: `${prefix}createComponent`,
+      label: "Create Component",
+      keywords: ["component", "symbol", "main component", "reusable"],
+      description: "Turns the selected frame into a main component, or wraps the selection in one.",
+      params: IDS_PARAMS,
+      shortcut: "Mod+Alt+K",
+      enabled: (_ctx, params) => controller.canCreateComponent(_optionalChain([params, 'optionalAccess', _52 => _52.ids])),
+      run: (_ctx, params) => outcome(controller.createComponent(_optionalChain([params, 'optionalAccess', _53 => _53.ids])))
+    },
+    {
+      ...base,
+      id: `${prefix}combineAsVariants`,
+      label: "Combine as Variants",
+      keywords: ["component set", "variant", "variants"],
+      description: "Wraps the selected components in a component set.",
+      params: IDS_PARAMS,
+      enabled: (_ctx, params) => controller.canCombineAsVariants(_optionalChain([params, 'optionalAccess', _54 => _54.ids])),
+      run: (_ctx, params) => outcome(controller.combineAsVariants(_optionalChain([params, 'optionalAccess', _55 => _55.ids])))
+    },
+    {
+      ...base,
+      id: `${prefix}createInstance`,
+      label: "Create Instance",
+      keywords: ["instance", "insert component", "use component"],
+      description: "Places an instance of a component (or a component set\u2019s default variant).",
+      params: {
+        type: "object",
+        properties: {
+          componentId: { type: "string", description: "Component or component set id." },
+          parentId: { type: "string", description: "Frame to place it in (default: the canvas)." },
+          x: { type: "number", description: "X in the parent\u2019s space (default: next to the main)." },
+          y: { type: "number", description: "Y in the parent\u2019s space." },
+          properties: { type: "object", description: "Variant and component property values.", additionalProperties: true }
+        },
+        required: ["componentId"]
+      },
+      enabled: (_ctx, params) => _optionalChain([params, 'optionalAccess', _56 => _56.componentId]) === void 0 ? true : controller.canCreateInstance(params.componentId, params.parentId),
+      run: (_ctx, params) => outcome(
+        controller.createInstance(params.componentId, {
+          ...params.parentId !== void 0 ? { parentId: params.parentId } : {},
+          ...params.x !== void 0 || params.y !== void 0 ? { position: { x: _nullishCoalesce(params.x, () => ( 0)), y: _nullishCoalesce(params.y, () => ( 0)) } } : {},
+          ...params.properties ? { properties: params.properties } : {}
+        })
+      )
+    },
+    {
+      ...base,
+      id: `${prefix}detachInstance`,
+      label: "Detach Instance",
+      keywords: ["unlink", "break instance"],
+      description: "Turns the selected instances into plain frames that keep their look.",
+      params: IDS_PARAMS,
+      shortcut: "Mod+Alt+B",
+      enabled: (_ctx, params) => controller.canDetachInstance(_optionalChain([params, 'optionalAccess', _57 => _57.ids])),
+      run: (_ctx, params) => outcome(controller.detachInstance(_optionalChain([params, 'optionalAccess', _58 => _58.ids])))
+    },
+    {
+      ...base,
+      id: `${prefix}resetOverrides`,
+      label: "Reset All Changes",
+      keywords: ["reset instance", "reset overrides", "revert"],
+      description: "Resets the overrides of an instance (or of a layer, or one override group) to its main.",
+      params: {
+        type: "object",
+        properties: {
+          id: ID_PARAM,
+          group: { type: "string", description: 'One override group to reset, e.g. "data.label" or "shape.fill" (default: all).' }
+        }
+      },
+      enabled: (_ctx, params) => controller.canResetOverrides(_optionalChain([params, 'optionalAccess', _59 => _59.id])),
+      run: (_ctx, params) => outcome(controller.resetOverrides(_optionalChain([params, 'optionalAccess', _60 => _60.id]), _optionalChain([params, 'optionalAccess', _61 => _61.group])))
+    },
+    {
+      ...base,
+      id: `${prefix}pushOverrides`,
+      label: "Push Changes to Main Component",
+      keywords: ["push overrides", "update main component"],
+      description: "Copies the instance\u2019s overrides to its main component and every other instance.",
+      params: idParams,
+      enabled: (_ctx, params) => controller.canPushOverrides(_optionalChain([params, 'optionalAccess', _62 => _62.id])),
+      run: (_ctx, params) => outcome(controller.pushOverrides(_optionalChain([params, 'optionalAccess', _63 => _63.id])))
+    },
+    {
+      ...base,
+      id: `${prefix}goToMainComponent`,
+      label: "Go to Main Component",
+      keywords: ["main component", "find main", "reveal"],
+      description: "Selects the main component of the selected instance.",
+      params: idParams,
+      enabled: (_ctx, params) => controller.canGoToMainComponent(_optionalChain([params, 'optionalAccess', _64 => _64.id])),
+      run: (_ctx, params) => {
+        const main = controller.goToMainComponent(_optionalChain([params, 'optionalAccess', _65 => _65.id]));
+        if (!main) throw new Error("The main component was not found.");
+        return { id: main };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}swapInstance`,
+      label: "Swap Instance\u2026",
+      keywords: ["replace instance", "swap component"],
+      description: "Makes the selected instances show another component, keeping matching overrides.",
+      params: {
+        type: "object",
+        properties: {
+          componentId: { type: "string", description: "Component or component set to swap to." },
+          ids: IDS_PARAMS.properties.ids
+        },
+        required: ["componentId"]
+      },
+      enabled: (_ctx, params) => controller.canSwapInstance(_optionalChain([params, 'optionalAccess', _66 => _66.componentId]), _optionalChain([params, 'optionalAccess', _67 => _67.ids])),
+      run: (_ctx, params) => outcome(controller.swapInstance(params.componentId, _optionalChain([params, 'optionalAccess', _68 => _68.ids])))
+    },
+    {
+      ...base,
+      id: `${prefix}setInstanceProperties`,
+      label: "Set Instance Properties\u2026",
+      keywords: ["variant", "switch variant", "component property", "toggle"],
+      description: "Sets variant properties (switching variants) and component property values of the selected instances.",
+      params: {
+        type: "object",
+        properties: {
+          properties: { type: "object", description: "Property name \u2192 value (variant value, boolean, text or component id).", additionalProperties: true },
+          ids: IDS_PARAMS.properties.ids
+        },
+        required: ["properties"]
+      },
+      enabled: (_ctx, params) => controller.canSetInstanceProperties(_optionalChain([params, 'optionalAccess', _69 => _69.ids])),
+      run: (_ctx, params) => outcome(controller.setInstanceProperties(params.properties, _optionalChain([params, 'optionalAccess', _70 => _70.ids])))
+    },
+    {
+      ...base,
+      id: `${prefix}restoreMainComponent`,
+      label: "Restore Main Component",
+      keywords: ["missing main", "recover component"],
+      description: "Turns an instance whose main was deleted back into the main component.",
+      params: idParams,
+      enabled: (_ctx, params) => controller.canRestoreMainComponent(_optionalChain([params, 'optionalAccess', _71 => _71.id])),
+      run: (_ctx, params) => outcome(controller.restoreMainComponent(_optionalChain([params, 'optionalAccess', _72 => _72.id])))
+    },
+    {
+      ...base,
+      id: `${prefix}listComponents`,
+      label: "List Components",
+      keywords: ["components", "variants", "assets"],
+      description: "Lists the components and component sets (with their variant options).",
+      readOnly: true,
+      run: () => controller.list()
+    },
+    {
+      ...base,
+      id: `${prefix}inspectInstance`,
+      label: "Inspect Instance",
+      keywords: ["instance", "overrides", "properties"],
+      description: "Describes an instance: its main, variant, property values and overrides.",
+      params: idParams,
+      readOnly: true,
+      enabled: (_ctx, params) => controller.inspect(_optionalChain([params, 'optionalAccess', _73 => _73.id])) ? true : "Select an instance.",
+      run: (_ctx, params) => _nullishCoalesce(controller.inspect(_optionalChain([params, 'optionalAccess', _74 => _74.id])), () => ( null))
+    }
+  ];
+}
 function createSpreadsheetCommands(controller, options = {}) {
   const prefix = _nullishCoalesce(options.prefix, () => ( "spreadsheet."));
   const scope = options.scope === null ? void 0 : _nullishCoalesce(options.scope, () => ( "spreadsheet"));
@@ -894,6 +1070,178 @@ function createSpreadsheetCommands(controller, options = {}) {
   ];
 }
 
+// src/commands/animation.ts
+var EASING_DESCRIPTION = "Easing preset (linear, ease, ease-in, ease-out, ease-in-out, ease-in-back, ease-out-back, spring, hold) or a CSS cubic-bezier(x1, y1, x2, y2).";
+var VALUES = {
+  type: "object",
+  description: 'Property \u2192 value, e.g. {"x": 200, "opacity": 0.5, "fill": "#ff0000"}. Properties: x, y, width, height, rotation (degrees), scale, opacity (0\u20131), fill, stroke, strokeWidth, cornerRadius, motionPath (0\u20131).',
+  additionalProperties: { type: ["number", "string"] }
+};
+function createCanvasAnimationCommands(controller, options = {}) {
+  const prefix = _nullishCoalesce(options.prefix, () => ( "canvas.animation."));
+  const group = _nullishCoalesce(options.group, () => ( "Animation"));
+  const scope = options.scope === null ? void 0 : _nullishCoalesce(options.scope, () => ( "canvas"));
+  const base = { group, ...scope ? { scope } : {} };
+  const hasSelection = () => controller.getState().selection.length > 0 ? true : "Select keyframes first.";
+  return [
+    {
+      ...base,
+      id: `${prefix}togglePlay`,
+      label: "Play / Pause Animation",
+      keywords: ["play", "pause", "preview", "timeline"],
+      description: "Plays or pauses the canvas animation from the playhead.",
+      run: () => {
+        controller.toggle();
+        return { playing: controller.getState().playing, time: controller.getState().time };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}play`,
+      label: "Play Animation",
+      keywords: ["preview", "timeline"],
+      enabled: () => controller.getState().playing ? "Already playing." : true,
+      run: () => controller.play()
+    },
+    {
+      ...base,
+      id: `${prefix}pause`,
+      label: "Pause Animation",
+      enabled: () => controller.getState().playing ? true : "Not playing.",
+      run: () => controller.pause()
+    },
+    {
+      ...base,
+      id: `${prefix}stop`,
+      label: "Stop Animation",
+      keywords: ["rewind", "reset"],
+      description: "Stops playback and returns to the start.",
+      run: () => controller.stop()
+    },
+    {
+      ...base,
+      id: `${prefix}seek`,
+      label: "Go to Time\u2026",
+      keywords: ["playhead", "scrub", "time"],
+      description: "Moves the playhead.",
+      params: {
+        type: "object",
+        properties: { time: { type: "number", minimum: 0, description: "Time in milliseconds." } },
+        required: ["time"]
+      },
+      run: (_ctx, params) => {
+        controller.seek(params.time);
+        return { time: controller.getState().time };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}addKeyframe`,
+      label: "Add Keyframe at Playhead",
+      keywords: ["key", "animate", "record"],
+      description: "Keys the selected nodes (or `ids`) at the playhead (or `time`): their animated properties, `properties`, or position.",
+      params: {
+        type: "object",
+        properties: {
+          ids: { type: "array", items: { type: "string" }, description: "Node ids (default: selected nodes)." },
+          properties: { type: "array", items: { type: "string" }, description: "Properties to key (default: animated ones, or x and y)." },
+          time: { type: "number", minimum: 0, description: "Time in ms (default: the playhead)." }
+        }
+      },
+      run: (_ctx, params) => controller.addKeyframe(_optionalChain([params, 'optionalAccess', _75 => _75.ids]), _optionalChain([params, 'optionalAccess', _76 => _76.properties]), _optionalChain([params, 'optionalAccess', _77 => _77.time]))
+    },
+    {
+      ...base,
+      id: `${prefix}deleteKeyframes`,
+      label: "Delete Keyframes",
+      keywords: ["remove", "clear"],
+      enabled: hasSelection,
+      run: () => controller.deleteKeyframes()
+    },
+    {
+      ...base,
+      id: `${prefix}setEasing`,
+      label: "Set Keyframe Easing\u2026",
+      keywords: ["interpolation", "ease", "bezier", "spring", "hold", "curve"],
+      description: "Sets the easing of the segments leaving the selected keyframes.",
+      params: {
+        type: "object",
+        properties: { easing: { type: "string", description: EASING_DESCRIPTION } },
+        required: ["easing"]
+      },
+      enabled: hasSelection,
+      run: (_ctx, params) => controller.setEasing(params.easing)
+    },
+    {
+      ...base,
+      id: `${prefix}toggleRecord`,
+      label: "Toggle Record Mode",
+      keywords: ["auto key", "record", "keyframe"],
+      description: "In record mode, changing a property at the playhead keys it.",
+      run: () => {
+        controller.toggleRecording();
+        return { recording: controller.getState().recording };
+      }
+    },
+    {
+      ...base,
+      id: `${prefix}nextKeyframe`,
+      label: "Next Keyframe",
+      keywords: ["jump", "navigate"],
+      run: () => controller.nextKeyframe()
+    },
+    {
+      ...base,
+      id: `${prefix}previousKeyframe`,
+      label: "Previous Keyframe",
+      keywords: ["jump", "navigate"],
+      run: () => controller.previousKeyframe()
+    },
+    {
+      ...base,
+      id: `${prefix}animateNode`,
+      label: "Animate Node\u2026",
+      keywords: ["tween", "transition", "move", "fade"],
+      description: "Animates a node from `from` (default: its current values) to `to` over `duration` ms, starting at `delay` ms.",
+      params: {
+        type: "object",
+        properties: {
+          nodeId: { type: "string", description: "Node to animate." },
+          to: VALUES,
+          from: VALUES,
+          duration: { type: "number", exclusiveMinimum: 0, description: "Duration in ms (default 1000)." },
+          delay: { type: "number", minimum: 0, description: "Start time in ms (default 0)." },
+          easing: { type: "string", description: EASING_DESCRIPTION }
+        },
+        required: ["nodeId", "to"]
+      },
+      run: (_ctx, params) => controller.animateNode(params.nodeId, {
+        to: params.to,
+        ...params.from ? { from: params.from } : {},
+        ...params.duration !== void 0 ? { duration: params.duration } : {},
+        ...params.delay !== void 0 ? { delay: params.delay } : {},
+        ...params.easing !== void 0 ? { easing: params.easing } : {}
+      })
+    },
+    {
+      ...base,
+      id: `${prefix}exportCss`,
+      label: "Export Animation as CSS",
+      keywords: ["keyframes", "css", "web animations"],
+      description: "Returns CSS @keyframes for a node's animation.",
+      readOnly: true,
+      params: {
+        type: "object",
+        properties: { nodeId: { type: "string" } },
+        required: ["nodeId"]
+      },
+      run: (_ctx, params) => controller.exportCss(params.nodeId)
+    }
+  ];
+}
+
+
+
 
 
 
@@ -929,5 +1277,5 @@ function createSpreadsheetCommands(controller, options = {}) {
 
 
 
-exports.CommandRegistry = CommandRegistry; exports.CommandRegistryError = CommandRegistryError; exports.DEFAULT_HISTORY_SHORTCUTS = DEFAULT_HISTORY_SHORTCUTS; exports.DEFAULT_RECENT_LIMIT = DEFAULT_RECENT_LIMIT; exports.PLATFORMS = _chunk26BVFKHUcjs.PLATFORMS; exports.ShortcutMap = _chunk26BVFKHUcjs.ShortcutMap; exports.chordToString = _chunk26BVFKHUcjs.chordToString; exports.codeFromKey = _chunk26BVFKHUcjs.codeFromKey; exports.codeToKeyText = _chunk26BVFKHUcjs.codeToKeyText; exports.createArrangeCommands = createArrangeCommands; exports.createCommandPaletteController = createCommandPaletteController; exports.createCommandRegistry = createCommandRegistry; exports.createCommandToolProvider = createCommandToolProvider; exports.createHistoryCommands = createHistoryCommands; exports.createShapeCommands = createShapeCommands; exports.createSpreadsheetCommands = createSpreadsheetCommands; exports.defineCommand = defineCommand; exports.detectPlatform = _chunk26BVFKHUcjs.detectPlatform; exports.effectiveChord = _chunk26BVFKHUcjs.effectiveChord; exports.effectiveChordKey = _chunk26BVFKHUcjs.effectiveChordKey; exports.eventCode = _chunk26BVFKHUcjs.eventCode; exports.exactBonus = exactBonus; exports.formatShortcut = _chunk26BVFKHUcjs.formatShortcut; exports.fuzzyMatch = fuzzyMatch; exports.fuzzyScore = fuzzyScore; exports.isEditableEventTarget = _chunk26BVFKHUcjs.isEditableEventTarget; exports.keyToCode = _chunk26BVFKHUcjs.keyToCode; exports.matchHistoryShortcut = matchHistoryShortcut; exports.matchPaletteHotkey = matchPaletteHotkey; exports.normalizeChord = _chunk26BVFKHUcjs.normalizeChord; exports.parseChord = _chunk26BVFKHUcjs.parseChord; exports.pushRecent = pushRecent; exports.rankCommands = rankCommands; exports.shortcutCode = _chunk26BVFKHUcjs.shortcutCode; exports.toShortcutBindings = _chunk26BVFKHUcjs.toShortcutBindings;
+exports.CommandRegistry = CommandRegistry; exports.CommandRegistryError = CommandRegistryError; exports.DEFAULT_HISTORY_SHORTCUTS = DEFAULT_HISTORY_SHORTCUTS; exports.DEFAULT_RECENT_LIMIT = DEFAULT_RECENT_LIMIT; exports.PLATFORMS = _chunk26BVFKHUcjs.PLATFORMS; exports.ShortcutMap = _chunk26BVFKHUcjs.ShortcutMap; exports.chordToString = _chunk26BVFKHUcjs.chordToString; exports.codeFromKey = _chunk26BVFKHUcjs.codeFromKey; exports.codeToKeyText = _chunk26BVFKHUcjs.codeToKeyText; exports.createArrangeCommands = createArrangeCommands; exports.createCanvasAnimationCommands = createCanvasAnimationCommands; exports.createCommandPaletteController = createCommandPaletteController; exports.createCommandRegistry = createCommandRegistry; exports.createCommandToolProvider = createCommandToolProvider; exports.createComponentCommands = createComponentCommands; exports.createHistoryCommands = createHistoryCommands; exports.createShapeCommands = createShapeCommands; exports.createSpreadsheetCommands = createSpreadsheetCommands; exports.defineCommand = defineCommand; exports.detectPlatform = _chunk26BVFKHUcjs.detectPlatform; exports.effectiveChord = _chunk26BVFKHUcjs.effectiveChord; exports.effectiveChordKey = _chunk26BVFKHUcjs.effectiveChordKey; exports.eventCode = _chunk26BVFKHUcjs.eventCode; exports.exactBonus = exactBonus; exports.formatShortcut = _chunk26BVFKHUcjs.formatShortcut; exports.fuzzyMatch = fuzzyMatch; exports.fuzzyScore = fuzzyScore; exports.isEditableEventTarget = _chunk26BVFKHUcjs.isEditableEventTarget; exports.keyToCode = _chunk26BVFKHUcjs.keyToCode; exports.matchHistoryShortcut = matchHistoryShortcut; exports.matchPaletteHotkey = matchPaletteHotkey; exports.normalizeChord = _chunk26BVFKHUcjs.normalizeChord; exports.parseChord = _chunk26BVFKHUcjs.parseChord; exports.pushRecent = pushRecent; exports.rankCommands = rankCommands; exports.shortcutCode = _chunk26BVFKHUcjs.shortcutCode; exports.toShortcutBindings = _chunk26BVFKHUcjs.toShortcutBindings;
 //# sourceMappingURL=index.cjs.map