@pixerate/editor-svelte 0.21.0 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -1
- package/dist/MergePreview.svelte +201 -0
- package/dist/MergePreview.svelte.d.ts +25 -0
- package/dist/MergePreview.svelte.d.ts.map +1 -0
- package/dist/TemplateRenderer.svelte +4 -10
- package/dist/TemplateRenderer.svelte.d.ts.map +1 -1
- package/dist/canvas/CanvasGuidesLayer.svelte +32 -2
- package/dist/canvas/CanvasGuidesLayer.svelte.d.ts +2 -0
- package/dist/canvas/CanvasGuidesLayer.svelte.d.ts.map +1 -1
- package/dist/canvas/createCanvasArrange.svelte.d.ts +16 -1
- package/dist/canvas/createCanvasArrange.svelte.d.ts.map +1 -1
- package/dist/canvas/createCanvasArrange.svelte.js +19 -2
- package/dist/canvas/createCanvasAutoLayout.svelte.d.ts +68 -0
- package/dist/canvas/createCanvasAutoLayout.svelte.d.ts.map +1 -0
- package/dist/canvas/createCanvasAutoLayout.svelte.js +78 -0
- package/dist/canvas/createCanvasMeasure.svelte.d.ts +53 -0
- package/dist/canvas/createCanvasMeasure.svelte.d.ts.map +1 -0
- package/dist/canvas/createCanvasMeasure.svelte.js +80 -0
- package/dist/canvas/index.d.ts +4 -0
- package/dist/canvas/index.d.ts.map +1 -1
- package/dist/canvas/index.js +6 -0
- package/dist/commands/CommandPalette.svelte +129 -0
- package/dist/commands/CommandPalette.svelte.d.ts +13 -0
- package/dist/commands/CommandPalette.svelte.d.ts.map +1 -0
- package/dist/commands/commandShortcuts.svelte.d.ts +30 -0
- package/dist/commands/commandShortcuts.svelte.d.ts.map +1 -0
- package/dist/commands/commandShortcuts.svelte.js +37 -0
- package/dist/commands/index.d.ts +7 -0
- package/dist/commands/index.d.ts.map +1 -0
- package/dist/commands/index.js +3 -0
- package/dist/commands/palette.svelte.d.ts +34 -0
- package/dist/commands/palette.svelte.d.ts.map +1 -0
- package/dist/commands/palette.svelte.js +61 -0
- package/dist/find-replace/FindReplaceBar.svelte +203 -0
- package/dist/find-replace/FindReplaceBar.svelte.d.ts +15 -0
- package/dist/find-replace/FindReplaceBar.svelte.d.ts.map +1 -0
- package/dist/find-replace/findReplace.svelte.d.ts +27 -0
- package/dist/find-replace/findReplace.svelte.d.ts.map +1 -0
- package/dist/find-replace/findReplace.svelte.js +79 -0
- package/dist/find-replace/index.d.ts +6 -0
- package/dist/find-replace/index.d.ts.map +1 -0
- package/dist/find-replace/index.js +2 -0
- package/dist/generation/GenerationSettings.svelte +174 -0
- package/dist/generation/GenerationSettings.svelte.d.ts +23 -0
- package/dist/generation/GenerationSettings.svelte.d.ts.map +1 -0
- package/dist/generation/JobProgress.svelte +53 -0
- package/dist/generation/JobProgress.svelte.d.ts +17 -0
- package/dist/generation/JobProgress.svelte.d.ts.map +1 -0
- package/dist/generation/index.d.ts +10 -0
- package/dist/generation/index.d.ts.map +1 -0
- package/dist/generation/index.js +4 -0
- package/dist/generation/plan.svelte.d.ts +16 -0
- package/dist/generation/plan.svelte.d.ts.map +1 -0
- package/dist/generation/plan.svelte.js +26 -0
- package/dist/generation/progress.svelte.d.ts +25 -0
- package/dist/generation/progress.svelte.d.ts.map +1 -0
- package/dist/generation/progress.svelte.js +36 -0
- package/dist/history/createHistoryShortcuts.d.ts +1 -1
- package/dist/history/createHistoryShortcuts.d.ts.map +1 -1
- package/dist/history/createHistoryShortcuts.js +10 -32
- package/dist/history/history.svelte.d.ts +13 -4
- package/dist/history/history.svelte.d.ts.map +1 -1
- package/dist/history/history.svelte.js +10 -0
- package/dist/history/historyDirty.svelte.d.ts +31 -0
- package/dist/history/historyDirty.svelte.d.ts.map +1 -0
- package/dist/history/historyDirty.svelte.js +30 -0
- package/dist/history/index.d.ts +1 -0
- package/dist/history/index.d.ts.map +1 -1
- package/dist/history/index.js +1 -0
- package/dist/image-editor/AdjustmentLayersPanel.svelte +309 -0
- package/dist/image-editor/AdjustmentLayersPanel.svelte.d.ts +11 -0
- package/dist/image-editor/AdjustmentLayersPanel.svelte.d.ts.map +1 -0
- package/dist/image-editor/ControlSlider.svelte +39 -0
- package/dist/image-editor/ControlSlider.svelte.d.ts +13 -0
- package/dist/image-editor/ControlSlider.svelte.d.ts.map +1 -0
- package/dist/image-editor/CurvesEditor.svelte +105 -0
- package/dist/image-editor/CurvesEditor.svelte.d.ts +13 -0
- package/dist/image-editor/CurvesEditor.svelte.d.ts.map +1 -0
- package/dist/image-editor/Histogram.svelte +49 -0
- package/dist/image-editor/Histogram.svelte.d.ts +12 -0
- package/dist/image-editor/Histogram.svelte.d.ts.map +1 -0
- package/dist/image-editor/ImageEditor.svelte +38 -107
- package/dist/image-editor/ImageEditor.svelte.d.ts.map +1 -1
- package/dist/image-editor/imageEditorState.svelte.d.ts +16 -1
- package/dist/image-editor/imageEditorState.svelte.d.ts.map +1 -1
- package/dist/image-editor/imageEditorState.svelte.js +44 -0
- package/dist/image-editor/index.d.ts +12 -0
- package/dist/image-editor/index.d.ts.map +1 -1
- package/dist/image-editor/index.js +4 -0
- package/dist/index.d.ts +11 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -1
- package/dist/merge.svelte.d.ts +51 -0
- package/dist/merge.svelte.d.ts.map +1 -0
- package/dist/merge.svelte.js +117 -0
- package/dist/persistence/RecoveryPrompt.svelte +57 -0
- package/dist/persistence/RecoveryPrompt.svelte.d.ts +18 -0
- package/dist/persistence/RecoveryPrompt.svelte.d.ts.map +1 -0
- package/dist/persistence/autosave.svelte.d.ts +63 -0
- package/dist/persistence/autosave.svelte.d.ts.map +1 -0
- package/dist/persistence/autosave.svelte.js +110 -0
- package/dist/persistence/index.d.ts +6 -0
- package/dist/persistence/index.d.ts.map +1 -0
- package/dist/persistence/index.js +2 -0
- package/dist/review/documentCompare.svelte.d.ts +21 -0
- package/dist/review/documentCompare.svelte.d.ts.map +1 -0
- package/dist/review/documentCompare.svelte.js +23 -0
- package/dist/review/index.d.ts +1 -0
- package/dist/review/index.d.ts.map +1 -1
- package/dist/review/index.js +1 -0
- package/dist/spreadsheet/SpreadsheetContextMenu.svelte +6 -3
- package/dist/spreadsheet/SpreadsheetContextMenu.svelte.d.ts.map +1 -1
- package/dist/spreadsheet/SpreadsheetEditor.svelte +7 -2
- package/dist/spreadsheet/SpreadsheetEditor.svelte.d.ts.map +1 -1
- package/dist/spreadsheet/spreadsheet.svelte.d.ts +2 -0
- package/dist/spreadsheet/spreadsheet.svelte.d.ts.map +1 -1
- package/package.json +26 -2
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { type NodeRectOptions } from '@pixerate/editor/canvas';
|
|
2
|
+
import type { CanvasNode } from './types.js';
|
|
3
|
+
export interface CreateCanvasMeasureOptions<TNode extends CanvasNode = CanvasNode> {
|
|
4
|
+
getNodes: () => TNode[];
|
|
5
|
+
/** Ids measured from (default: nodes with `selected: true`). */
|
|
6
|
+
getSelectedIds?: () => string[];
|
|
7
|
+
/** Turns measuring off (default `true`). Read reactively. */
|
|
8
|
+
enabled?: boolean | (() => boolean);
|
|
9
|
+
/** Measure only while Alt / Option is held (default `true`); `false` always measures. */
|
|
10
|
+
requireModifier?: boolean;
|
|
11
|
+
rectOptions?: NodeRectOptions;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Headless Svelte 5 rune for Alt-hover distance measuring: hold Alt / Option and hover a
|
|
15
|
+
* node to see red distance lines with labels from the selection to it (or to the selection's
|
|
16
|
+
* parent when hovering the selection or empty space).
|
|
17
|
+
*
|
|
18
|
+
* Wire it with `$effect(() => measure.listen())`, `onnodepointerenter={measure.onnodepointerenter}`
|
|
19
|
+
* and `onnodepointerleave={measure.onnodepointerleave}` on `<SvelteFlow>`, and render
|
|
20
|
+
* `measure.guides` with `<CanvasGuidesLayer>` (concatenate with `arrange.guides` to share one).
|
|
21
|
+
*/
|
|
22
|
+
export declare function createCanvasMeasure<TNode extends CanvasNode = CanvasNode>(options: CreateCanvasMeasureOptions<TNode>): {
|
|
23
|
+
/** Measuring lines (flow coordinates) for `<CanvasGuidesLayer>`. */
|
|
24
|
+
readonly guides: import("@pixerate/editor/canvas").MeasureGuide[];
|
|
25
|
+
/** The box measured to (outline it), or `null`. */
|
|
26
|
+
readonly target: import("@pixerate/editor/canvas").Rect | null;
|
|
27
|
+
/** Whether measuring is showing. */
|
|
28
|
+
readonly active: boolean;
|
|
29
|
+
readonly hoveredId: string | null;
|
|
30
|
+
setHovered(id: string | null): void;
|
|
31
|
+
/** Sets the modifier state by hand (e.g. from a toolbar toggle). */
|
|
32
|
+
setModifier(held: boolean): void;
|
|
33
|
+
onnodepointerenter: ({ node, event }: {
|
|
34
|
+
node: {
|
|
35
|
+
id: string;
|
|
36
|
+
};
|
|
37
|
+
event?: {
|
|
38
|
+
altKey?: boolean;
|
|
39
|
+
};
|
|
40
|
+
}) => void;
|
|
41
|
+
onnodepointerleave: ({ node }: {
|
|
42
|
+
node: {
|
|
43
|
+
id: string;
|
|
44
|
+
};
|
|
45
|
+
}) => void;
|
|
46
|
+
/**
|
|
47
|
+
* Tracks the Alt key on `target` (default `window`) and resets it when the window
|
|
48
|
+
* loses focus. Returns a cleanup function.
|
|
49
|
+
*/
|
|
50
|
+
listen(target?: HTMLElement | Window | null): () => void;
|
|
51
|
+
};
|
|
52
|
+
export type CanvasMeasure = ReturnType<typeof createCanvasMeasure>;
|
|
53
|
+
//# sourceMappingURL=createCanvasMeasure.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createCanvasMeasure.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasMeasure.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAIN,KAAK,eAAe,EACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,0BAA0B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IAChF,QAAQ,EAAE,MAAM,KAAK,EAAE,CAAC;IACxB,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAChC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACpC,yFAAyF;IACzF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,eAAe,CAAC;CAC9B;AAID;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAAE,OAAO,EAAE,0BAA0B,CAAC,KAAK,CAAC;IAcnH,oEAAoE;;IAIpE,mDAAmD;;IAInD,oCAAoC;;;mBAOrB,MAAM,GAAG,IAAI;IAG5B,oEAAoE;sBAClD,OAAO;0CAGa;QAAE,IAAI,EAAE;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,KAAK,CAAC,EAAE;YAAE,MAAM,CAAC,EAAE,OAAO,CAAA;SAAE,CAAA;KAAE;mCAI7D;QAAE,IAAI,EAAE;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE;IAGvD;;;OAGG;oBACY,WAAW,GAAG,MAAM,GAAG,IAAI,GAAmD,MAAM,IAAI;EAmBxG;AAED,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { isMeasureModifierHeld, measureSelection } from '@pixerate/editor/canvas';
|
|
2
|
+
const EMPTY = { guides: [], target: null, selection: null };
|
|
3
|
+
/**
|
|
4
|
+
* Headless Svelte 5 rune for Alt-hover distance measuring: hold Alt / Option and hover a
|
|
5
|
+
* node to see red distance lines with labels from the selection to it (or to the selection's
|
|
6
|
+
* parent when hovering the selection or empty space).
|
|
7
|
+
*
|
|
8
|
+
* Wire it with `$effect(() => measure.listen())`, `onnodepointerenter={measure.onnodepointerenter}`
|
|
9
|
+
* and `onnodepointerleave={measure.onnodepointerleave}` on `<SvelteFlow>`, and render
|
|
10
|
+
* `measure.guides` with `<CanvasGuidesLayer>` (concatenate with `arrange.guides` to share one).
|
|
11
|
+
*/
|
|
12
|
+
export function createCanvasMeasure(options) {
|
|
13
|
+
let hoveredId = $state(null);
|
|
14
|
+
let modifier = $state(false);
|
|
15
|
+
const enabled = () => (typeof options.enabled === 'function' ? options.enabled() : options.enabled !== false);
|
|
16
|
+
const active = $derived(enabled() && (options.requireModifier === false || modifier));
|
|
17
|
+
const result = $derived.by(() => {
|
|
18
|
+
if (!active)
|
|
19
|
+
return EMPTY;
|
|
20
|
+
const nodes = options.getNodes();
|
|
21
|
+
const ids = options.getSelectedIds?.() ?? nodes.filter((n) => n.selected).map((n) => n.id);
|
|
22
|
+
return measureSelection(nodes, ids, hoveredId, options.rectOptions);
|
|
23
|
+
});
|
|
24
|
+
return {
|
|
25
|
+
/** Measuring lines (flow coordinates) for `<CanvasGuidesLayer>`. */
|
|
26
|
+
get guides() {
|
|
27
|
+
return result.guides;
|
|
28
|
+
},
|
|
29
|
+
/** The box measured to (outline it), or `null`. */
|
|
30
|
+
get target() {
|
|
31
|
+
return result.target;
|
|
32
|
+
},
|
|
33
|
+
/** Whether measuring is showing. */
|
|
34
|
+
get active() {
|
|
35
|
+
return active;
|
|
36
|
+
},
|
|
37
|
+
get hoveredId() {
|
|
38
|
+
return hoveredId;
|
|
39
|
+
},
|
|
40
|
+
setHovered(id) {
|
|
41
|
+
hoveredId = id;
|
|
42
|
+
},
|
|
43
|
+
/** Sets the modifier state by hand (e.g. from a toolbar toggle). */
|
|
44
|
+
setModifier(held) {
|
|
45
|
+
modifier = held;
|
|
46
|
+
},
|
|
47
|
+
onnodepointerenter: ({ node, event }) => {
|
|
48
|
+
hoveredId = node.id;
|
|
49
|
+
if (event && typeof event.altKey === 'boolean')
|
|
50
|
+
modifier = event.altKey;
|
|
51
|
+
},
|
|
52
|
+
onnodepointerleave: ({ node }) => {
|
|
53
|
+
if (hoveredId === node.id)
|
|
54
|
+
hoveredId = null;
|
|
55
|
+
},
|
|
56
|
+
/**
|
|
57
|
+
* Tracks the Alt key on `target` (default `window`) and resets it when the window
|
|
58
|
+
* loses focus. Returns a cleanup function.
|
|
59
|
+
*/
|
|
60
|
+
listen(target = typeof window !== 'undefined' ? window : null) {
|
|
61
|
+
if (!target)
|
|
62
|
+
return () => { };
|
|
63
|
+
const onKey = (event) => {
|
|
64
|
+
modifier = isMeasureModifierHeld(event);
|
|
65
|
+
};
|
|
66
|
+
const onBlur = () => {
|
|
67
|
+
modifier = false;
|
|
68
|
+
};
|
|
69
|
+
target.addEventListener('keydown', onKey);
|
|
70
|
+
target.addEventListener('keyup', onKey);
|
|
71
|
+
const win = typeof window !== 'undefined' ? window : null;
|
|
72
|
+
win?.addEventListener('blur', onBlur);
|
|
73
|
+
return () => {
|
|
74
|
+
target.removeEventListener('keydown', onKey);
|
|
75
|
+
target.removeEventListener('keyup', onKey);
|
|
76
|
+
win?.removeEventListener('blur', onBlur);
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
}
|
package/dist/canvas/index.d.ts
CHANGED
|
@@ -17,8 +17,12 @@ export { createStreamingCanvas, type CreateStreamingCanvasOptions } from './crea
|
|
|
17
17
|
export { createCanvasArrange, createCanvasArrangeShortcuts, type CanvasArrange, type CreateCanvasArrangeOptions, type CanvasArrangeShortcutsOptions } from './createCanvasArrange.svelte.js';
|
|
18
18
|
export { createCanvasScenes, type CanvasScenes, type CreateCanvasScenesOptions } from './createCanvasScenes.svelte.js';
|
|
19
19
|
export { default as CanvasGuidesLayer } from './CanvasGuidesLayer.svelte';
|
|
20
|
+
export { createCanvasMeasure, type CanvasMeasure, type CreateCanvasMeasureOptions } from './createCanvasMeasure.svelte.js';
|
|
21
|
+
export { measureBetween, measureToLine, measureSelection, measureLabel, isMeasureModifierHeld, snapToGrid, snapResize, snapNodeResize, inferResizeHandle, resizeHandleAxes, getResizingNodeRect, RESIZE_HANDLES, fitCubics, fitCubicRun, fitPathData, fitFreehandPath, cubicsToPathData, cubicPointAt, isStraightCubic, type MeasureGuide, type MeasureSelectionResult, type MeasureSelectionOptions, type ResizeHandle, type SnapResizeOptions, type SnapResizeResult, type SnapNodeResizeOptions, type SnapNodeResizeResult, type CubicSegment, type FitCubicsOptions, type FitPathDataOptions } from '@pixerate/editor/canvas';
|
|
20
22
|
export { alignNodes, distributeNodes, matchSize, reorderNodes, applyNodeUpdates, invertNodeUpdates, lockNodes, unlockNodes, toggleLockNodes, isLocked, getNodeSize, getNodeRect, getAbsolutePosition, readStyleSize, withStyleSize, computeSnapGuides, createGuideIndex, createNodeGuideIndex, snapNodeDrag, findConnectorSnap, nearestHandlePositions, handlePoint, positionToSide, sideToPosition, oppositePosition, CONNECTION_LINE_TYPES, CanvasScenesStore, createCanvasScenesStore, parseCanvasScenes, fitViewportToRect, fitViewportToNodes, matchArrangeShortcut, DEFAULT_ARRANGE_SHORTCUTS, type AlignEdge, type DistributeAxis, type DistributeMode, type SizeDimension, type ZOrderOperation, type CanvasNodeUpdate, type GuideLine, type GuideIndex, type SnapGuidesOptions, type SnapResult, type ConnectorSnap, type ConnectorSnapTarget, type CanvasConnectionLineType, type CanvasScene, type CanvasScenesState, type CanvasViewport, type CanvasArrangeAction, type ArrangeShortcutBinding } from '@pixerate/editor/canvas';
|
|
21
23
|
export { default as ShapeNode } from './ShapeNode.svelte';
|
|
22
24
|
export { combineShapeNodes, canCombineShapeNodes, applyShapeCombination, revertShapeCombination, shapeNodeToPolygon, isShapeNode, getNodeShape, SHAPE_DATA_KEY, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, SHAPE_KINDS, isShapeDescription, shapeToPolygon, getShapeSvg, getShapeRenderData, parseSvgPath, flattenSvgPath, polygonToSvgPath, simplifyRing, polygonBoolean, unionPolygons, intersectPolygons, subtractPolygons, xorPolygons, dividePolygons, polygonArea, multiPolygonArea, multiPolygonBounds, ringSignedArea, pointInRings, pointInMultiPolygon, type ShapeOperation, type ShapeDescription, type ShapeKind, type ShapePaint, type ShapeSize, type ShapeRenderData, type RectShape, type EllipseShape, type RegularPolygonShape, type StarShape, type PathShape, type PathCommand, type FlattenOptions, type PolygonToPathOptions, type CombineShapeNodesOptions, type CombineShapeNodesResult, type CombineShapeNodesRefusal, type ShapeNodePolygonOptions, type MultiPolygon, type PolygonWithHoles, type PolygonRing, type PolygonFillRule, type PolygonOperand, type PolygonInput, type PolygonPiece, type PolygonBooleanOperation, type PolygonBooleanOptions } from '@pixerate/editor/canvas';
|
|
23
25
|
export { realClock, ManualClock, layoutBounds, canvasHeight, estimateCanvasHeight, blendLayout, connectedOnly, type Clock, type CanvasHeightOptions } from '@pixerate/editor/canvas';
|
|
26
|
+
export { layoutFrame, layoutAll, layoutUp, layoutUpMany, applyConstraints, getAutoLayout, getChildLayout, getLayoutSizing, getAutoLayoutGrid, getAutoLayoutInsertTarget, getFlowChildren, getLayoutParent, isAutoLayoutFrame, makeSizingCoherent, moveLayoutChild, mergeNodeUpdates, relayoutUpdates, resolvePadding, clampLayoutSize, createCanvasAutoLayoutController, AUTO_LAYOUT_DATA_KEY, CHILD_LAYOUT_DATA_KEY, type AutoLayout, type AutoLayoutChild, type AutoLayoutMode, type AutoLayoutSizing, type AutoLayoutSizingPair, type AutoLayoutSize, type AutoLayoutAlignMain, type AutoLayoutAlignCross, type AutoLayoutAlignContent, type AutoLayoutPadding, type AutoLayoutGrid, type AutoLayoutGridTrack, type AutoLayoutGridArea, type AutoLayoutGridCell, type AutoLayoutGridGeometry, type AutoLayoutCellAlign, type AutoLayoutConstraints, type AutoLayoutHorizontalConstraint, type AutoLayoutVerticalConstraint, type AutoLayoutMeasure, type AutoLayoutOptions, type AutoLayoutInsertTarget, type CanvasAutoLayoutController, type CanvasAutoLayoutControllerOptions } from '@pixerate/editor/canvas';
|
|
27
|
+
export { createCanvasAutoLayout, type CanvasAutoLayout, type CreateCanvasAutoLayoutOptions } from './createCanvasAutoLayout.svelte.js';
|
|
24
28
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC;AAG3B,OAAO,EACN,iBAAiB,EACjB,yBAAyB,EACzB,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,MAAM,+BAA+B,CAAC;AAGvC,OAAO,EACN,gBAAgB,EAChB,uBAAuB,EACvB,WAAW,EACX,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACN,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,EACV,KAAK,4BAA4B,EACjC,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,mBAAmB,EACnB,KAAK,0BAA0B,EAC/B,KAAK,YAAY,EACjB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EACN,qBAAqB,EACrB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EACN,wBAAwB,EACxB,uBAAuB,EACvB,oBAAoB,EACpB,yBAAyB,EACzB,KAAK,+BAA+B,EACpC,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EACN,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EACN,uBAAuB,EACvB,gCAAgC,EAChC,2BAA2B,EAC3B,MAAM,+BAA+B,CAAC;AAGvC,OAAO,EACN,qBAAqB,EACrB,KAAK,iBAAiB,EACtB,KAAK,4BAA4B,EACjC,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,oBAAoB,EACpB,wBAAwB,EACxB,oBAAoB,EACpB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,2BAA2B,EAChC,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EACN,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,uBAAuB,EAC5B,KAAK,4BAA4B,EACjC,KAAK,iBAAiB,EACtB,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,yBAAyB,EACzB,sBAAsB,EACtB,KAAK,sBAAsB,EAC3B,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AAG9F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAG5E,OAAO,EACN,qBAAqB,EACrB,KAAK,4BAA4B,EACjC,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,mBAAmB,EACnB,4BAA4B,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,6BAA6B,EAClC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACN,kBAAkB,EAClB,KAAK,YAAY,EACjB,KAAK,yBAAyB,EAC9B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"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"}
|
package/dist/canvas/index.js
CHANGED
|
@@ -34,9 +34,15 @@ export { createStreamingCanvas } from './createStreamingCanvas.svelte.js';
|
|
|
34
34
|
export { createCanvasArrange, createCanvasArrangeShortcuts } from './createCanvasArrange.svelte.js';
|
|
35
35
|
export { createCanvasScenes } from './createCanvasScenes.svelte.js';
|
|
36
36
|
export { default as CanvasGuidesLayer } from './CanvasGuidesLayer.svelte';
|
|
37
|
+
// Distance measuring (Alt-hover), resize / grid snapping and curve fitting
|
|
38
|
+
export { createCanvasMeasure } from './createCanvasMeasure.svelte.js';
|
|
39
|
+
export { measureBetween, measureToLine, measureSelection, measureLabel, isMeasureModifierHeld, snapToGrid, snapResize, snapNodeResize, inferResizeHandle, resizeHandleAxes, getResizingNodeRect, RESIZE_HANDLES, fitCubics, fitCubicRun, fitPathData, fitFreehandPath, cubicsToPathData, cubicPointAt, isStraightCubic } from '@pixerate/editor/canvas';
|
|
37
40
|
export { alignNodes, distributeNodes, matchSize, reorderNodes, applyNodeUpdates, invertNodeUpdates, lockNodes, unlockNodes, toggleLockNodes, isLocked, getNodeSize, getNodeRect, getAbsolutePosition, readStyleSize, withStyleSize, computeSnapGuides, createGuideIndex, createNodeGuideIndex, snapNodeDrag, findConnectorSnap, nearestHandlePositions, handlePoint, positionToSide, sideToPosition, oppositePosition, CONNECTION_LINE_TYPES, CanvasScenesStore, createCanvasScenesStore, parseCanvasScenes, fitViewportToRect, fitViewportToNodes, matchArrangeShortcut, DEFAULT_ARRANGE_SHORTCUTS } from '@pixerate/editor/canvas';
|
|
38
41
|
export { default as ShapeNode } from './ShapeNode.svelte';
|
|
39
42
|
// Shape nodes and boolean operations (Unite / Intersect / Subtract / Exclude / Divide)
|
|
40
43
|
export { combineShapeNodes, canCombineShapeNodes, applyShapeCombination, revertShapeCombination, shapeNodeToPolygon, isShapeNode, getNodeShape, SHAPE_DATA_KEY, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, SHAPE_KINDS, isShapeDescription, shapeToPolygon, getShapeSvg, getShapeRenderData, parseSvgPath, flattenSvgPath, polygonToSvgPath, simplifyRing, polygonBoolean, unionPolygons, intersectPolygons, subtractPolygons, xorPolygons, dividePolygons, polygonArea, multiPolygonArea, multiPolygonBounds, ringSignedArea, pointInRings, pointInMultiPolygon } from '@pixerate/editor/canvas';
|
|
41
44
|
// Clock and view helpers from core
|
|
42
45
|
export { realClock, ManualClock, layoutBounds, canvasHeight, estimateCanvasHeight, blendLayout, connectedOnly } from '@pixerate/editor/canvas';
|
|
46
|
+
// Auto layout (Figma-style stacks, wrap, grid, hug / fill / fixed) and constraints
|
|
47
|
+
export { layoutFrame, layoutAll, layoutUp, layoutUpMany, applyConstraints, getAutoLayout, getChildLayout, getLayoutSizing, getAutoLayoutGrid, getAutoLayoutInsertTarget, getFlowChildren, getLayoutParent, isAutoLayoutFrame, makeSizingCoherent, moveLayoutChild, mergeNodeUpdates, relayoutUpdates, resolvePadding, clampLayoutSize, createCanvasAutoLayoutController, AUTO_LAYOUT_DATA_KEY, CHILD_LAYOUT_DATA_KEY } from '@pixerate/editor/canvas';
|
|
48
|
+
export { createCanvasAutoLayout } from './createCanvasAutoLayout.svelte.js';
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
// Ids only render while the palette is open (client side), so a counter is enough
|
|
3
|
+
// (`$props.id()` needs Svelte 5.20, newer than our peer range).
|
|
4
|
+
let nextId = 0;
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<script lang="ts">
|
|
8
|
+
import type { CommandPaletteItem } from '@pixerate/editor/commands';
|
|
9
|
+
import type { SvelteCommandPalette } from './palette.svelte.js';
|
|
10
|
+
|
|
11
|
+
interface Props {
|
|
12
|
+
/** State from `createCommandPalette`. */
|
|
13
|
+
palette: SvelteCommandPalette;
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
emptyMessage?: string;
|
|
16
|
+
/** Extra classes for the dialog panel. */
|
|
17
|
+
class?: string;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
let {
|
|
21
|
+
palette,
|
|
22
|
+
placeholder = 'Type a command…',
|
|
23
|
+
emptyMessage = 'No matching commands',
|
|
24
|
+
class: className = ''
|
|
25
|
+
}: Props = $props();
|
|
26
|
+
|
|
27
|
+
const baseId = `command-palette-${++nextId}`;
|
|
28
|
+
const listId = `${baseId}-list`;
|
|
29
|
+
const optionId = (index: number) => `${baseId}-option-${index}`;
|
|
30
|
+
|
|
31
|
+
let inputEl = $state<HTMLInputElement | null>(null);
|
|
32
|
+
let listEl = $state<HTMLUListElement | null>(null);
|
|
33
|
+
|
|
34
|
+
$effect(() => {
|
|
35
|
+
if (palette.open) inputEl?.focus();
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
$effect(() => {
|
|
39
|
+
void palette.activeIndex;
|
|
40
|
+
if (!palette.open) return;
|
|
41
|
+
const active = listEl?.querySelector<HTMLElement>('[aria-selected="true"]');
|
|
42
|
+
active?.scrollIntoView?.({ block: 'nearest' });
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
const segments = (item: CommandPaletteItem) => {
|
|
46
|
+
const marked = new Set(item.labelIndices);
|
|
47
|
+
return Array.from(item.label).map((ch, i) => ({ ch, match: marked.has(i) }));
|
|
48
|
+
};
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
{#if palette.open}
|
|
52
|
+
<!-- Headless-styled command palette: Arrow keys move, Enter runs, Escape or a backdrop press closes. -->
|
|
53
|
+
<div
|
|
54
|
+
class="fixed inset-0 z-50 flex items-start justify-center bg-black/30 px-4 pt-[15vh]"
|
|
55
|
+
data-command-palette-backdrop=""
|
|
56
|
+
role="presentation"
|
|
57
|
+
onmousedown={(e) => {
|
|
58
|
+
if (e.target === e.currentTarget) palette.setOpen(false);
|
|
59
|
+
}}
|
|
60
|
+
>
|
|
61
|
+
<div
|
|
62
|
+
role="dialog"
|
|
63
|
+
aria-modal="true"
|
|
64
|
+
aria-label="Command palette"
|
|
65
|
+
class="w-full max-w-lg overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-xl {className}"
|
|
66
|
+
style="background: var(--popover, var(--background, #fff));"
|
|
67
|
+
>
|
|
68
|
+
<input
|
|
69
|
+
bind:this={inputEl}
|
|
70
|
+
type="text"
|
|
71
|
+
role="combobox"
|
|
72
|
+
aria-expanded="true"
|
|
73
|
+
aria-controls={listId}
|
|
74
|
+
aria-autocomplete="list"
|
|
75
|
+
aria-activedescendant={palette.items.length ? optionId(palette.activeIndex) : undefined}
|
|
76
|
+
aria-label="Search commands"
|
|
77
|
+
{placeholder}
|
|
78
|
+
value={palette.query}
|
|
79
|
+
oninput={(e) => palette.setQuery(e.currentTarget.value)}
|
|
80
|
+
onkeydown={(e) => {
|
|
81
|
+
if (palette.handleKeyDown(e)) e.stopPropagation();
|
|
82
|
+
}}
|
|
83
|
+
class="w-full border-b border-border bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
|
|
84
|
+
/>
|
|
85
|
+
{#if palette.items.length === 0}
|
|
86
|
+
<div class="px-3 py-6 text-center text-sm text-muted-foreground">{emptyMessage}</div>
|
|
87
|
+
{:else}
|
|
88
|
+
<ul bind:this={listEl} id={listId} role="listbox" aria-label="Commands" class="max-h-80 overflow-y-auto py-1">
|
|
89
|
+
{#each palette.items as item, index (item.id)}
|
|
90
|
+
<li
|
|
91
|
+
id={optionId(index)}
|
|
92
|
+
role="option"
|
|
93
|
+
aria-selected={index === palette.activeIndex}
|
|
94
|
+
aria-disabled={!item.enabled || undefined}
|
|
95
|
+
data-command-id={item.id}
|
|
96
|
+
data-recent={item.recent ? '' : undefined}
|
|
97
|
+
title={item.disabledReason}
|
|
98
|
+
onmousemove={() => index !== palette.activeIndex && palette.setActiveIndex(index)}
|
|
99
|
+
onmousedown={(e) => e.preventDefault()}
|
|
100
|
+
onclick={() => palette.run(item.id)}
|
|
101
|
+
onkeydown={() => {}}
|
|
102
|
+
class="flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm {index === palette.activeIndex
|
|
103
|
+
? 'bg-muted'
|
|
104
|
+
: ''} {item.enabled ? '' : 'cursor-default opacity-50'}"
|
|
105
|
+
>
|
|
106
|
+
<span class="min-w-0 flex-1 truncate">
|
|
107
|
+
{#each segments(item) as segment, i (i)}{#if segment.match}<span
|
|
108
|
+
class="font-semibold text-foreground"
|
|
109
|
+
data-match="">{segment.ch}</span
|
|
110
|
+
>{:else}{segment.ch}{/if}{/each}
|
|
111
|
+
{#if item.disabledReason}
|
|
112
|
+
<span class="ml-2 text-xs text-muted-foreground" data-disabled-reason="">{item.disabledReason}</span>
|
|
113
|
+
{/if}
|
|
114
|
+
</span>
|
|
115
|
+
{#if item.group}
|
|
116
|
+
<span class="shrink-0 text-xs text-muted-foreground">{item.group}</span>
|
|
117
|
+
{/if}
|
|
118
|
+
{#if item.shortcut}
|
|
119
|
+
<kbd class="shrink-0 rounded border border-border px-1.5 font-mono text-[10px] text-muted-foreground"
|
|
120
|
+
>{item.shortcut}</kbd
|
|
121
|
+
>
|
|
122
|
+
{/if}
|
|
123
|
+
</li>
|
|
124
|
+
{/each}
|
|
125
|
+
</ul>
|
|
126
|
+
{/if}
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
{/if}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { SvelteCommandPalette } from './palette.svelte.js';
|
|
2
|
+
interface Props {
|
|
3
|
+
/** State from `createCommandPalette`. */
|
|
4
|
+
palette: SvelteCommandPalette;
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
emptyMessage?: string;
|
|
7
|
+
/** Extra classes for the dialog panel. */
|
|
8
|
+
class?: string;
|
|
9
|
+
}
|
|
10
|
+
declare const CommandPalette: import("svelte").Component<Props, {}, "">;
|
|
11
|
+
type CommandPalette = ReturnType<typeof CommandPalette>;
|
|
12
|
+
export default CommandPalette;
|
|
13
|
+
//# sourceMappingURL=CommandPalette.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CommandPalette.svelte.d.ts","sourceRoot":"","sources":["../../src/commands/CommandPalette.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAG9D,UAAU,KAAK;IACb,yCAAyC;IACzC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8EH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { CommandRegistry, CommandResult, CommandSpec } from "@pixerate/editor/commands";
|
|
2
|
+
type MaybeGetter<T> = T | (() => T);
|
|
3
|
+
export interface CommandShortcutsOptions<TContext = any> {
|
|
4
|
+
/** Element or window to listen on (default: `window`). */
|
|
5
|
+
target?: Window | HTMLElement | null;
|
|
6
|
+
/** Active scopes, most specific first; a getter is read on every keydown. */
|
|
7
|
+
scopes?: MaybeGetter<string | readonly string[] | undefined>;
|
|
8
|
+
/** Context for the commands (default: the registry's); a getter is read on every keydown. */
|
|
9
|
+
context?: MaybeGetter<TContext | undefined>;
|
|
10
|
+
/** Fire even while typing in inputs / contenteditable (default: per binding). */
|
|
11
|
+
allowInEditable?: boolean;
|
|
12
|
+
/** Called after a shortcut ran a command. */
|
|
13
|
+
onRun?: (result: CommandResult) => void;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Runs the registry's commands from their keyboard shortcuts (`registry.handleKeyDown`).
|
|
17
|
+
* Typing in inputs and editors is never hijacked, and disabled commands leave the event
|
|
18
|
+
* alone. Returns `{ destroy }`.
|
|
19
|
+
*/
|
|
20
|
+
export declare function createCommandShortcuts<TContext = any>(registry: CommandRegistry<TContext>, options?: CommandShortcutsOptions<TContext>): {
|
|
21
|
+
destroy: () => void;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Registers commands for the lifetime of the calling component (call it during
|
|
25
|
+
* component initialisation). Pass a getter to react to changes: when it returns a
|
|
26
|
+
* different array, the old commands are unregistered.
|
|
27
|
+
*/
|
|
28
|
+
export declare function useRegisterCommands<TContext = any>(registry: MaybeGetter<CommandRegistry<TContext> | null | undefined>, specs: MaybeGetter<readonly CommandSpec<TContext>[] | null | undefined>): void;
|
|
29
|
+
export {};
|
|
30
|
+
//# sourceMappingURL=commandShortcuts.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"commandShortcuts.svelte.d.ts","sourceRoot":"","sources":["../../src/commands/commandShortcuts.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7F,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;AAKpC,MAAM,WAAW,uBAAuB,CAAC,QAAQ,GAAG,GAAG;IACrD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IACrC,6EAA6E;IAC7E,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC,CAAC;IAC7D,6FAA6F;IAC7F,OAAO,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC;IAC5C,iFAAiF;IACjF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,GAAG,GAAG,EACnD,QAAQ,EAAE,eAAe,CAAC,QAAQ,CAAC,EACnC,OAAO,GAAE,uBAAuB,CAAC,QAAQ,CAAM,GAC9C;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAczB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,GAAG,GAAG,EAChD,QAAQ,EAAE,WAAW,CAAC,eAAe,CAAC,QAAQ,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,EACnE,KAAK,EAAE,WAAW,CAAC,SAAS,WAAW,CAAC,QAAQ,CAAC,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC,GACtE,IAAI,CAON"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
const read = (value) => typeof value === "function" ? value() : value;
|
|
2
|
+
/**
|
|
3
|
+
* Runs the registry's commands from their keyboard shortcuts (`registry.handleKeyDown`).
|
|
4
|
+
* Typing in inputs and editors is never hijacked, and disabled commands leave the event
|
|
5
|
+
* alone. Returns `{ destroy }`.
|
|
6
|
+
*/
|
|
7
|
+
export function createCommandShortcuts(registry, options = {}) {
|
|
8
|
+
const target = options.target ?? (typeof window !== "undefined" ? window : null);
|
|
9
|
+
if (!target)
|
|
10
|
+
return { destroy: () => { } };
|
|
11
|
+
const onKeyDown = (event) => {
|
|
12
|
+
const context = options.context === undefined ? undefined : read(options.context);
|
|
13
|
+
const result = registry.handleKeyDown(event, {
|
|
14
|
+
scopes: options.scopes === undefined ? undefined : read(options.scopes),
|
|
15
|
+
...(options.allowInEditable !== undefined ? { allowInEditable: options.allowInEditable } : {}),
|
|
16
|
+
...(context !== undefined ? { context } : {}),
|
|
17
|
+
});
|
|
18
|
+
if (result)
|
|
19
|
+
options.onRun?.(result);
|
|
20
|
+
};
|
|
21
|
+
target.addEventListener("keydown", onKeyDown);
|
|
22
|
+
return { destroy: () => target.removeEventListener("keydown", onKeyDown) };
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Registers commands for the lifetime of the calling component (call it during
|
|
26
|
+
* component initialisation). Pass a getter to react to changes: when it returns a
|
|
27
|
+
* different array, the old commands are unregistered.
|
|
28
|
+
*/
|
|
29
|
+
export function useRegisterCommands(registry, specs) {
|
|
30
|
+
$effect(() => {
|
|
31
|
+
const currentRegistry = read(registry);
|
|
32
|
+
const currentSpecs = read(specs);
|
|
33
|
+
if (!currentRegistry || !currentSpecs || currentSpecs.length === 0)
|
|
34
|
+
return;
|
|
35
|
+
return currentRegistry.register(currentSpecs);
|
|
36
|
+
});
|
|
37
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ComponentProps } from "svelte";
|
|
2
|
+
import type CommandPaletteComponent from "./CommandPalette.svelte";
|
|
3
|
+
export { default as CommandPalette } from "./CommandPalette.svelte";
|
|
4
|
+
export * from "./palette.svelte.js";
|
|
5
|
+
export * from "./commandShortcuts.svelte.js";
|
|
6
|
+
export type CommandPaletteProps = ComponentProps<typeof CommandPaletteComponent>;
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/commands/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAE7C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { type CommandPaletteController, type CommandPaletteItem, type CommandPaletteOptions, type CommandRegistry, type CommandResult } from "@pixerate/editor/commands";
|
|
2
|
+
export interface CreateCommandPaletteOptions<TContext = any> extends CommandPaletteOptions<TContext> {
|
|
3
|
+
/** Chord that toggles the palette from anywhere, also while typing (e.g. `Mod+K`). */
|
|
4
|
+
hotkey?: string;
|
|
5
|
+
/** Element or window the hotkey listens on (default: `window`). */
|
|
6
|
+
hotkeyTarget?: Window | HTMLElement | null;
|
|
7
|
+
}
|
|
8
|
+
export interface SvelteCommandPalette {
|
|
9
|
+
readonly open: boolean;
|
|
10
|
+
readonly query: string;
|
|
11
|
+
readonly activeIndex: number;
|
|
12
|
+
readonly items: CommandPaletteItem[];
|
|
13
|
+
readonly recents: string[];
|
|
14
|
+
readonly lastResult: CommandResult | null;
|
|
15
|
+
readonly controller: CommandPaletteController;
|
|
16
|
+
setOpen(open: boolean): void;
|
|
17
|
+
toggle(): void;
|
|
18
|
+
setQuery(query: string): void;
|
|
19
|
+
setActiveIndex(index: number): void;
|
|
20
|
+
move(delta: number): void;
|
|
21
|
+
run(id: string): CommandResult | null;
|
|
22
|
+
runActive(): CommandResult | null;
|
|
23
|
+
handleKeyDown(event: KeyboardEvent): boolean;
|
|
24
|
+
/** Stops following the registry and removes the hotkey listener. */
|
|
25
|
+
destroy(): void;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Reactive command palette state over a `CommandRegistry` (Svelte 5 runes): ranked rows
|
|
29
|
+
* with shortcuts and disabled reasons, active row and recents. Render it with
|
|
30
|
+
* `<CommandPalette palette={…} />` or your own markup. Call `destroy()` when done
|
|
31
|
+
* (e.g. in `onDestroy`).
|
|
32
|
+
*/
|
|
33
|
+
export declare function createCommandPalette<TContext = any>(registry: CommandRegistry<TContext>, options?: CreateCommandPaletteOptions<TContext>): SvelteCommandPalette;
|
|
34
|
+
//# sourceMappingURL=palette.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"palette.svelte.d.ts","sourceRoot":"","sources":["../../src/commands/palette.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,wBAAwB,EAC7B,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAE1B,KAAK,eAAe,EACpB,KAAK,aAAa,EACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,2BAA2B,CAAC,QAAQ,GAAG,GAAG,CAAE,SAAQ,qBAAqB,CAAC,QAAQ,CAAC;IAClG,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IACrC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAC3B,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,UAAU,EAAE,wBAAwB,CAAC;IAC9C,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,MAAM,IAAI,IAAI,CAAC;IACf,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,GAAG,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAAC;IACtC,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC;IAC7C,oEAAoE;IACpE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,GAAG,GAAG,EACjD,QAAQ,EAAE,eAAe,CAAC,QAAQ,CAAC,EACnC,OAAO,GAAE,2BAA2B,CAAC,QAAQ,CAAM,GAClD,oBAAoB,CAsDtB"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { createCommandPaletteController, matchPaletteHotkey, } from "@pixerate/editor/commands";
|
|
2
|
+
/**
|
|
3
|
+
* Reactive command palette state over a `CommandRegistry` (Svelte 5 runes): ranked rows
|
|
4
|
+
* with shortcuts and disabled reasons, active row and recents. Render it with
|
|
5
|
+
* `<CommandPalette palette={…} />` or your own markup. Call `destroy()` when done
|
|
6
|
+
* (e.g. in `onDestroy`).
|
|
7
|
+
*/
|
|
8
|
+
export function createCommandPalette(registry, options = {}) {
|
|
9
|
+
const controller = createCommandPaletteController(registry, options);
|
|
10
|
+
let state = $state.raw(controller.getState());
|
|
11
|
+
const unsubscribe = controller.subscribe((next) => {
|
|
12
|
+
state = next;
|
|
13
|
+
});
|
|
14
|
+
let removeHotkey = () => { };
|
|
15
|
+
const { hotkey } = options;
|
|
16
|
+
const target = options.hotkeyTarget ?? (typeof window !== "undefined" ? window : null);
|
|
17
|
+
if (hotkey && target) {
|
|
18
|
+
const onKeyDown = (event) => {
|
|
19
|
+
const e = event;
|
|
20
|
+
if (e.defaultPrevented || !matchPaletteHotkey(e, hotkey, options.platform))
|
|
21
|
+
return;
|
|
22
|
+
e.preventDefault();
|
|
23
|
+
controller.toggle();
|
|
24
|
+
};
|
|
25
|
+
target.addEventListener("keydown", onKeyDown);
|
|
26
|
+
removeHotkey = () => target.removeEventListener("keydown", onKeyDown);
|
|
27
|
+
}
|
|
28
|
+
return {
|
|
29
|
+
get open() {
|
|
30
|
+
return state.open;
|
|
31
|
+
},
|
|
32
|
+
get query() {
|
|
33
|
+
return state.query;
|
|
34
|
+
},
|
|
35
|
+
get activeIndex() {
|
|
36
|
+
return state.activeIndex;
|
|
37
|
+
},
|
|
38
|
+
get items() {
|
|
39
|
+
return state.items;
|
|
40
|
+
},
|
|
41
|
+
get recents() {
|
|
42
|
+
return state.recents;
|
|
43
|
+
},
|
|
44
|
+
get lastResult() {
|
|
45
|
+
return state.lastResult;
|
|
46
|
+
},
|
|
47
|
+
controller,
|
|
48
|
+
setOpen: controller.setOpen,
|
|
49
|
+
toggle: controller.toggle,
|
|
50
|
+
setQuery: controller.setQuery,
|
|
51
|
+
setActiveIndex: controller.setActiveIndex,
|
|
52
|
+
move: controller.move,
|
|
53
|
+
run: controller.run,
|
|
54
|
+
runActive: controller.runActive,
|
|
55
|
+
handleKeyDown: controller.handleKeyDown,
|
|
56
|
+
destroy() {
|
|
57
|
+
unsubscribe();
|
|
58
|
+
removeHotkey();
|
|
59
|
+
},
|
|
60
|
+
};
|
|
61
|
+
}
|