@hzab/map-combine 0.4.1 → 0.4.2-alpha.0

package/src/mine/MinePolygon.ts

@@ -1,148 +1,146 @@
-
 import { Polygon } from "../basic/Polygon";
 import { ChainNode, PolygonEditor } from "../utils/PolygonEditor";
-import { MineMap } from './MineMap';
-import iconPoint from '../assets/point.png'
-import iconAdd from '../assets/add.png'
+import { MineMap } from "./MineMap";
+import iconPoint from "../assets/point.png";
+import iconAdd from "../assets/add.png";
 import { dealColor } from "../utils";
 
-
-function createImgNode(
-  onPointerDown: () => void,
-  onPointerUp: () => void,
-  onDbClick: () => void,
-) {
-  const img = document.createElement('img')
-  img.src = iconPoint
-  img.width = 16
-  img.height = 16
-  img.style.cursor = 'move'
-  img.addEventListener('pointerdown', onPointerDown)
-  img.addEventListener('pointerup', onPointerUp)
-  img.addEventListener('dblclick', onDbClick)
+function createImgNode(onPointerDown: () => void, onPointerUp: () => void, onDbClick: () => void) {
+  const img = document.createElement("img");
+  img.src = iconPoint;
+  img.width = 16;
+  img.height = 16;
+  img.style.cursor = "move";
+  img.addEventListener("pointerdown", onPointerDown);
+  img.addEventListener("pointerup", onPointerUp);
+  img.addEventListener("dblclick", onDbClick);
   const marker = new minemap.Marker({
     draggable: false,
     element: img,
     offset: [-8, -8],
-  })
-  return marker
+  });
+  return marker;
 }
 
 function createImgVirtul(onPointerDown: () => void) {
-  const img = document.createElement('img')
-  img.src = iconAdd
-  img.width = 16
-  img.height = 16
-  img.style.cursor = 'pointer'
-  img.addEventListener('pointerdown', onPointerDown)
+  const img = document.createElement("img");
+  img.src = iconAdd;
+  img.width = 16;
+  img.height = 16;
+  img.style.cursor = "pointer";
+  img.addEventListener("pointerdown", onPointerDown);
   const marker = new minemap.Marker({
     draggable: false,
     element: img,
     offset: [-8, -8],
-  })
-  return marker
+  });
+  return marker;
 }
 
-
 function getPolygonOption(polygon: Polygon<unknown>) {
-  const [color, opacity] = dealColor(polygon.fill)
+  const [color, opacity] = dealColor(polygon.fill);
   return {
     id: polygon.name,
     source: polygon.name,
     type: "fill",
     layout: {
-      visibility: polygon.show ? "visible" : 'none',
+      visibility: polygon.show ? "visible" : "none",
     },
     paint: {
       "fill-color": color,
-      'fill-opacity': opacity
-    }
-  }
+      "fill-opacity": opacity,
+    },
+  };
 }
 
 function getPolylineOption(polygon: Polygon<unknown>) {
   return {
-    id: polygon.name + '_outline',
+    id: polygon.name + "_outline",
     source: polygon.name,
     type: "line",
     translation: [0, 0, 1000],
     "depth-test": false,
     layout: {
-      visibility: polygon.show ? "visible" : 'none',
-    },
-    paint: polygon.dash ? {
-      "line-dasharray": [10, 10],
-      "line-color": polygon.stroke,
-      "line-width": polygon.lineWidth
-    } : {
-      "line-color": polygon.stroke,
-      "line-width": polygon.lineWidth
+      visibility: polygon.show ? "visible" : "none",
     },
-  }
+    paint: polygon.dash
+      ? {
+          "line-dasharray": [10, 10],
+          "line-color": polygon.stroke,
+          "line-width": polygon.lineWidth,
+        }
+      : {
+          "line-color": polygon.stroke,
+          "line-width": polygon.lineWidth,
+        },
+  };
 }
 
-
 function main(map: MineMap, polygon: Polygon<unknown>) {
-  const { viewer } = map
+  const { viewer } = map;
   const data = {
     type: "FeatureCollection",
     features: [],
-  }
+  };
   viewer.addSource(polygon.name, {
     type: "geojson",
-    data
+    data,
   });
 
