@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/vector/VectorEditorShapeRenderer.js

@@ -1,64 +1,204 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { starPoints, polygonPoints } from './vectorEditorTypes.js';
-
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { starPoints, polygonPoints } from "./vectorEditorTypes.js";
 const ShapeRenderer = ({ shape: s, selected, zoom }) => {
-    var _a;
-    if (s.hidden) {
-        return null;
-    }
-    const selStroke = selected
-        ? 'color-mix(in srgb, var(--nice-color-primary, #5566cc) 60%, transparent)'
-        : undefined;
-    const gProps = {};
-    if (s.opacity < 1) {
-        gProps.opacity = s.opacity;
+  if (s.hidden) {
+    return null;
+  }
+  const selStroke = selected ? "color-mix(in srgb, var(--nice-color-primary, #5566cc) 60%, transparent)" : void 0;
+  const gProps = {};
+  if (s.opacity < 1) {
+    gProps.opacity = s.opacity;
+  }
+  if (s.rotation && s.type !== "polygon" && s.type !== "star") {
+    gProps.transform = `rotate(${s.rotation} ${s.x + s.w / 2} ${s.y + s.h / 2})`;
+  }
+  const selBox = selected ? /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: s.x - 1,
+      y: s.y - 1,
+      width: s.w + 2,
+      height: s.h + 2,
+      fill: "none",
+      stroke: selStroke,
+      strokeWidth: 2 / zoom,
+      strokeDasharray: `${4 / zoom}`
     }
-    if (s.rotation && s.type !== 'polygon' && s.type !== 'star') {
-        gProps.transform = `rotate(${s.rotation} ${s.x + s.w / 2} ${s.y + s.h / 2})`;
+  ) : null;
+  switch (s.type) {
+    case "rect":
+      return /* @__PURE__ */ jsxs("g", { ...gProps, children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: s.x,
+            y: s.y,
+            width: s.w,
+            height: s.h,
+            fill: s.fill,
+            stroke: s.stroke,
+            strokeWidth: s.strokeWidth
+          }
+        ),
+        selBox
+      ] });
+    case "roundrect":
+      return /* @__PURE__ */ jsxs("g", { ...gProps, children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: s.x,
+            y: s.y,
+            width: s.w,
+            height: s.h,
+            rx: s.rx || 12,
+            fill: s.fill,
+            stroke: s.stroke,
+            strokeWidth: s.strokeWidth
+          }
+        ),
+        selBox
+      ] });
+    case "ellipse":
+      return /* @__PURE__ */ jsxs("g", { ...gProps, children: [
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: s.x + s.w / 2,
+            cy: s.y + s.h / 2,
+            rx: s.w / 2,
+            ry: s.h / 2,
+            fill: s.fill,
+            stroke: s.stroke,
+            strokeWidth: s.strokeWidth
+          }
+        ),
+        selBox
+      ] });
+    case "line":
+      return /* @__PURE__ */ jsxs("g", { ...gProps, children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: s.x,
+            y1: s.y,
+            x2: s.x2,
+            y2: s.y2,
+            stroke: s.stroke,
+            strokeWidth: s.strokeWidth
+          }
+        ),
+        selected && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("circle", { cx: s.x, cy: s.y, r: 4 / zoom, fill: "var(--nice-primary, #5566cc)" }),
+          /* @__PURE__ */ jsx("circle", { cx: s.x2, cy: s.y2, r: 4 / zoom, fill: "var(--nice-primary, #5566cc)" })
+        ] })
+      ] });
+    case "arrow":
+      return /* @__PURE__ */ jsxs("g", { ...gProps, children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          "marker",
+          {
+            id: `ah-${s.id}`,
+            markerWidth: "10",
+            markerHeight: "7",
+            refX: "10",
+            refY: "3.5",
+            orient: "auto",
+            children: /* @__PURE__ */ jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: s.stroke })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: s.x,
+            y1: s.y,
+            x2: s.x2,
+            y2: s.y2,
+            stroke: s.stroke,
+            strokeWidth: s.strokeWidth,
+            markerEnd: `url(#ah-${s.id})`
+          }
+        ),
+        selected && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("circle", { cx: s.x, cy: s.y, r: 4 / zoom, fill: "var(--nice-primary, #5566cc)" }),
+          /* @__PURE__ */ jsx("circle", { cx: s.x2, cy: s.y2, r: 4 / zoom, fill: "var(--nice-primary, #5566cc)" })
+        ] })
+      ] });
+    case "polyline":
+      if (!s.points?.length) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxs("g", { ...gProps, children: [
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            points: s.points.map((p) => `${p.x},${p.y}`).join(" "),
+            fill: s.fill,
+            stroke: s.stroke,
+            strokeWidth: s.strokeWidth
+          }
+        ),
+        selected && s.points.map((p, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: p.x,
+            cy: p.y,
+            r: 3 / zoom,
+            fill: "var(--nice-primary, #5566cc)",
+            stroke: "var(--nice-bg, #fff)",
+            strokeWidth: 1 / zoom
+          },
+          i
+        ))
+      ] });
+    case "polygon": {
+      const cx2 = s.x + s.w / 2;
+      const cy2 = s.y + s.h / 2;
+      const r2 = Math.min(s.w, s.h) / 2;
+      const pts = polygonPoints(cx2, cy2, r2, s.sides || 6, s.rotation);
+      return /* @__PURE__ */ jsxs("g", { opacity: s.opacity < 1 ? s.opacity : void 0, children: [
+        /* @__PURE__ */ jsx("polygon", { points: pts, fill: s.fill, stroke: s.stroke, strokeWidth: s.strokeWidth }),
+        selBox
+      ] });
     }
