@arcblock/ux 2.13.70 → 3.0.0

package/lib/Earth/index.js

@@ -1,81 +1,68 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable consistent-return */
-import { useReducer, useRef, useEffect } from 'react';
-import useSpring from 'react-use/lib/useSpring';
-import * as d3 from 'd3-geo';
-import * as topojson from 'topojson-client';
-import versor from 'versor';
-import json from './countries.json';
-import util from './util';
-import { withDeprecated } from '../Util/deprecate';
-import { styled } from '../Theme';
-const geoJson = topojson.feature(json, json.objects.ne_110m_admin_0_countries);
-const themes = {
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useReducer as U, useRef as w, useEffect as H } from "react";
+import J from "react-use/lib/useSpring";
+import * as N from "d3-geo";
+import * as V from "topojson-client";
+import D from "versor";
+import R from "./countries.json.js";
+import X from "./util.js";
+import { withDeprecated as Y } from "../Util/deprecate.js";
+import { styled as B } from "../Theme/index.js";
+const F = V.feature(R, R.objects.ne_110m_admin_0_countries), K = {
   light: {
-    ocean: '#EDF4F4',
-    graticule: '#EDF4F4',
-    land: '#CCEAEA',
-    activeLand: '#AFD3D3',
-    border: '#AFD3D3',
-    marker: '#4E6AF6',
-    activeMarker: '#4E6AF6'
+    ocean: "#EDF4F4",
+    graticule: "#EDF4F4",
+    land: "#CCEAEA",
+    activeLand: "#AFD3D3",
+    border: "#AFD3D3",
+    marker: "#4E6AF6",
+    activeMarker: "#4E6AF6"
   },
   dark: {
-    ocean: '#09233B',
-    graticule: '#09233B',
-    land: '#0D2344',
-    activeLand: '#173159',
-    border: '#89DDD9',
-    marker: '#ffffff',
-    activeMarker: '#FFD159'
+    ocean: "#09233B",
+    graticule: "#09233B",
+    land: "#0D2344",
+    activeLand: "#173159",
+    border: "#89DDD9",
+    marker: "#ffffff",
+    activeMarker: "#FFD159"
   }
 };
