@nice2dev/ui-graphics 1.2.1 → 1.3.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/CHANGELOG.md +464 -0
- package/dist/cjs/animation/AnimatedPerson.js +3 -1
- package/dist/cjs/core/NiceBrushEngine.js +5 -4
- package/dist/cjs/core/collaboration.js +11 -6
- package/dist/cjs/core/minimap.js +21 -20
- package/dist/cjs/font/NiceFontEditor.js +6 -6
- package/dist/cjs/game/GameAsset2dEditor.js +58 -39
- package/dist/cjs/photo/NiceAITools.js +3 -3
- package/dist/cjs/photo/PhotoEditorLeftPanel.js +16 -16
- package/dist/cjs/pixel/PixelEditor.js +1 -1
- package/dist/cjs/pixel/PixelEditorMenuBar.js +92 -27
- package/dist/cjs/pixel/PixelEditorRightPanel.js +9 -5
- package/dist/cjs/pixel/PixelEditorStatusBar.js +6 -2
- package/dist/cjs/pixel/PixelEditorTimeline.js +5 -1
- package/dist/cjs/pixel/PixelEditorToolbar.js +3 -1
- package/dist/cjs/pixel/SpriteGeneratorPanel.js +18 -11
- package/dist/cjs/texture/Nice3DTexturePainter.js +10 -6
- package/dist/cjs/ui/NiceUIDesigner.js +2 -2
- package/dist/cjs/vector/NiceSvgToCode.js +3 -3
- package/dist/cjs/vector/VectorEditor.js +1 -1
- package/dist/cjs/vector/VectorEditorMenuBar.js +7 -1
- package/dist/cjs/vector/VectorEditorRightPanel.js +3 -3
- package/dist/cjs/vector/useVectorEditor.js +26 -16
- package/dist/esm/animation/AnimatedPerson.js +3 -1
- package/dist/esm/core/NiceBrushEngine.js +5 -4
- package/dist/esm/core/collaboration.js +11 -6
- package/dist/esm/core/minimap.js +21 -20
- package/dist/esm/font/NiceFontEditor.js +7 -7
- package/dist/esm/game/GameAsset2dEditor.js +59 -40
- package/dist/esm/photo/NiceAITools.js +3 -3
- package/dist/esm/photo/PhotoEditorLeftPanel.js +17 -17
- package/dist/esm/pixel/PixelEditor.js +1 -1
- package/dist/esm/pixel/PixelEditorMenuBar.js +92 -27
- package/dist/esm/pixel/PixelEditorRightPanel.js +10 -6
- package/dist/esm/pixel/PixelEditorStatusBar.js +6 -2
- package/dist/esm/pixel/PixelEditorTimeline.js +6 -2
- package/dist/esm/pixel/PixelEditorToolbar.js +3 -1
- package/dist/esm/pixel/SpriteGeneratorPanel.js +18 -11
- package/dist/esm/texture/Nice3DTexturePainter.js +11 -7
- package/dist/esm/ui/NiceUIDesigner.js +3 -3
- package/dist/esm/vector/NiceSvgToCode.js +3 -3
- package/dist/esm/vector/VectorEditor.js +1 -1
- package/dist/esm/vector/VectorEditorMenuBar.js +7 -1
- package/dist/esm/vector/VectorEditorRightPanel.js +4 -4
- package/dist/esm/vector/useVectorEditor.js +26 -16
- package/package.json +4 -4
|
@@ -61,19 +61,19 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
|
|
|
61
61
|
color: activeTab === tab.key ? accent : undefined,
|
|
62
62
|
borderBottomColor: activeTab === tab.key ? accent : undefined,
|
|
63
63
|
}, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: tab.icon, size: 14 }), tab.label] }, tab.key))) }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.panelContent, children: [activeTab === 'filters' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: PhotoEditor_module.pillRow, children: [
|
|
64
|
-
{ key: 'all', label: 'All' },
|
|
65
|
-
{ key: 'color', label: 'Color' },
|
|
66
|
-
{ key: 'light', label: 'Light' },
|
|
67
|
-
{ key: 'vintage', label: 'Vintage' },
|
|
68
|
-
{ key: 'artistic', label: 'Artistic' },
|
|
69
|
-
{ key: 'fun', label: 'Fun' },
|
|
64
|
+
{ key: 'all', label: t('photoEditor.all', 'All') },
|
|
65
|
+
{ key: 'color', label: t('photoEditor.color', 'Color') },
|
|
66
|
+
{ key: 'light', label: t('photoEditor.light', 'Light') },
|
|
67
|
+
{ key: 'vintage', label: t('photoEditor.vintage', 'Vintage') },
|
|
68
|
+
{ key: 'artistic', label: t('photoEditor.artistic', 'Artistic') },
|
|
69
|
+
{ key: 'fun', label: t('photoEditor.fun', 'Fun') },
|
|
70
70
|
].map((cat) => (jsxRuntime.jsx("button", { onClick: () => setFilterCategory(cat.key), className: filterCategory === cat.key ? PhotoEditor_module.pillActive : PhotoEditor_module.pill, style: {
|
|
71
71
|
borderColor: filterCategory === cat.key ? accent : undefined,
|
|
72
72
|
background: filterCategory === cat.key ? accentDim : undefined,
|
|
73
73
|
}, children: cat.label }, cat.key))) }), jsxRuntime.jsx("div", { className: PhotoEditor_module.filterGrid, children: filteredList.map((filter) => (jsxRuntime.jsx(FilterThumb, { filter: filter, selected: selectedFilter === filter.id, accent: accent, onSelect: () => {
|
|
74
74
|
setSelectedFilter(filter.id);
|
|
75
75
|
pushHistory();
|
|
76
|
-
}, generateThumbnail: generateThumbnail }, filter.id))) }), selectedFilter !== 'none' && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.intensitySection, children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.intensityHeader, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderLabel, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "bar-chart", size: 14, style: { marginRight: 4 } }), t('photoEditor.intensity', 'Intensity')] }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [Math.round(filterIntensity * 100), "%"] })] }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 0, max: 100, value: filterIntensity * 100, onChange: (e) => setFilterIntensity(Number(e.target.value) / 100), onMouseUp: () => pushHistory(), accentColor: accent })] }))] })), activeTab === 'adjust' && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.adjustColumn, children: [photoEditorTypes.ADJUSTMENT_SLIDERS.map((sl) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.adjustHeader, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderLabel, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: sl.icon, size: 14, style: { marginRight: 4 } }), sl.label] }), jsxRuntime.jsx("span", { className: PhotoEditor_module.adjustValue, style: {
|
|
76
|
+
}, generateThumbnail: generateThumbnail }, filter.id))) }), selectedFilter !== 'none' && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.intensitySection, children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.intensityHeader, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderLabel, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "bar-chart", size: 14, style: { marginRight: 4 } }), t('photoEditor.intensity', 'Intensity')] }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [Math.round(filterIntensity * 100), "%"] })] }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 0, max: 100, value: filterIntensity * 100, onChange: (e) => setFilterIntensity(Number(e.target.value) / 100), onMouseUp: () => pushHistory(), accentColor: accent })] }))] })), activeTab === 'adjust' && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.adjustColumn, children: [photoEditorTypes.ADJUSTMENT_SLIDERS.map((sl) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.adjustHeader, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderLabel, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: sl.icon, size: 14, style: { marginRight: 4 } }), sl.label] }), jsxRuntime.jsx("span", { role: "button", tabIndex: 0, "aria-label": t('photoEditor.reset', 'Reset'), onKeyDown: uiCore.clickOnActivationKey, className: PhotoEditor_module.adjustValue, style: {
|
|
77
77
|
color: adjustments[sl.key] !== 0 ? accent : 'var(--nice-text-secondary, #666)',
|
|
78
78
|
}, onClick: () => handleAdjChange(sl.key, sl.key === 'blur' ? 0 : 0), title: t('photoEditor.reset', 'Reset'), children: adjustments[sl.key] })] }), jsxRuntime.jsx(LocalUI.RangeInput, { min: sl.min, max: sl.max, value: adjustments[sl.key], onChange: (e) => handleAdjChange(sl.key, Number(e.target.value)), onMouseUp: handleAdjChangeEnd, accentColor: accent })] }, sl.key))), jsxRuntime.jsxs(LocalUI.Button, { variant: "outline-secondary", size: "sm", className: "mt-2", onClick: () => {
|
|
79
79
|
handleAdjChange('brightness', 0);
|
|
@@ -122,7 +122,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
|
|
|
122
122
|
}, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.horizontal', 'Horizontal')] }), jsxRuntime.jsxs(LocalUI.Button, { variant: flipV ? 'outline-info' : 'dark', size: "sm", onClick: () => {
|
|
123
123
|
setFlipV(!flipV);
|
|
124
124
|
pushHistory();
|
|
125
|
-
}, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.vertical', 'Vertical')] })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.sectionTitleMb8, children: t('photoEditor.previewZoom', 'Preview zoom') }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformZoomRow, children: [jsxRuntime.jsx(LocalUI.RangeInput, { min: 50, max: 300, value: zoom * 100, onChange: (e) => setZoom(Number(e.target.value) / 100), accentColor: accent }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.transformZoomValue, style: { color: accent }, children: [Math.round(zoom * 100), "%"] })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformInfo, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children:
|
|
125
|
+
}, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.vertical', 'Vertical')] })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.sectionTitleMb8, children: t('photoEditor.previewZoom', 'Preview zoom') }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformZoomRow, children: [jsxRuntime.jsx(LocalUI.RangeInput, { min: 50, max: 300, value: zoom * 100, onChange: (e) => setZoom(Number(e.target.value) / 100), accentColor: accent }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.transformZoomValue, style: { color: accent }, children: [Math.round(zoom * 100), "%"] })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformInfo, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: t('photoEditor.rotation2', 'Rotation:') }), " ", rotation, "\u00B0"] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: t('photoEditor.flipH', 'Flip H:') }), ' ', flipH ? t('photoEditor.yes', 'Yes') : t('photoEditor.no', 'No')] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: t('photoEditor.flipV', 'Flip V:') }), ' ', flipV ? t('photoEditor.yes', 'Yes') : t('photoEditor.no', 'No')] }), cropRect && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: t('photoEditor.crop', 'Crop:') }), " ", Math.round(cropRect.w), " \u00D7", ' ', Math.round(cropRect.h), ' (', "x:", Math.round(cropRect.x), ", y:", Math.round(cropRect.y), ")"] }))] })] })), activeTab === 'stickers' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "circle", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.stickersEmoji', 'Stickers / Emoji')] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.pillRowGap3, children: photoOverlays.EMOJI_CATALOG.map((cat) => (jsxRuntime.jsxs("button", { onClick: () => setEmojiCat(cat.id), className: emojiCat === cat.id ? PhotoEditor_module.pillEmojiActive : PhotoEditor_module.pillEmoji, style: {
|
|
126
126
|
borderColor: emojiCat === cat.id ? accent : undefined,
|
|
127
127
|
background: emojiCat === cat.id ? accentDim : undefined,
|
|
128
128
|
}, children: [cat.icon, " ", cat.label] }, cat.id))) }), jsxRuntime.jsx("div", { className: PhotoEditor_module.emojiGrid, children: (_a = photoOverlays.EMOJI_CATALOG.find((c) => c.id === emojiCat)) === null || _a === void 0 ? void 0 : _a.emojis.map((em, idx) => (jsxRuntime.jsx("button", { onClick: () => {
|
|
@@ -130,14 +130,14 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
|
|
|
130
130
|
const cw = (_b = (_a = mainCanvasRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 400;
|
|
131
131
|
const ch = (_d = (_c = mainCanvasRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 400;
|
|
132
132
|
addOverlay(createEmojiOverlay(em, cw, ch));
|
|
133
|
-
}, className: PhotoEditor_module.emojiBtn, title: em, children: em }, idx))) }), overlays.length > 0 && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.overlaySection, children: [jsxRuntime.
|
|
133
|
+
}, className: PhotoEditor_module.emojiBtn, title: em, children: em }, idx))) }), overlays.length > 0 && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.overlaySection, children: [jsxRuntime.jsx("div", { className: PhotoEditor_module.overlaySectionTitle, children: t('photoEditor.layers', 'Layers ({overlays})').replace('{overlays}', String(overlays.length)) }), overlays.map((ov) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, onClick: () => setSelectedOverlayId(ov.id), className: PhotoEditor_module.overlayItem, style: { background: selectedOverlayId === ov.id ? accentDim : undefined }, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.overlayIcon, children: ov.type === 'emoji' ? (ov.emoji) : ov.type === 'text' ? ('T') : ov.type === 'shape' ? (jsxRuntime.jsx(uiCore.NiceIcon, { name: "star", size: 14 })) : ov.type === 'drawing' ? (jsxRuntime.jsx(uiCore.NiceIcon, { name: "pen", size: 14 })) : (jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 14 })) }), jsxRuntime.jsx("span", { className: PhotoEditor_module.overlayName, children: ov.type === 'text'
|
|
134
134
|
? ov.text.slice(0, 20)
|
|
135
135
|
: ov.type === 'emoji'
|
|
136
|
-
? 'Emoji'
|
|
136
|
+
? t('photoEditor.emoji', 'Emoji')
|
|
137
137
|
: ov.type === 'shape'
|
|
138
138
|
? ov.shapeKind
|
|
139
139
|
: ov.type === 'drawing'
|
|
140
|
-
?
|
|
140
|
+
? t('photoEditor.drawing', 'Drawing ({strokes})').replace('{strokes}', String(ov.strokes.length))
|
|
141
141
|
: ov.type === 'frame'
|
|
142
142
|
? ov.frameStyle
|
|
143
143
|
: '' }), jsxRuntime.jsx("button", { onClick: (e) => {
|
|
@@ -167,13 +167,13 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
|
|
|
167
167
|
italic: !selectedOverlay.italic,
|
|
168
168
|
});
|
|
169
169
|
pushHistory();
|
|
170
|
-
}, className: PhotoEditor_module.textFormatBtnSm, style: { fontStyle: 'italic' }, children: "I" })] })] }))] })), activeTab === 'shapes' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "star", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.shapes', 'Shapes')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.shapeColorRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.shapeColorLabel, children:
|
|
170
|
+
}, className: PhotoEditor_module.textFormatBtnSm, style: { fontStyle: 'italic' }, children: "I" })] })] }))] })), activeTab === 'shapes' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "star", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.shapes', 'Shapes')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.shapeColorRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.shapeColorLabel, children: t('photoEditor.stroke', 'Stroke:') }), jsxRuntime.jsx("input", { type: "color", value: shapeStroke, onChange: (e) => setShapeStroke(e.target.value), className: PhotoEditor_module.colorInput, title: t('photoEditor.strokeColor', 'Stroke color') }), jsxRuntime.jsx("span", { className: PhotoEditor_module.shapeColorLabelMl, children: t('photoEditor.fill', 'Fill:') }), jsxRuntime.jsx("input", { type: "color", value: shapeFill || '#ffffff', onChange: (e) => setShapeFill(e.target.value), className: PhotoEditor_module.colorInput, title: t('photoEditor.fillColor', 'Fill color') }), jsxRuntime.jsx(LocalUI.Button, { variant: shapeFill ? 'light' : 'dark', size: "sm", onClick: () => setShapeFill(shapeFill ? '' : '#ffffff'), className: PhotoEditor_module.shapeFillToggle, children: shapeFill ? t('photoEditor.off', 'Off') : t('photoEditor.on', 'On') })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sliderRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: t('photoEditor.width', 'Width:') }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 1, max: 20, value: shapeStrokeW, onChange: (e) => setShapeStrokeW(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [shapeStrokeW, "px"] })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.shapeGrid, children: photoOverlays.SHAPE_CATALOG.map((sh) => (jsxRuntime.jsx("button", { title: sh.label, onClick: () => {
|
|
171
171
|
const ov = createShapeOverlay(sh.id);
|
|
172
172
|
ov.strokeColor = shapeStroke;
|
|
173
173
|
ov.fillColor = shapeFill || null;
|
|
174
174
|
ov.strokeWidth = shapeStrokeW;
|
|
175
175
|
addOverlay(ov);
|
|
176
|
-
}, className: PhotoEditor_module.shapeBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: sh.icon, size: 18 }) }, sh.id))) }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "image", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.frames', 'Frames')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameColorRow, children: [jsxRuntime.jsx("input", { type: "color", value: frameColor, onChange: (e) => setFrameColor(e.target.value), className: PhotoEditor_module.colorInput, "aria-label": t('photoEditor.frameColor', 'Frame color') }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameThicknessWrap, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children:
|
|
176
|
+
}, className: PhotoEditor_module.shapeBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: sh.icon, size: 18 }) }, sh.id))) }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "image", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.frames', 'Frames')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameColorRow, children: [jsxRuntime.jsx("input", { type: "color", value: frameColor, onChange: (e) => setFrameColor(e.target.value), className: PhotoEditor_module.colorInput, "aria-label": t('photoEditor.frameColor', 'Frame color') }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameThicknessWrap, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: t('photoEditor.thickness', 'Thickness:') }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 1, max: 10, value: frameThick, onChange: (e) => setFrameThick(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxRuntime.jsx("span", { className: PhotoEditor_module.frameThicknessValue, style: { color: accent }, children: frameThick })] })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameGrid, children: [photoOverlays.FRAME_CATALOG.map((fr) => (jsxRuntime.jsx("button", { title: fr.label, onClick: () => {
|
|
177
177
|
setOverlays((prev) => prev.filter((o) => o.type !== 'frame'));
|
|
178
178
|
const ov = createFrameOverlay(fr.id, frameColor);
|
|
179
179
|
ov.thickness = frameThick / 100;
|
|
@@ -181,7 +181,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
|
|
|
181
181
|
}, className: PhotoEditor_module.frameBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: fr.icon, size: 18 }) }, fr.id))), jsxRuntime.jsx("button", { title: t('photoEditor.removeFrame', 'Remove frame'), "aria-label": t('photoEditor.removeFrame', 'Remove frame'), onClick: () => {
|
|
182
182
|
setOverlays((prev) => prev.filter((o) => o.type !== 'frame'));
|
|
183
183
|
pushHistory();
|
|
184
|
-
}, className: PhotoEditor_module.removeFrameBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] })] })), activeTab === 'draw' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitleMb8, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "brush", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.freehandDrawing', 'Freehand drawing')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionInfoMb, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), t('photoEditor.drawDirectlyOnThePhoto', 'Draw directly on the photo by holding the left mouse button.')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.quickColorRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children:
|
|
184
|
+
}, className: PhotoEditor_module.removeFrameBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] })] })), activeTab === 'draw' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitleMb8, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "brush", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.freehandDrawing', 'Freehand drawing')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionInfoMb, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), t('photoEditor.drawDirectlyOnThePhoto', 'Draw directly on the photo by holding the left mouse button.')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.quickColorRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: t('photoEditor.color2', 'Color:') }), jsxRuntime.jsx("input", { type: "color", value: drawColor, onChange: (e) => setDrawColor(e.target.value), className: PhotoEditor_module.colorInputDraw, "aria-label": t('photoEditor.drawColor', 'Drawing color') }), [
|
|
185
185
|
'#ff0000',
|
|
186
186
|
'#ff8800',
|
|
187
187
|
'#ffff00',
|
|
@@ -191,10 +191,10 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
|
|
|
191
191
|
'#ff00ff',
|
|
192
192
|
'#ffffff',
|
|
193
193
|
'#000000',
|
|
194
|
-
].map((c) => (jsxRuntime.jsx("div", { onClick: () => setDrawColor(c), className: PhotoEditor_module.quickColorSwatch, style: {
|
|
194
|
+
].map((c) => (jsxRuntime.jsx("div", { role: "button", tabIndex: 0, "aria-label": c, "aria-pressed": drawColor === c, onKeyDown: uiCore.clickOnActivationKey, onClick: () => setDrawColor(c), className: PhotoEditor_module.quickColorSwatch, style: {
|
|
195
195
|
background: c,
|
|
196
196
|
border: drawColor === c ? `2px solid ${accent}` : undefined,
|
|
197
|
-
} }, c)))] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sliderRow, style: { marginBottom: 12 }, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children:
|
|
197
|
+
} }, c)))] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sliderRow, style: { marginBottom: 12 }, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: t('photoEditor.width', 'Width:') }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 1, max: 30, value: drawWidth, onChange: (e) => setDrawWidth(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [drawWidth, "px"] })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.drawPreview, children: jsxRuntime.jsx("div", { style: {
|
|
198
198
|
width: Math.max(drawWidth, 4),
|
|
199
199
|
height: Math.max(drawWidth, 4),
|
|
200
200
|
borderRadius: '50%',
|
|
@@ -30,7 +30,7 @@ const NicePixelEditor = ({ initialWidth = 64, initialHeight = 64, className, onS
|
|
|
30
30
|
api.openFile(f);
|
|
31
31
|
}
|
|
32
32
|
e.target.value = '';
|
|
33
|
-
} }), jsxRuntime.jsx(ui.NiceAppShell, { className: className, flush: true, menubar: jsxRuntime.jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), sidebar: jsxRuntime.jsx(PixelEditorToolbar, { api: api }), rightSidebar: jsxRuntime.jsx(PixelEditorRightPanel, { api: api }), bottomPanel: jsxRuntime.jsx(PixelEditorTimeline, { api: api }), statusBar: jsxRuntime.jsx(PixelEditorStatusBar, { api: api }), children: jsxRuntime.jsx(PixelEditorCanvas, { api: api }) }), showGenerator && (jsxRuntime.jsx(SpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxRuntime.jsxs(ui.NiceModal, { open: api.dlgNew, onClose: () => api.setDlgNew(false), title: t('pixelEditor.newDocument', 'New Document'), children: [jsxRuntime.jsx("label", { children:
|
|
33
|
+
} }), jsxRuntime.jsx(ui.NiceAppShell, { className: className, flush: true, menubar: jsxRuntime.jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), sidebar: jsxRuntime.jsx(PixelEditorToolbar, { api: api }), rightSidebar: jsxRuntime.jsx(PixelEditorRightPanel, { api: api }), bottomPanel: jsxRuntime.jsx(PixelEditorTimeline, { api: api }), statusBar: jsxRuntime.jsx(PixelEditorStatusBar, { api: api }), children: jsxRuntime.jsx(PixelEditorCanvas, { api: api }) }), showGenerator && (jsxRuntime.jsx(SpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxRuntime.jsxs(ui.NiceModal, { open: api.dlgNew, onClose: () => api.setDlgNew(false), title: t('pixelEditor.newDocument', 'New Document'), children: [jsxRuntime.jsx("label", { children: t('pixelEditor.widthPx', 'Width (px)') }), jsxRuntime.jsx(ui.NiceNumberInput, { min: 1, max: 4096, value: api.nw, onChange: (val) => api.setNw(val !== null && val !== void 0 ? val : 64), "aria-label": t('pixelEditor.documentWidth', 'Document width') }), jsxRuntime.jsx("label", { children: t('pixelEditor.heightPx', 'Height (px)') }), jsxRuntime.jsx(ui.NiceNumberInput, { min: 1, max: 4096, value: api.nh, onChange: (val) => api.setNh(val !== null && val !== void 0 ? val : 64), "aria-label": t('pixelEditor.documentHeight', 'Document height') }), jsxRuntime.jsx("div", { style: { display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 8 }, children: [
|
|
34
34
|
[16, 16],
|
|
35
35
|
[32, 32],
|
|
36
36
|
[48, 48],
|
|
@@ -4,41 +4,71 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var ui = require('@nice2dev/ui');
|
|
5
5
|
var uiCore = require('@nice2dev/ui-core');
|
|
6
6
|
var React = require('react');
|
|
7
|
+
var i18n = require('../core/i18n.js');
|
|
7
8
|
var PixelEditor_module = require('./PixelEditor.module.css.js');
|
|
8
9
|
|
|
9
10
|
const PixelEditorMenuBar = /* @__PURE__ */ Object.assign(
|
|
10
11
|
/* @__PURE__ */ React.memo(({ api, hasOnSaveToLibrary, onOpenGenerator }) => {
|
|
12
|
+
const { t } = i18n.useNiceTranslation();
|
|
11
13
|
const items = [
|
|
12
14
|
{
|
|
13
15
|
id: 'file',
|
|
14
|
-
label: 'File',
|
|
16
|
+
label: t('pixelEditorMenuBar.file', 'File'),
|
|
15
17
|
children: [
|
|
16
18
|
{
|
|
17
19
|
id: 'new',
|
|
18
|
-
label: 'New…',
|
|
20
|
+
label: t('pixelEditorMenuBar.new', 'New…'),
|
|
19
21
|
icon: jsxRuntime.jsx(uiCore.NiceIcon, { name: "file", size: 14 }),
|
|
20
22
|
onClick: () => api.setDlgNew(true),
|
|
21
23
|
},
|
|
22
24
|
{
|
|
23
25
|
id: 'open',
|
|
24
|
-
label: 'Open…',
|
|
26
|
+
label: t('pixelEditorMenuBar.open', 'Open…'),
|
|
25
27
|
icon: jsxRuntime.jsx(uiCore.NiceIcon, { name: "folder", size: 14 }),
|
|
26
28
|
onClick: () => { var _a; return (_a = api.fInp.current) === null || _a === void 0 ? void 0 : _a.click(); },
|
|
27
29
|
},
|
|
28
30
|
{ id: 'sep-file-1', divider: true },
|
|
29
|
-
{
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
{
|
|
35
|
-
|
|
31
|
+
{
|
|
32
|
+
id: 'ase',
|
|
33
|
+
label: t('pixelEditorMenuBar.saveAse', 'Save .ase'),
|
|
34
|
+
onClick: api.exportAse,
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
id: 'png',
|
|
38
|
+
label: t('pixelEditorMenuBar.exportPng', 'Export PNG'),
|
|
39
|
+
onClick: api.exportPNG,
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
id: 'jpg',
|
|
43
|
+
label: t('pixelEditorMenuBar.exportJpg', 'Export JPG'),
|
|
44
|
+
onClick: api.exportJPG,
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
id: 'webp',
|
|
48
|
+
label: t('pixelEditorMenuBar.exportWebp', 'Export WebP'),
|
|
49
|
+
onClick: api.exportWebP,
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
id: 'bmp',
|
|
53
|
+
label: t('pixelEditorMenuBar.exportBmp', 'Export BMP'),
|
|
54
|
+
onClick: api.exportBMP,
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
id: 'svg',
|
|
58
|
+
label: t('pixelEditorMenuBar.exportSvg', 'Export SVG'),
|
|
59
|
+
onClick: api.exportSVG,
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
id: 'sheet',
|
|
63
|
+
label: t('pixelEditorMenuBar.exportSpriteSheet', 'Export sprite sheet'),
|
|
64
|
+
onClick: api.exportSheet,
|
|
65
|
+
},
|
|
36
66
|
...(hasOnSaveToLibrary
|
|
37
67
|
? [
|
|
38
68
|
{ id: 'sep-file-2', divider: true },
|
|
39
69
|
{
|
|
40
70
|
id: 'lib',
|
|
41
|
-
label: 'Save to Library',
|
|
71
|
+
label: t('pixelEditorMenuBar.saveToLibrary', 'Save to Library'),
|
|
42
72
|
icon: jsxRuntime.jsx(uiCore.NiceIcon, { name: "box", size: 14 }),
|
|
43
73
|
onClick: api.saveToLibrary,
|
|
44
74
|
},
|
|
@@ -48,35 +78,70 @@ const PixelEditorMenuBar = /* @__PURE__ */ Object.assign(
|
|
|
48
78
|
},
|
|
49
79
|
{
|
|
50
80
|
id: 'edit',
|
|
51
|
-
label: 'Edit',
|
|
81
|
+
label: t('pixelEditorMenuBar.edit', 'Edit'),
|
|
52
82
|
children: [
|
|
53
|
-
{ id: 'undo', label: 'Undo', onClick: api.undo },
|
|
54
|
-
{ id: 'redo', label: 'Redo', onClick: api.redo },
|
|
83
|
+
{ id: 'undo', label: t('pixelEditorMenuBar.undo', 'Undo'), onClick: api.undo },
|
|
84
|
+
{ id: 'redo', label: t('pixelEditorMenuBar.redo', 'Redo'), onClick: api.redo },
|
|
55
85
|
{ id: 'sep-edit-1', divider: true },
|
|
56
|
-
{
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
86
|
+
{
|
|
87
|
+
id: 'copy',
|
|
88
|
+
label: t('pixelEditorMenuBar.copy', 'Copy'),
|
|
89
|
+
onClick: api.doCopy,
|
|
90
|
+
disabled: !api.sel,
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
id: 'cut',
|
|
94
|
+
label: t('pixelEditorMenuBar.cut', 'Cut'),
|
|
95
|
+
onClick: api.doCut,
|
|
96
|
+
disabled: !api.sel,
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
id: 'paste',
|
|
100
|
+
label: t('pixelEditorMenuBar.paste', 'Paste'),
|
|
101
|
+
onClick: api.doPaste,
|
|
102
|
+
disabled: !api.clipboard.current,
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
id: 'selall',
|
|
106
|
+
label: t('pixelEditorMenuBar.selectAll', 'Select all'),
|
|
107
|
+
onClick: api.doSelectAll,
|
|
108
|
+
},
|
|
60
109
|
],
|
|
61
110
|
},
|
|
62
111
|
{
|
|
63
112
|
id: 'image',
|
|
64
|
-
label: 'Image',
|
|
113
|
+
label: t('pixelEditorMenuBar.image', 'Image'),
|
|
65
114
|
children: [
|
|
66
|
-
{
|
|
67
|
-
|
|
68
|
-
|
|
115
|
+
{
|
|
116
|
+
id: 'fliph',
|
|
117
|
+
label: t('pixelEditorMenuBar.flipHorizontal', 'Flip horizontal'),
|
|
118
|
+
onClick: () => api.flipCv('h'),
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
id: 'flipv',
|
|
122
|
+
label: t('pixelEditorMenuBar.flipVertical', 'Flip vertical'),
|
|
123
|
+
onClick: () => api.flipCv('v'),
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
id: 'rot',
|
|
127
|
+
label: t('pixelEditorMenuBar.rotate90', 'Rotate 90°'),
|
|
128
|
+
onClick: api.rotateCv,
|
|
129
|
+
},
|
|
69
130
|
{ id: 'sep-image-1', divider: true },
|
|
70
|
-
{
|
|
131
|
+
{
|
|
132
|
+
id: 'clear',
|
|
133
|
+
label: t('pixelEditorMenuBar.clearCanvas', 'Clear canvas'),
|
|
134
|
+
onClick: api.clearCv,
|
|
135
|
+
},
|
|
71
136
|
],
|
|
72
137
|
},
|
|
73
138
|
{
|
|
74
139
|
id: 'view',
|
|
75
|
-
label: 'View',
|
|
140
|
+
label: t('pixelEditorMenuBar.view', 'View'),
|
|
76
141
|
children: [
|
|
77
142
|
{
|
|
78
143
|
id: 'grid',
|
|
79
|
-
label: 'Show grid',
|
|
144
|
+
label: t('pixelEditorMenuBar.showGrid', 'Show grid'),
|
|
80
145
|
badge: api.grid ? 'On' : 'Off',
|
|
81
146
|
onClick: () => api.setGrid((g) => !g),
|
|
82
147
|
},
|
|
@@ -84,11 +149,11 @@ const PixelEditorMenuBar = /* @__PURE__ */ Object.assign(
|
|
|
84
149
|
},
|
|
85
150
|
{
|
|
86
151
|
id: 'tools',
|
|
87
|
-
label: 'Tools',
|
|
152
|
+
label: t('pixelEditorMenuBar.tools', 'Tools'),
|
|
88
153
|
children: [
|
|
89
154
|
{
|
|
90
155
|
id: 'gen',
|
|
91
|
-
label: 'Sprite generator…',
|
|
156
|
+
label: t('pixelEditorMenuBar.spriteGenerator', 'Sprite generator…'),
|
|
92
157
|
icon: jsxRuntime.jsx(uiCore.NiceIcon, { name: "palette", size: 14 }),
|
|
93
158
|
onClick: onOpenGenerator,
|
|
94
159
|
},
|
|
@@ -17,24 +17,28 @@ const PixelEditorRightPanel = /* @__PURE__ */ Object.assign(
|
|
|
17
17
|
return (jsxRuntime.jsxs("div", { className: PixelEditor_module.rightPanel, children: [jsxRuntime.jsxs(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Brush'), children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: t('pixelEditorRightPanel.size', 'Size') }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 64, value: api.brush.size, onChange: (val) => api.setBrush((b) => ({ ...b, size: val })), "aria-label": t('pixelEditorRightPanel.brushSize', 'Brush size') }), jsxRuntime.jsx("span", { children: api.brush.size })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: t('pixelEditorRightPanel.opacity', 'Opacity') }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 100, value: api.brush.opacity, onChange: (val) => api.setBrush((b) => ({ ...b, opacity: val })), "aria-label": t('pixelEditorRightPanel.brushOpacity', 'Brush opacity') }), jsxRuntime.jsxs("span", { children: [api.brush.opacity, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: t('pixelEditorRightPanel.flow', 'Flow') }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 100, value: api.brush.flow, onChange: (val) => api.setBrush((b) => ({ ...b, flow: val })), "aria-label": t('pixelEditorRightPanel.brushFlow', 'Brush flow') }), jsxRuntime.jsxs("span", { children: [api.brush.flow, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: t('pixelEditorRightPanel.hard', 'Hard') }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 100, value: api.brush.hardness, onChange: (val) => api.setBrush((b) => ({ ...b, hardness: val })), "aria-label": t('pixelEditorRightPanel.brushHardness', 'Brush hardness') }), jsxRuntime.jsxs("span", { children: [api.brush.hardness, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: t('pixelEditorRightPanel.space', 'Space') }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 100, value: api.brush.spacing, onChange: (val) => api.setBrush((b) => ({ ...b, spacing: val })), "aria-label": t('pixelEditorRightPanel.brushSpacing', 'Brush spacing') }), jsxRuntime.jsxs("span", { children: [api.brush.spacing, "%"] })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.brushShapes, children: pixelEditorTypes.BRUSH_SHAPES.map((s) => (jsxRuntime.jsx(ui.NiceButton, { 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, "aria-label": s.label, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: s.icon, size: 16 }) }, s.id))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.pressureToggles, children: [jsxRuntime.jsx(ui.NiceCheckbox, { checked: api.brush.pressureSize, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureSize: checked })), label: t('pixelEditorRightPanel.pressureSize', 'Pressure→Size'), className: PixelEditor_module.checkLabel }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: api.brush.pressureOpacity, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureOpacity: checked })), label: t('pixelEditorRightPanel.pressureOpacity', 'Pressure→Opacity'), className: PixelEditor_module.checkLabel })] })] }), jsxRuntime.jsx(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Colour'), children: jsxRuntime.jsx(HSVPicker.HSVPicker, { color: api.col1, onChange: api.setCol1 }) }), jsxRuntime.jsxs(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Layers'), children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.layerActions, children: [jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.addLayer, title: t('pixelEditorRightPanel.addLayer', 'Add Layer'), "aria-label": t('pixelEditorRightPanel.addLayer', 'Add Layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.dupLayer, title: t('pixelEditorRightPanel.duplicateLayer', 'Duplicate Layer'), "aria-label": t('pixelEditorRightPanel.duplicateLayer', 'Duplicate Layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "copy", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.rmLayer, title: t('pixelEditorRightPanel.removeLayer', 'Remove Layer'), "aria-label": t('pixelEditorRightPanel.removeLayer', 'Remove Layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "minus", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.mergeDown, title: t('pixelEditorRightPanel.mergeDown', 'Merge Down'), "aria-label": t('pixelEditorRightPanel.mergeDown', 'Merge Down'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-down", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.moveLayerUp, title: t('pixelEditorRightPanel.moveUp', 'Move Up'), "aria-label": t('pixelEditorRightPanel.moveUp', 'Move Up'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-up", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.moveLayerDown, title: t('pixelEditorRightPanel.moveDown', 'Move Down'), "aria-label": t('pixelEditorRightPanel.moveDown', 'Move Down'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-down", size: 16 }) })] }), [...api.layers]
|
|
18
18
|
.map((l, i) => ({ l, i }))
|
|
19
19
|
.reverse()
|
|
20
|
-
.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) => {
|
|
20
|
+
.map(({ l, i }) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${PixelEditor_module.layerItem} ${i === api.aLi ? PixelEditor_module.layerItemActive : ''}`, onClick: () => api.setALi(i), children: [jsxRuntime.jsx("span", { role: "button", tabIndex: 0, "aria-pressed": l.visible, onKeyDown: uiCore.clickOnActivationKey, className: PixelEditor_module.layerVis, onClick: (e) => {
|
|
21
21
|
e.stopPropagation();
|
|
22
22
|
api.toggleVis(i);
|
|
23
|
-
}, title: l.visible
|
|
23
|
+
}, title: l.visible
|
|
24
|
+
? t('pixelEditorRightPanel.visible', 'Visible')
|
|
25
|
+
: t('pixelEditorRightPanel.hidden', 'Hidden'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsxRuntime.jsx("span", { role: "button", tabIndex: 0, "aria-pressed": l.locked, onKeyDown: uiCore.clickOnActivationKey, className: PixelEditor_module.layerLock, onClick: (e) => {
|
|
24
26
|
e.stopPropagation();
|
|
25
27
|
api.toggleLock(i);
|
|
26
|
-
}, title: l.locked
|
|
28
|
+
}, title: l.locked
|
|
29
|
+
? t('pixelEditorRightPanel.locked', 'Locked')
|
|
30
|
+
: t('pixelEditorRightPanel.unlocked', 'Unlocked'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "lock", size: 14 }) }), api.editingLayerName === l.id ? (jsxRuntime.jsx(ui.NiceTextInput, { className: PixelEditor_module.layerNameInput, value: l.name, onChange: (val) => api.renameLayer(i, val), onBlur: () => api.setEditingLayerName(null), onKeyDown: (e) => {
|
|
27
31
|
if (e.key === 'Enter') {
|
|
28
32
|
api.setEditingLayerName(null);
|
|
29
33
|
}
|
|
30
34
|
}, autoFocus: true, "aria-label": t('pixelEditorRightPanel.layerName', 'Layer name') })) : (jsxRuntime.jsx("span", { className: PixelEditor_module.layerName, onDoubleClick: (e) => {
|
|
31
35
|
e.stopPropagation();
|
|
32
36
|
api.setEditingLayerName(l.id);
|
|
33
|
-
}, 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(ui.NiceSelect, { value: api.layers[api.aLi].blendMode, onChange: (val) => api.setLayerBlendMode(api.aLi, val), className: PixelEditor_module.blendSelect, "aria-label": t('pixelEditorRightPanel.blendMode', 'Blend mode'), options: pixelEditorTypes.BLEND_MODES.map((m) => ({ value: m, label: m })) }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 255, value: api.layers[api.aLi].opacity, onChange: (val) => api.setLayerOpacity(api.aLi, val), className: PixelEditor_module.layerOpSlider, title:
|
|
37
|
+
}, 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(ui.NiceSelect, { value: api.layers[api.aLi].blendMode, onChange: (val) => api.setLayerBlendMode(api.aLi, val), className: PixelEditor_module.blendSelect, "aria-label": t('pixelEditorRightPanel.blendMode', 'Blend mode'), options: pixelEditorTypes.BLEND_MODES.map((m) => ({ value: m, label: m })) }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 255, value: api.layers[api.aLi].opacity, onChange: (val) => api.setLayerOpacity(api.aLi, val), className: PixelEditor_module.layerOpSlider, title: t('pixelEditorRightPanel.opacity2', 'Opacity: {opacity}%').replace('{opacity}', String(Math.round((api.layers[api.aLi].opacity / 255) * 100))) })] }))] }), jsxRuntime.jsxs(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Palette'), children: [jsxRuntime.jsx("div", { className: PixelEditor_module.layerActions, children: jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: () => {
|
|
34
38
|
if (!api.pal.includes(api.col1)) {
|
|
35
39
|
api.setPal((p) => [...p, api.col1]);
|
|
36
40
|
}
|
|
37
|
-
}, title: t('pixelEditorRightPanel.addCurrentColour', 'Add current colour'), "aria-label": t('pixelEditorRightPanel.addCurrentColour', 'Add current colour'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 16 }) }) }), 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) => {
|
|
41
|
+
}, title: t('pixelEditorRightPanel.addCurrentColour', 'Add current colour'), "aria-label": t('pixelEditorRightPanel.addCurrentColour', 'Add current colour'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 16 }) }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.paletteGrid, children: api.pal.map((c, i) => (jsxRuntime.jsx("div", { role: "button", tabIndex: 0, "aria-pressed": c === api.col1, onKeyDown: uiCore.clickOnActivationKey, className: `${PixelEditor_module.paletteSwatch} ${c === api.col1 ? PixelEditor_module.paletteSwatchActive : ''}`, style: { backgroundColor: c }, onClick: () => api.setCol1(c), onContextMenu: (e) => {
|
|
38
42
|
e.preventDefault();
|
|
39
43
|
api.setCol2(c);
|
|
40
44
|
}, title: c }, i))) })] })] }));
|
|
@@ -10,9 +10,13 @@ const PixelEditorStatusBar = /* @__PURE__ */ Object.assign(
|
|
|
10
10
|
/* @__PURE__ */ React.memo(({ api }) => {
|
|
11
11
|
var _a;
|
|
12
12
|
const { t } = i18n.useNiceTranslation();
|
|
13
|
-
return (jsxRuntime.jsxs("div", { className: PixelEditor_module.statusBar, children: [jsxRuntime.jsxs("span", { children: [api.dw, "\u00D7", api.dh] }), jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.zoom', 'Zoom {zoom}%').replace('{zoom}', String(Math.round(api.zoom * 100))) }), api.cursor && pixelEditorTypes.inB(api.cursor.x, api.cursor.y, api.dw, api.dh) && (jsxRuntime.jsxs("span", { children: ["(", api.cursor.x, ", ", api.cursor.y, ")"] })), jsxRuntime.jsx("span", { children: api.tool }), jsxRuntime.
|
|
13
|
+
return (jsxRuntime.jsxs("div", { className: PixelEditor_module.statusBar, children: [jsxRuntime.jsxs("span", { children: [api.dw, "\u00D7", api.dh] }), jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.zoom', 'Zoom {zoom}%').replace('{zoom}', String(Math.round(api.zoom * 100))) }), api.cursor && pixelEditorTypes.inB(api.cursor.x, api.cursor.y, api.dw, api.dh) && (jsxRuntime.jsxs("span", { children: ["(", api.cursor.x, ", ", api.cursor.y, ")"] })), jsxRuntime.jsx("span", { children: api.tool }), jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.brushPx', 'Brush: {size}px {shape}')
|
|
14
|
+
.replace('{size}', String(api.brush.size))
|
|
15
|
+
.replace('{shape}', String(api.brush.shape)) }), jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.pressure', 'Pressure: {pressure}%').replace('{pressure}', String(Math.round(api.pressure * 100))) }), jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.layer', 'Layer: {name}').replace('{name}', String((_a = api.layers[api.aLi]) === null || _a === void 0 ? void 0 : _a.name)) }), jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.frame', 'Frame {current}/{total}')
|
|
14
16
|
.replace('{current}', String(api.afi + 1))
|
|
15
|
-
.replace('{total}', String(api.fc)) }), api.symmetry !== 'none' && jsxRuntime.
|
|
17
|
+
.replace('{total}', String(api.fc)) }), api.symmetry !== 'none' && (jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.sym', 'Sym: {symmetry}').replace('{symmetry}', String(api.symmetry)) })), api.shapeFilled && jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.filled', 'Filled') }), api.sel && (jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.sel', 'Sel: {w}×{h}')
|
|
18
|
+
.replace('{w}', String(api.sel.w))
|
|
19
|
+
.replace('{h}', String(api.sel.h)) }))] }));
|
|
16
20
|
}), { displayName: 'PixelEditorStatusBar' });
|
|
17
21
|
|
|
18
22
|
module.exports = PixelEditorStatusBar;
|
|
@@ -10,7 +10,11 @@ var PixelEditor_module = require('./PixelEditor.module.css.js');
|
|
|
10
10
|
const PixelEditorTimeline = /* @__PURE__ */ Object.assign(
|
|
11
11
|
/* @__PURE__ */ React.memo(({ api }) => {
|
|
12
12
|
const { t } = i18n.useNiceTranslation();
|
|
13
|
-
return (jsxRuntime.jsxs("div", { className: PixelEditor_module.bottomPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.timelineControls, children: [jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.addFrame, children:
|
|
13
|
+
return (jsxRuntime.jsxs("div", { className: PixelEditor_module.bottomPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.timelineControls, children: [jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.addFrame, children: t('pixelEditorTimeline.frame', '+ Frame') }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.dupFrame, "aria-label": t('pixelEditorTimeline.duplicateFrame', 'Duplicate frame'), children: t('pixelEditorTimeline.dup', 'Dup') }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.rmFrame, "aria-label": t('pixelEditorTimeline.removeFrame', 'Remove frame'), children: t('pixelEditorTimeline.frame2', '− Frame') }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: () => api.setPlaying((p) => !p), "aria-label": api.playing
|
|
14
|
+
? t('pixelEditorTimeline.pause', 'Pause')
|
|
15
|
+
: t('pixelEditorTimeline.play', 'Play'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: api.playing ? 'pause' : 'play', size: 16 }) }), jsxRuntime.jsx("label", { children: t('pixelEditorTimeline.fps', 'FPS:') }), jsxRuntime.jsx(ui.NiceNumberInput, { min: 1, max: 60, value: api.fps, onChange: (val) => api.setFps(val !== null && val !== void 0 ? val : 8), "aria-label": t('pixelEditorTimeline.framesPerSecond', 'Frames per second') }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: t('pixelEditorTimeline.onion', 'Onion') }), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.jsx("span", { children: api.fc !== 1
|
|
16
|
+
? t('pixelEditorTimeline.framesMany', '{fc} frames').replace('{fc}', String(api.fc))
|
|
17
|
+
: t('pixelEditorTimeline.framesOne', '{fc} frame').replace('{fc}', String(api.fc)) })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, "aria-label": t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), "aria-pressed": fi === api.afi, onKeyDown: uiCore.clickOnActivationKey, 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: t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), style: {
|
|
14
18
|
width: 36,
|
|
15
19
|
height: 36,
|
|
16
20
|
imageRendering: 'pixelated',
|
|
@@ -11,7 +11,9 @@ var pixelEditorTypes = require('./pixelEditorTypes.js');
|
|
|
11
11
|
const PixelEditorToolbar = /* @__PURE__ */ Object.assign(
|
|
12
12
|
/* @__PURE__ */ React.memo(({ api }) => {
|
|
13
13
|
const { t } = i18n.useNiceTranslation();
|
|
14
|
-
return (jsxRuntime.jsxs("div", { className: PixelEditor_module.toolbar, children: [pixelEditorTypes.TOOLS.map((t) => (jsxRuntime.jsx(ui.NiceButton, { 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})`, "aria-label": t.label, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: t.icon, size: 16 }) }, t.id))), jsxRuntime.jsx("div", { className: PixelEditor_module.toolSep }), jsxRuntime.jsx(ui.NiceButton, { 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)`, "aria-label": api.shapeFilled
|
|
14
|
+
return (jsxRuntime.jsxs("div", { className: PixelEditor_module.toolbar, children: [pixelEditorTypes.TOOLS.map((t) => (jsxRuntime.jsx(ui.NiceButton, { 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})`, "aria-label": t.label, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: t.icon, size: 16 }) }, t.id))), jsxRuntime.jsx("div", { className: PixelEditor_module.toolSep }), jsxRuntime.jsx(ui.NiceButton, { 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)`, "aria-label": api.shapeFilled
|
|
15
|
+
? t('pixelEditorToolbar.filledShape', 'Filled shape')
|
|
16
|
+
: t('pixelEditorToolbar.outlineShape', 'Outline shape'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: api.shapeFilled ? 'check-square' : 'square', size: 16 }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.toolGroup, children: pixelEditorTypes.SYMMETRY_MODES.map((m) => (jsxRuntime.jsx(ui.NiceButton, { 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: t('pixelEditorToolbar.symmetry', 'Symmetry: {label}').replace('{label}', String(m.label)), "aria-label": t('pixelEditorToolbar.symmetry', 'Symmetry: {label}').replace('{label}', String(m.label)), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: m.icon, size: 14 }) }, m.id))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.colorSwatches, children: [jsxRuntime.jsx("label", { style: { position: 'relative', width: 28, height: 28, cursor: 'pointer' }, title: t('pixelEditorToolbar.primaryColourClickForHsv', 'Primary Colour (click for HSV)'), children: jsxRuntime.jsx(ui.NiceColorPicker, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsxRuntime.jsx("label", { style: { position: 'relative', width: 22, height: 22, cursor: 'pointer' }, title: t('pixelEditorToolbar.secondaryColour', 'Secondary Colour'), children: jsxRuntime.jsx(ui.NiceColorPicker, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => {
|
|
15
17
|
const tmp = api.col1;
|
|
16
18
|
api.setCol1(api.col2);
|
|
17
19
|
api.setCol2(tmp);
|
|
@@ -228,19 +228,19 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
|
|
|
228
228
|
case 'character':
|
|
229
229
|
return [
|
|
230
230
|
{
|
|
231
|
-
label: 'Skin',
|
|
231
|
+
label: t('spriteGeneratorPanel.skin', 'Skin'),
|
|
232
232
|
options: palettesToOptions(characterGeneratorPresets.SKIN_PALETTES),
|
|
233
233
|
value: skinPalette,
|
|
234
234
|
set: setSkinPalette,
|
|
235
235
|
},
|
|
236
236
|
{
|
|
237
|
-
label: 'Hair',
|
|
237
|
+
label: t('spriteGeneratorPanel.hair', 'Hair'),
|
|
238
238
|
options: palettesToOptions(characterGeneratorPresets.HAIR_PALETTES),
|
|
239
239
|
value: hairPalette,
|
|
240
240
|
set: setHairPalette,
|
|
241
241
|
},
|
|
242
242
|
{
|
|
243
|
-
label: 'Clothing',
|
|
243
|
+
label: t('spriteGeneratorPanel.clothing', 'Clothing'),
|
|
244
244
|
options: palettesToOptions(characterGeneratorPresets.CLOTHING_PALETTES),
|
|
245
245
|
value: clothPalette,
|
|
246
246
|
set: setClothPalette,
|
|
@@ -249,13 +249,13 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
|
|
|
249
249
|
case 'building':
|
|
250
250
|
return [
|
|
251
251
|
{
|
|
252
|
-
label: 'Walls',
|
|
252
|
+
label: t('spriteGeneratorPanel.walls', 'Walls'),
|
|
253
253
|
options: palettesToOptions(buildingGeneratorPresets.WALL_PALETTES),
|
|
254
254
|
value: wallPalette,
|
|
255
255
|
set: setWallPalette,
|
|
256
256
|
},
|
|
257
257
|
{
|
|
258
|
-
label: 'Roof',
|
|
258
|
+
label: t('spriteGeneratorPanel.roof', 'Roof'),
|
|
259
259
|
options: palettesToOptions(buildingGeneratorPresets.ROOF_PALETTES),
|
|
260
260
|
value: roofPalette,
|
|
261
261
|
set: setRoofPalette,
|
|
@@ -264,14 +264,14 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
|
|
|
264
264
|
case 'animal':
|
|
265
265
|
return [
|
|
266
266
|
{
|
|
267
|
-
label: 'Fur',
|
|
267
|
+
label: t('spriteGeneratorPanel.fur', 'Fur'),
|
|
268
268
|
options: palettesToOptions(animalGeneratorPresets.FUR_PALETTES),
|
|
269
269
|
value: furPalette,
|
|
270
270
|
set: setFurPalette,
|
|
271
271
|
},
|
|
272
272
|
];
|
|
273
273
|
}
|
|
274
|
-
}, [tab, skinPalette, hairPalette, clothPalette, wallPalette, roofPalette, furPalette]);
|
|
274
|
+
}, [tab, skinPalette, hairPalette, clothPalette, wallPalette, roofPalette, furPalette, t]);
|
|
275
275
|
/* ── Render ── */
|
|
276
276
|
return (jsxRuntime.jsx(ui.NiceModal, { open: true, onClose: onClose !== null && onClose !== void 0 ? onClose : (() => { }), title: t('spriteGeneratorPanel.spriteGenerator', 'Sprite Generator'), size: "xl", children: jsxRuntime.jsxs("div", { className: PixelEditor_module.genPanel, children: [jsxRuntime.jsx("div", { className: PixelEditor_module.genTabs, children: ['character', 'building', 'animal'].map((t) => (jsxRuntime.jsxs(ui.NiceButton, { className: `${PixelEditor_module.genTabBtn} ${tab === t ? PixelEditor_module.genTabBtnActive : ''}`, variant: tab === t ? 'primary' : 'ghost', size: "sm", onClick: () => setTab(t), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: t === 'character' ? 'user' : t === 'building' ? 'home' : 'heart', size: 14 }), ' ', 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: t('spriteGeneratorPanel.presets', 'Presets') }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.genPresetGrid, children: presets.map((preset, i) => (jsxRuntime.jsx(ui.NiceButton, { 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: t('spriteGeneratorPanel.parts', 'Parts') }) }), categories.map((cat) => {
|
|
277
277
|
const parts = spriteGeneratorCore.getPartsByCategory(cat);
|
|
@@ -288,9 +288,12 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
|
|
|
288
288
|
return (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.miniBtn} ${PixelEditor_module.genPartBtn} ${active ? PixelEditor_module.miniBtnActive : ''}`, variant: active ? 'primary' : 'ghost', size: "sm", onClick: () => (active ? removePart(part.id) : addPart(part.id)), title: part.name, children: part.name }, part.id));
|
|
289
289
|
}) })] }, cat));
|
|
290
290
|
})] })] }), 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(ui.NiceButton, { 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(--nice-text-muted)' }, children: t('spriteGeneratorPanel.projection', 'Projection') }), jsxRuntime.jsx(ui.NiceSelect, { className: PixelEditor_module.propSelect, value: projection, onChange: (val) => setProjection(val), options: [
|
|
291
|
-
{ value: 'topDown', label: 'Top-Down' },
|
|
292
|
-
{ value: 'sideView', label: 'Side View' },
|
|
293
|
-
{
|
|
291
|
+
{ value: 'topDown', label: t('spriteGeneratorPanel.topDown', 'Top-Down') },
|
|
292
|
+
{ value: 'sideView', label: t('spriteGeneratorPanel.sideView', 'Side View') },
|
|
293
|
+
{
|
|
294
|
+
value: 'iso25d',
|
|
295
|
+
label: t('spriteGeneratorPanel.n25dIsometric', '2.5D Isometric'),
|
|
296
|
+
},
|
|
294
297
|
] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genRow, children: [jsxRuntime.jsx("label", { style: { fontSize: 10, color: 'var(--nice-text-muted)' }, children: t('spriteGeneratorPanel.size', 'Size') }), jsxRuntime.jsx(ui.NiceNumberInput, { min: 8, max: 256, value: canvasW, onChange: (val) => setCanvasW(val !== null && val !== void 0 ? val : 32) }), jsxRuntime.jsx("span", { style: { fontSize: 10, color: 'var(--nice-text-muted)' }, children: "\u00D7" }), jsxRuntime.jsx(ui.NiceNumberInput, { min: 8, max: 256, value: canvasH, onChange: (val) => setCanvasH(val !== null && val !== void 0 ? val : 32) })] }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: generate8Dir, onChange: (checked) => setGenerate8Dir(checked), label: t('spriteGeneratorPanel.generate8DirectionSheet', '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: t('spriteGeneratorPanel.colors', 'Colors') }) }), paletteGroups.map((group) => {
|
|
295
298
|
var _a;
|
|
296
299
|
return (jsxRuntime.jsxs("div", { style: { marginBottom: 6 }, children: [jsxRuntime.jsx("div", { style: { fontSize: 9, color: 'var(--nice-text-muted)', marginBottom: 2 }, children: group.label }), jsxRuntime.jsx(ui.NiceSelect, { className: PixelEditor_module.propSelect, value: group.value, onChange: (val) => group.set(val), options: group.options.map((opt) => ({
|
|
@@ -304,7 +307,11 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
|
|
|
304
307
|
return (
|
|
305
308
|
// A part can be placed twice (left and right leg, flipped), so its id
|
|
306
309
|
// alone is not a unique key.
|
|
307
|
-
jsxRuntime.jsxs("div", { className: PixelEditor_module.genAssemblyItem, children: [jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.btnIcon, variant: "ghost", size: "sm", onClick: () => togglePart(ap.partId), title: ((_a = ap.visible) !== null && _a !== void 0 ? _a : true)
|
|
310
|
+
jsxRuntime.jsxs("div", { className: PixelEditor_module.genAssemblyItem, children: [jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.btnIcon, variant: "ghost", size: "sm", onClick: () => togglePart(ap.partId), title: ((_a = ap.visible) !== null && _a !== void 0 ? _a : true)
|
|
311
|
+
? t('spriteGeneratorPanel.hide', 'Hide')
|
|
312
|
+
: t('spriteGeneratorPanel.show', 'Show'), "aria-label": ((_b = ap.visible) !== null && _b !== void 0 ? _b : true)
|
|
313
|
+
? t('spriteGeneratorPanel.hide', 'Hide')
|
|
314
|
+
: t('spriteGeneratorPanel.show', 'Show'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: ((_c = ap.visible) !== null && _c !== void 0 ? _c : true) ? 'eye' : 'eye-off', size: 14 }) }), jsxRuntime.jsx("span", { className: PixelEditor_module.genAssemblyName, children: (_d = part === null || part === void 0 ? void 0 : part.name) !== null && _d !== void 0 ? _d : ap.partId }), jsxRuntime.jsxs("span", { style: { fontSize: 9, color: 'var(--nice-text-muted)' }, children: ["z:", (_e = part === null || part === void 0 ? void 0 : part.zOrder) !== null && _e !== void 0 ? _e : 0] }), jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.btnIcon, variant: "ghost", size: "sm", onClick: () => removePart(ap.partId), title: t('spriteGeneratorPanel.remove', 'Remove'), "aria-label": t('spriteGeneratorPanel.remove', 'Remove'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, `${ap.partId}-${i}`));
|
|
308
315
|
})] })] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.genFooter, children: [jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.btnSecondary, variant: "ghost", onClick: onClose, children: t('spriteGeneratorPanel.cancel', 'Cancel') }), jsxRuntime.jsxs(ui.NiceButton, { className: PixelEditor_module.btnPrimary, variant: "primary", onClick: handleSendToCanvas, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "clipboard", size: 14 }), ' ', t('spriteGeneratorPanel.sendToCanvas', 'Send to Canvas')] })] })] }) }));
|
|
309
316
|
};
|
|
310
317
|
if (process.env.NODE_ENV !== 'production') {
|