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

aiot react components

var $ = Object.defineProperty, H = Object.defineProperties;
var U = Object.getOwnPropertyDescriptors;
var b = Object.getOwnPropertySymbols;
var V = Object.prototype.hasOwnProperty, q = Object.prototype.propertyIsEnumerable;
var x = (o, n, i) => n in o ? $(o, n, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[n] = i, R = (o, n) => {
  for (var i in n || (n = {}))
    V.call(n, i) && x(o, i, n[i]);
  if (b)
    for (var i of b(n))
      q.call(n, i) && x(o, i, n[i]);
  return o;
}, C = (o, n) => H(o, U(n));
import { jsx as d, jsxs as F } from "react/jsx-runtime";
import { useSize as J } from "ahooks";
import { useMachine as Q } from "@xstate/react";
import Z from "lodash/size";
import { useState as _, useRef as ee, useEffect as f } from "react";
import { assign as w } from "xstate";
import { DrawableContext as te } from "./index.mjs";
import Y from "./LineElement.mjs";
import I from "./MarkerElement.mjs";
import W from "./PolygonElement.mjs";
import { drawableMachine as ne } from "./state.mjs";
function ve(o) {
  const {
    state: n,
    scale: i,
    width: B,
    height: G,
    drawOptions: A,
    lines: p,
    polygons: u,
    markers: g,
    markRenderer: j,
    onAddLine: L,
    onAddPolygon: S,
    onAddMarker: k,
    onStateChange: y
  } = o, [E, z] = _([]), [P, K] = _([]), [D, X] = _([]), c = ee(null), {
    width: O,
    height: N
  } = J(c) || {};
  function v({
    x: e,
    y: t
  }) {
    return {
      x: e / i,
      y: t / i
    };
  }
  function h({
    x: e,
    y: t
  }) {
    return {
      x: e * i,
      y: t * i
    };
  }
  const [l, a] = Q(ne, {
    actions: {
      onAddMarker: w(({
        markerPoint: e
      }) => (k && e && k(v(e)), {
        markerPoint: void 0,
        movingPoint: void 0
      })),
      onAddLine: w((e) => (e.lineStart && e.lineEnd && L && L(v(e.lineStart), v(e.lineEnd)), {
        lineEnd: void 0,
        lineStart: void 0,
        movingPoint: void 0
      })),
      onAddPolygon: w(({
        polygonPoints: e
      }) => (S && e && e.length > 2 && S(e.map(v)), {
        polygonPoints: void 0,
        movingPoint: void 0
      }))
    },
    services: {}
  });
  f(() => {
    var e;
    z((e = p == null ? void 0 : p.map(({
      id: t,
      start: s,
      end: r
    }) => ({
      id: t,
      start: h(s),
      end: h(r)
    }))) != null ? e : []);
  }, [p]), f(() => {
    var e;
    X((e = g == null ? void 0 : g.map((t) => C(R({}, t), {
      point: h(t.point)
    }))) != null ? e : []);
  }, [g]), f(() => {
    var e;
    K((e = u == null ? void 0 : u.map(({
      id: t,
      points: s,
      options: r
    }) => ({
      id: t,
      points: s.map(h),
      options: r
    }))) != null ? e : []);
  }, [u, i]), f(() => {
    y && l.matches("idle") && y("viewOnly");
  }, [l.value]), f(() => {
    if (y)
      switch (n) {
        case "drawingLine":
          a("START_DRAW_LINE");
          break;
        case "drawingPolygon":
          a("START_DRAW_POLYGON");
          break;
        case "addingMarker":
          a("START_ADD_MARKER");
          break;
      }
  }, [n]);
  const {
    lineStart: M,
    lineEnd: ie,
    polygonPoints: T,
    movingPoint: m
  } = l.context;
  return /* @__PURE__ */ d(te.Provider, {
    value: {
      options: A != null ? A : {}
    },
    children: /* @__PURE__ */ d("div", {
      ref: c,
      className: "w-full h-full absolute left-0 top-0",
      style: {
        cursor: n === "viewOnly" ? void 0 : "crosshair",
        width: B,
        height: G
      },
      children: O && N && /* @__PURE__ */ F("svg", {
        viewBox: `0 0 ${O} ${N}`,
        version: "1.1",
        className: "absolute inset-0",
        onClick: (e) => {
          if (!c.current)
            return;
          const {
            top: t,
            left: s
          } = c.current.getBoundingClientRect(), r = {
            x: e.clientX - s,
            y: e.clientY - t
          };
          l.matches("drawingLine") ? a(M === void 0 ? {
            type: "ADD_LINE_START",
            point: r
          } : {
            type: "ADD_LINE_END",
            point: r
          }) : l.matches("drawingPolygon") ? a({
            type: "ADD_POLYGON_POINT",
            point: r
          }) : l.matches("addingMarker") && a({
            type: "ADD_MARKER",
            point: r
          });
        },
        onMouseMove: (e) => {
          if (!c.current)
            return;
          const {
            top: t,
            left: s
          } = c.current.getBoundingClientRect(), r = {
            x: e.clientX - s,
            y: e.clientY - t
          };
          a({
            type: "MOUSE_MOVE",
            point: r
          });
        },
        children: [E == null ? void 0 : E.map((e, t) => /* @__PURE__ */ d(Y, R({}, e), t)), M && m && /* @__PURE__ */ d(Y, {
          start: M,
          end: m
        }), P == null ? void 0 : P.map(({
          points: e,
          options: t
        }, s) => /* @__PURE__ */ d(W, {
          editing: !1,
          points: e,
          options: t
        }, s)), Z(T) > 0 && m && /* @__PURE__ */ d(W, {
          editing: !0,
          points: [...T, m],
          onClose: (e) => {
            a({
              type: "DRAW_POLYGON_COMPLETE"
            });
          }
        }), D == null ? void 0 : D.map((e) => /* @__PURE__ */ d(I, {
          marker: e,
          markRenderer: j
        })), l.matches("addingMarker") && m && /* @__PURE__ */ d(I, {
          marker: {
            id: "addingMarker",
            point: m
          }
        })]
      })
    })
  });
}
export {
  ve as default
};