@glodon-aiot/react-components 3.2.2-beta.2 → 3.2.2-beta.4

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

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 /* @__PURE__ */ n(m, {
+    children: /* @__PURE__ */ 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 /* @__PURE__ */ a("g", {
+    children: [/* @__PURE__ */ e("line", {}), /* @__PURE__ */ e("line", {}), /* @__PURE__ */ e("circle", {
+      cx: l,
+      cy: i,
+      r: 1,
+      fill: "transparent"
+    }), /* @__PURE__ */ e("foreignObject", {
+      x: l,
+      y: i,
+      width: 0,
+      height: 0,
+      fill: "green",
+      className: "relative overflow-visible",
+      children: /* @__PURE__ */ 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: 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
+};

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 o } from "@xstate/immer";
+import { createMachine as e } from "xstate";
+const d = e({
+  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: o((t) => {
+            t.markerPoint = void 0;
+          })
+        },
+        ADD_MARKER: {
+          target: "drawCompleted",
+          actions: [o((t, {
+            point: n
+          }) => {
+            t.markerPoint = n;
+          }), "onAddMarker"]
+        },
+        MOUSE_MOVE: {
+          target: "addingMarker",
+          actions: o((t, {
+            point: n
+          }) => {
+            t.movingPoint = n;
+          })
+        }
+      }
+    },
+    drawingLine: {
+      on: {
+        ADD_LINE_START: {
+          target: "drawingLine",
+          actions: o((t, n) => {
+            t.lineStart = n.point;
+          })
+        },
+        ADD_LINE_END: {
+          target: "drawCompleted",
+          actions: [o((t, n) => {
+            t.lineEnd = n.point;
+          }), "onAddLine"]
+        },
+        MOUSE_MOVE: {
+          target: "drawingLine",
+          actions: o((t, {
+            point: n
+          }) => {
+            t.movingPoint = n;
+          })
+        },
+        RESET: {
+          target: "drawCompleted"
+        },
+        CANCEL: {
+          target: "drawCompleted"
+        }
+      }
+      // exit: assign((ctx) => {
+      //   ctx.lineEnd = undefined
+      //   ctx.lineStart = undefined
+      // }),
+    },
+    drawingPolygon: {
+      on: {
+        CANCEL: {
+          target: "canceled"
+        },
+        RESET: {
+          target: "idle",
+          actions: o((t) => {
+            t.polygonPoints = void 0;
+          })
+        },
+        ADD_POLYGON_POINT: {
+          target: "drawingPolygon",
+          actions: o((t, {
+            point: n
+          }) => {
+            var a;
+            t.polygonPoints = (a = t.polygonPoints) != null ? a : [], t.polygonPoints.push(n);
+          })
+        },
+        MOUSE_MOVE: {
+          target: "drawingPolygon",
+          actions: o((t, {
+            point: n
+          }) => {
+            t.movingPoint = n;
+          })
+        },
+        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
+};