add 'hidden' state

examples/index.html

@@ -66,8 +66,12 @@
     <button id="drawCurve">曲线</button>
     <button id="drawEllipse">椭圆</button>
     <button id="drawLune">半月面</button>
+    <button id="hide">隐藏</button>
+    <button id="show">显示</button>
+    <button id="startGrowthAnimation">生长动画</button>
   </div>
   <script src="https://unpkg.com/cesium-plot-js"></script>
+  <!-- <script src="../dist/CesiumPlot.umd.js"></script> -->
   <script type="text/javascript" src="./index.js"></script>
 </body>
 

examples/index.js

@@ -147,10 +147,16 @@ window.onload = () => {
         });
         break;
       case 'hide':
-        geometry && geometry.hide();
+        geometry &&
+          geometry.hide({
+            deration: 2000,
+          });
         break;
       case 'show':
-        geometry && geometry.show();
+        geometry &&
+          geometry.show({
+            deration: 2000,
+          });
         break;
       case 'remove':
         geometry && geometry.remove();
@@ -174,6 +180,13 @@ window.onload = () => {
           geometry.off('editEnd', editEndHandler);
         }
         break;
+      case 'startGrowthAnimation':
+        if (geometry) {
+          geometry.startGrowthAnimation({
+            duration: 2000,
+          });
+        }
+        break;
       default:
         break;
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cesium-plot-js",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "dist/CesiumPlot.umd.js",
   "homepage": "https://github.com/ethan-zf/cesium-plot-js",
   "repository": {

src/base.ts

@@ -33,7 +33,6 @@ export default class Base {
   dragEventHandler: CesiumTypeOnly.ScreenSpaceEventHandler;
   entityId: string = '';
   points: CesiumTypeOnly.Cartesian3[] = [];
-  isHidden: boolean = false;
   styleCache: GeometryStyle | undefined;
   minPointsForShape: number = 0;
 
@@ -492,11 +491,11 @@ export default class Base {
   }
 
   showWithAnimation(duration: number = 2000, delay: number = 0, callback?: () => void) {
-    if (this.state != 'static' || this.isHidden === false) {
+    if (this.state !== 'hidden') {
       //If not in a static state or already displayed, do not process.
       return;
     }
-    this.isHidden = false;
+    this.setState('static');
     if (this.type === 'polygon') {
       let alpha = 0.3;
       const material = this.styleCache.material;
@@ -532,9 +531,10 @@ export default class Base {
   }
 
   hideWithAnimation(duration: number = 2000, delay: number = 0, callback?: () => void) {
-    if (this.state != 'static' || this.isHidden === true) {
+    if (this.state === 'hidden' || this.state != 'static') {
       return;
     }
+    this.setState('hidden');
     if (this.type === 'polygon') {
       this.animateOpacity(this.polygonEntity, 0.0, duration, delay, callback, this.state);
       this.animateOpacity(this.outlineEntity, 0.0, duration, delay, undefined, this.state);
@@ -610,12 +610,12 @@ export default class Base {
           callback && callback();
           const restoredState = state ? state : 'static';
 
-          if (targetAlpha === 0) {
-            this.isHidden = true;
-          }
+          // if (targetAlpha === 0) {
+          //   this.setState('hidden');
+          // }
 
           // if (duration == 0) {
-          this.setState('drawing');
+          // this.setState('drawing');
           if (material) {
             if (material.image && material.color.alpha !== undefined) {
               // Texture Material
@@ -646,7 +646,7 @@ export default class Base {
 
   startGrowthAnimation(opts: GrowthAnimationOpts) {
     const { duration = 2000, delay = 0, callback } = opts || {};
-    if (this.state !== 'static') {
+    if (this.state === 'hidden' || this.state != 'static') {
       return;
     }
     if (!this.minPointsForShape) {

src/interface.ts

@@ -12,7 +12,7 @@ export type LineStyle = {
   lineWidth?: number;
 };
 
-export type State = 'drawing' | 'edit' | 'static' | 'animating';
+export type State = 'drawing' | 'edit' | 'static' | 'animating' | 'hidden';
 export type GeometryStyle = PolygonStyle | LineStyle;
 
 export type EventType = 'drawStart' | 'drawUpdate' | 'drawEnd' | 'editEnd' | 'editStart';