-  const cource = viewer.getSource(polygon.name)
+  const cource = viewer.getSource(polygon.name);
 
   viewer.addLayer(getPolylineOption(polygon));
   viewer.addLayer(getPolygonOption(polygon));
 
-  let status = 0
-  let skip = 0
-  const editor = new PolygonEditor<any, any>()
-  let activeNode: ChainNode<any, any>
-  editor.on('create-node', (n) => {
-    if (n.type == 'node') {
-      const maker = createImgNode(() => {
-        status = 4
-        activeNode = n
-        map.moveable = false
-      }, () => {
-        if (status == 4) {
-          status = 3
-          map.moveable = true
-          activeNode = undefined
-        }
-      }, () => {
-        n.destroy()
-        updateCoordinate(editor.getCoordinates())
-      })
-      maker.setLngLat(n.position).addTo(viewer)
+  let status = 0;
+  let skip = 0;
+  const editor = new PolygonEditor<any, any>();
+  let activeNode: ChainNode<any, any>;
+  editor.on("create-node", (n) => {
+    if (n.type == "node") {
+      const maker = createImgNode(
+        () => {
+          status = 4;
+          activeNode = n;
+          map.moveable = false;
+        },
+        () => {
+          if (status == 4) {
+            status = 3;
+            map.moveable = true;
+            activeNode = undefined;
+          }
+        },
+        () => {
+          n.destroy();
+          updateCoordinate(editor.getCoordinates());
+        },
+      );
+      maker.setLngLat(n.position).addTo(viewer);
 
-      n.shape = maker
+      n.shape = maker;
     } else {
       const maker = createImgVirtul(() => {
-        status = 4
-        activeNode = n.insert()
-        map.moveable = false
-      })
-      maker.setLngLat(n.position).addTo(viewer)
-      viewer.addMarker(maker)
-      n.shape = maker
+        status = 4;
+        activeNode = n.insert();
+        map.moveable = false;
+      });
+      maker.setLngLat(n.position).addTo(viewer);
+      viewer.addMarker(maker);
+      n.shape = maker;
     }
-  })
-
-  editor.on('update-node', (n) => {
-    n.shape.setLngLat(n.position)
-  })
-  editor.on('remove-node', (n) => {
-    viewer.removeMarker(n.shape)
-  })
-  editor.on('empty', () => {
+  });
+
+  editor.on("update-node", (n) => {
+    n.shape.setLngLat(n.position);
+  });
+  editor.on("remove-node", (n) => {
+    viewer.removeMarker(n.shape);
+  });
+  editor.on("empty", () => {
     // source.removeFeature(feature)
-    status = 0
-  })
+    status = 0;
+  });
 
   const updateCoordinate = (coordinates) => {
     if (coordinates) {
@@ -155,234 +153,226 @@ function main(map: MineMap, polygon: Polygon<unknown>) {
         properties: {
           id: polygon.name,
         },
-      }
+      };
     } else {
-      data.features = []
+      data.features = [];
     }
