@hzab/map-combine 0.0.1

package/src/basic/Polygon.ts

@@ -0,0 +1,180 @@
+import Eventful from "zrender/lib/core/Eventful"
+
+import { MapElement, MapElementOption } from "./MapElement"
+import { MapCombine } from "./MapCombine"
+import { ContextMenuItem } from "./ContextMenu"
+
+export interface PolygonOption<K> extends MapElementOption {
+  show: boolean
+  cursor: string
+  coordinates?: number[][]
+  editable: boolean
+  userdata: K
+  silent: boolean
+  lineWidth: number
+  stroke: string
+  dash: boolean
+  fill: string
+  menu?: ContextMenuItem[];
+}
+
+export class Polygon<K = undefined> extends MapElement<PolygonOption<K>> {
+  type = 'Polygon'
+  event = new Eventful<{
+    'data-loaded': () => void
+    'pointer-in': () => void
+    'pointer-out': () => void
+    'left-click': () => void
+    'right-click': () => void
+    'start-edit': () => void
+    'stop-edit': () => void
+    'update': (keys: Set<string>) => void
+    'destroy': () => void
+  }>()
+
+  get userdata() {
+    return this._option.userdata
+  }
+
+  get cursor() {
+    return this._option.cursor
+  }
+
+  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 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 lineWidth() {
+    return this._option.lineWidth
+  }
+
+  set lineWidth(val) {
+    if (this._option.lineWidth != val) {
+      this._option.lineWidth = val
+      this._update('lineWidth')
+    }
+  }
+
+  get stroke() {
+    return this._option.stroke
+  }
+
+  set stroke(val) {
+    if (this._option.stroke != val) {
+      this._option.stroke = val
+      this._update('stroke')
+    }
+  }
+  get dash() {
+    return this._option.dash
+  }
+
+  set dash(val) {
+    if (this._option.dash != val) {
+      this._option.dash = val
+      this._update('dash')
+    }
+  }
+
+  get fill() {
+    return this._option.fill
+  }
+
+  set fill(val) {
+    if (this._option.fill != val) {
+      this._option.fill = val
+      this._update('fill')
+    }
+  }
+
+
+  constructor(map: MapCombine, option: Partial<PolygonOption<K>> = {}) {
+    super(map, Object.assign({ ...Polygon.option }, option))
+  }
+
+  static option: PolygonOption<undefined> = {
+    name: '线',
+    show: true,
+    editable: false,
+    cursor: 'pointer',
+    userdata: undefined,
+    silent: false,
+    lineWidth: 2,
+    stroke: '#FA792A',
+    dash: false,
+    fill: '#43F65588',
+  }
+
+  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')
+  }
+
+
+  startEdit() {
+    this.event.trigger('start-edit')
+  }
+  stopEdit() {
+    this.event.trigger('stop-edit')
+  }
+}

package/src/basic/Polyline.ts

@@ -0,0 +1,194 @@
+import Eventful from "zrender/lib/core/Eventful"
+
+import { MapElement, MapElementOption } from "./MapElement"
+import { MapCombine } from "./MapCombine"
+import { ContextMenuItem } from "./ContextMenu"
+
+export interface PolylineOption<K> extends MapElementOption {
+  show: boolean
+  cursor: string
+  coordinates?: number[][]
+  editable: boolean
+  userdata: K
+  silent: boolean
+  lineWidth: number
+  stroke: string
+  dash: boolean
+  menu?: ContextMenuItem[];
+  icon: string
+  flow: boolean
+}
+
+export class Polyline<K = undefined> extends MapElement<PolylineOption<K>>{
+
+
+  type = 'Polyline'
+  event = new Eventful<{
+    'data-loaded': () => void
+    'pointer-in': () => void
+    'pointer-out': () => void
+    'left-click': () => void
+    'right-click': () => void
+    'start-edit': () => void
+    'stop-edit': () => void
+    'update': (keys: Set<string>) => void
+    'destroy': () => void
+  }>()
+
+  get userdata() {
+    return this._option.userdata
+  }
+
+  get cursor() {
+    return this._option.cursor
+  }
+
+  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 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 lineWidth() {
+    return this._option.lineWidth
+  }
+
+  set lineWidth(val) {
+    if (this._option.lineWidth != val) {
+      this._option.lineWidth = val
+      this._update('lineWidth')
+    }
+  }
+
+  get stroke() {
+    return this._option.stroke
+  }
+
+  set stroke(val) {
+    if (this._option.stroke != val) {
+      this._option.stroke = val
+      this._update('stroke')
+    }
+  }
+  get dash() {
+    return this._option.dash
+  }
+
+  set dash(val) {
+    if (this._option.dash != val) {
+      this._option.dash = val
+      this._update('dash')
+    }
+  }
+
+  get icon() {
+    return this._option.icon
+  }
+
+  set icon(val) {
+    if (this._option.icon != val) {
+      this._option.icon = val
+      this._update('icon')
+    }
+  }
+
+  get flow() {
+    return this._option.flow
+  }
+
+  set flow(val) {
+    if (this._option.flow != val) {
+      this._option.flow = val
+      this._update('flow')
+    }
+  }
+
+
+  constructor(map: MapCombine, option: Partial<PolylineOption<K>> = {}) {
+    super(map, Object.assign({ ...Polyline.option }, option))
+  }
+
+  static option: PolylineOption<undefined> = {
+    name: '线',
+    show: true,
+    editable: false,
+    cursor: 'pointer',
+    userdata: undefined,
+    silent: false,
+    lineWidth: 2,
+    stroke: '#FA792A',
+    dash: false,
+    icon: '',
+    flow: false,
+  }
+
+  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')
+  }
+
+  startEdit() {
+    this.event.trigger('start-edit')
+  }
+  stopEdit() {
+    this.event.trigger('stop-edit')
+  }
+}

package/src/basic/ReactPoint.tsx

@@ -0,0 +1,357 @@
+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<{
+    "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);
+  }
+
+  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;
+    }
+  };
+
+  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;
+    }
+  };
+
+  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);
+}