-    const selBox = selected ? (jsx("rect", { x: s.x - 1, y: s.y - 1, width: s.w + 2, height: s.h + 2, fill: "none", stroke: selStroke, strokeWidth: 2 / zoom, strokeDasharray: `${4 / zoom}` })) : null;
-    switch (s.type) {
-        case 'rect':
-            return (jsxs("g", { ...gProps, children: [jsx("rect", { x: s.x, y: s.y, width: s.w, height: s.h, fill: s.fill, stroke: s.stroke, strokeWidth: s.strokeWidth }), selBox] }));
-        case 'roundrect':
-            return (jsxs("g", { ...gProps, children: [jsx("rect", { x: s.x, y: s.y, width: s.w, height: s.h, rx: s.rx || 12, fill: s.fill, stroke: s.stroke, strokeWidth: s.strokeWidth }), selBox] }));
-        case 'ellipse':
-            return (jsxs("g", { ...gProps, children: [jsx("ellipse", { cx: s.x + s.w / 2, cy: s.y + s.h / 2, rx: s.w / 2, ry: s.h / 2, fill: s.fill, stroke: s.stroke, strokeWidth: s.strokeWidth }), selBox] }));
-        case 'line':
-            return (jsxs("g", { ...gProps, children: [jsx("line", { x1: s.x, y1: s.y, x2: s.x2, y2: s.y2, stroke: s.stroke, strokeWidth: s.strokeWidth }), selected && (jsxs(Fragment, { children: [jsx("circle", { cx: s.x, cy: s.y, r: 4 / zoom, fill: "var(--nice-primary, #5566cc)" }), jsx("circle", { cx: s.x2, cy: s.y2, r: 4 / zoom, fill: "var(--nice-primary, #5566cc)" })] }))] }));
-        case 'arrow':
-            return (jsxs("g", { ...gProps, children: [jsx("defs", { children: jsx("marker", { id: `ah-${s.id}`, markerWidth: "10", markerHeight: "7", refX: "10", refY: "3.5", orient: "auto", children: jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: s.stroke }) }) }), jsx("line", { x1: s.x, y1: s.y, x2: s.x2, y2: s.y2, stroke: s.stroke, strokeWidth: s.strokeWidth, markerEnd: `url(#ah-${s.id})` }), selected && (jsxs(Fragment, { children: [jsx("circle", { cx: s.x, cy: s.y, r: 4 / zoom, fill: "var(--nice-primary, #5566cc)" }), jsx("circle", { cx: s.x2, cy: s.y2, r: 4 / zoom, fill: "var(--nice-primary, #5566cc)" })] }))] }));
-        case 'polyline':
-            if (!((_a = s.points) === null || _a === void 0 ? void 0 : _a.length)) {
-                return null;
-            }
-            return (jsxs("g", { ...gProps, children: [jsx("polyline", { points: s.points.map((p) => `${p.x},${p.y}`).join(' '), fill: s.fill, stroke: s.stroke, strokeWidth: s.strokeWidth }), selected &&
-                        s.points.map((p, i) => (jsx("circle", { cx: p.x, cy: p.y, r: 3 / zoom, fill: "var(--nice-primary, #5566cc)", stroke: "var(--nice-bg, #fff)", strokeWidth: 1 / zoom }, i)))] }));
-        case 'polygon': {
-            const cx2 = s.x + s.w / 2;
-            const cy2 = s.y + s.h / 2;
-            const r2 = Math.min(s.w, s.h) / 2;
-            const pts = polygonPoints(cx2, cy2, r2, s.sides || 6, s.rotation);
-            return (jsxs("g", { opacity: s.opacity < 1 ? s.opacity : undefined, children: [jsx("polygon", { points: pts, fill: s.fill, stroke: s.stroke, strokeWidth: s.strokeWidth }), selBox] }));
-        }
-        case 'star': {
-            const cx2 = s.x + s.w / 2;
-            const cy2 = s.y + s.h / 2;
-            const r2 = Math.min(s.w, s.h) / 2;
-            const ir = r2 * (s.innerRadius || 0.4);
-            const pts = starPoints(cx2, cy2, r2, ir, s.sides || 5, s.rotation);
-            return (jsxs("g", { opacity: s.opacity < 1 ? s.opacity : undefined, children: [jsx("polygon", { points: pts, fill: s.fill, stroke: s.stroke, strokeWidth: s.strokeWidth }), selBox] }));
-        }
-        case 'text':
-            return (jsxs("g", { ...gProps, children: [jsx("text", { x: s.x, y: s.y + (s.fontSize || 24), fontSize: s.fontSize || 24, fontFamily: s.fontFamily || 'sans-serif', fill: s.fill, children: s.text }), selBox] }));
-        case 'path':
-            if (!s.d) {
-                return null;
-            }
-            return (jsxs("g", { ...gProps, children: [jsx("path", { d: s.d, fill: s.fill, stroke: s.stroke, strokeWidth: s.strokeWidth }), selBox] }));
-        default:
-            return null;
+    case "star": {
+      const cx2 = s.x + s.w / 2;
+      const cy2 = s.y + s.h / 2;
+      const r2 = Math.min(s.w, s.h) / 2;
+      const ir = r2 * (s.innerRadius || 0.4);
+      const pts = starPoints(cx2, cy2, r2, ir, s.sides || 5, s.rotation);
+      return /* @__PURE__ */ jsxs("g", { opacity: s.opacity < 1 ? s.opacity : void 0, children: [
+        /* @__PURE__ */ jsx("polygon", { points: pts, fill: s.fill, stroke: s.stroke, strokeWidth: s.strokeWidth }),
+        selBox
+      ] });
     }
