@nice2dev/ui-graphics 1.2.1 → 1.2.2
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 +39 -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 +5 -5
- package/dist/cjs/game/GameAsset2dEditor.js +57 -38
- package/dist/cjs/photo/NiceAITools.js +3 -3
- package/dist/cjs/photo/PhotoEditorLeftPanel.js +14 -14
- package/dist/cjs/pixel/PixelEditor.js +1 -1
- package/dist/cjs/pixel/PixelEditorMenuBar.js +92 -27
- package/dist/cjs/pixel/PixelEditorRightPanel.js +7 -3
- 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 +9 -5
- 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 +1 -1
- 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 +5 -5
- package/dist/esm/game/GameAsset2dEditor.js +57 -38
- package/dist/esm/photo/NiceAITools.js +3 -3
- package/dist/esm/photo/PhotoEditorLeftPanel.js +14 -14
- package/dist/esm/pixel/PixelEditor.js +1 -1
- package/dist/esm/pixel/PixelEditorMenuBar.js +92 -27
- package/dist/esm/pixel/PixelEditorRightPanel.js +7 -3
- package/dist/esm/pixel/PixelEditorStatusBar.js +6 -2
- package/dist/esm/pixel/PixelEditorTimeline.js +5 -1
- package/dist/esm/pixel/PixelEditorToolbar.js +3 -1
- package/dist/esm/pixel/SpriteGeneratorPanel.js +18 -11
- package/dist/esm/texture/Nice3DTexturePainter.js +9 -5
- 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 +1 -1
- package/package.json +3 -3
|
@@ -14,7 +14,7 @@ var useGameAssetEditor = require('./useGameAssetEditor.js');
|
|
|
14
14
|
const MenuBar = ({ api }) => {
|
|
15
15
|
const { t } = i18n.useNiceTranslation();
|
|
16
16
|
const fileInputRef = React.useRef(null);
|
|
17
|
-
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuBar, children: [jsxRuntime.jsxs("h3", { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "gamepad", size: 16 }), ' ', t('gameAsset2dEditor.gameAssetEditor', 'Game Asset Editor')] }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.newProject('New Project'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "file", size: 14 }), " New
|
|
17
|
+
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuBar, children: [jsxRuntime.jsxs("h3", { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "gamepad", size: 16 }), ' ', t('gameAsset2dEditor.gameAssetEditor', 'Game Asset Editor')] }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.newProject('New Project'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "file", size: 14 }), " ", t('gameAsset2dEditor.new', 'New')] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "folder", size: 14 }), " ", t('gameAsset2dEditor.open', 'Open')] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.saveProject, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "save", size: 14 }), " ", t('gameAsset2dEditor.save', 'Save')] })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, disabled: !api.canUndo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-left", size: 14 }), " ", t('gameAsset2dEditor.undo', 'Undo')] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, disabled: !api.canRedo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-right", size: 14 }), " ", t('gameAsset2dEditor.redo', 'Redo')] })] }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: ".json", style: { display: 'none' }, onChange: (e) => {
|
|
18
18
|
var _a;
|
|
19
19
|
const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
|
|
20
20
|
if (file) {
|
|
@@ -27,11 +27,12 @@ const MenuBar = ({ api }) => {
|
|
|
27
27
|
MODE TABS
|
|
28
28
|
──────────────────────────────────────────────────────────────── */
|
|
29
29
|
const ModeTabs = ({ api }) => {
|
|
30
|
+
const { t } = i18n.useNiceTranslation();
|
|
30
31
|
const modes = [
|
|
31
|
-
{ id: 'tilemap', label: 'Tile Map', icon: 'grid' },
|
|
32
|
-
{ id: 'spritesheet', label: 'Sprite Sheet', icon: 'image' },
|
|
33
|
-
{ id: 'animation', label: 'Animation', icon: 'video' },
|
|
34
|
-
{ id: 'effects', label: 'Effects', icon: 'wand' },
|
|
32
|
+
{ id: 'tilemap', label: t('gameAsset2dEditor.tileMap', 'Tile Map'), icon: 'grid' },
|
|
33
|
+
{ id: 'spritesheet', label: t('gameAsset2dEditor.spriteSheet', 'Sprite Sheet'), icon: 'image' },
|
|
34
|
+
{ id: 'animation', label: t('gameAsset2dEditor.animation', 'Animation'), icon: 'video' },
|
|
35
|
+
{ id: 'effects', label: t('gameAsset2dEditor.effects2', 'Effects'), icon: 'wand' },
|
|
35
36
|
];
|
|
36
37
|
return (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.modeTabs, children: modes.map((mode) => (jsxRuntime.jsxs(ui.NiceButton, { className: `${GameAsset2dEditor_module.modeTab} ${api.editorState.mode === mode.id ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.mode === mode.id ? 'primary' : 'ghost', onClick: () => api.setMode(mode.id), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: mode.icon, size: 16 }), " ", mode.label] }, mode.id))) }));
|
|
37
38
|
};
|
|
@@ -41,13 +42,17 @@ const ModeTabs = ({ api }) => {
|
|
|
41
42
|
const TileMapToolbar = ({ api }) => {
|
|
42
43
|
const { t } = i18n.useNiceTranslation();
|
|
43
44
|
const tools = [
|
|
44
|
-
{ id: 'select', icon: 'square', label: 'Select' },
|
|
45
|
-
{ id: 'brush', icon: 'brush', label: 'Brush' },
|
|
46
|
-
{ id: 'eraser', icon: 'eraser', label: 'Eraser' },
|
|
47
|
-
{ id: 'fill', icon: 'bucket', label: 'Fill' },
|
|
48
|
-
{ id: 'rectangle', icon: 'square', label: 'Rectangle' },
|
|
49
|
-
{ id: 'line', icon: 'line', label: 'Line' },
|
|
50
|
-
{
|
|
45
|
+
{ id: 'select', icon: 'square', label: t('gameAsset2dEditor.select', 'Select') },
|
|
46
|
+
{ id: 'brush', icon: 'brush', label: t('gameAsset2dEditor.brush', 'Brush') },
|
|
47
|
+
{ id: 'eraser', icon: 'eraser', label: t('gameAsset2dEditor.eraser', 'Eraser') },
|
|
48
|
+
{ id: 'fill', icon: 'bucket', label: t('gameAsset2dEditor.fill', 'Fill') },
|
|
49
|
+
{ id: 'rectangle', icon: 'square', label: t('gameAsset2dEditor.rectangle', 'Rectangle') },
|
|
50
|
+
{ id: 'line', icon: 'line', label: t('gameAsset2dEditor.line', 'Line') },
|
|
51
|
+
{
|
|
52
|
+
id: 'eyedropper',
|
|
53
|
+
icon: 'eyedropper',
|
|
54
|
+
label: t('gameAsset2dEditor.eyedropper', 'Eyedropper'),
|
|
55
|
+
},
|
|
51
56
|
];
|
|
52
57
|
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolbar, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.toolGroup, children: tools.map((tool) => (jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.tileMapTool === tool.id ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.tileMapTool === tool.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTileMapTool(tool.id), title: tool.label, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: tool.icon, size: 16 }) }, tool.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.showGrid ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.showGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleGrid, title: t('gameAsset2dEditor.toggleGrid', 'Toggle Grid'), "aria-label": t('gameAsset2dEditor.toggleGrid', 'Toggle Grid'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "grid", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.showCollision ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.showCollision ? 'primary' : 'ghost', size: "sm", onClick: api.toggleCollision, title: t('gameAsset2dEditor.showCollision', 'Show Collision'), "aria-label": t('gameAsset2dEditor.showCollision', 'Show Collision'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.snapToGrid ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.snapToGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleSnap, title: t('gameAsset2dEditor.snapToGrid', 'Snap to Grid'), "aria-label": t('gameAsset2dEditor.snapToGrid', 'Snap to Grid'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "grid", size: 16 }) })] }));
|
|
53
58
|
};
|
|
@@ -58,7 +63,7 @@ const SpriteSheetToolbar = ({ api }) => {
|
|
|
58
63
|
const { t } = i18n.useNiceTranslation();
|
|
59
64
|
const [sliceWidth, setSliceWidth] = React.useState(16);
|
|
60
65
|
const [sliceHeight, setSliceHeight] = React.useState(16);
|
|
61
|
-
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolbar, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolGroup, children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'select' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'select' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('select'), title: t('gameAsset2dEditor.select', 'Select'), "aria-label": t('gameAsset2dEditor.select', 'Select'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'slice' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'slice' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('slice'), title: t('gameAsset2dEditor.manualSlice', 'Manual Slice'), "aria-label": t('gameAsset2dEditor.manualSlice', 'Manual Slice'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "scissors", size: 16 }) })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("label", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #8892a8)' }, children: [
|
|
66
|
+
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolbar, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolGroup, children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'select' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'select' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('select'), title: t('gameAsset2dEditor.select', 'Select'), "aria-label": t('gameAsset2dEditor.select', 'Select'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'slice' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'slice' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('slice'), title: t('gameAsset2dEditor.manualSlice', 'Manual Slice'), "aria-label": t('gameAsset2dEditor.manualSlice', 'Manual Slice'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "scissors", size: 16 }) })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("label", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #8892a8)' }, children: [t('gameAsset2dEditor.frameSize', 'Frame size:'), jsxRuntime.jsx(ui.NiceNumberInput, { value: sliceWidth, onChange: (val) => setSliceWidth(val !== null && val !== void 0 ? val : 16), style: { width: 40, margin: '0 4px' }, className: GameAsset2dEditor_module.panelInput }), "\u00D7", jsxRuntime.jsx(ui.NiceNumberInput, { value: sliceHeight, onChange: (val) => setSliceHeight(val !== null && val !== void 0 ? val : 16), style: { width: 40, marginLeft: 4 }, className: GameAsset2dEditor_module.panelInput })] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: () => api.autoSlice(sliceWidth, sliceHeight), style: { marginLeft: 8 }, children: t('gameAsset2dEditor.autoSlice', 'Auto Slice') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: api.detectSprites, style: { marginLeft: 4 }, children: t('gameAsset2dEditor.detectSprites', 'Detect Sprites') })] }));
|
|
62
67
|
};
|
|
63
68
|
/* ────────────────────────────────────────────────────────────────
|
|
64
69
|
TILE PALETTE (LEFT PANEL)
|
|
@@ -66,7 +71,7 @@ const SpriteSheetToolbar = ({ api }) => {
|
|
|
66
71
|
const TilePalette = ({ api }) => {
|
|
67
72
|
const { t } = i18n.useNiceTranslation();
|
|
68
73
|
const fileInputRef = React.useRef(null);
|
|
69
|
-
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.tiles', 'Tiles') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children:
|
|
74
|
+
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.tiles', 'Tiles') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.tileSets.length === 0 ? (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.emptyState, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noTilesYet', 'No tiles yet') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.importTiles', 'Import Tiles') })] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.tilePalette, children: api.project.tileSets.map((tile) => (jsxRuntime.jsx("div", { className: `${GameAsset2dEditor_module.tileItem} ${api.editorState.selectedTileId === tile.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectTile(tile.id), title: tile.name, children: jsxRuntime.jsx("img", { src: tile.thumbnail, alt: tile.name }) }, tile.id))) })) }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
|
|
70
75
|
var _a;
|
|
71
76
|
const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
|
|
72
77
|
if (file) {
|
|
@@ -81,10 +86,12 @@ const TilePalette = ({ api }) => {
|
|
|
81
86
|
const LayersPanel = ({ api }) => {
|
|
82
87
|
const { t } = i18n.useNiceTranslation();
|
|
83
88
|
const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
|
|
84
|
-
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.layers', 'Layers') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children:
|
|
89
|
+
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.layers', 'Layers') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: activeMap ? (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.layersList, children: [...activeMap.layers].reverse().map((layer) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeLayerId === layer.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectLayer(layer.id), children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.layerVisibility} ${!layer.visible ? GameAsset2dEditor_module.hidden : ''}`, variant: "ghost", size: "sm", onClick: (e) => {
|
|
85
90
|
e.stopPropagation();
|
|
86
91
|
api.toggleLayerVisibility(layer.id);
|
|
87
|
-
}, "aria-label": layer.visible
|
|
92
|
+
}, "aria-label": layer.visible
|
|
93
|
+
? t('gameAsset2dEditor.hideLayer', 'Hide layer')
|
|
94
|
+
: t('gameAsset2dEditor.showLayer', 'Show layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: layer.visible ? 'eye' : 'eye-off', size: 16 }) }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: layer.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [Math.round(layer.opacity * 100), "%"] })] }, layer.id))) })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noTileMapSelected', 'No tile map selected') }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.maps', 'Maps') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.createTileMap('New Map', 32, 32), children: t('gameAsset2dEditor.new2', '+ New') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.tileMaps.map((map) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeTileMapId === map.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectTileMap(map.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: map.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [map.width, "\u00D7", map.height] })] }, map.id))) })] }));
|
|
88
95
|
};
|
|
89
96
|
/* ────────────────────────────────────────────────────────────────
|
|
90
97
|
TILE MAP CANVAS
|
|
@@ -266,7 +273,7 @@ const SpriteSheetCanvas = ({ api }) => {
|
|
|
266
273
|
const SpriteSheetsList = ({ api }) => {
|
|
267
274
|
const { t } = i18n.useNiceTranslation();
|
|
268
275
|
const fileInputRef = React.useRef(null);
|
|
269
|
-
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.spriteSheets', 'Sprite Sheets') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children:
|
|
276
|
+
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.spriteSheets', 'Sprite Sheets') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.import', '+ Import') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.spriteSheets.length === 0 ? (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noSpriteSheets', 'No sprite sheets') }) })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.layersList, children: api.project.spriteSheets.map((sheet) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectSpriteSheet(sheet.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: sheet.name }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: t('gameAsset2dEditor.frames', '{frames} frames').replace('{frames}', String(sheet.frames.length)) })] }, sheet.id))) })) }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
|
|
270
277
|
var _a;
|
|
271
278
|
const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
|
|
272
279
|
if (file) {
|
|
@@ -289,7 +296,7 @@ const FramesPanel = ({ api }) => {
|
|
|
289
296
|
setAnimName('');
|
|
290
297
|
}
|
|
291
298
|
}, [animName, api]);
|
|
292
|
-
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.
|
|
299
|
+
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.frames2', 'Frames ({frames})').replace('{frames}', String((_a = activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.length) !== null && _a !== void 0 ? _a : 0)) }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, style: { maxHeight: 200 }, children: activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.map((frame) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.selectedFrameIds.includes(frame.id) ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectFrames([frame.id]), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: frame.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [frame.width, "\u00D7", frame.height] })] }, frame.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.animations', 'Animations') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [api.editorState.selectedFrameIds.length > 0 && (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.animationName', 'Animation name...'), value: animName, onChange: (val) => setAnimName(val) }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnPrimary, variant: "primary", onClick: createAnimationFromSelection, style: { marginTop: 8, width: '100%' }, disabled: !animName, children: t('gameAsset2dEditor.createFromFrames', 'Create from {count} frames').replace('{count}', String(api.editorState.selectedFrameIds.length)) })] })), activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.animations.map((anim) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: anim.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [anim.frameIds.length, "f"] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeAnimation(anim.id), "aria-label": t('gameAsset2dEditor.removeAnimation', 'Remove animation'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, anim.id)))] })] }));
|
|
293
300
|
};
|
|
294
301
|
/* ────────────────────────────────────────────────────────────────
|
|
295
302
|
ANIMATION STATE MACHINE
|
|
@@ -309,13 +316,16 @@ const AnimationStateMachineView = ({ api }) => {
|
|
|
309
316
|
}
|
|
310
317
|
return result;
|
|
311
318
|
}, [api.project.spriteSheets]);
|
|
312
|
-
return (jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.stateMachines', 'State Machines') }), jsxRuntime.jsx("button", { className: GameAsset2dEditor_module.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children:
|
|
319
|
+
return (jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.stateMachines', 'State Machines') }), jsxRuntime.jsx("button", { className: GameAsset2dEditor_module.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children: t('gameAsset2dEditor.new2', '+ New') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map((sm) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeStateMachineId === sm.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectStateMachine(sm.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: sm.name }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: t('gameAsset2dEditor.states2', '{states} states').replace('{states}', String(sm.states.length)) })] }, sm.id))) }), activeSM && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.states', 'States') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.stateName', 'State name...'), value: newStateName, onChange: (val) => setNewStateName(val) }), allAnimations.length > 0 && newStateName && (jsxRuntime.jsx(ui.NiceSelect, { className: GameAsset2dEditor_module.panelInput, style: { marginTop: 4 }, onChange: (val) => {
|
|
313
320
|
if (val) {
|
|
314
321
|
api.addState(newStateName, val);
|
|
315
322
|
setNewStateName('');
|
|
316
323
|
}
|
|
317
324
|
}, options: [
|
|
318
|
-
{
|
|
325
|
+
{
|
|
326
|
+
value: '',
|
|
327
|
+
label: t('gameAsset2dEditor.selectAnimation', 'Select animation...'),
|
|
328
|
+
},
|
|
319
329
|
...allAnimations.map((anim) => ({
|
|
320
330
|
value: anim.id,
|
|
321
331
|
label: `${anim.sheetName}: ${anim.name}`,
|
|
@@ -332,18 +342,21 @@ const AnimationStateMachineView = ({ api }) => {
|
|
|
332
342
|
return (jsxRuntime.jsx("line", { x1: from.position.x + 60, y1: from.position.y + 20, x2: to.position.x + 60, y2: to.position.y + 20, className: GameAsset2dEditor_module.transition, onClick: () => api.removeTransition(trans.id) }, trans.id));
|
|
333
343
|
}), activeSM.states.map((state) => {
|
|
334
344
|
var _a, _b;
|
|
335
|
-
return (jsxRuntime.jsx("foreignObject", { x: state.position.x, y: state.position.y, width: 120, height: 50, children: jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.stateNode} ${api.editorState.selectedStateId === state.id ? GameAsset2dEditor_module.selected : ''} ${activeSM.entryStateId === state.id ? GameAsset2dEditor_module.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateNodeName, children: state.name }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateNodeAnim, children: (_b = (_a = allAnimations.find((a) => a.id === state.animationId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'No animation' })] }) }, state.id));
|
|
336
|
-
})] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.createAStateMachineTo', 'Create a state machine to design animation flows') }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.parameters', 'Parameters') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.addParameter('new_param', 'trigger'), disabled: !activeSM, children:
|
|
345
|
+
return (jsxRuntime.jsx("foreignObject", { x: state.position.x, y: state.position.y, width: 120, height: 50, children: jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.stateNode} ${api.editorState.selectedStateId === state.id ? GameAsset2dEditor_module.selected : ''} ${activeSM.entryStateId === state.id ? GameAsset2dEditor_module.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateNodeName, children: state.name }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateNodeAnim, children: (_b = (_a = allAnimations.find((a) => a.id === state.animationId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : t('gameAsset2dEditor.noAnimation', 'No animation') })] }) }, state.id));
|
|
346
|
+
})] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.createAStateMachineTo', 'Create a state machine to design animation flows') }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.parameters', 'Parameters') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.addParameter('new_param', 'trigger'), disabled: !activeSM, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: activeSM === null || activeSM === void 0 ? void 0 : activeSM.parameters.map((param) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: param.type }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: param.name }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeParameter(param.id), "aria-label": t('gameAsset2dEditor.removeParameter', 'Remove parameter'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, param.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.transitions', 'Transitions') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [activeSM === null || activeSM === void 0 ? void 0 : activeSM.transitions.map((trans) => {
|
|
337
347
|
var _a, _b;
|
|
338
348
|
const from = activeSM.states.find((s) => s.id === trans.fromStateId);
|
|
339
349
|
const to = activeSM.states.find((s) => s.id === trans.toStateId);
|
|
340
350
|
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerName, children: [(_a = from === null || from === void 0 ? void 0 : from.name) !== null && _a !== void 0 ? _a : '?', " ", jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-right", size: 12 }), " ", (_b = to === null || to === void 0 ? void 0 : to.name) !== null && _b !== void 0 ? _b : '?'] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeTransition(trans.id), "aria-label": t('gameAsset2dEditor.removeTransition', 'Remove transition'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, trans.id));
|
|
341
|
-
}), api.editorState.selectedStateId && (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, style: { marginTop: 12 }, children: [jsxRuntime.jsx("label", { className: GameAsset2dEditor_module.panelLabel, children:
|
|
351
|
+
}), api.editorState.selectedStateId && (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, style: { marginTop: 12 }, children: [jsxRuntime.jsx("label", { className: GameAsset2dEditor_module.panelLabel, children: t('gameAsset2dEditor.addTransitionTo', 'Add transition to:') }), jsxRuntime.jsx(ui.NiceSelect, { className: GameAsset2dEditor_module.panelInput, onChange: (val) => {
|
|
342
352
|
if (val && api.editorState.selectedStateId) {
|
|
343
353
|
api.addTransition(api.editorState.selectedStateId, val);
|
|
344
354
|
}
|
|
345
355
|
}, options: [
|
|
346
|
-
{
|
|
356
|
+
{
|
|
357
|
+
value: '',
|
|
358
|
+
label: t('gameAsset2dEditor.selectTargetState', 'Select target state...'),
|
|
359
|
+
},
|
|
347
360
|
...((_a = activeSM === null || activeSM === void 0 ? void 0 : activeSM.states.filter((s) => s.id !== api.editorState.selectedStateId).map((s) => ({ value: s.id, label: s.name }))) !== null && _a !== void 0 ? _a : []),
|
|
348
361
|
] })] }))] })] })] }));
|
|
349
362
|
};
|
|
@@ -355,33 +368,39 @@ const EffectsView = ({ api }) => {
|
|
|
355
368
|
const [_currentEffects, _setCurrentEffects] = React.useState([]);
|
|
356
369
|
const [presetName, setPresetName] = React.useState('');
|
|
357
370
|
const effectTypes = [
|
|
358
|
-
{ type: 'brightness', label: 'Brightness' },
|
|
359
|
-
{ type: 'contrast', label: 'Contrast' },
|
|
360
|
-
{ type: 'saturation', label: 'Saturation' },
|
|
361
|
-
{ type: 'hue-shift', label: 'Hue Shift' },
|
|
362
|
-
{ type: 'invert', label: 'Invert' },
|
|
363
|
-
{ type: 'pixelate', label: 'Pixelate' },
|
|
364
|
-
{ type: 'outline', label: 'Outline' },
|
|
365
|
-
{ type: 'tint', label: 'Tint' },
|
|
366
|
-
{ type: 'blur', label: 'Blur' },
|
|
367
|
-
{ type: 'glow', label: 'Glow' },
|
|
368
|
-
{ type: 'shadow', label: 'Shadow' },
|
|
369
|
-
{ type: 'palette-swap', label: 'Palette Swap' },
|
|
371
|
+
{ type: 'brightness', label: t('gameAsset2dEditor.brightness', 'Brightness') },
|
|
372
|
+
{ type: 'contrast', label: t('gameAsset2dEditor.contrast', 'Contrast') },
|
|
373
|
+
{ type: 'saturation', label: t('gameAsset2dEditor.saturation', 'Saturation') },
|
|
374
|
+
{ type: 'hue-shift', label: t('gameAsset2dEditor.hueShift', 'Hue Shift') },
|
|
375
|
+
{ type: 'invert', label: t('gameAsset2dEditor.invert', 'Invert') },
|
|
376
|
+
{ type: 'pixelate', label: t('gameAsset2dEditor.pixelate', 'Pixelate') },
|
|
377
|
+
{ type: 'outline', label: t('gameAsset2dEditor.outline', 'Outline') },
|
|
378
|
+
{ type: 'tint', label: t('gameAsset2dEditor.tint', 'Tint') },
|
|
379
|
+
{ type: 'blur', label: t('gameAsset2dEditor.blur', 'Blur') },
|
|
380
|
+
{ type: 'glow', label: t('gameAsset2dEditor.glow', 'Glow') },
|
|
381
|
+
{ type: 'shadow', label: t('gameAsset2dEditor.shadow', 'Shadow') },
|
|
382
|
+
{ type: 'palette-swap', label: t('gameAsset2dEditor.paletteSwap', 'Palette Swap') },
|
|
370
383
|
];
|
|
371
384
|
return (jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.addEffect', 'Add Effect') }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: effectTypes.map(({ type, label }) => (jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.layerItem, variant: "ghost", onClick: () => api.addEffect(type), style: { cursor: 'pointer', border: 'none', textAlign: 'left' }, children: jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: label }) }, type))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.presets', 'Presets') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.presetName', 'Preset name...'), value: presetName, onChange: (val) => setPresetName(val) }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", style: { marginTop: 4, width: '100%' }, onClick: () => {
|
|
372
385
|
if (presetName) {
|
|
373
386
|
api.saveEffectPreset(presetName);
|
|
374
387
|
setPresetName('');
|
|
375
388
|
}
|
|
376
|
-
}, disabled: !presetName, children: t('gameAsset2dEditor.saveCurrentEffects', 'Save Current Effects') })] }), api.project.effectPresets.map((preset) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: preset.name }), jsxRuntime.
|
|
389
|
+
}, disabled: !presetName, children: t('gameAsset2dEditor.saveCurrentEffects', 'Save Current Effects') })] }), api.project.effectPresets.map((preset) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: preset.name }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: t('gameAsset2dEditor.effects', '{effects} effects').replace('{effects}', String(preset.effects.length)) })] }, preset.id)))] })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.viewport, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.selectASpriteOrTile', 'Select a sprite or tile to preview effects') }) }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.activeEffects', 'Active Effects') }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.effectsList, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.addEffectsFromTheLeft', 'Add effects from the left panel') }) }) }) })] })] }));
|
|
377
390
|
};
|
|
378
391
|
/* ────────────────────────────────────────────────────────────────
|
|
379
392
|
STATUS BAR
|
|
380
393
|
──────────────────────────────────────────────────────────────── */
|
|
381
394
|
const StatusBar = ({ api }) => {
|
|
395
|
+
const { t } = i18n.useNiceTranslation();
|
|
382
396
|
const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
|
|
383
397
|
const activeSheet = api.project.spriteSheets.find((s) => s.id === api.editorState.activeSpriteSheetId);
|
|
384
|
-
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.statusBar, children: [jsxRuntime.
|
|
398
|
+
return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.statusBar, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.statusItem, children: t('gameAsset2dEditor.mode', 'Mode: {mode}').replace('{mode}', String(api.editorState.mode)) }), api.editorState.mode === 'tilemap' && activeMap && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.statusItem, children: t('gameAsset2dEditor.map', 'Map: {name} ({width}×{height})')
|
|
399
|
+
.replace('{name}', String(activeMap.name))
|
|
400
|
+
.replace('{width}', String(activeMap.width))
|
|
401
|
+
.replace('{height}', String(activeMap.height)) }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.statusItem, children: t('gameAsset2dEditor.tilePx', 'Tile: {tileWidth}×{tileHeight}px')
|
|
402
|
+
.replace('{tileWidth}', String(activeMap.tileWidth))
|
|
403
|
+
.replace('{tileHeight}', String(activeMap.tileHeight)) })] })), api.editorState.mode === 'spritesheet' && activeSheet && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.statusItem, children: t('gameAsset2dEditor.sheet', 'Sheet: {name}').replace('{name}', String(activeSheet.name)) }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.statusItem, children: t('gameAsset2dEditor.selectedFrames', 'Selected: {selectedFrameIds} frames').replace('{selectedFrameIds}', String(api.editorState.selectedFrameIds.length)) })] })), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.zoomControl, children: [jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(api.editorState.zoom - 0.25), children: "\u2212" }), jsxRuntime.jsxs("span", { children: [Math.round(api.editorState.zoom * 100), "%"] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(api.editorState.zoom + 0.25), children: "+" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(1), children: "\u2299" })] })] }));
|
|
385
404
|
};
|
|
386
405
|
/* ────────────────────────────────────────────────────────────────
|
|
387
406
|
MAIN COMPONENT
|
|
@@ -483,10 +483,10 @@ const NiceAITools = ({ sourceImage, onResult, className = '', }) => {
|
|
|
483
483
|
alignItems: 'center',
|
|
484
484
|
justifyContent: 'center',
|
|
485
485
|
gap: 4,
|
|
486
|
-
}, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: TOOL_ICONS[key], size: 14 }), " ", label] }, key))) }), ai.activeTool === 'colorize' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: [
|
|
486
|
+
}, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: TOOL_ICONS[key], size: 14 }), " ", label] }, key))) }), ai.activeTool === 'colorize' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: [t('aiTools.intensity', 'Intensity: {intensity}').replace('{intensity}', String(ai.colorizeOptions.intensity.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.colorizeOptions.intensity, onChange: (e) => ai.setColorizeOptions({ ...ai.colorizeOptions, intensity: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.saturation', 'Saturation: {saturation}').replace('{saturation}', String(ai.colorizeOptions.saturation.toFixed(1))), jsxRuntime.jsx("input", { type: "range", min: 0, max: 2, step: 0.1, value: ai.colorizeOptions.saturation, onChange: (e) => ai.setColorizeOptions({ ...ai.colorizeOptions, saturation: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.temperature', 'Temperature:'), jsxRuntime.jsxs("select", { value: ai.colorizeOptions.temperature, onChange: (e) => ai.setColorizeOptions({
|
|
487
487
|
...ai.colorizeOptions,
|
|
488
488
|
temperature: e.target.value,
|
|
489
|
-
}), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: "warm", children: t('aiTools.warm', 'Warm') }), jsxRuntime.jsx("option", { value: "neutral", children: t('aiTools.neutral', 'Neutral') }), jsxRuntime.jsx("option", { value: "cool", children: t('aiTools.cool', 'Cool') })] })] })] })), ai.activeTool === 'background-remove' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: [
|
|
489
|
+
}), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: "warm", children: t('aiTools.warm', 'Warm') }), jsxRuntime.jsx("option", { value: "neutral", children: t('aiTools.neutral', 'Neutral') }), jsxRuntime.jsx("option", { value: "cool", children: t('aiTools.cool', 'Cool') })] })] })] })), ai.activeTool === 'background-remove' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: [t('aiTools.threshold', 'Threshold: {threshold}').replace('{threshold}', String(ai.bgRemoveOptions.threshold.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0.1, max: 0.9, step: 0.05, value: ai.bgRemoveOptions.threshold, onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, threshold: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.iterations', 'Iterations: {iterations}').replace('{iterations}', String(ai.bgRemoveOptions.iterations)), jsxRuntime.jsx("input", { type: "range", min: 1, max: 20, step: 1, value: ai.bgRemoveOptions.iterations, onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, iterations: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.featherPx', 'Feather: {featherRadius}px').replace('{featherRadius}', String(ai.bgRemoveOptions.featherRadius)), jsxRuntime.jsx("input", { type: "range", min: 0, max: 10, step: 1, value: ai.bgRemoveOptions.featherRadius, onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, featherRadius: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [t('aiTools.replaceBg', 'Replace BG:'), jsxRuntime.jsx("input", { type: "color", value: (_a = ai.bgRemoveOptions.replacementColor) !== null && _a !== void 0 ? _a : '#ffffff', onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, replacementColor: e.target.value }) }), jsxRuntime.jsx("button", { type: "button", onClick: () => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, replacementColor: null }), style: { fontSize: 10 }, children: t('aiTools.transparent', 'Transparent') })] })] })), ai.activeTool === 'upscale' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: [t('aiTools.scale', 'Scale:'), jsxRuntime.jsxs("select", { value: ai.upscaleOptions.scale, onChange: (e) => ai.setUpscaleOptions({ ...ai.upscaleOptions, scale: +e.target.value }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: 2, children: "2x" }), jsxRuntime.jsx("option", { value: 3, children: "3x" }), jsxRuntime.jsx("option", { value: 4, children: "4x" })] })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.sharpen', 'Sharpen: {sharpen}').replace('{sharpen}', String(ai.upscaleOptions.sharpen.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.upscaleOptions.sharpen, onChange: (e) => ai.setUpscaleOptions({ ...ai.upscaleOptions, sharpen: +e.target.value }), style: { width: '100%' } })] })] })), ai.activeTool === 'denoise' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: [t('aiTools.strength', 'Strength: {strength}').replace('{strength}', String(ai.denoiseOptions.strength.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.denoiseOptions.strength, onChange: (e) => ai.setDenoiseOptions({ ...ai.denoiseOptions, strength: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.detail', 'Detail: {detailPreservation}').replace('{detailPreservation}', String(ai.denoiseOptions.detailPreservation.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.denoiseOptions.detailPreservation, onChange: (e) => ai.setDenoiseOptions({ ...ai.denoiseOptions, detailPreservation: +e.target.value }), style: { width: '100%' } })] })] })), jsxRuntime.jsx("button", { type: "button", onClick: handleProcess, disabled: ai.isProcessing || !sourceImage, style: {
|
|
490
490
|
background: ai.isProcessing
|
|
491
491
|
? 'var(--nice-bg-tertiary, #94a3b8)'
|
|
492
492
|
: 'var(--nice-color-accent, #6366f1)',
|
|
@@ -499,7 +499,7 @@ const NiceAITools = ({ sourceImage, onResult, className = '', }) => {
|
|
|
499
499
|
alignItems: 'center',
|
|
500
500
|
justifyContent: 'center',
|
|
501
501
|
gap: 4,
|
|
502
|
-
}, children: ai.isProcessing ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "refresh", size: 14 }), " Processing
|
|
502
|
+
}, children: ai.isProcessing ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "refresh", size: 14 }), " ", t('aiTools.processing', 'Processing…')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "play", size: 14 }), " ", TOOL_LABELS[ai.activeTool]] })) }), ai.lastResult && (jsxRuntime.jsxs("div", { style: { fontSize: 11, color: 'var(--nice-text-muted, #64748b)' }, children: [t('aiTools.processedInMs', 'Processed in {ms}ms').replace('{ms}', ai.lastResult.processingTimeMs.toFixed(0)), ai.activeTool === 'upscale' &&
|
|
503
503
|
` → ${ai.lastResult.imageData.width}×${ai.lastResult.imageData.height}`] }))] }));
|
|
504
504
|
};
|
|
505
505
|
|
|
@@ -61,12 +61,12 @@ 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,
|
|
@@ -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", { 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',
|
|
@@ -194,7 +194,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
|
|
|
194
194
|
].map((c) => (jsxRuntime.jsx("div", { 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],
|