-    cource.setData(data)
-  }
-
-
-
-
+    cource.setData(data);
+  };
 
   if (polygon.coordinates) {
-    status = 2
-    updateCoordinate(polygon.coordinates)
+    status = 2;
+    updateCoordinate(polygon.coordinates);
   }
   const onUpdate = (e: Set<string>) => {
     if (skip) {
-      skip--
-      return
+      skip--;
+      return;
     }
 
-    const keys = new Set()
+    const keys = new Set();
 
-    e.forEach(key => {
+    e.forEach((key) => {
       switch (key) {
-        case 'show':
-          keys.add('polyline')
-          keys.add('polygon')
+        case "show":
+          keys.add("polyline");
+          keys.add("polygon");
           break;
-        case 'editable':
+        case "editable":
           break;
-        case 'coordinates':
-          updateCoordinate(polygon.coordinates)
+        case "coordinates":
+          updateCoordinate(polygon.coordinates);
           if (status == 3) {
-            editor.setCoordinates([])
+            editor.setCoordinates([]);
           }
           if (polygon.coordinates) {
-            status = 2
-
+            status = 2;
           } else {
-            status = 0
-
+            status = 0;
           }
 
           break;
-        case 'fill':
-          keys.add('polygon')
-          break
-        case 'lineWidth':
-          keys.add('polyline')
+        case "fill":
+          keys.add("polygon");
+          break;
+        case "lineWidth":
+          keys.add("polyline");
           break;
-        case 'stroke':
-          keys.add('polyline')
+        case "stroke":
+          keys.add("polyline");
           break;
-        case 'dash':
-          keys.add('polyline')
+        case "dash":
+          keys.add("polyline");
           break;
         default:
-          throw new Error(`${key} 还不支持修改`)
+          throw new Error(`${key} 还不支持修改`);
       }
-    })
+    });
 
-    keys.forEach(e => {
+    keys.forEach((e) => {
       switch (e) {
-        case 'polyline':
-          viewer.removeLayer(polygon.name + '_outline')
+        case "polyline":
+          viewer.removeLayer(polygon.name + "_outline");
           viewer.addLayer(getPolylineOption(polygon));
           break;
-        case 'polygon':
-          viewer.removeLayer(polygon.name)
+        case "polygon":
+          viewer.removeLayer(polygon.name);
           viewer.addLayer(getPolygonOption(polygon));
           break;
       }
-    })
-  }
+    });
+  };
 
   const onPointerIn = () => {
     if (status == 2) {
-      map.cursor = polygon.cursor
-      polygon.event.trigger('pointer-in')
+      map.cursor = polygon.cursor;
+      polygon.event.trigger("pointer-in");
     }
-
-  }
+  };
 
   const onPointerOut = () => {
     if (status == 2) {
-      map.cursor = 'default'
-      polygon.event.trigger('pointer-out')
+      map.cursor = "default";
+      polygon.event.trigger("pointer-out");
     }
-  }
+  };
 
