@nice2dev/ui-graphics 1.0.6 → 1.1.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/dist/cjs/animation/AnimationEditor.js +6 -6
- package/dist/cjs/animation/Audience.js +2 -2
- package/dist/cjs/core/LocalUI.js +5 -5
- package/dist/cjs/game/GameAsset2dEditor.js +20 -20
- package/dist/cjs/packages/ui/dist/NiceButton-D9l39Rs7.js +598 -0
- package/dist/cjs/packages/ui/dist/NiceButton-D9l39Rs7.js.map +1 -0
- package/dist/cjs/packages/ui/dist/NiceErrorBoundary-niMx1aSJ.js +647 -0
- package/dist/cjs/packages/ui/dist/NiceErrorBoundary-niMx1aSJ.js.map +1 -0
- package/dist/cjs/packages/ui/dist/NiceModuleLifecyclePanel-I_TXRiiY.js +5048 -0
- package/dist/cjs/packages/ui/dist/NiceModuleLifecyclePanel-I_TXRiiY.js.map +1 -0
- package/dist/cjs/packages/ui/dist/NicePinCodeInput-CrMfdxxc.js +13081 -0
- package/dist/cjs/packages/ui/dist/NicePinCodeInput-CrMfdxxc.js.map +1 -0
- package/dist/cjs/packages/ui/dist/NiceSavedQueryPanel-CUAsdOjJ.js +6054 -0
- package/dist/cjs/packages/ui/dist/NiceSavedQueryPanel-CUAsdOjJ.js.map +1 -0
- package/dist/cjs/packages/ui/dist/NiceToggle-CaY1u82g.js +280 -0
- package/dist/cjs/packages/ui/dist/NiceToggle-CaY1u82g.js.map +1 -0
- package/dist/cjs/packages/ui/dist/NiceWindow-SiCaREbq.js +806 -0
- package/dist/cjs/packages/ui/dist/NiceWindow-SiCaREbq.js.map +1 -0
- package/dist/cjs/packages/ui/dist/charts-Bx_kNBsE.js +3508 -0
- package/dist/cjs/packages/ui/dist/charts-Bx_kNBsE.js.map +1 -0
- package/dist/cjs/packages/ui/dist/core-BpghV7Ls.js +10249 -0
- package/dist/cjs/packages/ui/dist/core-BpghV7Ls.js.map +1 -0
- package/dist/cjs/packages/ui/dist/index-CIl98Vbm.js +40039 -0
- package/dist/cjs/packages/ui/dist/index-CIl98Vbm.js.map +1 -0
- package/dist/cjs/pixel/PixelEditor.js +5 -5
- package/dist/cjs/pixel/PixelEditorMenuBar.js +2 -2
- package/dist/cjs/pixel/PixelEditorRightPanel.js +5 -5
- package/dist/cjs/pixel/PixelEditorTimeline.js +3 -3
- package/dist/cjs/pixel/PixelEditorToolbar.js +2 -2
- package/dist/cjs/pixel/SpriteGeneratorPanel.js +10 -10
- package/dist/cjs/vector/VectorEditor.js +5 -5
- package/dist/cjs/vector/VectorEditorMenuBar.js +4 -4
- package/dist/cjs/vector/VectorEditorRightPanel.js +15 -15
- package/dist/esm/animation/AnimationEditor.js +2 -2
- package/dist/esm/animation/Audience.js +1 -1
- package/dist/esm/core/LocalUI.js +2 -2
- package/dist/esm/game/GameAsset2dEditor.js +2 -2
- package/dist/esm/packages/ui/dist/NiceButton-D9l39Rs7.js +593 -0
- package/dist/esm/packages/ui/dist/NiceButton-D9l39Rs7.js.map +1 -0
- package/dist/esm/packages/ui/dist/NiceErrorBoundary-niMx1aSJ.js +637 -0
- package/dist/esm/packages/ui/dist/NiceErrorBoundary-niMx1aSJ.js.map +1 -0
- package/dist/esm/packages/ui/dist/NiceModuleLifecyclePanel-I_TXRiiY.js +5007 -0
- package/dist/esm/packages/ui/dist/NiceModuleLifecyclePanel-I_TXRiiY.js.map +1 -0
- package/dist/esm/packages/ui/dist/NicePinCodeInput-CrMfdxxc.js +13011 -0
- package/dist/esm/packages/ui/dist/NicePinCodeInput-CrMfdxxc.js.map +1 -0
- package/dist/esm/packages/ui/dist/NiceSavedQueryPanel-CUAsdOjJ.js +6037 -0
- package/dist/esm/packages/ui/dist/NiceSavedQueryPanel-CUAsdOjJ.js.map +1 -0
- package/dist/esm/packages/ui/dist/NiceToggle-CaY1u82g.js +276 -0
- package/dist/esm/packages/ui/dist/NiceToggle-CaY1u82g.js.map +1 -0
- package/dist/esm/packages/ui/dist/NiceWindow-SiCaREbq.js +795 -0
- package/dist/esm/packages/ui/dist/NiceWindow-SiCaREbq.js.map +1 -0
- package/dist/esm/packages/ui/dist/charts-Bx_kNBsE.js +3483 -0
- package/dist/esm/packages/ui/dist/charts-Bx_kNBsE.js.map +1 -0
- package/dist/esm/packages/ui/dist/core-BpghV7Ls.js +10071 -0
- package/dist/esm/packages/ui/dist/core-BpghV7Ls.js.map +1 -0
- package/dist/esm/packages/ui/dist/index-CIl98Vbm.js +39917 -0
- package/dist/esm/packages/ui/dist/index-CIl98Vbm.js.map +1 -0
- package/dist/esm/pixel/PixelEditor.js +3 -3
- package/dist/esm/pixel/PixelEditorMenuBar.js +1 -1
- package/dist/esm/pixel/PixelEditorRightPanel.js +3 -3
- package/dist/esm/pixel/PixelEditorTimeline.js +2 -2
- package/dist/esm/pixel/PixelEditorToolbar.js +1 -1
- package/dist/esm/pixel/SpriteGeneratorPanel.js +3 -3
- package/dist/esm/vector/VectorEditor.js +3 -3
- package/dist/esm/vector/VectorEditorMenuBar.js +2 -2
- package/dist/esm/vector/VectorEditorRightPanel.js +3 -3
- package/package.json +1 -1
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var PixelEditor_module = require('./PixelEditor.module.css.js');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
6
|
+
var NiceButtonD9l39Rs7 = require('../packages/ui/dist/NiceButton-D9l39Rs7.js');
|
|
7
|
+
var NiceToggleCaY1u82g = require('../packages/ui/dist/NiceToggle-CaY1u82g.js');
|
|
8
|
+
var NiceErrorBoundaryNiMx1aSJ = require('../packages/ui/dist/NiceErrorBoundary-niMx1aSJ.js');
|
|
9
9
|
var usePixelEditor = require('./usePixelEditor.js');
|
|
10
10
|
var PixelEditorMenuBar = require('./PixelEditorMenuBar.js');
|
|
11
11
|
var PixelEditorToolbar = require('./PixelEditorToolbar.js');
|
|
@@ -28,10 +28,10 @@ const NicePixelEditor = ({ initialWidth = 64, initialHeight = 64, className, onS
|
|
|
28
28
|
if (f)
|
|
29
29
|
api.openFile(f);
|
|
30
30
|
e.target.value = "";
|
|
31
|
-
} }), jsxRuntime.jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.mainArea, children: [jsxRuntime.jsx(PixelEditorToolbar, { api: api }), jsxRuntime.jsx(PixelEditorCanvas, { api: api }), jsxRuntime.jsx(PixelEditorRightPanel, { api: api })] }), jsxRuntime.jsx(PixelEditorTimeline, { api: api }), jsxRuntime.jsx(PixelEditorStatusBar, { api: api }), showGenerator && (jsxRuntime.jsx(SpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxRuntime.jsxs(
|
|
31
|
+
} }), jsxRuntime.jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.mainArea, children: [jsxRuntime.jsx(PixelEditorToolbar, { api: api }), jsxRuntime.jsx(PixelEditorCanvas, { api: api }), jsxRuntime.jsx(PixelEditorRightPanel, { api: api })] }), jsxRuntime.jsx(PixelEditorTimeline, { api: api }), jsxRuntime.jsx(PixelEditorStatusBar, { api: api }), showGenerator && (jsxRuntime.jsx(SpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxRuntime.jsxs(NiceErrorBoundaryNiMx1aSJ.f, { open: api.dlgNew, onClose: () => api.setDlgNew(false), title: "New Document", children: [jsxRuntime.jsx("label", { children: "Width (px)" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { min: 1, max: 4096, value: api.nw, onChange: (val) => api.setNw(val !== null && val !== void 0 ? val : 64), "aria-label": "Document width" }), jsxRuntime.jsx("label", { children: "Height (px)" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { min: 1, max: 4096, value: api.nh, onChange: (val) => api.setNh(val !== null && val !== void 0 ? val : 64), "aria-label": "Document height" }), jsxRuntime.jsx("div", { style: { display: "flex", gap: 4, flexWrap: "wrap", marginTop: 8 }, children: [
|
|
32
32
|
[16, 16], [32, 32], [48, 48], [64, 64], [128, 128],
|
|
33
33
|
[256, 256], [16, 32], [32, 64], [48, 16], [64, 32],
|
|
34
|
-
].map(([w, h]) => (jsxRuntime.jsxs(
|
|
34
|
+
].map(([w, h]) => (jsxRuntime.jsxs(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.btnSecondary, variant: "ghost", size: "sm", style: { fontSize: 10, padding: "2px 6px" }, onClick: () => { api.setNw(w); api.setNh(h); }, children: [w, "x", h] }, `${w}x${h}`))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.dialogActions, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.btnSecondary, variant: "ghost", onClick: () => api.setDlgNew(false), children: "Cancel" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.btnPrimary, variant: "primary", onClick: () => api.newDoc(api.nw, api.nh), children: "Create" })] })] })] }));
|
|
35
35
|
};
|
|
36
36
|
/** @deprecated Use NicePixelEditor */
|
|
37
37
|
const PixelEditor = NicePixelEditor;
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var PixelEditor_module = require('./PixelEditor.module.css.js');
|
|
6
|
-
var
|
|
6
|
+
var NiceButtonD9l39Rs7 = require('../packages/ui/dist/NiceButton-D9l39Rs7.js');
|
|
7
7
|
|
|
8
|
-
const PixelEditorMenuBar = React.memo(({ api, hasOnSaveToLibrary, onOpenGenerator }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.menuBar, children: [jsxRuntime.jsx(
|
|
8
|
+
const PixelEditorMenuBar = React.memo(({ api, hasOnSaveToLibrary, onOpenGenerator }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.menuBar, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.setDlgNew(true), children: "New" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = api.fInp.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Open" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.exportAse, children: "Save .ase" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.exportPNG, children: "PNG" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.exportJPG, children: "JPG" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.exportWebP, children: "WebP" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.exportBMP, children: "BMP" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.exportSVG, children: "SVG" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.exportSheet, children: "Sheet" }), hasOnSaveToLibrary && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.saveToLibrary, children: "\uD83D\uDCE6 Save to Library" })] })), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, children: "Undo" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, children: "Redo" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.flipCv("h"), children: "Flip H" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.flipCv("v"), children: "Flip V" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.rotateCv, children: "Rot 90\u00B0" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.clearCv, children: "Clear" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsxs(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.setGrid((g) => !g), children: ["Grid: ", api.grid ? "ON" : "OFF"] }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.doCopy, disabled: !api.sel, children: "Copy" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.doCut, disabled: !api.sel, children: "Cut" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.doPaste, disabled: !api.clipboard.current, children: "Paste" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.doSelectAll, children: "Sel All" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: onOpenGenerator, children: "\uD83C\uDFA8 Generator" })] })));
|
|
9
9
|
PixelEditorMenuBar.displayName = "PixelEditorMenuBar";
|
|
10
10
|
|
|
11
11
|
module.exports = PixelEditorMenuBar;
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var PixelEditor_module = require('./PixelEditor.module.css.js');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
6
|
+
var NiceButtonD9l39Rs7 = require('../packages/ui/dist/NiceButton-D9l39Rs7.js');
|
|
7
|
+
var NicePinCodeInputCrMfdxxc = require('../packages/ui/dist/NicePinCodeInput-CrMfdxxc.js');
|
|
8
|
+
var NiceToggleCaY1u82g = require('../packages/ui/dist/NiceToggle-CaY1u82g.js');
|
|
9
9
|
var pixelEditorTypes = require('./pixelEditorTypes.js');
|
|
10
10
|
var HSVPicker = require('./HSVPicker.js');
|
|
11
11
|
|
|
12
|
-
const PixelEditorRightPanel = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Brush" }) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Size" }), jsxRuntime.jsx(
|
|
13
|
-
api.setEditingLayerName(null); }, autoFocus: true, "aria-label": "Layer name" })) : (jsxRuntime.jsx("span", { className: PixelEditor_module.layerName, onDoubleClick: (e) => { e.stopPropagation(); api.setEditingLayerName(l.id); }, children: l.name })), jsxRuntime.jsxs("span", { className: PixelEditor_module.layerOpacity, children: [Math.round((l.opacity / 255) * 100), "%"] })] }, l.id))), api.layers[api.aLi] && (jsxRuntime.jsxs("div", { className: PixelEditor_module.layerControls, children: [jsxRuntime.jsx(
|
|
12
|
+
const PixelEditorRightPanel = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Brush" }) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Size" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 1, max: 64, value: api.brush.size, onChange: (val) => api.setBrush((b) => ({ ...b, size: val })), "aria-label": "Brush size" }), jsxRuntime.jsx("span", { children: api.brush.size })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Opacity" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 1, max: 100, value: api.brush.opacity, onChange: (val) => api.setBrush((b) => ({ ...b, opacity: val })), "aria-label": "Brush opacity" }), jsxRuntime.jsxs("span", { children: [api.brush.opacity, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Flow" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 1, max: 100, value: api.brush.flow, onChange: (val) => api.setBrush((b) => ({ ...b, flow: val })), "aria-label": "Brush flow" }), jsxRuntime.jsxs("span", { children: [api.brush.flow, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Hard" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 0, max: 100, value: api.brush.hardness, onChange: (val) => api.setBrush((b) => ({ ...b, hardness: val })), "aria-label": "Brush hardness" }), jsxRuntime.jsxs("span", { children: [api.brush.hardness, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Space" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 1, max: 100, value: api.brush.spacing, onChange: (val) => api.setBrush((b) => ({ ...b, spacing: val })), "aria-label": "Brush spacing" }), jsxRuntime.jsxs("span", { children: [api.brush.spacing, "%"] })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.brushShapes, children: pixelEditorTypes.BRUSH_SHAPES.map((s) => (jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${PixelEditor_module.miniBtn} ${api.brush.shape === s.id ? PixelEditor_module.miniBtnActive : ""}`, variant: api.brush.shape === s.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setBrush((b) => ({ ...b, shape: s.id })), title: s.label, children: s.icon }, s.id))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.pressureToggles, children: [jsxRuntime.jsx(NiceToggleCaY1u82g.N, { checked: api.brush.pressureSize, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureSize: checked })), label: "Pressure\u2192Size", className: PixelEditor_module.checkLabel }), jsxRuntime.jsx(NiceToggleCaY1u82g.N, { checked: api.brush.pressureOpacity, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureOpacity: checked })), label: "Pressure\u2192Opacity", className: PixelEditor_module.checkLabel })] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.panelTitle, children: [jsxRuntime.jsx("span", { children: "Colour" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: () => api.setShowHSV(!api.showHSV), title: "Toggle HSV Picker", children: api.showHSV ? "▾" : "▸" })] }), api.showHSV && jsxRuntime.jsx(HSVPicker.HSVPicker, { color: api.col1, onChange: api.setCol1 })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.panelTitle, children: [jsxRuntime.jsx("span", { children: "Layers" }), jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: api.addLayer, title: "Add Layer", "aria-label": "Add Layer", children: "+" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: api.dupLayer, title: "Duplicate Layer", "aria-label": "Duplicate Layer", children: "\u29C9" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: api.rmLayer, title: "Remove Layer", "aria-label": "Remove Layer", children: "\u2212" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: api.mergeDown, title: "Merge Down", "aria-label": "Merge Down", children: "\u2913" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: api.moveLayerUp, title: "Move Up", "aria-label": "Move Up", children: "\u2191" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: api.moveLayerDown, title: "Move Down", "aria-label": "Move Down", children: "\u2193" })] })] }), [...api.layers].map((l, i) => ({ l, i })).reverse().map(({ l, i }) => (jsxRuntime.jsxs("div", { className: `${PixelEditor_module.layerItem} ${i === api.aLi ? PixelEditor_module.layerItemActive : ""}`, onClick: () => api.setALi(i), children: [jsxRuntime.jsx("span", { className: PixelEditor_module.layerVis, onClick: (e) => { e.stopPropagation(); api.toggleVis(i); }, children: l.visible ? "👁" : "─" }), jsxRuntime.jsx("span", { className: PixelEditor_module.layerLock, onClick: (e) => { e.stopPropagation(); api.toggleLock(i); }, title: l.locked ? "Locked" : "Unlocked", children: l.locked ? "🔒" : "🔓" }), api.editingLayerName === l.id ? (jsxRuntime.jsx(NiceButtonD9l39Rs7.b, { className: PixelEditor_module.layerNameInput, value: l.name, onChange: (val) => api.renameLayer(i, val), onBlur: () => api.setEditingLayerName(null), onKeyDown: (e) => { if (e.key === "Enter")
|
|
13
|
+
api.setEditingLayerName(null); }, autoFocus: true, "aria-label": "Layer name" })) : (jsxRuntime.jsx("span", { className: PixelEditor_module.layerName, onDoubleClick: (e) => { e.stopPropagation(); api.setEditingLayerName(l.id); }, children: l.name })), jsxRuntime.jsxs("span", { className: PixelEditor_module.layerOpacity, children: [Math.round((l.opacity / 255) * 100), "%"] })] }, l.id))), api.layers[api.aLi] && (jsxRuntime.jsxs("div", { className: PixelEditor_module.layerControls, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.a, { value: api.layers[api.aLi].blendMode, onChange: (val) => api.setLayerBlendMode(api.aLi, val), className: PixelEditor_module.blendSelect, "aria-label": "Blend mode", options: pixelEditorTypes.BLEND_MODES.map((m) => ({ value: m, label: m })) }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 0, max: 255, value: api.layers[api.aLi].opacity, onChange: (val) => api.setLayerOpacity(api.aLi, val), className: PixelEditor_module.layerOpSlider, title: `Opacity: ${Math.round((api.layers[api.aLi].opacity / 255) * 100)}%` })] }))] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.panelTitle, children: [jsxRuntime.jsx("span", { children: "Palette" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: () => { if (!api.pal.includes(api.col1))
|
|
14
14
|
api.setPal((p) => [...p, api.col1]); }, title: "Add current colour", children: "+" })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.paletteGrid, children: api.pal.map((c, i) => (jsxRuntime.jsx("div", { className: `${PixelEditor_module.paletteSwatch} ${c === api.col1 ? PixelEditor_module.paletteSwatchActive : ""}`, style: { backgroundColor: c }, onClick: () => api.setCol1(c), onContextMenu: (e) => { e.preventDefault(); api.setCol2(c); }, title: c }, i))) })] })] })));
|
|
15
15
|
PixelEditorRightPanel.displayName = "PixelEditorRightPanel";
|
|
16
16
|
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var PixelEditor_module = require('./PixelEditor.module.css.js');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
6
|
+
var NiceButtonD9l39Rs7 = require('../packages/ui/dist/NiceButton-D9l39Rs7.js');
|
|
7
|
+
var NiceToggleCaY1u82g = require('../packages/ui/dist/NiceToggle-CaY1u82g.js');
|
|
8
8
|
|
|
9
|
-
const PixelEditorTimeline = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.bottomPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.timelineControls, children: [jsxRuntime.jsx(
|
|
9
|
+
const PixelEditorTimeline = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.bottomPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.timelineControls, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: api.addFrame, children: "+ Frame" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: api.dupFrame, "aria-label": "Duplicate frame", children: "Dup" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: api.rmFrame, "aria-label": "Remove frame", children: "\u2212 Frame" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", size: "sm", onClick: () => api.setPlaying((p) => !p), children: api.playing ? "⏸" : "▶" }), jsxRuntime.jsx("label", { children: "FPS:" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { min: 1, max: 60, value: api.fps, onChange: (val) => api.setFps(val !== null && val !== void 0 ? val : 8), "aria-label": "Frames per second" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(NiceToggleCaY1u82g.N, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: "Onion" }), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.jsxs("span", { children: [api.fc, " frame", api.fc !== 1 ? "s" : ""] })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxRuntime.jsxs("div", { className: `${PixelEditor_module.frameThumb} ${fi === api.afi ? PixelEditor_module.frameThumbActive : ""}`, onClick: () => api.setAfi(fi), children: [api.thumbs[fi] && (jsxRuntime.jsx("img", { src: api.thumbs[fi], alt: `Frame ${fi + 1}`, style: { width: 36, height: 36, imageRendering: "pixelated", objectFit: "contain" } })), jsxRuntime.jsx("span", { className: PixelEditor_module.frameNum, children: fi + 1 })] }, fi))) })] })));
|
|
10
10
|
PixelEditorTimeline.displayName = "PixelEditorTimeline";
|
|
11
11
|
|
|
12
12
|
module.exports = PixelEditorTimeline;
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var PixelEditor_module = require('./PixelEditor.module.css.js');
|
|
6
|
-
var
|
|
6
|
+
var NiceButtonD9l39Rs7 = require('../packages/ui/dist/NiceButton-D9l39Rs7.js');
|
|
7
7
|
var pixelEditorTypes = require('./pixelEditorTypes.js');
|
|
8
8
|
|
|
9
|
-
const PixelEditorToolbar = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.toolbar, children: [pixelEditorTypes.TOOLS.map((t) => (jsxRuntime.jsx(
|
|
9
|
+
const PixelEditorToolbar = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.toolbar, children: [pixelEditorTypes.TOOLS.map((t) => (jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${PixelEditor_module.toolBtn} ${api.tool === t.id ? PixelEditor_module.toolBtnActive : ""}`, variant: api.tool === t.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTool(t.id), title: `${t.label} (${t.key})`, children: t.icon }, t.id))), jsxRuntime.jsx("div", { className: PixelEditor_module.toolSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${PixelEditor_module.toolBtn} ${api.shapeFilled ? PixelEditor_module.toolBtnActive : ""}`, variant: api.shapeFilled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShapeFilled((f) => !f), title: `${api.shapeFilled ? "Filled" : "Outline"} (F)`, children: api.shapeFilled ? "■" : "□" }), jsxRuntime.jsx("div", { className: PixelEditor_module.toolGroup, children: pixelEditorTypes.SYMMETRY_MODES.map((m) => (jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${PixelEditor_module.miniBtn} ${api.symmetry === m.id ? PixelEditor_module.miniBtnActive : ""}`, variant: api.symmetry === m.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSymmetry(m.id), title: `Symmetry: ${m.label}`, children: m.label.slice(0, 2) }, m.id))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.colorSwatches, children: [jsxRuntime.jsx("label", { style: { position: "relative", width: 28, height: 28, cursor: "pointer" }, title: "Primary Colour (click for HSV)", children: jsxRuntime.jsx(NiceButtonD9l39Rs7.N, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsxRuntime.jsx("label", { style: { position: "relative", width: 22, height: 22, cursor: "pointer" }, title: "Secondary Colour", children: jsxRuntime.jsx(NiceButtonD9l39Rs7.N, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => {
|
|
10
10
|
const tmp = api.col1;
|
|
11
11
|
api.setCol1(api.col2);
|
|
12
12
|
api.setCol2(tmp);
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var PixelEditor_module = require('./PixelEditor.module.css.js');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
6
|
+
var NiceButtonD9l39Rs7 = require('../packages/ui/dist/NiceButton-D9l39Rs7.js');
|
|
7
|
+
var NiceToggleCaY1u82g = require('../packages/ui/dist/NiceToggle-CaY1u82g.js');
|
|
8
|
+
var NiceErrorBoundaryNiMx1aSJ = require('../packages/ui/dist/NiceErrorBoundary-niMx1aSJ.js');
|
|
9
9
|
var spriteGeneratorCore = require('./spriteGeneratorCore.js');
|
|
10
10
|
var characterGeneratorPresets = require('./characterGeneratorPresets.js');
|
|
11
11
|
var buildingGeneratorPresets = require('./buildingGeneratorPresets.js');
|
|
@@ -199,26 +199,26 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, }) => {
|
|
|
199
199
|
}
|
|
200
200
|
}, [tab, skinPalette, hairPalette, clothPalette, wallPalette, roofPalette, furPalette]);
|
|
201
201
|
/* ── Render ── */
|
|
202
|
-
return (jsxRuntime.jsx(
|
|
202
|
+
return (jsxRuntime.jsx(NiceErrorBoundaryNiMx1aSJ.f, { open: true, onClose: onClose, title: "Sprite Generator", children: jsxRuntime.jsxs("div", { className: PixelEditor_module.genPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.genHeader, children: [jsxRuntime.jsx("h3", { children: "Sprite Generator" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.btnIcon, variant: "ghost", size: "sm", onClick: onClose, title: "Close", children: "\u2715" })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.genTabs, children: ['character', 'building', 'animal'].map(t => (jsxRuntime.jsxs(NiceButtonD9l39Rs7.c, { className: `${PixelEditor_module.genTabBtn} ${tab === t ? PixelEditor_module.genTabBtnActive : ''}`, variant: tab === t ? 'primary' : 'ghost', size: "sm", onClick: () => setTab(t), children: [t === 'character' ? '🧑' : t === 'building' ? '🏠' : '🐾', ' ', t.charAt(0).toUpperCase() + t.slice(1)] }, t))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genBody, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.genLeft, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Presets" }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.genPresetGrid, children: presets.map((preset, i) => (jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${PixelEditor_module.genPresetBtn} ${i === selectedPresetIdx ? PixelEditor_module.genPresetBtnActive : ''}`, variant: i === selectedPresetIdx ? 'primary' : 'ghost', size: "sm", onClick: () => applyPreset(i), title: preset.name, children: preset.name }, i))) })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, style: { flex: 1, overflowY: 'auto' }, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Parts" }) }), categories.map(cat => {
|
|
203
203
|
const parts = spriteGeneratorCore.getPartsByCategory(cat);
|
|
204
204
|
if (parts.length === 0)
|
|
205
205
|
return null;
|
|
206
206
|
return (jsxRuntime.jsxs("div", { style: { marginBottom: 6 }, children: [jsxRuntime.jsx("div", { style: { fontSize: 9, color: 'var(--gray-600)', marginBottom: 2, textTransform: 'uppercase' }, children: cat.replace(/([A-Z])/g, ' $1').trim() }), jsxRuntime.jsx("div", { className: PixelEditor_module.genPartGrid, children: parts.map(part => {
|
|
207
207
|
const active = selectedParts.some(p => { var _a; return p.partId === part.id && ((_a = p.visible) !== null && _a !== void 0 ? _a : true); });
|
|
208
|
-
return (jsxRuntime.jsx(
|
|
208
|
+
return (jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${PixelEditor_module.miniBtn} ${active ? PixelEditor_module.miniBtnActive : ''}`, variant: active ? 'primary' : 'ghost', size: "sm", onClick: () => active ? removePart(part.id) : addPart(part.id), title: part.name, children: part.name.slice(0, 8) }, part.id));
|
|
209
209
|
}) })] }, cat));
|
|
210
|
-
})] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genCenter, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.genPreviewWrap, children: jsxRuntime.jsx("canvas", { ref: previewRef, className: PixelEditor_module.genPreviewCanvas }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.genDirGrid, children: spriteGeneratorCore.ALL_DIRECTIONS.map(d => (jsxRuntime.jsx(
|
|
210
|
+
})] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genCenter, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.genPreviewWrap, children: jsxRuntime.jsx("canvas", { ref: previewRef, className: PixelEditor_module.genPreviewCanvas }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.genDirGrid, children: spriteGeneratorCore.ALL_DIRECTIONS.map(d => (jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${PixelEditor_module.miniBtn} ${direction === d ? PixelEditor_module.miniBtnActive : ''}`, variant: direction === d ? 'primary' : 'ghost', size: "sm", onClick: () => setDirection(d), children: d }, d))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genRow, children: [jsxRuntime.jsx("label", { style: { fontSize: 10, color: 'var(--gray-600)' }, children: "Projection" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.a, { className: PixelEditor_module.propSelect, value: projection, onChange: val => setProjection(val), options: [
|
|
211
211
|
{ value: 'topDown', label: 'Top-Down' },
|
|
212
212
|
{ value: 'sideView', label: 'Side View' },
|
|
213
213
|
{ value: 'iso25d', label: '2.5D Isometric' },
|
|
214
|
-
] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genRow, children: [jsxRuntime.jsx("label", { style: { fontSize: 10, color: 'var(--gray-600)' }, children: "Size" }), jsxRuntime.jsx(
|
|
214
|
+
] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genRow, children: [jsxRuntime.jsx("label", { style: { fontSize: 10, color: 'var(--gray-600)' }, children: "Size" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: PixelEditor_module.propInput, style: { width: 48 }, min: 8, max: 256, value: canvasW, onChange: val => setCanvasW(val !== null && val !== void 0 ? val : 32) }), jsxRuntime.jsx("span", { style: { fontSize: 10, color: 'var(--gray-600)' }, children: "\u00D7" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: PixelEditor_module.propInput, style: { width: 48 }, min: 8, max: 256, value: canvasH, onChange: val => setCanvasH(val !== null && val !== void 0 ? val : 32) })] }), jsxRuntime.jsx(NiceToggleCaY1u82g.N, { checked: generate8Dir, onChange: checked => setGenerate8Dir(checked), label: "Generate 8-direction sheet", className: PixelEditor_module.checkLabel })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genRight, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Colors" }) }), paletteGroups.map(group => {
|
|
215
215
|
var _a;
|
|
216
|
-
return (jsxRuntime.jsxs("div", { style: { marginBottom: 6 }, children: [jsxRuntime.jsx("div", { style: { fontSize: 9, color: 'var(--gray-600)', marginBottom: 2 }, children: group.label }), jsxRuntime.jsx(
|
|
216
|
+
return (jsxRuntime.jsxs("div", { style: { marginBottom: 6 }, children: [jsxRuntime.jsx("div", { style: { fontSize: 9, color: 'var(--gray-600)', marginBottom: 2 }, children: group.label }), jsxRuntime.jsx(NiceButtonD9l39Rs7.a, { className: PixelEditor_module.propSelect, value: group.value, onChange: val => group.set(val), options: group.options.map(opt => ({ value: opt.id, label: opt.name })) }), jsxRuntime.jsx("div", { className: PixelEditor_module.genColorSwatches, children: (_a = group.options.find(o => o.id === group.value)) === null || _a === void 0 ? void 0 : _a.colors.map((c, i) => (jsxRuntime.jsx("div", { className: PixelEditor_module.genColorSwatch, style: { backgroundColor: c }, title: c }, i))) })] }, group.label));
|
|
217
217
|
})] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.panelSection, style: { flex: 1, overflowY: 'auto' }, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Assembly" }) }), selectedParts.map((ap, i) => {
|
|
218
218
|
var _a, _b, _c, _d;
|
|
219
219
|
const part = partsMapRef.current.get(ap.partId);
|
|
220
|
-
return (jsxRuntime.jsxs("div", { className: PixelEditor_module.genAssemblyItem, children: [jsxRuntime.jsx(
|
|
221
|
-
})] })] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genFooter, children: [jsxRuntime.jsx(
|
|
220
|
+
return (jsxRuntime.jsxs("div", { className: PixelEditor_module.genAssemblyItem, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.btnIcon, variant: "ghost", size: "sm", onClick: () => togglePart(ap.partId), title: ((_a = ap.visible) !== null && _a !== void 0 ? _a : true) ? 'Hide' : 'Show', children: ((_b = ap.visible) !== null && _b !== void 0 ? _b : true) ? '👁' : '─' }), jsxRuntime.jsx("span", { className: PixelEditor_module.genAssemblyName, children: (_c = part === null || part === void 0 ? void 0 : part.name) !== null && _c !== void 0 ? _c : ap.partId }), jsxRuntime.jsxs("span", { style: { fontSize: 9, color: 'var(--gray-700)' }, children: ["z:", (_d = part === null || part === void 0 ? void 0 : part.zOrder) !== null && _d !== void 0 ? _d : 0] }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.btnIcon, variant: "ghost", size: "sm", onClick: () => removePart(ap.partId), title: "Remove", children: "\u2715" })] }, ap.partId));
|
|
221
|
+
})] })] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genFooter, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.btnSecondary, variant: "ghost", onClick: onClose, children: "Cancel" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: PixelEditor_module.btnPrimary, variant: "primary", onClick: handleSendToCanvas, children: "\uD83D\uDCCB Send to Canvas" })] })] }) }));
|
|
222
222
|
};
|
|
223
223
|
NiceSpriteGeneratorPanel.displayName = 'NiceSpriteGeneratorPanel';
|
|
224
224
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
4
|
+
var NiceButtonD9l39Rs7 = require('../packages/ui/dist/NiceButton-D9l39Rs7.js');
|
|
5
|
+
var NicePinCodeInputCrMfdxxc = require('../packages/ui/dist/NicePinCodeInput-CrMfdxxc.js');
|
|
6
|
+
var NiceErrorBoundaryNiMx1aSJ = require('../packages/ui/dist/NiceErrorBoundary-niMx1aSJ.js');
|
|
7
7
|
var VectorEditor_module = require('./VectorEditor.module.css.js');
|
|
8
8
|
var vectorEditorTypes = require('./vectorEditorTypes.js');
|
|
9
9
|
var VectorEditorShapeRenderer = require('./VectorEditorShapeRenderer.js');
|
|
@@ -21,13 +21,13 @@ const NiceVectorEditor = ({ width: artW = 512, height: artH = 512, className, on
|
|
|
21
21
|
if (f)
|
|
22
22
|
openFile(f);
|
|
23
23
|
e.target.value = "";
|
|
24
|
-
} }), jsxRuntime.jsx(VectorEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary }), jsxRuntime.jsxs("div", { className: VectorEditor_module.mainArea, children: [jsxRuntime.jsx("div", { className: VectorEditor_module.toolbar, children: vectorEditorTypes.TOOLS.map((t) => (jsxRuntime.jsx(
|
|
24
|
+
} }), jsxRuntime.jsx(VectorEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary }), jsxRuntime.jsxs("div", { className: VectorEditor_module.mainArea, children: [jsxRuntime.jsx("div", { className: VectorEditor_module.toolbar, children: vectorEditorTypes.TOOLS.map((t) => (jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${VectorEditor_module.toolBtn} ${tool === t.id ? VectorEditor_module.toolBtnActive : ""}`, onClick: () => switchTool(t.id), "aria-label": `${t.label} (${t.key})`, variant: tool === t.id ? "primary" : "ghost", size: "sm", children: t.icon }, t.id))) }), jsxRuntime.jsx("div", { ref: boxRef, className: VectorEditor_module.canvasContainer, children: jsxRuntime.jsxs("svg", { viewBox: `0 0 ${artW} ${artH}`, onMouseDown: onDown, onMouseMove: onMove, onMouseUp: onUp, onMouseLeave: () => {
|
|
25
25
|
/* handled internally via refs */
|
|
26
26
|
}, onDoubleClick: onDblClick, onWheel: onWheel, onContextMenu: (e) => e.preventDefault(), style: {
|
|
27
27
|
transform: `translate(${px}px, ${py}px) scale(${zoom})`,
|
|
28
28
|
transformOrigin: "center center",
|
|
29
29
|
cursor: tool === "pointer" ? "default" : "crosshair",
|
|
30
|
-
}, children: [jsxRuntime.jsx("rect", { x: 0, y: 0, width: artW, height: artH, fill: "#222" }), zoom >= 2 && (jsxRuntime.jsxs("g", { opacity: 0.08, children: [Array.from({ length: Math.floor(artW / gridSize) + 1 }, (_, i) => (jsxRuntime.jsx("line", { x1: i * gridSize, y1: 0, x2: i * gridSize, y2: artH, stroke: "#fff", strokeWidth: 1 / zoom }, `gx${i}`))), Array.from({ length: Math.floor(artH / gridSize) + 1 }, (_, i) => (jsxRuntime.jsx("line", { x1: 0, y1: i * gridSize, x2: artW, y2: i * gridSize, stroke: "#fff", strokeWidth: 1 / zoom }, `gy${i}`)))] })), shapes.map((s) => (jsxRuntime.jsx(VectorEditorShapeRenderer.ShapeRenderer, { shape: s, selected: s.id === selId, zoom: zoom }, s.id)))] }) }), jsxRuntime.jsx(VectorEditorRightPanel, { api: api })] }), jsxRuntime.jsx(VectorEditorStatusBar, { api: api, artW: artW, artH: artH }), jsxRuntime.jsxs(
|
|
30
|
+
}, children: [jsxRuntime.jsx("rect", { x: 0, y: 0, width: artW, height: artH, fill: "#222" }), zoom >= 2 && (jsxRuntime.jsxs("g", { opacity: 0.08, children: [Array.from({ length: Math.floor(artW / gridSize) + 1 }, (_, i) => (jsxRuntime.jsx("line", { x1: i * gridSize, y1: 0, x2: i * gridSize, y2: artH, stroke: "#fff", strokeWidth: 1 / zoom }, `gx${i}`))), Array.from({ length: Math.floor(artH / gridSize) + 1 }, (_, i) => (jsxRuntime.jsx("line", { x1: 0, y1: i * gridSize, x2: artW, y2: i * gridSize, stroke: "#fff", strokeWidth: 1 / zoom }, `gy${i}`)))] })), shapes.map((s) => (jsxRuntime.jsx(VectorEditorShapeRenderer.ShapeRenderer, { shape: s, selected: s.id === selId, zoom: zoom }, s.id)))] }) }), jsxRuntime.jsx(VectorEditorRightPanel, { api: api })] }), jsxRuntime.jsx(VectorEditorStatusBar, { api: api, artW: artW, artH: artH }), jsxRuntime.jsxs(NiceErrorBoundaryNiMx1aSJ.f, { open: dlgSvg, onClose: () => setDlgSvg(false), title: "Paste SVG", children: [jsxRuntime.jsx("label", { children: "Paste SVG source code below:" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.X, { value: svgText, onChange: (val) => setSvgText(val), placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...>' }), jsxRuntime.jsxs("div", { className: VectorEditor_module.dialogActions, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "ghost", onClick: () => setDlgSvg(false), children: "Cancel" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { variant: "primary", onClick: () => importSVGString(svgText), children: "Import" })] })] })] }));
|
|
31
31
|
};
|
|
32
32
|
/** @deprecated Use NiceVectorEditor */
|
|
33
33
|
const VectorEditor = NiceVectorEditor;
|
|
@@ -2,18 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var
|
|
6
|
-
var
|
|
5
|
+
var NiceButtonD9l39Rs7 = require('../packages/ui/dist/NiceButton-D9l39Rs7.js');
|
|
6
|
+
var NiceToggleCaY1u82g = require('../packages/ui/dist/NiceToggle-CaY1u82g.js');
|
|
7
7
|
var VectorEditor_module = require('./VectorEditor.module.css.js');
|
|
8
8
|
|
|
9
9
|
const VectorEditorMenuBar = ({ api, hasOnSaveToLibrary }) => {
|
|
10
10
|
const { selId, hasClipboard, snapGrid, fInp, shapes, boolSecondShape, newCanvas, setDlgSvg, setBoolSecondShape, exportSVG, exportPNG, exportJPG, exportWebP, exportBMP, undo, redo, duplicateShape, copyShape, pasteShape, deleteShape, bringToFront, sendToBack, flipH, flipV, alignShapes, setSnapGrid, saveToLibrary, unionShapes, subtractShapes, intersectShapes, excludeShapes, outlineStroke, } = api;
|
|
11
11
|
// Check if we can perform boolean ops (need 2 shapes selected)
|
|
12
12
|
const canBool = selId && boolSecondShape && selId !== boolSecondShape;
|
|
13
|
-
return (jsxRuntime.jsxs("div", { className: VectorEditor_module.menuBar, children: [jsxRuntime.jsx(
|
|
13
|
+
return (jsxRuntime.jsxs("div", { className: VectorEditor_module.menuBar, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: newCanvas, children: "New" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fInp.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Open SVG" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => setDlgSvg(true), children: "Paste SVG" }), jsxRuntime.jsx("div", { className: VectorEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: exportSVG, children: "SVG" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: exportPNG, children: "PNG" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: exportJPG, children: "JPG" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: exportWebP, children: "WebP" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: exportBMP, children: "BMP" }), jsxRuntime.jsx("div", { className: VectorEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: undo, children: "Undo" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: redo, children: "Redo" }), jsxRuntime.jsx("div", { className: VectorEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: duplicateShape, disabled: !selId, "aria-label": "Ctrl+D", children: "Dup" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: copyShape, disabled: !selId, "aria-label": "Ctrl+C", children: "Copy" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: pasteShape, disabled: !hasClipboard, "aria-label": "Ctrl+V", children: "Paste" }), jsxRuntime.jsx("div", { className: VectorEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: deleteShape, disabled: !selId, children: "Delete" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: bringToFront, disabled: !selId, children: "\u2191 Front" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: sendToBack, disabled: !selId, children: "\u2193 Back" }), jsxRuntime.jsx("div", { className: VectorEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: flipH, disabled: !selId, "aria-label": "Flip H", children: "\u21D4" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: flipV, disabled: !selId, "aria-label": "Flip V", children: "\u21D5" }), jsxRuntime.jsx("div", { className: VectorEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("left"), disabled: !selId, "aria-label": "Align Left", children: "\u25E7" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("center"), disabled: !selId, "aria-label": "Align Center", children: "\u25EB" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("right"), disabled: !selId, "aria-label": "Align Right", children: "\u25E8" }), jsxRuntime.jsx("div", { className: VectorEditor_module.menuSep }), shapes.length >= 2 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.a, { className: VectorEditor_module.menuBtn, value: boolSecondShape || "", onChange: (val) => setBoolSecondShape(val || null), options: [
|
|
14
14
|
{ value: "", label: "2nd Shape" },
|
|
15
15
|
...shapes.filter(s => s.id !== selId).map((s, i) => ({ value: s.id, label: `Shape ${i + 1}` })),
|
|
16
|
-
], style: { minWidth: 80 } }), jsxRuntime.jsx(
|
|
16
|
+
], style: { minWidth: 80 } }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: unionShapes, disabled: !canBool, "aria-label": "Union", children: "\u222A" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: subtractShapes, disabled: !canBool, "aria-label": "Subtract", children: "\u2212" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: intersectShapes, disabled: !canBool, "aria-label": "Intersect", children: "\u2229" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: excludeShapes, disabled: !canBool, "aria-label": "Exclude", children: "\u2295" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: outlineStroke, disabled: !selId, "aria-label": "Outline Stroke", children: "\u25AD" }), jsxRuntime.jsx("div", { className: VectorEditor_module.menuSep })] })), jsxRuntime.jsxs("label", { className: VectorEditor_module.menuLabel, children: [jsxRuntime.jsx(NiceToggleCaY1u82g.N, { checked: snapGrid, onChange: () => setSnapGrid((v) => !v) }), "Snap"] }), hasOnSaveToLibrary && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: VectorEditor_module.menuSep }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: saveToLibrary, children: "\uD83D\uDCE6 Save to Library" })] }))] }));
|
|
17
17
|
};
|
|
18
18
|
var VectorEditorMenuBar$1 = React.memo(VectorEditorMenuBar);
|
|
19
19
|
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
5
|
+
var NiceButtonD9l39Rs7 = require('../packages/ui/dist/NiceButton-D9l39Rs7.js');
|
|
6
|
+
var NicePinCodeInputCrMfdxxc = require('../packages/ui/dist/NicePinCodeInput-CrMfdxxc.js');
|
|
7
|
+
var NiceToggleCaY1u82g = require('../packages/ui/dist/NiceToggle-CaY1u82g.js');
|
|
8
8
|
var VectorEditor_module = require('./VectorEditor.module.css.js');
|
|
9
9
|
var vectorEditorTypes = require('./vectorEditorTypes.js');
|
|
10
10
|
var vectorGradients = require('./vectorGradients.js');
|
|
@@ -25,14 +25,14 @@ const VectorEditorRightPanel = ({ api }) => {
|
|
|
25
25
|
// Store gradient data as custom property (will be used in SVG export)
|
|
26
26
|
});
|
|
27
27
|
};
|
|
28
|
-
return (jsxRuntime.jsxs("div", { className: VectorEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: VectorEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: VectorEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Appearance" }) }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Fill" }), jsxRuntime.jsxs("div", { style: { display: "flex", gap: 4 }, children: [jsxRuntime.jsx(
|
|
28
|
+
return (jsxRuntime.jsxs("div", { className: VectorEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: VectorEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: VectorEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Appearance" }) }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Fill" }), jsxRuntime.jsxs("div", { style: { display: "flex", gap: 4 }, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${VectorEditor_module.menuBtn} ${fillMode === "solid" ? VectorEditor_module.menuBtnActive : ""}`, style: { padding: "2px 6px", fontSize: 10 }, variant: fillMode === "solid" ? "primary" : "ghost", size: "sm", onClick: () => setFillMode("solid"), children: "Solid" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: `${VectorEditor_module.menuBtn} ${fillMode === "gradient" ? VectorEditor_module.menuBtnActive : ""}`, style: { padding: "2px 6px", fontSize: 10 }, variant: fillMode === "gradient" ? "primary" : "ghost", size: "sm", onClick: () => setFillMode("gradient"), children: "Gradient" })] })] }), fillMode === "solid" ? (jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel }), jsxRuntime.jsx("div", { className: VectorEditor_module.propColorSwatch, style: { background: fillCol }, children: jsxRuntime.jsx(NiceButtonD9l39Rs7.N, { value: fillCol, onChange: (c) => { setFillCol(c); updateSel({ fill: c }); } }) }), jsxRuntime.jsx(NiceButtonD9l39Rs7.b, { className: VectorEditor_module.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.fill) || fillCol, onChange: (val) => { setFillCol(val); updateSel({ fill: val }); } })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: VectorEditor_module.propRow, style: { flexWrap: "wrap", gap: 4 }, children: vectorGradients.PRESET_GRADIENTS.map((grad, i) => (jsxRuntime.jsx("div", { style: {
|
|
29
29
|
width: 24,
|
|
30
30
|
height: 24,
|
|
31
31
|
borderRadius: 4,
|
|
32
32
|
background: vectorGradients.gradientToCSS(grad),
|
|
33
33
|
cursor: "pointer",
|
|
34
34
|
border: (selectedGradient === null || selectedGradient === void 0 ? void 0 : selectedGradient.id) === grad.id ? "2px solid #fff" : "1px solid #444",
|
|
35
|
-
}, onClick: () => applyGradient(grad), title: `${grad.type} gradient` }, i))) }), jsxRuntime.jsx("div", { className: VectorEditor_module.propRow, children: jsxRuntime.jsx(
|
|
35
|
+
}, onClick: () => applyGradient(grad), title: `${grad.type} gradient` }, i))) }), jsxRuntime.jsx("div", { className: VectorEditor_module.propRow, children: jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", style: { width: "100%", fontSize: 10 }, onClick: () => setShowGradientEditor(!showGradientEditor), children: showGradientEditor ? "▼ Hide Editor" : "► Edit Gradient" }) }), showGradientEditor && selectedGradient && (jsxRuntime.jsxs("div", { style: { padding: 4, background: "#252525", borderRadius: 4, margin: "4px 0" }, children: [jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Type" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.a, { className: VectorEditor_module.propInput, value: selectedGradient.type, onChange: (val) => {
|
|
36
36
|
const type = val;
|
|
37
37
|
let newGrad;
|
|
38
38
|
if (type === "linear") {
|
|
@@ -58,7 +58,7 @@ const VectorEditorRightPanel = ({ api }) => {
|
|
|
58
58
|
}, options: [
|
|
59
59
|
{ value: "linear", label: "Linear" },
|
|
60
60
|
{ value: "radial", label: "Radial" },
|
|
61
|
-
] })] }), selectedGradient.type === "linear" && (jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Angle" }), jsxRuntime.jsx(
|
|
61
|
+
] })] }), selectedGradient.type === "linear" && (jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Angle" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { className: VectorEditor_module.propInput, min: 0, max: 360, value: selectedGradient.angle, onChange: (val) => {
|
|
62
62
|
const newGrad = {
|
|
63
63
|
...selectedGradient,
|
|
64
64
|
id: vectorGradients.gradientId(),
|
|
@@ -66,7 +66,7 @@ const VectorEditorRightPanel = ({ api }) => {
|
|
|
66
66
|
};
|
|
67
67
|
setSelectedGradient(newGrad);
|
|
68
68
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
69
|
-
} }), jsxRuntime.jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [selectedGradient.angle, "\u00B0"] })] })), selectedGradient.type === "radial" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "CX" }), jsxRuntime.jsx(
|
|
69
|
+
} }), jsxRuntime.jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [selectedGradient.angle, "\u00B0"] })] })), selectedGradient.type === "radial" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "CX" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { className: VectorEditor_module.propInput, min: 0, max: 100, value: selectedGradient.cx * 100, onChange: (val) => {
|
|
70
70
|
const newGrad = {
|
|
71
71
|
...selectedGradient,
|
|
72
72
|
id: vectorGradients.gradientId(),
|
|
@@ -74,7 +74,7 @@ const VectorEditorRightPanel = ({ api }) => {
|
|
|
74
74
|
};
|
|
75
75
|
setSelectedGradient(newGrad);
|
|
76
76
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
77
|
-
} })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "CY" }), jsxRuntime.jsx(
|
|
77
|
+
} })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "CY" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { className: VectorEditor_module.propInput, min: 0, max: 100, value: selectedGradient.cy * 100, onChange: (val) => {
|
|
78
78
|
const newGrad = {
|
|
79
79
|
...selectedGradient,
|
|
80
80
|
id: vectorGradients.gradientId(),
|
|
@@ -82,7 +82,7 @@ const VectorEditorRightPanel = ({ api }) => {
|
|
|
82
82
|
};
|
|
83
83
|
setSelectedGradient(newGrad);
|
|
84
84
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
85
|
-
} })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "R" }), jsxRuntime.jsx(
|
|
85
|
+
} })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "R" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { className: VectorEditor_module.propInput, min: 10, max: 100, value: selectedGradient.r * 100, onChange: (val) => {
|
|
86
86
|
const newGrad = {
|
|
87
87
|
...selectedGradient,
|
|
88
88
|
id: vectorGradients.gradientId(),
|
|
@@ -90,33 +90,33 @@ const VectorEditorRightPanel = ({ api }) => {
|
|
|
90
90
|
};
|
|
91
91
|
setSelectedGradient(newGrad);
|
|
92
92
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
93
|
-
} })] })] })), jsxRuntime.jsx("div", { style: { fontSize: 10, color: "#888", marginTop: 4 }, children: "Color Stops:" }), selectedGradient.stops.map((stop, i) => (jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx(
|
|
93
|
+
} })] })] })), jsxRuntime.jsx("div", { style: { fontSize: 10, color: "#888", marginTop: 4 }, children: "Color Stops:" }), selectedGradient.stops.map((stop, i) => (jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.N, { value: stop.color, style: { width: 24, height: 20 }, onChange: (color) => {
|
|
94
94
|
const newStops = [...selectedGradient.stops];
|
|
95
95
|
newStops[i] = { ...newStops[i], color };
|
|
96
96
|
const newGrad = { ...selectedGradient, id: vectorGradients.gradientId(), stops: newStops };
|
|
97
97
|
setSelectedGradient(newGrad);
|
|
98
98
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
99
|
-
} }), jsxRuntime.jsx(
|
|
99
|
+
} }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { min: 0, max: 100, value: stop.offset * 100, style: { flex: 1 }, onChange: (val) => {
|
|
100
100
|
const newStops = [...selectedGradient.stops];
|
|
101
101
|
newStops[i] = { ...newStops[i], offset: val / 100 };
|
|
102
102
|
newStops.sort((a, b) => a.offset - b.offset);
|
|
103
103
|
const newGrad = { ...selectedGradient, id: vectorGradients.gradientId(), stops: newStops };
|
|
104
104
|
setSelectedGradient(newGrad);
|
|
105
105
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
106
|
-
} }), jsxRuntime.jsxs("span", { style: { fontSize: 9, minWidth: 24 }, children: [Math.round(stop.offset * 100), "%"] })] }, i))), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, style: { gap: 4 }, children: [jsxRuntime.jsx(
|
|
106
|
+
} }), jsxRuntime.jsxs("span", { style: { fontSize: 9, minWidth: 24 }, children: [Math.round(stop.offset * 100), "%"] })] }, i))), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, style: { gap: 4 }, children: [jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, onClick: () => {
|
|
107
107
|
const newStops = [...selectedGradient.stops, { offset: 0.5, color: "#888888" }];
|
|
108
108
|
newStops.sort((a, b) => a.offset - b.offset);
|
|
109
109
|
const newGrad = { ...selectedGradient, id: vectorGradients.gradientId(), stops: newStops };
|
|
110
110
|
setSelectedGradient(newGrad);
|
|
111
111
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
112
|
-
}, children: "+ Add Stop" }), jsxRuntime.jsx(
|
|
112
|
+
}, children: "+ Add Stop" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.c, { className: VectorEditor_module.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, disabled: selectedGradient.stops.length <= 2, onClick: () => {
|
|
113
113
|
if (selectedGradient.stops.length <= 2)
|
|
114
114
|
return;
|
|
115
115
|
const newStops = selectedGradient.stops.slice(0, -1);
|
|
116
116
|
const newGrad = { ...selectedGradient, id: vectorGradients.gradientId(), stops: newStops };
|
|
117
117
|
setSelectedGradient(newGrad);
|
|
118
118
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
119
|
-
}, children: "- Remove" })] })] }))] })), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Stroke" }), jsxRuntime.jsx("div", { className: VectorEditor_module.propColorSwatch, style: { background: strokeCol }, children: jsxRuntime.jsx(
|
|
119
|
+
}, children: "- Remove" })] })] }))] })), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Stroke" }), jsxRuntime.jsx("div", { className: VectorEditor_module.propColorSwatch, style: { background: strokeCol }, children: jsxRuntime.jsx(NiceButtonD9l39Rs7.N, { value: strokeCol, onChange: (c) => { setStrokeCol(c); updateSel({ stroke: c }); } }) }), jsxRuntime.jsx(NiceButtonD9l39Rs7.b, { className: VectorEditor_module.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.stroke) || strokeCol, onChange: (val) => { setStrokeCol(val); updateSel({ stroke: val }); } })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Width" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, min: 0, max: 100, value: (_a = selShape === null || selShape === void 0 ? void 0 : selShape.strokeWidth) !== null && _a !== void 0 ? _a : strokeW, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 0; setStrokeW(v); updateSel({ strokeWidth: v }); } })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Opacity" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { className: VectorEditor_module.propInput, min: 0, max: 1, step: 0.01, value: (_b = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _b !== void 0 ? _b : shapeOpacity, onChange: (val) => { setShapeOpacity(val); updateSel({ opacity: val }); } }), jsxRuntime.jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [Math.round(((_c = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _c !== void 0 ? _c : shapeOpacity) * 100), "%"] })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Rotation" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, min: -360, max: 360, value: (_d = selShape === null || selShape === void 0 ? void 0 : selShape.rotation) !== null && _d !== void 0 ? _d : 0, onChange: (val) => updateSel({ rotation: val !== null && val !== void 0 ? val : 0 }) }), jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: "\u00B0" })] })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: VectorEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Tool Options" }) }), (tool === "roundrect" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "roundrect") && (jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Radius" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, min: 0, max: 200, value: (_e = selShape === null || selShape === void 0 ? void 0 : selShape.rx) !== null && _e !== void 0 ? _e : cornerRadius, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 0; setCornerRadius(v); updateSel({ rx: v }); } })] })), (tool === "polygon" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "polygon") && (jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Sides" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, min: 3, max: 32, value: (_f = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _f !== void 0 ? _f : polygonSides, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 3; setPolygonSides(v); updateSel({ sides: v }); } })] })), (tool === "star" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "star") && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Points" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, min: 3, max: 32, value: (_g = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _g !== void 0 ? _g : starPoints2, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 3; setStarPoints2(v); updateSel({ sides: v }); } })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Inner R" }), jsxRuntime.jsx(NicePinCodeInputCrMfdxxc.U, { className: VectorEditor_module.propInput, min: 0.1, max: 0.9, step: 0.05, value: (_h = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _h !== void 0 ? _h : starInnerRatio, onChange: (val) => { setStarInnerRatio(val); updateSel({ innerRadius: val }); } }), jsxRuntime.jsxs("span", { style: { fontSize: 10 }, children: [Math.round(((_j = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _j !== void 0 ? _j : starInnerRatio) * 100), "%"] })] })] })), (tool === "text" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "text") && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Size" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, min: 8, max: 200, value: (_k = selShape === null || selShape === void 0 ? void 0 : selShape.fontSize) !== null && _k !== void 0 ? _k : fontSize, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 12; setFontSize(v); updateSel({ fontSize: v }); } })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Font" }), jsxRuntime.jsx(NiceButtonD9l39Rs7.a, { className: VectorEditor_module.propInput, value: (_l = selShape === null || selShape === void 0 ? void 0 : selShape.fontFamily) !== null && _l !== void 0 ? _l : fontFamily, onChange: (val) => { setFontFamily(val); updateSel({ fontFamily: val }); }, options: vectorEditorTypes.FONTS.map((f) => ({ value: f, label: f })) })] })] })), snapGrid && (jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Grid" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, min: 4, max: 128, value: gridSize, onChange: (val) => setGridSize(val !== null && val !== void 0 ? val : 8) })] }))] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: VectorEditor_module.panelTitle, children: jsxRuntime.jsxs("span", { children: ["Shapes (", shapes.length, ")"] }) }), [...shapes].reverse().map((s) => (jsxRuntime.jsxs("div", { className: `${VectorEditor_module.shapeItem} ${s.id === selId ? VectorEditor_module.shapeItemActive : ""}`, onClick: () => { setSelId(s.id); setTool("pointer"); }, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.shapeIcon, children: s.type === "rect" ? "▢"
|
|
120
120
|
: s.type === "roundrect" ? "▣"
|
|
121
121
|
: s.type === "ellipse" ? "◯"
|
|
122
122
|
: s.type === "line" ? "╱"
|
|
@@ -124,7 +124,7 @@ const VectorEditorRightPanel = ({ api }) => {
|
|
|
124
124
|
: s.type === "polygon" ? "⬡"
|
|
125
125
|
: s.type === "star" ? "★"
|
|
126
126
|
: s.type === "polyline" ? "✎"
|
|
127
|
-
: "T" }), jsxRuntime.jsxs("span", { className: VectorEditor_module.shapeName, children: [s.type, s.text ? ` "${s.text}"` : ""] })] }, s.id))), shapes.length === 0 && (jsxRuntime.jsx("div", { style: { color: "#555", fontSize: 11, padding: 4 }, children: "No shapes yet. Use the tools to draw." }))] }), selShape && (jsxRuntime.jsxs("div", { className: VectorEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: VectorEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Transform" }) }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "X" }), jsxRuntime.jsx(
|
|
127
|
+
: "T" }), jsxRuntime.jsxs("span", { className: VectorEditor_module.shapeName, children: [s.type, s.text ? ` "${s.text}"` : ""] })] }, s.id))), shapes.length === 0 && (jsxRuntime.jsx("div", { style: { color: "#555", fontSize: 11, padding: 4 }, children: "No shapes yet. Use the tools to draw." }))] }), selShape && (jsxRuntime.jsxs("div", { className: VectorEditor_module.panelSection, children: [jsxRuntime.jsx("div", { className: VectorEditor_module.panelTitle, children: jsxRuntime.jsx("span", { children: "Transform" }) }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "X" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, value: Math.round(selShape.x), onChange: (val) => updateSel({ x: val !== null && val !== void 0 ? val : 0 }) })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "Y" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, value: Math.round(selShape.y), onChange: (val) => updateSel({ y: val !== null && val !== void 0 ? val : 0 }) })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "W" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, value: Math.round(selShape.w), onChange: (val) => updateSel({ w: val !== null && val !== void 0 ? val : 0 }) })] }), jsxRuntime.jsxs("div", { className: VectorEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: VectorEditor_module.propLabel, children: "H" }), jsxRuntime.jsx(NiceToggleCaY1u82g.a, { className: VectorEditor_module.propInput, value: Math.round(selShape.h), onChange: (val) => updateSel({ h: val !== null && val !== void 0 ? val : 0 }) })] })] }))] }));
|
|
128
128
|
};
|
|
129
129
|
var VectorEditorRightPanel$1 = React.memo(VectorEditorRightPanel);
|
|
130
130
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState, useEffect } from 'react';
|
|
3
|
-
import { b as Re, c as Fe, a as De, N as Ae } from '../packages/ui/dist/NiceButton-
|
|
4
|
-
import { U as Dn, X as En } from '../packages/ui/dist/NicePinCodeInput-
|
|
3
|
+
import { b as Re, c as Fe, a as De, N as Ae } from '../packages/ui/dist/NiceButton-D9l39Rs7.js';
|
|
4
|
+
import { U as Dn, X as En } from '../packages/ui/dist/NicePinCodeInput-CrMfdxxc.js';
|
|
5
5
|
import { useNiceTranslation } from '../core/i18n.js';
|
|
6
6
|
import NiceAnimatedPerson from './AnimatedPerson.js';
|
|
7
7
|
import { DEFAULT_CHARACTER, VARIANTS } from './characterTypes.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { c as Fe } from '../packages/ui/dist/NiceButton-
|
|
3
|
+
import { c as Fe } from '../packages/ui/dist/NiceButton-D9l39Rs7.js';
|
|
4
4
|
import NiceAnimatedPerson from './AnimatedPerson.js';
|
|
5
5
|
import { DEFAULT_CHARACTER } from './characterTypes.js';
|
|
6
6
|
import { runRounds, seq } from './choreoDSL.js';
|
package/dist/esm/core/LocalUI.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
-
import { c as Fe } from '../packages/ui/dist/NiceButton-
|
|
4
|
-
import { U as Dn, X as En } from '../packages/ui/dist/NicePinCodeInput-
|
|
3
|
+
import { c as Fe } from '../packages/ui/dist/NiceButton-D9l39Rs7.js';
|
|
4
|
+
import { U as Dn, X as En } from '../packages/ui/dist/NicePinCodeInput-CrMfdxxc.js';
|
|
5
5
|
|
|
6
6
|
const variantMap = {
|
|
7
7
|
"dark": "secondary",
|