@glodon-aiot/react-components/dist/es/Drawable/PolygonElement.mjs

aiot react components

import { jsxs as $, Fragment as v, jsx as o } from "react/jsx-runtime";
import D from "lodash/first";
import F from "lodash/size";
import { useState as j, useContext as w } from "react";
import { DrawableContext as z } from "./index.mjs";
function N(S) {
  const {
    points: e,
    editing: i,
    options: l,
    onClose: g
  } = S, [b, x] = j(!1), {
    options: {
      polygon: c
    }
  } = w(z);
  if (!i && F(e) <= 2)
    return null;
  const a = D(e), p = e.map(({
    x: n,
    y: r
  }) => `${n},${r}`).join(" "), y = a ? `${p} ${a.x},${a.y}` : p, {
    showVertexIndex: d,
    vertexBgColor: f,
    vertexTextColor: m
  } = c != null ? c : {}, k = d ? 10 : 5, A = i || d, {
    hideBorder: P,
    backgroundColor: u
  } = l != null ? l : {};
  return /* @__PURE__ */ $(v, {
    children: [/* @__PURE__ */ o("polygon", {
      points: `${y}`,
      fill: u != null ? u : "rgba(255, 66, 66, 0.15)"
    }), !P && /* @__PURE__ */ o("polyline", {
      points: i ? p : y,
      fill: "transparent",
      stroke: "#FF5500",
      strokeDasharray: "6 4",
      strokeWidth: "2"
    }), !P && (e == null ? void 0 : e.map(({
      x: n,
      y: r
    }, h) => {
      const s = h === F(e) - 1;
      return /* @__PURE__ */ o("g", {
        style: {
          zIndex: s ? 1 : 100,
          cursor: "pointer",
          pointerEvents: s ? "none" : "bounding-box"
        },
        onMouseEnter: (t) => {
          s || x(!0);
        },
        onMouseLeave: (t) => {
          x(!1);
        },
        onClick: (t) => {
          t.stopPropagation();
        },
        onDoubleClick: (t) => {
          t.stopPropagation(), g && g(h);
        },
        children: A && (!s || !b) && /* @__PURE__ */ $(v, {
          children: [/* @__PURE__ */ o("circle", {
            cx: n,
            cy: r,
            r: k,
            fill: f != null ? f : "#FF5500"
          }), d && /* @__PURE__ */ o("text", {
            x: n,
            y: r,
            "text-anchor": "middle",
            fill: m != null ? m : "#fff",
            dy: ".3em",
            style: {
              cursor: "pointer",
              userSelect: "none"
            },
            children: h + 1
          })]
        })
      });
    }))]
  });
}
export {
  N as default
};