-  let cache = []
+  let cache = [];
 
   const onClick = (e: any) => {
     switch (status) {
       case 0:
-        status = 1
-        cache = [[e.lngLat.lng, e.lngLat.lat], [e.lngLat.lng, e.lngLat.lat]]
+        status = 1;
+        cache = [
+          [e.lngLat.lng, e.lngLat.lat],
+          [e.lngLat.lng, e.lngLat.lat],
+        ];
         break;
       case 1:
-        cache.push(cache[cache.length - 1])
+        cache.push(cache[cache.length - 1]);
         break;
     }
-  }
+  };
 
   const onPointerMove = (e: any) => {
     switch (status) {
       case 1:
-        cache.pop()
-        cache.push([e.lngLat.lng, e.lngLat.lat])
-        updateCoordinate(cache)
+        cache.pop();
+        cache.push([e.lngLat.lng, e.lngLat.lat]);
+        updateCoordinate(cache);
         break;
       case 4:
-        activeNode.update([e.lngLat.lng, e.lngLat.lat])
-        updateCoordinate(editor.getCoordinates())
+        activeNode.update([e.lngLat.lng, e.lngLat.lat]);
+        updateCoordinate(editor.getCoordinates());
 
         break;
     }
-  }
+  };
 
   const onDbClick = () => {
     switch (status) {
       case 1:
-        status = 2
-        skip++
-        cache.pop()
-        cache.pop()
-        polygon.coordinates = cache
-        polygon.event.trigger('pointer-in')
+        status = 2;
+        skip++;
+        cache.pop();
+        cache.pop();
+        polygon.coordinates = cache;
+        polygon.event.trigger("pointer-in");
         break;
       case 3:
         if (!skip) {
-          polygon.event.trigger('stop-edit')
+          polygon.event.trigger("stop-edit");
         } else {
-          skip = 0
+          skip = 0;
         }
         break;
     }
-  }
+  };
 
   const onLineDbClick = () => {
-
     switch (status) {
       case 2:
-        polygon.event.trigger('start-edit')
+        polygon.event.trigger("start-edit");
         break;
     }
-  }
+  };
 
   const onLineClick = () => {
     switch (status) {
       case 2:
-        polygon.event.trigger('left-click')
+        polygon.event.trigger("left-click");
         break;
     }
-  }
+  };
   const onLineRClick = () => {
     if (polygon.menu) {
       map.menu.show(polygon.menu);
     }
     switch (status) {
       case 2:
-        polygon.event.trigger('right-click')
+        polygon.event.trigger("right-click");
         break;
     }
-  }
-
+  };
 
   const onStartEdit = () => {
     if (status == 2) {
-      status = 3
-      map.cursor = 'default'
-      editor.setCoordinates(polygon.coordinates)
-      skip = 1
+      status = 3;
+      map.cursor = "default";
+      editor.setCoordinates(polygon.coordinates);
+      skip = 1;
     }
-  }
+  };
 
   const onStopEdit = () => {
     if (status == 3) {
-      status = 2
-      skip++
-      polygon.coordinates = editor.getCoordinates()
-      editor.setCoordinates([])
+      status = 2;
+      skip++;
+      polygon.coordinates = editor.getCoordinates();
+      editor.setCoordinates([]);
     }
-  }
-
+  };
 
   const onDestroy = () => {
-    viewer.removeLayer(polygon.name)
-    viewer.removeSource(polygon.name)
-
-    viewer.off('mouseover', polygon.name, onPointerIn)
-    viewer.off('mouseout', polygon.name, onPointerOut)
-    viewer.off('dblclick', polygon.name, onLineDbClick)
-    viewer.off('click', polygon.name, onLineClick)
-    viewer.off('contextmenu', polygon.name, onLineRClick)
-    viewer.off('click', onClick)
-    viewer.off('mousemove', onPointerMove)
-    viewer.off('dblclick', onDbClick)
-    polygon.event.off('update', onUpdate)
-    polygon.event.off('destroy', onDestroy)
-    polygon.event.off('start-edit', onStartEdit)
-    polygon.event.off('stop-edit', onStopEdit)
-  }
-
-  viewer.on('mouseover', polygon.name, onPointerIn)
-  viewer.on('mouseout', polygon.name, onPointerOut)
-  viewer.on('dblclick', polygon.name, onLineDbClick)
-  viewer.on('click', polygon.name, onLineClick)
-  viewer.on('contextmenu', polygon.name, onLineRClick)
-  viewer.on('click', onClick)
-  viewer.on('mousemove', onPointerMove)
-  viewer.on('dblclick', onDbClick)
-
-  polygon.event.on('update', onUpdate)
-  polygon.event.on('destroy', onDestroy)
-  polygon.event.on('start-edit', onStartEdit)
-  polygon.event.on('stop-edit', onStopEdit)
+    viewer.removeLayer(polygon.name);
+    viewer.removeSource(polygon.name);
+
+    viewer.off("mouseover", polygon.name, onPointerIn);
+    viewer.off("mouseout", polygon.name, onPointerOut);
+    viewer.off("dblclick", polygon.name, onLineDbClick);
+    viewer.off("click", polygon.name, onLineClick);
+    viewer.off("contextmenu", polygon.name, onLineRClick);
+    viewer.off("click", onClick);
+    viewer.off("mousemove", onPointerMove);
+    viewer.off("dblclick", onDbClick);
+    polygon.event.off("update", onUpdate);
+    polygon.event.off("destroy", onDestroy);
+    polygon.event.off("start-edit", onStartEdit);
+    polygon.event.off("stop-edit", onStopEdit);
+  };
+
+  viewer.on("mouseover", polygon.name, onPointerIn);
+  viewer.on("mouseout", polygon.name, onPointerOut);
+  viewer.on("dblclick", polygon.name, onLineDbClick);
+  viewer.on("click", polygon.name, onLineClick);
+  viewer.on("contextmenu", polygon.name, onLineRClick);
+  viewer.on("click", onClick);
+  viewer.on("mousemove", onPointerMove);
+  viewer.on("dblclick", onDbClick);
+
+  polygon.event.on("update", onUpdate);
+  polygon.event.on("destroy", onDestroy);
+  polygon.event.on("start-edit", onStartEdit);
+  polygon.event.on("stop-edit", onStopEdit);
 }
 
-
 export function drawPolygon(map: MineMap, polygon: Polygon<unknown>) {
-  const { viewer } = map
+  const { viewer } = map;
   if (viewer.loaded()) {
-    main(map, polygon)
+    main(map, polygon);
   } else {
-    viewer.once('load', () => {
-      main(map, polygon)
-    })
+    viewer.once("load", () => {
+      main(map, polygon);
+    });
   }
-}
+}