+    case "text":
+      return /* @__PURE__ */ jsxs("g", { ...gProps, children: [
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: s.x,
+            y: s.y + (s.fontSize || 24),
+            fontSize: s.fontSize || 24,
+            fontFamily: s.fontFamily || "sans-serif",
+            fill: s.fill,
+            children: s.text
+          }
+        ),
+        selBox
+      ] });
+    case "path":
+      if (!s.d) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxs("g", { ...gProps, children: [
+        /* @__PURE__ */ jsx("path", { d: s.d, fill: s.fill, stroke: s.stroke, strokeWidth: s.strokeWidth }),
+        selBox
+      ] });
+    default:
+      return null;
+  }
+};
+export {
+  ShapeRenderer
 };
-
-export { ShapeRenderer };

package/dist/esm/vector/VectorEditorStatusBar.js

@@ -1,13 +1,41 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './VectorEditor.module.css.js';
-
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./VectorEditor.module.css.js";
 const VectorEditorStatusBar$1 = ({ api, artW, artH }) => {
-    var _a;
-    const { t } = useNiceTranslation();
-    return (jsxs("div", { className: styles.statusBar, children: [jsxs("span", { children: [artW, "\u00D7", artH] }), jsxs("span", { children: [t('vectorEditor.statusBar.zoom', 'Zoom'), " ", Math.round(api.zoom * 100), "%"] }), jsx("span", { children: api.tool }), jsxs("span", { children: [api.shapes.length, " ", t('vectorEditor.statusBar.shapes', 'shape(s)')] }), api.selId && (jsxs("span", { children: [t('vectorEditor.statusBar.selected', 'Selected'), ": ", (_a = api.selShape) === null || _a === void 0 ? void 0 : _a.type] })), api.snapGrid && (jsxs("span", { children: [t('vectorEditor.statusBar.snap', 'Snap'), ": ", api.gridSize, "px"] }))] }));
+  const { t } = useNiceTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: styles.statusBar, children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      artW,
+      "×",
+      artH
+    ] }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      t("vectorEditor.statusBar.zoom", "Zoom"),
+      " ",
+      Math.round(api.zoom * 100),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx("span", { children: api.tool }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      api.shapes.length,
+      " ",
+      t("vectorEditor.statusBar.shapes", "shape(s)")
+    ] }),
+    api.selId && /* @__PURE__ */ jsxs("span", { children: [
+      t("vectorEditor.statusBar.selected", "Selected"),
+      ": ",
+      api.selShape?.type
+    ] }),
+    api.snapGrid && /* @__PURE__ */ jsxs("span", { children: [
+      t("vectorEditor.statusBar.snap", "Snap"),
+      ": ",
+      api.gridSize,
+      "px"
+    ] })
+  ] });
+};
+const VectorEditorStatusBar = React.memo(VectorEditorStatusBar$1);
+export {
+  VectorEditorStatusBar as default
 };
-var VectorEditorStatusBar = React.memo(VectorEditorStatusBar$1);
-
-export { VectorEditorStatusBar as default };