From 133e470252e42effbbd5a19b561255ab8748dbcc Mon Sep 17 00:00:00 2001
From: ethan <zhufeng_solo@163.com>
Date: Tue, 22 Aug 2023 15:21:28 +0800
Subject: [PATCH] add FreehandLine

---
 examples/index.ts         |  9 ++++---
 index.html                |  1 +
 src/draw.ts               | 10 +++++---
 src/index.ts              |  2 ++
 src/line/freehand-line.ts | 50 +++++++++++++++++++++++++++++++++++++++
 5 files changed, 66 insertions(+), 6 deletions(-)
 create mode 100644 src/line/freehand-line.ts

diff --git a/examples/index.ts b/examples/index.ts
index 75fd091..611b111 100644
--- a/examples/index.ts
+++ b/examples/index.ts
@@ -63,9 +63,12 @@ buttonGroup.onclick = (evt) => {
     case 'drawCurvedArrow':
       new CesiumPlot.CurvedArrow(Cesium, viewer, {});
       break;
-      case 'drawDoubleArrow':
-        new CesiumPlot.DoubleArrow(Cesium, viewer, {});
-        break;
+    case 'drawDoubleArrow':
+      new CesiumPlot.DoubleArrow(Cesium, viewer, {});
+      break;
+    case 'drawFreehandLine':
+      new CesiumPlot.FreehandLine(Cesium, viewer, {});
+      break;
 
     default:
       break;
diff --git a/index.html b/index.html
index 3e3c36e..5aceb3d 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,7 @@
       <button id="drawSwallowtailSquadCombat" class="button">分队战斗方向(燕尾)</button>
       <button id="drawAssaultDirection" class="button">突击方向</button>
       <button id="drawDoubleArrow" class="button">双箭头</button>
+      <button id="drawFreehandLine" class="button">自由线</button>
     </div>
     <script>
       window.CESIUM_BASE_URL = './examples/cesium';
diff --git a/src/draw.ts b/src/draw.ts
index b70ce08..29beb23 100644
--- a/src/draw.ts
+++ b/src/draw.ts
@@ -12,6 +12,7 @@ export default class Draw {
   controlPointsEventHandler: CesiumTypeOnly.ScreenSpaceEventHandler;
   lineEntity: CesiumTypeOnly.Entity;
   type!: 'polygon' | 'line';
+  freehand!: boolean;
 
   constructor(cesium: typeof CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer) {
     this.cesium = cesium;
@@ -54,9 +55,12 @@ export default class Draw {
         // In the drawing state, the points clicked are key nodes of the shape, and they are saved in this.points.
         const cartesian = this.pixelToCartesian(evt.position);
         const points = this.getPoints();
-        // If clicked outside the sphere or if the distance between the current click position and
-        // the previous click position is less than 10 meters, it is considered an invalid point.
-        if (!cartesian || (points.length > 0 && !this.checkDistance(cartesian, points[points.length - 1]))) {
+        // If the click is outside the sphere, position information cannot be obtained.
+        if (!cartesian) {
+          return;
+        }
+        // "For non-freehand drawn shapes, validate that the distance between two consecutive clicks is greater than 10 meters
+        if (!this.freehand && points.length > 0 && !this.checkDistance(cartesian, points[points.length - 1])) {
           return;
         }
         this.addPoint(cartesian);
diff --git a/src/index.ts b/src/index.ts
index af5c8cf..509d18c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,6 +7,7 @@ import StraightArrow from './arrow/straight-arrow';
 import CurvedArrow from './arrow/curved-arrow';
 import AssaultDirection from './arrow/assault-direction';
 import DoubleArrow from './arrow/double-arrow';
+import FreehandLine from './line/freehand-line';
 
 const CesiumPlot = {
   FineArrow,
@@ -18,6 +19,7 @@ const CesiumPlot = {
   CurvedArrow,
   AssaultDirection,
   DoubleArrow,
+  FreehandLine,
 };
 
 export default CesiumPlot;
diff --git a/src/line/freehand-line.ts b/src/line/freehand-line.ts
new file mode 100644
index 0000000..44d6e97
--- /dev/null
+++ b/src/line/freehand-line.ts
@@ -0,0 +1,50 @@
+import Draw from '../draw';
+import { Cartesian3 } from '@examples/cesium';
+
+export default class FreehandLine extends Draw {
+  points: Cartesian3[] = [];
+  type: 'polygon' | 'line';
+  freehand: boolean;
+
+  constructor(cesium: any, viewer: any, style: any) {
+    super(cesium, viewer);
+    this.cesium = cesium;
+    this.type = 'line';
+    this.freehand = true;
+    this.setState('drawing');
+  }
+
+  /**
+   * Add points only on click events
+   */
+  addPoint(cartesian: Cartesian3) {
+    this.points.push(cartesian);
+    if (this.points.length < 2) {
+      this.onMouseMove();
+    } else {
+      this.finishDrawing();
+    }
+  }
+
+  /**
+   * Draw a shape based on mouse movement points during the initial drawing.
+   */
+  updateMovingPoint(cartesian: Cartesian3) {
+    this.points.push(cartesian);
+    this.setGeometryPoints(this.points);
+    this.drawLine();
+  }
+
+  /**
+   * In edit mode, drag key points to update corresponding key point data.
+   */
+  updateDraggingPoint(cartesian: Cartesian3, index: number) {
+    this.points[index] = cartesian;
+    this.setGeometryPoints(this.points);
+    this.drawLine();
+  }
+
+  getPoints() {
+    return this.points;
+  }
+}