@glodon-aiot/react-components 0.0.0-20251106104234

package/dist/es/Button/index.mjs

@@ -0,0 +1,48 @@
+var d = Object.defineProperty, k = Object.defineProperties;
+var f = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var u = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var b = (o, t, r) => t in o ? d(o, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[t] = r, y = (o, t) => {
+  for (var r in t || (t = {}))
+    u.call(t, r) && b(o, r, t[r]);
+  if (n)
+    for (var r of n(t))
+      m.call(t, r) && b(o, r, t[r]);
+  return o;
+}, a = (o, t) => k(o, f(t));
+var i = (o, t) => {
+  var r = {};
+  for (var s in o)
+    u.call(o, s) && t.indexOf(s) < 0 && (r[s] = o[s]);
+  if (o != null && n)
+    for (var s of n(o))
+      t.indexOf(s) < 0 && m.call(o, s) && (r[s] = o[s]);
+  return r;
+};
+import { jsx as j } from "react/jsx-runtime";
+import "./style.less.mjs";
+const z = (o) => {
+  const e = o, {
+    primary: t = !1,
+    size: r = "medium",
+    backgroundColor: s,
+    label: c
+  } = e, l = i(e, [
+    "primary",
+    "size",
+    "backgroundColor",
+    "label"
+  ]), p = t ? "storybook-button--primary" : "storybook-button--secondary";
+  return j("button", a(y({
+    type: "button",
+    className: ["storybook-button", `storybook-button--${r}`, p].join(" "),
+    style: {
+      backgroundColor: s
+    }
+  }, l), {
+    children: c
+  }));
+};
+export {
+  z as Button
+};

package/dist/es/Button/style.less.mjs

@@ -0,0 +1,4 @@
+const t = "";
+export {
+  t as default
+};

package/dist/es/ConfirmableButton/index.mjs

@@ -0,0 +1,59 @@
+var C = Object.defineProperty;
+var l = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var a = (e, t, r) => t in e ? C(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, u = (e, t) => {
+  for (var r in t || (t = {}))
+    d.call(t, r) && a(e, r, t[r]);
+  if (l)
+    for (var r of l(t))
+      y.call(t, r) && a(e, r, t[r]);
+  return e;
+};
+import { jsx as o } from "react/jsx-runtime";
+import { useState as h, useEffect as k } from "react";
+import s from "antd/es/button";
+import p from "antd/es/popconfirm";
+const T = (e) => {
+  const {
+    name: t,
+    type: r,
+    style: x,
+    className: i,
+    children: m,
+    onConfirm: c
+  } = e, [f, n] = h(null);
+  return k(() => {
+    if (!e.confirm) {
+      n(null);
+      return;
+    }
+    if (e.confirm === !0) {
+      n({
+        text: `确认${t}吗？`
+      });
+      return;
+    }
+    n(e.confirm);
+  }, [e.confirm]), f ? o(p, {
+    rootClassName: "track-map-popconfirm",
+    okText: "确定",
+    cancelText: "取消",
+    title: f.text,
+    trigger: "click",
+    onConfirm: c,
+    children: o(s, {
+      className: i,
+      type: r,
+      style: u({}, x),
+      children: m || t
+    })
+  }) : o(s, {
+    className: i,
+    type: r,
+    onClick: c,
+    children: m || t
+  });
+};
+export {
+  T as default
+};

package/dist/es/Drawable/Drawable.mjs

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

package/dist/es/Drawable/LineElement.mjs

@@ -0,0 +1,27 @@
+import { jsx as n, Fragment as m } from "react/jsx-runtime";
+import { useContext as x } from "react";
+import { DrawableContext as a } from "./index.mjs";
+function c(s) {
+  const {
+    start: o,
+    end: r
+  } = s, {
+    options: {
+      lineColor: t,
+      lineWidth: e
+    }
+  } = x(a);
+  return n(m, {
+    children: n("line", {
+      x1: o.x,
+      y1: o.y,
+      x2: r.x,
+      y2: r.y,
+      stroke: t != null ? t : "#FF5500",
+      strokeWidth: e != null ? e : 2
+    })
+  });
+}
+export {
+  c as default
+};

package/dist/es/Drawable/MarkerElement.mjs

@@ -0,0 +1,39 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+function o(t) {
+  const {
+    markRenderer: r,
+    marker: n
+  } = t, {
+    point: {
+      x: l,
+      y: i
+    }
+  } = n;
+  return a("g", {
+    children: [e("line", {}), e("line", {}), e("circle", {
+      cx: l,
+      cy: i,
+      r: 1,
+      fill: "transparent"
+    }), e("foreignObject", {
+      x: l,
+      y: i,
+      width: 0,
+      height: 0,
+      fill: "green",
+      className: "relative overflow-visible",
+      children: e("div", {
+        className: "inline-flex absolute",
+        draggable: !0,
+        onDragStart: () => {
+        },
+        onDragEnd: () => {
+        },
+        children: r && r(n)
+      })
+    })]
+  });
+}
+export {
+  o as default
+};

package/dist/es/Drawable/PolygonElement.mjs

@@ -0,0 +1,88 @@
+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: x
+  } = S, [b, y] = 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(" "), g = 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 $(v, {
+    children: [o("polygon", {
+      points: `${g}`,
+      fill: u != null ? u : "rgba(255, 66, 66, 0.15)"
+    }), !P && o("polyline", {
+      points: i ? p : g,
+      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 o("g", {
+        style: {
+          zIndex: s ? 1 : 100,
+          cursor: "pointer",
+          pointerEvents: s ? "none" : "bounding-box"
+        },
+        onMouseEnter: (t) => {
+          s || y(!0);
+        },
+        onMouseLeave: (t) => {
+          y(!1);
+        },
+        onClick: (t) => {
+          t.stopPropagation();
+        },
+        onDoubleClick: (t) => {
+          t.stopPropagation(), x && x(h);
+        },
+        children: A && (!s || !b) && $(v, {
+          children: [o("circle", {
+            cx: n,
+            cy: r,
+            r: k,
+            fill: f != null ? f : "#FF5500"
+          }), d && 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
+};

package/dist/es/Drawable/index.mjs

@@ -0,0 +1,16 @@
+import { createContext as o } from "react";
+function r(t, a, e) {
+  if (e)
+    return Math.abs(r(t, e) - r(a, e));
+  for (var n = Math.atan2(a.y - t.y, a.x - t.x); n < 0; )
+    n += 2 * Math.PI;
+  return n;
+}
+const l = o({
+  options: {}
+});
+l.displayName = "DrawableContext";
+export {
+  l as DrawableContext,
+  r as calAngle
+};

package/dist/es/Drawable/state.mjs

@@ -0,0 +1,134 @@
+import { assign as a } from "@xstate/immer";
+import { createMachine as o } from "xstate";
+const d = o({
+  initial: "idle",
+  context: {},
+  states: {
+    idle: {
+      on: {
+        START_ADD_MARKER: {
+          target: "addingMarker"
+        },
+        START_DRAW_LINE: {
+          target: "drawingLine"
+        },
+        START_DRAW_POLYGON: {
+          target: "drawingPolygon"
+        }
+      }
+    },
+    addingMarker: {
+      on: {
+        RESET: {
+          target: "idle",
+          actions: a((n) => {
+            n.markerPoint = void 0;
+          })
+        },
+        ADD_MARKER: {
+          target: "drawCompleted",
+          actions: [a((n, {
+            point: t
+          }) => {
+            n.markerPoint = t;
+          }), "onAddMarker"]
+        },
+        MOUSE_MOVE: {
+          target: "addingMarker",
+          actions: a((n, {
+            point: t
+          }) => {
+            n.movingPoint = t;
+          })
+        }
+      }
+    },
+    drawingLine: {
+      on: {
+        ADD_LINE_START: {
+          target: "drawingLine",
+          actions: a((n, t) => {
+            n.lineStart = t.point;
+          })
+        },
+        ADD_LINE_END: {
+          target: "drawCompleted",
+          actions: [a((n, t) => {
+            n.lineEnd = t.point;
+          }), "onAddLine"]
+        },
+        MOUSE_MOVE: {
+          target: "drawingLine",
+          actions: a((n, {
+            point: t
+          }) => {
+            n.movingPoint = t;
+          })
+        },
+        RESET: {
+          target: "drawCompleted"
+        },
+        CANCEL: {
+          target: "drawCompleted"
+        }
+      }
+      // exit: assign((ctx) => {
+      //   ctx.lineEnd = undefined
+      //   ctx.lineStart = undefined
+      // }),
+    },
+    drawingPolygon: {
+      on: {
+        CANCEL: {
+          target: "canceled"
+        },
+        RESET: {
+          target: "idle",
+          actions: a((n) => {
+            n.polygonPoints = void 0;
+          })
+        },
+        ADD_POLYGON_POINT: {
+          target: "drawingPolygon",
+          actions: a((n, {
+            point: t
+          }) => {
+            var e;
+            n.polygonPoints = (e = n.polygonPoints) != null ? e : [], n.polygonPoints.push(t);
+          })
+        },
+        MOUSE_MOVE: {
+          target: "drawingPolygon",
+          actions: a((n, {
+            point: t
+          }) => {
+            n.movingPoint = t;
+          })
+        },
+        DRAW_POLYGON_COMPLETE: {
+          target: "drawCompleted",
+          actions: ["onAddPolygon"]
+        }
+      }
+    },
+    drawCompleted: {
+      always: {
+        target: "idle"
+        // actions: ['reset'],
+        // actions: assign((ctx) => {
+        //   console.log('reset is done')
+        //   // setTimeout(() => {
+        //   //   ctx.lineEnd = undefined
+        //   //   ctx.lineStart = undefined
+        //   //   ctx.markerPoint = undefined
+        //   //   ctx.polygonPoints = undefined
+        //   // })
+        // }),
+      }
+    },
+    canceled: {}
+  }
+});
+export {
+  d as drawableMachine
+};