@nice2dev/ui-graphics 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design/design-tools.js +26 -0
- package/dist/cjs/design/design-tools.js.map +1 -0
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/pixel/pixel-pro.js +67 -0
- package/dist/cjs/pixel/pixel-pro.js.map +1 -0
- package/dist/cjs/ui/dist/index.js +26325 -18992
- package/dist/cjs/ui/dist/index.js.map +1 -1
- package/dist/esm/animation/AnimationEditor.js +5 -5
- package/dist/esm/animation/Audience.js +2 -2
- package/dist/esm/core/LocalUI.js +4 -4
- package/dist/esm/design/design-tools.js +24 -0
- package/dist/esm/design/design-tools.js.map +1 -0
- package/dist/esm/game/GameAsset2dEditor.js +19 -19
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/pixel/PixelEditor.js +3 -3
- package/dist/esm/pixel/PixelEditorMenuBar.js +2 -2
- package/dist/esm/pixel/PixelEditorRightPanel.js +3 -3
- package/dist/esm/pixel/PixelEditorTimeline.js +2 -2
- package/dist/esm/pixel/PixelEditorToolbar.js +2 -2
- package/dist/esm/pixel/SpriteGeneratorPanel.js +8 -8
- package/dist/esm/pixel/pixel-pro.js +65 -0
- package/dist/esm/pixel/pixel-pro.js.map +1 -0
- package/dist/esm/ui/dist/index.js +25903 -18591
- package/dist/esm/ui/dist/index.js.map +1 -1
- package/dist/esm/vector/VectorEditor.js +3 -3
- package/dist/esm/vector/VectorEditorMenuBar.js +3 -3
- package/dist/esm/vector/VectorEditorRightPanel.js +13 -13
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { NiceButton as
|
|
2
|
+
import { NiceButton as Oe, NiceModal as _s, NiceTextArea as ms } from '../ui/dist/index.js';
|
|
3
3
|
import styles from './VectorEditor.module.css.js';
|
|
4
4
|
import { TOOLS } from './vectorEditorTypes.js';
|
|
5
5
|
import { ShapeRenderer } from './VectorEditorShapeRenderer.js';
|
|
@@ -17,13 +17,13 @@ const NiceVectorEditor = ({ width: artW = 512, height: artH = 512, className, on
|
|
|
17
17
|
if (f)
|
|
18
18
|
openFile(f);
|
|
19
19
|
e.target.value = "";
|
|
20
|
-
} }), jsx(VectorEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary }), jsxs("div", { className: styles.mainArea, children: [jsx("div", { className: styles.toolbar, children: TOOLS.map((t) => (jsx(
|
|
20
|
+
} }), jsx(VectorEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary }), jsxs("div", { className: styles.mainArea, children: [jsx("div", { className: styles.toolbar, children: TOOLS.map((t) => (jsx(Oe, { className: `${styles.toolBtn} ${tool === t.id ? styles.toolBtnActive : ""}`, onClick: () => switchTool(t.id), "aria-label": `${t.label} (${t.key})`, variant: tool === t.id ? "primary" : "ghost", size: "sm", children: t.icon }, t.id))) }), jsx("div", { ref: boxRef, className: styles.canvasContainer, children: jsxs("svg", { viewBox: `0 0 ${artW} ${artH}`, onMouseDown: onDown, onMouseMove: onMove, onMouseUp: onUp, onMouseLeave: () => {
|
|
21
21
|
/* handled internally via refs */
|
|
22
22
|
}, onDoubleClick: onDblClick, onWheel: onWheel, onContextMenu: (e) => e.preventDefault(), style: {
|
|
23
23
|
transform: `translate(${px}px, ${py}px) scale(${zoom})`,
|
|
24
24
|
transformOrigin: "center center",
|
|
25
25
|
cursor: tool === "pointer" ? "default" : "crosshair",
|
|
26
|
-
}, children: [jsx("rect", { x: 0, y: 0, width: artW, height: artH, fill: "#222" }), zoom >= 2 && (jsxs("g", { opacity: 0.08, children: [Array.from({ length: Math.floor(artW / gridSize) + 1 }, (_, i) => (jsx("line", { x1: i * gridSize, y1: 0, x2: i * gridSize, y2: artH, stroke: "#fff", strokeWidth: 1 / zoom }, `gx${i}`))), Array.from({ length: Math.floor(artH / gridSize) + 1 }, (_, i) => (jsx("line", { x1: 0, y1: i * gridSize, x2: artW, y2: i * gridSize, stroke: "#fff", strokeWidth: 1 / zoom }, `gy${i}`)))] })), shapes.map((s) => (jsx(ShapeRenderer, { shape: s, selected: s.id === selId, zoom: zoom }, s.id)))] }) }), jsx(VectorEditorRightPanel, { api: api })] }), jsx(VectorEditorStatusBar, { api: api, artW: artW, artH: artH }), jsxs(
|
|
26
|
+
}, children: [jsx("rect", { x: 0, y: 0, width: artW, height: artH, fill: "#222" }), zoom >= 2 && (jsxs("g", { opacity: 0.08, children: [Array.from({ length: Math.floor(artW / gridSize) + 1 }, (_, i) => (jsx("line", { x1: i * gridSize, y1: 0, x2: i * gridSize, y2: artH, stroke: "#fff", strokeWidth: 1 / zoom }, `gx${i}`))), Array.from({ length: Math.floor(artH / gridSize) + 1 }, (_, i) => (jsx("line", { x1: 0, y1: i * gridSize, x2: artW, y2: i * gridSize, stroke: "#fff", strokeWidth: 1 / zoom }, `gy${i}`)))] })), shapes.map((s) => (jsx(ShapeRenderer, { shape: s, selected: s.id === selId, zoom: zoom }, s.id)))] }) }), jsx(VectorEditorRightPanel, { api: api })] }), jsx(VectorEditorStatusBar, { api: api, artW: artW, artH: artH }), jsxs(_s, { open: dlgSvg, onClose: () => setDlgSvg(false), title: "Paste SVG", children: [jsx("label", { children: "Paste SVG source code below:" }), jsx(ms, { value: svgText, onChange: (val) => setSvgText(val), placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...>' }), jsxs("div", { className: styles.dialogActions, children: [jsx(Oe, { variant: "ghost", onClick: () => setDlgSvg(false), children: "Cancel" }), jsx(Oe, { variant: "primary", onClick: () => importSVGString(svgText), children: "Import" })] })] })] }));
|
|
27
27
|
};
|
|
28
28
|
/** @deprecated Use NiceVectorEditor */
|
|
29
29
|
const VectorEditor = NiceVectorEditor;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { NiceButton as
|
|
3
|
+
import { NiceButton as Oe, NiceSelect as nn, NiceCheckbox as ma } from '../ui/dist/index.js';
|
|
4
4
|
import styles from './VectorEditor.module.css.js';
|
|
5
5
|
|
|
6
6
|
const VectorEditorMenuBar$1 = ({ api, hasOnSaveToLibrary }) => {
|
|
7
7
|
const { selId, hasClipboard, snapGrid, fInp, shapes, boolSecondShape, newCanvas, setDlgSvg, setBoolSecondShape, exportSVG, exportPNG, exportJPG, exportWebP, exportBMP, undo, redo, duplicateShape, copyShape, pasteShape, deleteShape, bringToFront, sendToBack, flipH, flipV, alignShapes, setSnapGrid, saveToLibrary, unionShapes, subtractShapes, intersectShapes, excludeShapes, outlineStroke, } = api;
|
|
8
8
|
// Check if we can perform boolean ops (need 2 shapes selected)
|
|
9
9
|
const canBool = selId && boolSecondShape && selId !== boolSecondShape;
|
|
10
|
-
return (jsxs("div", { className: styles.menuBar, children: [jsx(
|
|
10
|
+
return (jsxs("div", { className: styles.menuBar, children: [jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: newCanvas, children: "New" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fInp.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "Open SVG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => setDlgSvg(true), children: "Paste SVG" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportSVG, children: "SVG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportPNG, children: "PNG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportJPG, children: "JPG" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportWebP, children: "WebP" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportBMP, children: "BMP" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: undo, children: "Undo" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: redo, children: "Redo" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: duplicateShape, disabled: !selId, "aria-label": "Ctrl+D", children: "Dup" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: copyShape, disabled: !selId, "aria-label": "Ctrl+C", children: "Copy" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: pasteShape, disabled: !hasClipboard, "aria-label": "Ctrl+V", children: "Paste" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: deleteShape, disabled: !selId, children: "Delete" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: bringToFront, disabled: !selId, children: "\u2191 Front" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: sendToBack, disabled: !selId, children: "\u2193 Back" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: flipH, disabled: !selId, "aria-label": "Flip H", children: "\u21D4" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: flipV, disabled: !selId, "aria-label": "Flip V", children: "\u21D5" }), jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("left"), disabled: !selId, "aria-label": "Align Left", children: "\u25E7" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("center"), disabled: !selId, "aria-label": "Align Center", children: "\u25EB" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => alignShapes("right"), disabled: !selId, "aria-label": "Align Right", children: "\u25E8" }), jsx("div", { className: styles.menuSep }), shapes.length >= 2 && (jsxs(Fragment, { children: [jsx(nn, { className: styles.menuBtn, value: boolSecondShape || "", onChange: (val) => setBoolSecondShape(val || null), options: [
|
|
11
11
|
{ value: "", label: "2nd Shape" },
|
|
12
12
|
...shapes.filter(s => s.id !== selId).map((s, i) => ({ value: s.id, label: `Shape ${i + 1}` })),
|
|
13
|
-
], style: { minWidth: 80 } }), jsx(
|
|
13
|
+
], style: { minWidth: 80 } }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: unionShapes, disabled: !canBool, "aria-label": "Union", children: "\u222A" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: subtractShapes, disabled: !canBool, "aria-label": "Subtract", children: "\u2212" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: intersectShapes, disabled: !canBool, "aria-label": "Intersect", children: "\u2229" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: excludeShapes, disabled: !canBool, "aria-label": "Exclude", children: "\u2295" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: outlineStroke, disabled: !selId, "aria-label": "Outline Stroke", children: "\u25AD" }), jsx("div", { className: styles.menuSep })] })), jsxs("label", { className: styles.menuLabel, children: [jsx(ma, { checked: snapGrid, onChange: () => setSnapGrid((v) => !v) }), "Snap"] }), hasOnSaveToLibrary && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: saveToLibrary, children: "\uD83D\uDCE6 Save to Library" })] }))] }));
|
|
14
14
|
};
|
|
15
15
|
var VectorEditorMenuBar = React.memo(VectorEditorMenuBar$1);
|
|
16
16
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import React, { useState } from 'react';
|
|
3
|
-
import { NiceButton as
|
|
3
|
+
import { NiceButton as Oe, NiceColorPicker as Nn, NiceTextInput as _t, NiceSelect as nn, NiceSlider as Ar, NiceNumberInput as Ri } from '../ui/dist/index.js';
|
|
4
4
|
import styles from './VectorEditor.module.css.js';
|
|
5
5
|
import { FONTS } from './vectorEditorTypes.js';
|
|
6
6
|
import { PRESET_GRADIENTS, gradientToCSS, gradientId, cloneGradient } from './vectorGradients.js';
|
|
@@ -21,14 +21,14 @@ const VectorEditorRightPanel$1 = ({ api }) => {
|
|
|
21
21
|
// Store gradient data as custom property (will be used in SVG export)
|
|
22
22
|
});
|
|
23
23
|
};
|
|
24
|
-
return (jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Appearance" }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Fill" }), jsxs("div", { style: { display: "flex", gap: 4 }, children: [jsx(
|
|
24
|
+
return (jsxs("div", { className: styles.rightPanel, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Appearance" }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Fill" }), jsxs("div", { style: { display: "flex", gap: 4 }, children: [jsx(Oe, { className: `${styles.menuBtn} ${fillMode === "solid" ? styles.menuBtnActive : ""}`, style: { padding: "2px 6px", fontSize: 10 }, variant: fillMode === "solid" ? "primary" : "ghost", size: "sm", onClick: () => setFillMode("solid"), children: "Solid" }), jsx(Oe, { className: `${styles.menuBtn} ${fillMode === "gradient" ? styles.menuBtnActive : ""}`, style: { padding: "2px 6px", fontSize: 10 }, variant: fillMode === "gradient" ? "primary" : "ghost", size: "sm", onClick: () => setFillMode("gradient"), children: "Gradient" })] })] }), fillMode === "solid" ? (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel }), jsx("div", { className: styles.propColorSwatch, style: { background: fillCol }, children: jsx(Nn, { value: fillCol, onChange: (c) => { setFillCol(c); updateSel({ fill: c }); } }) }), jsx(_t, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.fill) || fillCol, onChange: (val) => { setFillCol(val); updateSel({ fill: val }); } })] })) : (jsxs(Fragment, { children: [jsx("div", { className: styles.propRow, style: { flexWrap: "wrap", gap: 4 }, children: PRESET_GRADIENTS.map((grad, i) => (jsx("div", { style: {
|
|
25
25
|
width: 24,
|
|
26
26
|
height: 24,
|
|
27
27
|
borderRadius: 4,
|
|
28
28
|
background: gradientToCSS(grad),
|
|
29
29
|
cursor: "pointer",
|
|
30
30
|
border: (selectedGradient === null || selectedGradient === void 0 ? void 0 : selectedGradient.id) === grad.id ? "2px solid #fff" : "1px solid #444",
|
|
31
|
-
}, onClick: () => applyGradient(grad), title: `${grad.type} gradient` }, i))) }), jsx("div", { className: styles.propRow, children: jsx(
|
|
31
|
+
}, onClick: () => applyGradient(grad), title: `${grad.type} gradient` }, i))) }), jsx("div", { className: styles.propRow, children: jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { width: "100%", fontSize: 10 }, onClick: () => setShowGradientEditor(!showGradientEditor), children: showGradientEditor ? "▼ Hide Editor" : "► Edit Gradient" }) }), showGradientEditor && selectedGradient && (jsxs("div", { style: { padding: 4, background: "#252525", borderRadius: 4, margin: "4px 0" }, children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Type" }), jsx(nn, { className: styles.propInput, value: selectedGradient.type, onChange: (val) => {
|
|
32
32
|
const type = val;
|
|
33
33
|
let newGrad;
|
|
34
34
|
if (type === "linear") {
|
|
@@ -54,7 +54,7 @@ const VectorEditorRightPanel$1 = ({ api }) => {
|
|
|
54
54
|
}, options: [
|
|
55
55
|
{ value: "linear", label: "Linear" },
|
|
56
56
|
{ value: "radial", label: "Radial" },
|
|
57
|
-
] })] }), selectedGradient.type === "linear" && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Angle" }), jsx(
|
|
57
|
+
] })] }), selectedGradient.type === "linear" && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Angle" }), jsx(Ar, { className: styles.propInput, min: 0, max: 360, value: selectedGradient.angle, onChange: (val) => {
|
|
58
58
|
const newGrad = {
|
|
59
59
|
...selectedGradient,
|
|
60
60
|
id: gradientId(),
|
|
@@ -62,7 +62,7 @@ const VectorEditorRightPanel$1 = ({ api }) => {
|
|
|
62
62
|
};
|
|
63
63
|
setSelectedGradient(newGrad);
|
|
64
64
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
65
|
-
} }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [selectedGradient.angle, "\u00B0"] })] })), selectedGradient.type === "radial" && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "CX" }), jsx(
|
|
65
|
+
} }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [selectedGradient.angle, "\u00B0"] })] })), selectedGradient.type === "radial" && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "CX" }), jsx(Ar, { className: styles.propInput, min: 0, max: 100, value: selectedGradient.cx * 100, onChange: (val) => {
|
|
66
66
|
const newGrad = {
|
|
67
67
|
...selectedGradient,
|
|
68
68
|
id: gradientId(),
|
|
@@ -70,7 +70,7 @@ const VectorEditorRightPanel$1 = ({ api }) => {
|
|
|
70
70
|
};
|
|
71
71
|
setSelectedGradient(newGrad);
|
|
72
72
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
73
|
-
} })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "CY" }), jsx(
|
|
73
|
+
} })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "CY" }), jsx(Ar, { className: styles.propInput, min: 0, max: 100, value: selectedGradient.cy * 100, onChange: (val) => {
|
|
74
74
|
const newGrad = {
|
|
75
75
|
...selectedGradient,
|
|
76
76
|
id: gradientId(),
|
|
@@ -78,7 +78,7 @@ const VectorEditorRightPanel$1 = ({ api }) => {
|
|
|
78
78
|
};
|
|
79
79
|
setSelectedGradient(newGrad);
|
|
80
80
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
81
|
-
} })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "R" }), jsx(
|
|
81
|
+
} })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "R" }), jsx(Ar, { className: styles.propInput, min: 10, max: 100, value: selectedGradient.r * 100, onChange: (val) => {
|
|
82
82
|
const newGrad = {
|
|
83
83
|
...selectedGradient,
|
|
84
84
|
id: gradientId(),
|
|
@@ -86,33 +86,33 @@ const VectorEditorRightPanel$1 = ({ api }) => {
|
|
|
86
86
|
};
|
|
87
87
|
setSelectedGradient(newGrad);
|
|
88
88
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
89
|
-
} })] })] })), jsx("div", { style: { fontSize: 10, color: "#888", marginTop: 4 }, children: "Color Stops:" }), selectedGradient.stops.map((stop, i) => (jsxs("div", { className: styles.propRow, children: [jsx(
|
|
89
|
+
} })] })] })), jsx("div", { style: { fontSize: 10, color: "#888", marginTop: 4 }, children: "Color Stops:" }), selectedGradient.stops.map((stop, i) => (jsxs("div", { className: styles.propRow, children: [jsx(Nn, { value: stop.color, style: { width: 24, height: 20 }, onChange: (color) => {
|
|
90
90
|
const newStops = [...selectedGradient.stops];
|
|
91
91
|
newStops[i] = { ...newStops[i], color };
|
|
92
92
|
const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
|
|
93
93
|
setSelectedGradient(newGrad);
|
|
94
94
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
95
|
-
} }), jsx(
|
|
95
|
+
} }), jsx(Ar, { min: 0, max: 100, value: stop.offset * 100, style: { flex: 1 }, onChange: (val) => {
|
|
96
96
|
const newStops = [...selectedGradient.stops];
|
|
97
97
|
newStops[i] = { ...newStops[i], offset: val / 100 };
|
|
98
98
|
newStops.sort((a, b) => a.offset - b.offset);
|
|
99
99
|
const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
|
|
100
100
|
setSelectedGradient(newGrad);
|
|
101
101
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
102
|
-
} }), jsxs("span", { style: { fontSize: 9, minWidth: 24 }, children: [Math.round(stop.offset * 100), "%"] })] }, i))), jsxs("div", { className: styles.propRow, style: { gap: 4 }, children: [jsx(
|
|
102
|
+
} }), jsxs("span", { style: { fontSize: 9, minWidth: 24 }, children: [Math.round(stop.offset * 100), "%"] })] }, i))), jsxs("div", { className: styles.propRow, style: { gap: 4 }, children: [jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, onClick: () => {
|
|
103
103
|
const newStops = [...selectedGradient.stops, { offset: 0.5, color: "#888888" }];
|
|
104
104
|
newStops.sort((a, b) => a.offset - b.offset);
|
|
105
105
|
const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
|
|
106
106
|
setSelectedGradient(newGrad);
|
|
107
107
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
108
|
-
}, children: "+ Add Stop" }), jsx(
|
|
108
|
+
}, children: "+ Add Stop" }), jsx(Oe, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { fontSize: 10, flex: 1 }, disabled: selectedGradient.stops.length <= 2, onClick: () => {
|
|
109
109
|
if (selectedGradient.stops.length <= 2)
|
|
110
110
|
return;
|
|
111
111
|
const newStops = selectedGradient.stops.slice(0, -1);
|
|
112
112
|
const newGrad = { ...selectedGradient, id: gradientId(), stops: newStops };
|
|
113
113
|
setSelectedGradient(newGrad);
|
|
114
114
|
updateSel({ fill: `url(#${newGrad.id})` });
|
|
115
|
-
}, children: "- Remove" })] })] }))] })), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Stroke" }), jsx("div", { className: styles.propColorSwatch, style: { background: strokeCol }, children: jsx(
|
|
115
|
+
}, children: "- Remove" })] })] }))] })), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Stroke" }), jsx("div", { className: styles.propColorSwatch, style: { background: strokeCol }, children: jsx(Nn, { value: strokeCol, onChange: (c) => { setStrokeCol(c); updateSel({ stroke: c }); } }) }), jsx(_t, { className: styles.propInput, value: (selShape === null || selShape === void 0 ? void 0 : selShape.stroke) || strokeCol, onChange: (val) => { setStrokeCol(val); updateSel({ stroke: val }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Width" }), jsx(Ri, { className: styles.propInput, min: 0, max: 100, value: (_a = selShape === null || selShape === void 0 ? void 0 : selShape.strokeWidth) !== null && _a !== void 0 ? _a : strokeW, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 0; setStrokeW(v); updateSel({ strokeWidth: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Opacity" }), jsx(Ar, { className: styles.propInput, min: 0, max: 1, step: 0.01, value: (_b = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _b !== void 0 ? _b : shapeOpacity, onChange: (val) => { setShapeOpacity(val); updateSel({ opacity: val }); } }), jsxs("span", { style: { fontSize: 10, minWidth: 28 }, children: [Math.round(((_c = selShape === null || selShape === void 0 ? void 0 : selShape.opacity) !== null && _c !== void 0 ? _c : shapeOpacity) * 100), "%"] })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Rotation" }), jsx(Ri, { className: styles.propInput, min: -360, max: 360, value: (_d = selShape === null || selShape === void 0 ? void 0 : selShape.rotation) !== null && _d !== void 0 ? _d : 0, onChange: (val) => updateSel({ rotation: val !== null && val !== void 0 ? val : 0 }) }), jsx("span", { style: { fontSize: 10 }, children: "\u00B0" })] })] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Tool Options" }) }), (tool === "roundrect" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "roundrect") && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Radius" }), jsx(Ri, { className: styles.propInput, min: 0, max: 200, value: (_e = selShape === null || selShape === void 0 ? void 0 : selShape.rx) !== null && _e !== void 0 ? _e : cornerRadius, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 0; setCornerRadius(v); updateSel({ rx: v }); } })] })), (tool === "polygon" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "polygon") && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Sides" }), jsx(Ri, { className: styles.propInput, min: 3, max: 32, value: (_f = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _f !== void 0 ? _f : polygonSides, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 3; setPolygonSides(v); updateSel({ sides: v }); } })] })), (tool === "star" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "star") && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Points" }), jsx(Ri, { className: styles.propInput, min: 3, max: 32, value: (_g = selShape === null || selShape === void 0 ? void 0 : selShape.sides) !== null && _g !== void 0 ? _g : starPoints2, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 3; setStarPoints2(v); updateSel({ sides: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Inner R" }), jsx(Ar, { className: styles.propInput, min: 0.1, max: 0.9, step: 0.05, value: (_h = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _h !== void 0 ? _h : starInnerRatio, onChange: (val) => { setStarInnerRatio(val); updateSel({ innerRadius: val }); } }), jsxs("span", { style: { fontSize: 10 }, children: [Math.round(((_j = selShape === null || selShape === void 0 ? void 0 : selShape.innerRadius) !== null && _j !== void 0 ? _j : starInnerRatio) * 100), "%"] })] })] })), (tool === "text" || (selShape === null || selShape === void 0 ? void 0 : selShape.type) === "text") && (jsxs(Fragment, { children: [jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Size" }), jsx(Ri, { className: styles.propInput, min: 8, max: 200, value: (_k = selShape === null || selShape === void 0 ? void 0 : selShape.fontSize) !== null && _k !== void 0 ? _k : fontSize, onChange: (val) => { const v = val !== null && val !== void 0 ? val : 12; setFontSize(v); updateSel({ fontSize: v }); } })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Font" }), jsx(nn, { className: styles.propInput, value: (_l = selShape === null || selShape === void 0 ? void 0 : selShape.fontFamily) !== null && _l !== void 0 ? _l : fontFamily, onChange: (val) => { setFontFamily(val); updateSel({ fontFamily: val }); }, options: FONTS.map((f) => ({ value: f, label: f })) })] })] })), snapGrid && (jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Grid" }), jsx(Ri, { className: styles.propInput, min: 4, max: 128, value: gridSize, onChange: (val) => setGridSize(val !== null && val !== void 0 ? val : 8) })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsxs("span", { children: ["Shapes (", shapes.length, ")"] }) }), [...shapes].reverse().map((s) => (jsxs("div", { className: `${styles.shapeItem} ${s.id === selId ? styles.shapeItemActive : ""}`, onClick: () => { setSelId(s.id); setTool("pointer"); }, children: [jsx("span", { className: styles.shapeIcon, children: s.type === "rect" ? "▢"
|
|
116
116
|
: s.type === "roundrect" ? "▣"
|
|
117
117
|
: s.type === "ellipse" ? "◯"
|
|
118
118
|
: s.type === "line" ? "╱"
|
|
@@ -120,7 +120,7 @@ const VectorEditorRightPanel$1 = ({ api }) => {
|
|
|
120
120
|
: s.type === "polygon" ? "⬡"
|
|
121
121
|
: s.type === "star" ? "★"
|
|
122
122
|
: s.type === "polyline" ? "✎"
|
|
123
|
-
: "T" }), jsxs("span", { className: styles.shapeName, children: [s.type, s.text ? ` "${s.text}"` : ""] })] }, s.id))), shapes.length === 0 && (jsx("div", { style: { color: "#555", fontSize: 11, padding: 4 }, children: "No shapes yet. Use the tools to draw." }))] }), selShape && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Transform" }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "X" }), jsx(
|
|
123
|
+
: "T" }), jsxs("span", { className: styles.shapeName, children: [s.type, s.text ? ` "${s.text}"` : ""] })] }, s.id))), shapes.length === 0 && (jsx("div", { style: { color: "#555", fontSize: 11, padding: 4 }, children: "No shapes yet. Use the tools to draw." }))] }), selShape && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: "Transform" }) }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "X" }), jsx(Ri, { className: styles.propInput, value: Math.round(selShape.x), onChange: (val) => updateSel({ x: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "Y" }), jsx(Ri, { className: styles.propInput, value: Math.round(selShape.y), onChange: (val) => updateSel({ y: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "W" }), jsx(Ri, { className: styles.propInput, value: Math.round(selShape.w), onChange: (val) => updateSel({ w: val !== null && val !== void 0 ? val : 0 }) })] }), jsxs("div", { className: styles.propRow, children: [jsx("span", { className: styles.propLabel, children: "H" }), jsx(Ri, { className: styles.propInput, value: Math.round(selShape.h), onChange: (val) => updateSel({ h: val !== null && val !== void 0 ? val : 0 }) })] })] }))] }));
|
|
124
124
|
};
|
|
125
125
|
var VectorEditorRightPanel = React.memo(VectorEditorRightPanel$1);
|
|
126
126
|
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nice2dev/ui-graphics",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Nice2Dev Graphics Editors — Pixel, Vector, Photo and Animation editors for React",
|
|
5
5
|
"author": "NiceToDev <contact@nicetodev.com>",
|
|
6
|
-
"license": "
|
|
6
|
+
"license": "SEE LICENSE IN LICENSE",
|
|
7
7
|
"homepage": "https://github.com/NiceToDev/NiceToDev.UI#readme",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|