import { jsxs, jsx } from 'react/jsx-runtime';
import { NiceButton as We, NiceModal as Ys, NiceTextArea as Os } from '../packages/ui/dist/index.js';
import styles from './VectorEditor.module.css.js';
import { TOOLS } from './vectorEditorTypes.js';
import { ShapeRenderer } from './VectorEditorShapeRenderer.js';
import { useVectorEditor } from './useVectorEditor.js';
import VectorEditorMenuBar from './VectorEditorMenuBar.js';
import VectorEditorRightPanel from './VectorEditorRightPanel.js';
import VectorEditorStatusBar from './VectorEditorStatusBar.js';

const NiceVectorEditor = ({ width: artW = 512, height: artH = 512, className, onSaveToLibrary, }) => {
    const api = useVectorEditor({ artW, artH, onSaveToLibrary });
    const { shapes, selId, tool, zoom, px, py, dlgSvg, svgText, gridSize, boxRef, fInp, onDown, onMove, onUp, onWheel, onDblClick, openFile, switchTool, importSVGString, setDlgSvg, setSvgText, } = api;
    return (jsxs("div", { className: `${styles.root} ${className || ""}`, children: [jsx("input", { ref: fInp, type: "file", accept: ".svg", style: { display: "none" }, onChange: (e) => {
                    var _a;
                    const f = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                    if (f)
                        openFile(f);
                    e.target.value = "";
                } }), jsx(VectorEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary }), jsxs("div", { className: styles.mainArea, children: [jsx("div", { className: styles.toolbar, children: TOOLS.map((t) => (jsx(We, { 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: () => {
                                /* handled internally via refs */
                            }, onDoubleClick: onDblClick, onWheel: onWheel, onContextMenu: (e) => e.preventDefault(), style: {
                                transform: `translate(${px}px, ${py}px) scale(${zoom})`,
                                transformOrigin: "center center",
                                cursor: tool === "pointer" ? "default" : "crosshair",
                            }, 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(Ys, { open: dlgSvg, onClose: () => setDlgSvg(false), title: "Paste SVG", children: [jsx("label", { children: "Paste SVG source code below:" }), jsx(Os, { value: svgText, onChange: (val) => setSvgText(val), placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...>' }), jsxs("div", { className: styles.dialogActions, children: [jsx(We, { variant: "ghost", onClick: () => setDlgSvg(false), children: "Cancel" }), jsx(We, { variant: "primary", onClick: () => importSVGString(svgText), children: "Import" })] })] })] }));
};
/** @deprecated Use NiceVectorEditor */
const VectorEditor = NiceVectorEditor;

export { NiceVectorEditor, VectorEditor };
//# sourceMappingURL=VectorEditor.js.map
