@hzab/map-combine 0.3.0-beta → 1.0.0-alpha.0

package/src/basic/ReactPoint.tsx

@@ -1,362 +1,363 @@
-import { ReactElement } from "react";
-import { MapElement, MapElementOption } from "./MapElement";
-import Eventful from "zrender/lib/core/Eventful";
-import { MapCombine } from "./MapCombine";
-import ReactDOM from "react-dom";
-import { ContextMenuItem } from "./ContextMenu";
-
-export interface ReactPointOption<K> extends MapElementOption {
-  show: boolean;
-  coordinates?: number[];
-  silent: boolean;
-  element: (props: K) => ReactElement;
-  center: number[];
-  rotation: number;
-  editable: boolean;
-  props: K;
-  menu?: ContextMenuItem[];
-}
-
-export class ReactPoint<K = undefined> extends MapElement<ReactPointOption<K>> {
-  type: "ReactPoint";
-  event = new Eventful<{
-    "data-loaded": () => void;
-    "data-update": () => void;
-    "pointer-in": () => void;
-    "pointer-out": () => void;
-    "left-click": () => void;
-    "right-click": () => void;
-    update: (keys: Set<string>) => void;
-    destroy: () => void;
-  }>();
-
-  get show() {
-    return this._option.show;
-  }
-
-  set show(val) {
-    if (this._option.show != val) {
-      this._option.show = val;
-      this._update("show");
-    }
-  }
-
-  get menu() {
-    return this._option.menu;
-  }
-
-  set menu(val) {
-    this._option.menu = val;
-  }
-
-  get props() {
-    return this._option.props;
-  }
-
-  set props(val) {
-    if (this._option.props != val) {
-      this._option.props = val;
-      this._update("props");
-    }
-  }
-
-  get silent() {
-    return this._option.silent;
-  }
-
-  set silent(val) {
-    if (this._option.silent != val) {
-      this._option.silent = val;
-      this._update("silent");
-    }
-  }
-
-  get editable() {
-    return this._option.editable;
-  }
-
-  set editable(val) {
-    if (this._option.editable != val) {
-      this._option.editable = val;
-      this._update("editable");
-    }
-  }
-
-  get coordinates() {
-    return this._option.coordinates;
-  }
-
-  set coordinates(val) {
-    if (this._option.coordinates != val) {
-      this._option.coordinates = val;
-      this._update("coordinates");
-    }
-  }
-
-  get center() {
-    return this._option.center;
-  }
-
-  set center(val) {
-    if (this._option.center != val) {
-      this._option.center = val;
-      this._update("center");
-    }
-  }
-
-  get rotation() {
-    return this._option.rotation;
-  }
-
-  set rotation(val) {
-    if (this._option.rotation != val) {
-      this._option.rotation = val;
-      this._update("rotation");
-    }
-  }
-
-  get element() {
-    return this._option.element;
-  }
-
-  set element(val) {
-    if (this._option.element != val) {
-      this._option.element = val;
-      this._update("element");
-    }
-  }
-
-  constructor(map: MapCombine, option: Partial<ReactPointOption<K>> = {}) {
-    super(map, Object.assign({ ...ReactPoint.option }, option));
-  }
-
-  static option: ReactPointOption<undefined> = {
-    name: "点",
-    show: true,
-    editable: false,
-    center: [0.5, 0.5],
-    rotation: 0,
-    props: undefined,
-    silent: false,
-    element: () => (
-      <div
-        style={{
-          backgroundColor: "#43F655",
-          width: "16px",
-          height: "16px",
-        }}
-      ></div>
-    ),
-  };
-
-  private _needUpdate?: Set<string>;
-  private _update(key: string) {
-    if (this._needUpdate) {
-      this._needUpdate.add(key);
-    } else {
-      this._needUpdate = new Set([key]);
-      setTimeout(() => {
-        this.event.trigger("update", this._needUpdate);
-        this._needUpdate = undefined;
-      });
-    }
-  }
-
-  protected _onDestroy(): void {
-    this.event.trigger("destroy");
-  }
-}
-
-export function drawReactPoint(map: MapCombine, point: ReactPoint<unknown>) {
-  const { event, htmllayer } = map;
-  let status = 0;
-  let skip = 0;
-
-  const root = document.createElement("div");
-  root.style.transform = `translate(-${point.center[0] * 100}%,-${point.center[1] * 100}%) rotateZ(${
-    point.rotation
-  }deg)`;
-  root.style.transformOrigin = `${point.center[0] * 100}% ${point.center[1] * 100}%`;
-  root.style.position = "absolute";
-  root.style.visibility = point.show ? "visible" : "hidden";
-  root.style.pointerEvents = point.silent ? "none" : "all";
-  root.style.userSelect = "none";
-  root.addEventListener("pointerenter", () => {
-    status == 2 && point.event.trigger("pointer-in");
-  });
-  root.addEventListener("pointerleave", () => {
-    status == 2 && point.event.trigger("pointer-out");
-  });
-  root.addEventListener("click", () => {
-    status == 2 && point.event.trigger("left-click");
-  });
-  root.addEventListener("contextmenu", (e) => {
-    // e.stopPropagation()
-    e.preventDefault();
-    if (point.menu) {
-      map.menu.show(point.menu);
-    }
-    status == 2 && point.event.trigger("right-click");
-  });
-  ReactDOM.render(point.element(point.props), root);
-  let delay = 0;
-
-  root.addEventListener("pointerdown", () => {
-    if (point.editable && status == 2) {
-      delay = window.setTimeout(() => {
-        delay = 0;
-        status = 3;
-        map.moveable = false;
-        root.style.pointerEvents = "none";
-      }, 300);
-    }
-  });
-  if (point.coordinates) {
-    status = 2;
-    const p = map.geographyTcanvas(point.coordinates);
-    root.style.left = `${p[0]}px`;
-    root.style.top = `${p[1]}px`;
-    htmllayer.appendChild(root);
-    setTimeout(() => {
-      point.event.trigger("data-loaded");
-    });
-  }
-
-  const onViewChange = () => {
-    if (point.coordinates) {
-      const p = map.geographyTcanvas(point.coordinates);
-      root.style.left = `${p[0]}px`;
-      root.style.top = `${p[1]}px`;
-      root.style.zIndex = `${point.coordinates[2] ?? ""}`;
-    }
-  };
-
-  const onUpdate = (e: Set<string>) => {
-    if (skip) {
-      skip--;
-      return;
-    }
-    const keys = new Set();
-    e.forEach((key) => {
-      switch (key) {
-        case "show":
-          root.style.visibility = point.show ? "visible" : "hidden";
-          break;
-        case "editable":
-          break;
-        case "props":
-          keys.add("dom");
-          break;
-        case "element":
-          keys.add("dom");
-          break;
-        case "coordinates":
-          if (point.coordinates) {
-            const p = map.geographyTcanvas(point.coordinates);
-            root.style.left = `${p[0]}px`;
-            root.style.top = `${p[1]}px`;
-            root.style.zIndex = `${point.coordinates[2] ?? ""}`;
-            switch (status) {
-              case 0:
-                htmllayer.appendChild(root);
-                status = 2;
-                break;
-              case 1:
-                status = 2;
-                break;
-            }
-          } else {
-            root.remove();
-            status = 0;
-          }
-
-          break;
-
-        case "center":
-          keys.add("transform");
-          break;
-        case "rotation":
-          keys.add("transform");
-          break;
-        default:
-          throw new Error(`${key} 还不支持修改`);
-      }
-    });
-
-    keys.forEach((e) => {
-      switch (e) {
-        case "transform":
-          root.style.transform = `translate(-${point.center[0] * 100}%,-${point.center[1] * 100}%) rotateZ(${
-            point.rotation
-          }deg)`;
-          root.style.transformOrigin = `${point.center[0] * 100}% ${point.center[1] * 100}%`;
-          break;
-        case "dom":
-          ReactDOM.render(point.element(point.props), root);
-          break;
-      }
-    });
-  };
-
-  const onMouseMove = () => {
-    if (delay) {
-      clearTimeout(delay);
-      delay = 0;
-    }
-    switch (status) {
-      case 0:
-        status = 1;
-        root.style.left = `${event.canvas[0]}px`;
-        root.style.top = `${event.canvas[1]}px`;
-        htmllayer.appendChild(root);
-        break;
-      case 1:
-      case 3:
-        root.style.left = `${event.canvas[0]}px`;
-        root.style.top = `${event.canvas[1]}px`;
-        break;
-    }
-  };
-
-  const onClick = () => {
-    if (status == 1) {
-      status = 2;
-      skip++;
-      point.coordinates = event.geography;
-      point.event.trigger("data-loaded");
-    }
-  };
-
-  const onPointerUp = () => {
-    if (delay) {
-      clearTimeout(delay);
-      delay = 0;
-    }
-    if (point.editable && status == 3) {
-      status = 2;
-      map.moveable = true;
-      root.style.pointerEvents = point.silent ? "none" : "all";
-      skip++;
-      point.coordinates = event.geography;
-      point.event.trigger("data-update");
-    }
-  };
-
-  const onDestroy = () => {
-    root.remove();
-    ReactDOM.unmountComponentAtNode(root);
-    event.off("view-change", onViewChange);
-    event.off("pointer-move", onMouseMove);
-    event.off("left-click", onClick);
-    event.off("pointer-up", onPointerUp);
-    point.event.off("update", onUpdate);
-    point.event.off("destroy", onDestroy);
-  };
-
-  event.on("view-change", onViewChange);
-  event.on("pointer-move", onMouseMove);
-  event.on("left-click", onClick);
-  event.on("pointer-up", onPointerUp);
-  point.event.on("update", onUpdate);
-  point.event.on("destroy", onDestroy);
-}
+import { ReactElement } from "react";
+import { MapElement, MapElementOption } from "./MapElement";
+import Eventful from "zrender/lib/core/Eventful";
+import { MapCombine } from "./MapCombine";
+import ReactDOM from "react-dom";
+import { ContextMenuItem } from "./ContextMenu";
+
+export interface ReactPointOption<K> extends MapElementOption {
+  show: boolean;
+  coordinates?: number[];
+  silent: boolean;
+  element: (props: K) => ReactElement;
+  center: number[];
+  rotation: number;
+  editable: boolean;
+  props: K;
+  menu?: ContextMenuItem[];
+}
+
+export class ReactPoint<K = undefined> extends MapElement<ReactPointOption<K>> {
+  type: "ReactPoint";
+  event = new Eventful<{
+    "data-loaded": () => void;
+    "data-update": () => void;
+    "pointer-in": () => void;
+    "pointer-out": () => void;
+    "left-click": () => void;
+    "right-click": () => void;
+    update: (keys: Set<string>) => void;
+    destroy: () => void;
+  }>();
+
+  get show() {
+    return this._option.show;
+  }
+
+  set show(val) {
+    if (this._option.show != val) {
+      this._option.show = val;
+      this._update("show");
+    }
+  }
+
+  get menu() {
+    return this._option.menu;
+  }
+
+  set menu(val) {
+    this._option.menu = val;
+  }
+
+  get props() {
+    return this._option.props;
+  }
+
+  set props(val) {
+    if (this._option.props != val) {
+      this._option.props = val;
+      this._update("props");
+    }
+  }
+
+  get silent() {
+    return this._option.silent;
+  }
+
+  set silent(val) {
+    if (this._option.silent != val) {
+      this._option.silent = val;
+      this._update("silent");
+    }
+  }
+
+  get editable() {
+    return this._option.editable;
+  }
+
+  set editable(val) {
+    if (this._option.editable != val) {
+      this._option.editable = val;
+      this._update("editable");
+    }
+  }
+
+  get coordinates() {
+    return this._option.coordinates;
+  }
+
+  set coordinates(val) {
+    if (this._option.coordinates != val) {
+      this._option.coordinates = val;
+      this._update("coordinates");
+    }
+  }
+
+  get center() {
+    return this._option.center;
+  }
+
+  set center(val) {
+    if (this._option.center != val) {
+      this._option.center = val;
+      this._update("center");
+    }
+  }
+
+  get rotation() {
+    return this._option.rotation;
+  }
+
+  set rotation(val) {
+    if (this._option.rotation != val) {
+      this._option.rotation = val;
+      this._update("rotation");
+    }
+  }
+
+  get element() {
+    return this._option.element;
+  }
+
+  set element(val) {
+    if (this._option.element != val) {
+      this._option.element = val;
+      this._update("element");
+    }
+  }
+
+  constructor(map: MapCombine, option: Partial<ReactPointOption<K>> = {}) {
+    super(map, Object.assign({ ...ReactPoint.option }, option));
+  }
+
+  static option: ReactPointOption<undefined> = {
+    name: "点",
+    show: true,
+    editable: false,
+    center: [0.5, 0.5],
+    rotation: 0,
+    props: undefined,
+    silent: false,
+    element: () => (
+      <div
+        style={{
+          backgroundColor: "#43F655",
+          width: "16px",
+          height: "16px",
+        }}
+      ></div>
+    ),
+  };
+
+  private _needUpdate?: Set<string>;
+  private _update(key: string) {
+    if (this._needUpdate) {
+      this._needUpdate.add(key);
+    } else {
+      this._needUpdate = new Set([key]);
+      setTimeout(() => {
+        this.event.trigger("update", this._needUpdate);
+        this._needUpdate = undefined;
+      });
+    }
+  }
+
+  protected _onDestroy(): void {
+    this.event.trigger("destroy");
+  }
+}
+
+export function drawReactPoint(map: MapCombine, point: ReactPoint<unknown>) {
+  const { event, htmllayer } = map;
+  /** 当前点位的状态 0:初始态  1:编辑态  2:显示态  3:拖动态   */
+  let status = 0;
+  let skip = 0;
+
+  const root = document.createElement("div");
+  root.style.transform = `translate(-${point.center[0] * 100}%,-${point.center[1] * 100}%) rotateZ(${
+    point.rotation
+  }deg)`;
+  root.style.transformOrigin = `${point.center[0] * 100}% ${point.center[1] * 100}%`;
+  root.style.position = "absolute";
+  root.style.visibility = point.show ? "visible" : "hidden";
+  root.style.pointerEvents = point.silent ? "none" : "all";
+  root.style.userSelect = "none";
+  root.addEventListener("pointerenter", () => {
+    status == 2 && point.event.trigger("pointer-in");
+  });
+  root.addEventListener("pointerleave", () => {
+    status == 2 && point.event.trigger("pointer-out");
+  });
+  root.addEventListener("click", () => {
+    status == 2 && point.event.trigger("left-click");
+  });
+  root.addEventListener("contextmenu", (e) => {
+    // e.stopPropagation()
+    e.preventDefault();
+    if (point.menu) {
+      map.menu.show(point.menu);
+    }
+    status == 2 && point.event.trigger("right-click");
+  });
+  ReactDOM.render(point.element(point.props), root);
+  let delay = 0;
+
+  root.addEventListener("pointerdown", () => {
+    if (point.editable && status == 2) {
+      delay = window.setTimeout(() => {
+        delay = 0;
+        status = 3;
+        map.moveable = false;
+        root.style.pointerEvents = "none";
+      }, 300);
+    }
+  });
+  if (point.coordinates) {
+    status = 2;
+    const p = map.geographyTcanvas(point.coordinates);
+    root.style.left = `${p[0]}px`;
+    root.style.top = `${p[1]}px`;
+    htmllayer.appendChild(root);
+    setTimeout(() => {
+      point.event.trigger("data-loaded");
+    });
+  }
+
+  const onViewChange = () => {
+    if (point.coordinates) {
+      const p = map.geographyTcanvas(point.coordinates);
+      root.style.left = `${p[0]}px`;
+      root.style.top = `${p[1]}px`;
+      root.style.zIndex = `${point.coordinates[2] ?? ""}`;
+    }
+  };
+
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--;
+      return;
+    }
+    const keys = new Set();
+    e.forEach((key) => {
+      switch (key) {
+        case "show":
+          root.style.visibility = point.show ? "visible" : "hidden";
+          break;
+        case "editable":
+          break;
+        case "props":
+          keys.add("dom");
+          break;
+        case "element":
+          keys.add("dom");
+          break;
+        case "coordinates":
+          if (point.coordinates) {
+            const p = map.geographyTcanvas(point.coordinates);
+            root.style.left = `${p[0]}px`;
+            root.style.top = `${p[1]}px`;
+            root.style.zIndex = `${point.coordinates[2] ?? ""}`;
+            switch (status) {
+              case 0:
+                htmllayer.appendChild(root);
+                status = 2;
+                break;
+              case 1:
+                status = 2;
+                break;
+            }
+          } else {
+            root.remove();
+            status = 0;
+          }
+
+          break;
+
+        case "center":
+          keys.add("transform");
+          break;
+        case "rotation":
+          keys.add("transform");
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`);
+      }
+    });
+
+    keys.forEach((e) => {
+      switch (e) {
+        case "transform":
+          root.style.transform = `translate(-${point.center[0] * 100}%,-${point.center[1] * 100}%) rotateZ(${
+            point.rotation
+          }deg)`;
+          root.style.transformOrigin = `${point.center[0] * 100}% ${point.center[1] * 100}%`;
+          break;
+        case "dom":
+          ReactDOM.render(point.element(point.props), root);
+          break;
+      }
+    });
+  };
+
+  const onMouseMove = () => {
+    if (delay) {
+      clearTimeout(delay);
+      delay = 0;
+    }
+    switch (status) {
+      case 0:
+        status = 1;
+        root.style.left = `${event.canvas[0]}px`;
+        root.style.top = `${event.canvas[1]}px`;
+        htmllayer.appendChild(root);
+        break;
+      case 1:
+      case 3:
+        root.style.left = `${event.canvas[0]}px`;
+        root.style.top = `${event.canvas[1]}px`;
+        break;
+    }
+  };
+
+  const onClick = () => {
+    if (status == 1) {
+      status = 2;
+      skip++;
+      point.coordinates = event.geography;
+      point.event.trigger("data-loaded");
+    }
+  };
+
+  const onPointerUp = () => {
+    if (delay) {
+      clearTimeout(delay);
+      delay = 0;
+    }
+    if (point.editable && status == 3) {
+      status = 2;
+      map.moveable = true;
+      root.style.pointerEvents = point.silent ? "none" : "all";
+      skip++;
+      point.coordinates = event.geography;
+      point.event.trigger("data-update");
+    }
+  };
+
+  const onDestroy = () => {
+    root.remove();
+    ReactDOM.unmountComponentAtNode(root);
+    event.off("view-change", onViewChange);
+    event.off("pointer-move", onMouseMove);
+    event.off("left-click", onClick);
+    event.off("pointer-up", onPointerUp);
+    point.event.off("update", onUpdate);
+    point.event.off("destroy", onDestroy);
+  };
+
+  event.on("view-change", onViewChange);
+  event.on("pointer-move", onMouseMove);
+  event.on("left-click", onClick);
+  event.on("pointer-up", onPointerUp);
+  point.event.on("update", onUpdate);
+  point.event.on("destroy", onDestroy);
+}