-function stateReducer(state, action) {
-  switch (action.type) {
-    case 'dragEnd':
+function Q(e, s) {
+  switch (s.type) {
+    case "dragEnd":
+      return { ...e, isDragging: !1 };
+    case "dragStart":
       return {
-        ...state,
-        isDragging: false
-      };
-    case 'dragStart':
-      return {
-        ...state,
-        isDragging: true,
+        ...e,
+        isDragging: !0,
         animationDuration: 1,
-        mousePosition: action.payload.mousePosition
+        mousePosition: s.payload.mousePosition
       };
-    case 'tooltip':
-    case 'rotate':
-      return Object.assign({}, state, action.payload);
+    case "tooltip":
+    case "rotate":
+      return Object.assign({}, e, s.payload);
     default:
-      return state;
+      return e;
   }
 }
-function Earth({
-  theme = 'dark',
-  width = 1200,
-  height = 600,
-  enableRotation = false,
-  rotationSpeed = 5,
-  activeMarkerId,
-  markers = [],
-  colors: _colors = {}
+function W({
+  theme: e = "dark",
+  width: s = 1200,
+  height: g = 600,
+  enableRotation: I = !1,
+  rotationSpeed: M = 5,
+  activeMarkerId: a,
+  markers: y = [],
+  colors: L = {}
 }) {
-  const colors = Object.assign(_colors, themes[theme]);
-  const [state, dispatch] = useReducer(stateReducer, {
+  const $ = Object.assign(L, K[e]), [r, d] = U(Q, {
     rotation: [0, 0, 0],
-    isDragging: false,
+    isDragging: !1,
     animateDuration: 1,
     mousePosition: null,
     tooltipIndex: -1
-  });
-  const svgRef = useRef(null);
-
-  // variables used to track drag and rotate
-  const dragRef = useRef({});
-
-  // variables used to track start and end position when there is active marker
-  const rotateRef = useRef({
+  }), E = w(null), x = w({}), k = w({
     p1: null,
     p2: [0, 0],
     r1: null,
@@ -83,286 +70,197 @@ function Earth({
     step: 0,
     markerId: null,
     iv: null
-  });
-
-  // console.log('renderGlobe', state, dragRef.current, rotateRef.current, geoJson);
-  const t = useSpring(state.animateDuration, 170, 26);
-  const isValid = activeMarkerId && rotateRef.current.markerId !== activeMarkerId && markers.some(x => x.id === activeMarkerId);
-
-  // Setup path for globe
-  const projection = d3.geoOrthographic().fitExtent([[30, 30], [width - 30, height - 30]], geoJson).rotate(t <= 1 || state.isDragging || !activeMarkerId ? state.rotation : rotateRef.current.iv(t / state.animateDuration));
-  const pathGenerator = d3.geoPath().projection(projection).pointRadius(2);
-  useEffect(() => {
-    // Rotate to active marker
-    if (isValid) {
-      // eslint-disable-next-line prefer-const
-      let {
-        p1,
-        p2,
-        r1,
-        r2,
-        markerId
-      } = rotateRef.current;
-      // We should only start new animation if the marker has changed
-      if (markerId !== activeMarkerId && !state.isDragging) {
-        const marker = markers.find(x => x.id === activeMarkerId);
-        p1 = p2;
-        p2 = [marker.longitude, marker.latitude];
-        r1 = r2;
-        r2 = [-p2[0], 20 - p2[1], projection.rotate()[2]];
-        const iv = util.interpolateAngles(r1, r2);
-        Object.assign(rotateRef.current, {
-          p1,
-          p2,
-          r1,
-          r2,
-          iv,
-          markerId: activeMarkerId
+  }), C = J(r.animateDuration, 170, 26), S = a && k.current.markerId !== a && y.some((t) => t.id === a), p = N.geoOrthographic().fitExtent(
+    [
+      [30, 30],
+      [s - 30, g - 30]
+    ],
+    F
+  ).rotate(
+    C <= 1 || r.isDragging || !a ? r.rotation : k.current.iv(C / r.animateDuration)
+  ), P = N.geoPath().projection(p).pointRadius(2);
+  H(() => {
+    if (S) {
+      let { p1: t, p2: o, r1: i, r2: u, markerId: c } = k.current;
+      if (c !== a && !r.isDragging) {
+        const l = y.find((v) => v.id === a);
+        t = o, o = [l.longitude, l.latitude], i = u, u = [-o[0], 20 - o[1], p.rotate()[2]];
+        const h = X.interpolateAngles(i, u);
+        Object.assign(k.current, {
+          p1: t,
+          p2: o,
+          r1: i,
+          r2: u,
+          iv: h,
+          markerId: a
         });
-        const duration = state.animateDuration * 2;
-        dispatch({
-          type: 'rotate',
+        const f = r.animateDuration * 2;
+        d({
+          type: "rotate",
           payload: {
-            animateDuration: duration > 1e3 ? 2 : duration
+            animateDuration: f > 1e3 ? 2 : f
           }
         });
       }
-
-      // Enable auto rotation
-    } else if (enableRotation) {
-      const handler = window.requestAnimationFrame(() => {
-        const newRotation = [state.rotation[0] + 2 / rotationSpeed, state.rotation[1], state.rotation[2]];
-        dispatch({
-          type: 'rotate',
-          payload: {
-            rotation: newRotation
-          }
-        });
+    } else if (I) {
+      const t = window.requestAnimationFrame(() => {
+        const o = [r.rotation[0] + 2 / M, r.rotation[1], r.rotation[2]];
+        d({ type: "rotate", payload: { rotation: o } });
       });
-      return function cleanup() {
-        window.cancelAnimationFrame(handler);
+      return function() {
+        window.cancelAnimationFrame(t);
       };
     }
   });
-  const getMousePosition = event => {
-    const node = svgRef.current;
-    const rect = node?.getBoundingClientRect();
-    const mousePosition = [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
-    return mousePosition;
-  };
-  const onDragStart = event => {
-    const mousePosition = getMousePosition(event);
-    if (!mousePosition[0]) {
+  const b = (t) => {
+    const o = E.current, i = o == null ? void 0 : o.getBoundingClientRect();
+    return [t.clientX - i.left - o.clientLeft, t.clientY - i.top - o.clientTop];
+  }, T = (t) => {
+    const o = b(t);
+    o[0] && (x.current.v0 = D.cartesian(p.invert(o)), x.current.r0 = p.rotate(), x.current.q0 = D(x.current.r0), d({ type: "dragStart", payload: { mousePosition: o } }));
+  }, z = (t) => {
+    if (r.isDragging === !1)
       return;
-    }
-    dragRef.current.v0 = versor.cartesian(projection.invert(mousePosition));
-    dragRef.current.r0 = projection.rotate();
-    dragRef.current.q0 = versor(dragRef.current.r0);
-    dispatch({
-      type: 'dragStart',
-      payload: {
-        mousePosition
-      }
-    });
-  };
-  const onDrag = event => {
-    if (state.isDragging === false) {
-      return;
-    }
-    const mousePosition = getMousePosition(event);
-    const {
-      r0,
-      v0,
-      q0
-    } = dragRef.current;
-    const v1 = versor.cartesian(projection.rotate(r0).invert(mousePosition));
-    const q1 = versor.multiply(q0, versor.delta(v0, v1));
-    const r1 = versor.rotation(q1);
-    dispatch({
-      type: 'rotate',
-      payload: {
-        rotation: r1,
-        mousePosition
-      }
-    });
-  };
-  const onDragEnd = () => {
+    const o = b(t), { r0: i, v0: u, q0: c } = x.current, l = D.cartesian(p.rotate(i).invert(o)), h = D.multiply(c, D.delta(u, l)), f = D.rotation(h);
+    d({ type: "rotate", payload: { rotation: f, mousePosition: o } });
+  }, j = () => {
     setTimeout(() => {
-      dispatch({
-        type: 'dragEnd',
-        payload: {}
-      });
+      d({ type: "dragEnd", payload: {} });
     }, 200);
-  };
-  const onShowTooltip = (event, i) => dispatch({
-    type: 'tooltip',
-    payload: {
-      tooltipIndex: i,
-      mousePosition: getMousePosition(event)
-    }
-  });
-  const onHideTooltip = () => dispatch({
-    type: 'tooltip',
-    payload: {
-      tooltipIndex: -1,
-      mousePosition: null
-    }
-  });
-  const renderMarkers = () => markers.map((x, i) => {
-    const areaCoords = [x.longitude, x.latitude];
-    const distance = d3.geoDistance(areaCoords, projection.invert([width / 2, height / 2]));
-    const sphereCoords = projection(areaCoords);
-    const isActive = activeMarkerId === x.id;
-    // eslint-disable-next-line no-nested-ternary
-    const fill = distance > 1.57 ? 'none' : isActive ? colors.activeMarker : colors.marker;
-    const radius = isActive ? 9 : 6;
-    return /*#__PURE__*/_jsxs("g", {
-      className: `marker ${isActive ? 'marker--active' : ''}`,
-      onFocus: event => onShowTooltip(event, i),
-      onBlur: onHideTooltip,
-      onMouseOver: event => onShowTooltip(event, i),
-      onMouseOut: onHideTooltip,
-      children: [/*#__PURE__*/_jsx("circle", {
-        className: "marker__inner",
-        r: radius,
-        cx: sphereCoords[0],
-        cy: sphereCoords[1],
-        fill: fill,
-        style: {
-          fillOpacity: isActive ? 1 : 0.5
-        }
-      }, "marker-inner"), /*#__PURE__*/_jsx("circle", {
-        className: "marker__outer",
-        r: radius * 2,
-        cx: sphereCoords[0],
-        cy: sphereCoords[1],
-        fill: fill,
-        style: {
-          animationDuration: isActive ? '800ms' : '1600ms',
-          animationDelay: `${i * 0.2}s`,
-          transformOrigin: `${sphereCoords[0]}px ${sphereCoords[1]}px`
-        }
-      }, "marker-outer")]
-    }, x.id);
-  });
-  const renderTooltip = () => {
-    if (state.tooltipIndex >= 0) {
-      const marker = markers[state.tooltipIndex];
-      return /*#__PURE__*/_jsxs(Tooltip, {
-        style: {
-          left: state.mousePosition[0],
-          top: state.mousePosition[1]
-        },
-        children: [/*#__PURE__*/_jsx("p", {
-          className: "title",
-          children: marker.title
-        }), /*#__PURE__*/_jsx("p", {
-          className: "description",
-          children: marker.description
-        }), /*#__PURE__*/_jsxs("p", {
-          className: "description",
-          children: ["ID: ", marker.id]
-        })]
-      });
+  }, A = (t, o) => d({
+    type: "tooltip",
+    payload: { tooltipIndex: o, mousePosition: b(t) }
+  }), O = () => d({ type: "tooltip", payload: { tooltipIndex: -1, mousePosition: null } }), G = () => y.map((t, o) => {
+    const i = [t.longitude, t.latitude], u = N.geoDistance(i, p.invert([s / 2, g / 2])), c = p(i), l = a === t.id, h = u > 1.57 ? "none" : l ? $.activeMarker : $.marker, f = l ? 9 : 6;
+    return /* @__PURE__ */ m(
+      "g",
+      {
+        className: `marker ${l ? "marker--active" : ""}`,
+        onFocus: (v) => A(v, o),
+        onBlur: O,
+        onMouseOver: (v) => A(v, o),
+        onMouseOut: O,
+        children: [
+          /* @__PURE__ */ n(
+            "circle",
+            {
+              className: "marker__inner",
+              r: f,
+              cx: c[0],
+              cy: c[1],
+              fill: h,
+              style: { fillOpacity: l ? 1 : 0.5 }
+            },
+            "marker-inner"
+          ),
+          /* @__PURE__ */ n(
+            "circle",
+            {
+              className: "marker__outer",
+              r: f * 2,
+              cx: c[0],
+              cy: c[1],
+              fill: h,
+              style: {
+                animationDuration: l ? "800ms" : "1600ms",
+                animationDelay: `${o * 0.2}s`,
+                transformOrigin: `${c[0]}px ${c[1]}px`
+              }
+            },
+            "marker-outer"
+          )
+        ]
+      },
+      t.id
+    );
+  }), q = () => {
+    var t, o;
+    if (r.tooltipIndex >= 0) {
+      const i = y[r.tooltipIndex];
+      return /* @__PURE__ */ m(oo, { style: { left: ((t = r.mousePosition) == null ? void 0 : t[0]) ?? 0, top: ((o = r.mousePosition) == null ? void 0 : o[1]) ?? 0 }, children: [
+        /* @__PURE__ */ n("p", { className: "title", children: i.title }),
+        /* @__PURE__ */ n("p", { className: "description", children: i.description }),
+        /* @__PURE__ */ m("p", { className: "description", children: [
+          "ID: ",
+          i.id
+        ] })
+      ] });
     }
   };
-  let activeCountry = null;
-  if (activeMarkerId && markers.some(x => x.id === activeMarkerId)) {
-    const activeMarker = markers.find(x => x.id === activeMarkerId);
-    activeCountry = geoJson.features.findIndex(x => x.properties && x.properties.name && x.properties.name === activeMarker.country);
+  let _ = null;
+  if (a && y.some((t) => t.id === a)) {
+    const t = y.find((o) => o.id === a);
+    _ = F.features.findIndex(
+      (o) => o.properties && o.properties.name && o.properties.name === t.country
+    );
   }
-  return /*#__PURE__*/_jsxs(Container, {
-    width: width,
-    height: height,
-    $theme: theme,
-    colors: colors,
-    onMouseLeave: onDragEnd,
-    children: [renderTooltip(), /*#__PURE__*/_jsxs("svg", {
-      className: "earth",
-      width: width,
-      height: height,
-      onMouseDown: onDragStart,
-      onMouseMove: onDrag,
-      onMouseUp: onDragEnd,
-      ref: svgRef,
-      children: [/*#__PURE__*/_jsx("rect", {
-        className: "frame",
-        width: width,
-        height: height
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: width / 2,
-        cy: height / 2,
-        r: projection.scale(),
-        className: "globe",
-        filter: "url(#glow)"
-      }), /*#__PURE__*/_jsx("path", {
-        className: "graticule",
-        d: pathGenerator(d3.geoGraticule().step([10, 10])())
-      }), /*#__PURE__*/_jsx("g", {
-        className: "features",
-        children: geoJson.features.map((x, i) => /*#__PURE__*/_jsx("path", {
-          className: `country ${activeCountry === i ? 'country--active' : ''}`,
-          d: pathGenerator(x)
-        }, x.properties.name))
-      }), /*#__PURE__*/_jsx("g", {
-        className: "markers",
-        children: renderMarkers()
-      }), state.isDragging && state.mousePosition && /*#__PURE__*/_jsx("path", {
-        className: "point point-mouse",
-        d: pathGenerator({
-          type: 'Point',
-          coordinates: projection.invert(state.mousePosition)
-        })
-      })]
-    }), /*#__PURE__*/_jsx("svg", {
-      className: "defs",
-      children: /*#__PURE__*/_jsxs("defs", {
-        children: [/*#__PURE__*/_jsxs("linearGradient", {
-          id: "gradBlue",
-          x1: "0%",
-          y1: "0%",
-          x2: "100%",
-          y2: "0%",
-          children: [/*#__PURE__*/_jsx("stop", {
-            offset: "0%",
-            style: {
-              stopColor: '#005C99',
-              stopOpacity: 1
-            }
-          }), /*#__PURE__*/_jsx("stop", {
-            offset: "100%",
-            style: {
-              stopColor: '#0099FF',
-              stopOpacity: 1
+  return /* @__PURE__ */ m(Z, { width: s, height: g, $theme: e, colors: $, onMouseLeave: j, children: [
+    q(),
+    /* @__PURE__ */ m(
+      "svg",
+      {
+        className: "earth",
+        width: s,
+        height: g,
+        onMouseDown: T,
+        onMouseMove: z,
+        onMouseUp: j,
+        ref: E,
+        children: [
+          /* @__PURE__ */ n("rect", { className: "frame", width: s, height: g }),
+          /* @__PURE__ */ n("circle", { cx: s / 2, cy: g / 2, r: p.scale(), className: "globe", filter: "url(#glow)" }),
+          /* @__PURE__ */ n("path", { className: "graticule", d: P(N.geoGraticule().step([10, 10])()) }),
+          /* @__PURE__ */ n("g", { className: "features", children: F.features.map((t, o) => /* @__PURE__ */ n(
+            "path",
+            {
+              className: `country ${_ === o ? "country--active" : ""}`,
+              d: P(t)
+            },
+            t.properties.name
+          )) }),
+          /* @__PURE__ */ n("g", { className: "markers", children: G() }),
+          r.isDragging && r.mousePosition && /* @__PURE__ */ n(
+            "path",
+            {
+              className: "point point-mouse",
+              d: P({
+                type: "Point",
+                coordinates: p.invert(r.mousePosition)
+              })
             }
-          })]
-        }), /*#__PURE__*/_jsxs("filter", {
-          id: "glow",
-          children: [/*#__PURE__*/_jsx("feColorMatrix", {
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ n("svg", { className: "defs", children: /* @__PURE__ */ m("defs", { children: [
+      /* @__PURE__ */ m("linearGradient", { id: "gradBlue", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ n("stop", { offset: "0%", style: { stopColor: "#005C99", stopOpacity: 1 } }),
+        /* @__PURE__ */ n("stop", { offset: "100%", style: { stopColor: "#0099FF", stopOpacity: 1 } })
+      ] }),
+      /* @__PURE__ */ m("filter", { id: "glow", children: [
+        /* @__PURE__ */ n(
+          "feColorMatrix",
+          {
             type: "matrix",
-            values: "0 0 0 0   0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 1   0"
-          }), /*#__PURE__*/_jsx("feGaussianBlur", {
-            stdDeviation: "5.5",
-            result: "coloredBlur"
-          }), /*#__PURE__*/_jsxs("feMerge", {
-            children: [/*#__PURE__*/_jsx("feMergeNode", {
-              in: "coloredBlur"
-            }), /*#__PURE__*/_jsx("feMergeNode", {
-              in: "SourceGraphic"
-            })]
-          })]
-        })]
-      })
-    })]
-  });
+            values: `0 0 0 0   0
+                     0 0 0 0.9 0
+                     0 0 0 0.9 0
+                     0 0 0 1   0`
+          }
+        ),
+        /* @__PURE__ */ n("feGaussianBlur", { stdDeviation: "5.5", result: "coloredBlur" }),
+        /* @__PURE__ */ m("feMerge", { children: [
+          /* @__PURE__ */ n("feMergeNode", { in: "coloredBlur" }),
+          /* @__PURE__ */ n("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] })
+    ] }) })
+  ] });
 }
-export default withDeprecated(Earth, {
-  name: 'Earth'
-});
-const Container = styled('div')`
-  background-color: ${props => props.$theme === 'light' ? '#f7f7f7' : '#222'};
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
+const lo = Y(W, { name: "Earth" }), Z = B("div")`
+  background-color: ${(e) => e.$theme === "light" ? "#f7f7f7" : "#222"};
+  width: ${(e) => e.width}px;
+  height: ${(e) => e.height}px;
   position: relative;
   animation-name: zoomIn;
   animation-duration: 1s;
@@ -381,29 +279,29 @@ const Container = styled('div')`
   }
 
   .country {
-    fill: ${props => props.colors.land};
-    stroke: ${props => props.colors.border};
+    fill: ${(e) => e.colors.land};
+    stroke: ${(e) => e.colors.border};
     stroke-width: 0.5px;
     transition: fill 300ms ease;
 
     &:hover {
-      fill: ${props => props.colors.activeLand};
+      fill: ${(e) => e.colors.activeLand};
     }
   }
 
   .country--active {
-    fill: ${props => props.colors.activeLand};
+    fill: ${(e) => e.colors.activeLand};
   }
 
   .globe {
-    fill: ${props => props.colors.ocean};
+    fill: ${(e) => e.colors.ocean};
     stroke: rgba(255, 255, 255, 0.5);
     stroke-width: 0.25px;
   }
 
   .graticule {
     fill: none;
-    stroke: ${props => props.colors.graticule};
+    stroke: ${(e) => e.colors.graticule};
   }
 
   .star {
@@ -440,8 +338,7 @@ const Container = styled('div')`
       transform: scale3d(1.5, 1.5, 1.5);
     }
   }
-`;
-const Tooltip = styled('div')`
+`, oo = B("div")`
   position: absolute;
   width: auto;
   min-width: 90px;
@@ -463,7 +360,7 @@ const Tooltip = styled('div')`
   }
 
   .description {
-    margin-top: ${props => props.theme.spacing(1)}px;
+    margin-top: ${(e) => e.theme.spacing(1)}px;
     color: #fff;
     font-size: 12px;
   }
@@ -477,4 +374,7 @@ const Tooltip = styled('div')`
       opacity: 1;
     }
   }
-`;
+`;
+export {
+  lo as default
+};