easy-three-utils 0.0.395 → 0.0.396

package/cesium/components/react/Timeline/index.tsx

@@ -8,9 +8,22 @@ import Styles from './index.module.less'
 
 dayjs.extend(duration)
 
+interface IControlEvent {
+    rewind: string
+    pause: 'PAUSE'
+    play: 'PLAY'
+    stop: 'STOP'
+    fastForward: string
+}
+
 const Timeline: React.FC<{
-    getViewer: () => Cesium.Viewer,
+    getViewer: () => Cesium.Viewer
     style?: React.CSSProperties
+    enabledControl?: boolean
+    onControlEvent?<T extends keyof IControlEvent>(type: T, value: IControlEvent[T]): void
+    onSliderChange?: (time: string) => void
+    onSpeedChange?: (speed: number) => void
+
 }> = memo((props) => {
 
     const { getViewer } = props
@@ -51,7 +64,7 @@ const Timeline: React.FC<{
         getViewer().clock.onTick.removeEventListener(setClockEvent)
     }
 
-    const onSliderChange = (value: number) => {
+    const sliderChange = (value: number) => {
         setPercent(() => value)
         const totalSeconds = Cesium.JulianDate.secondsDifference(
             getViewer().clock.stopTime,
@@ -62,10 +75,13 @@ const Timeline: React.FC<{
             (value / 100) * totalSeconds,
             new Cesium.JulianDate()
         )
+
+        const nowDate = Cesium.JulianDate.toDate(newTime)
+        props.onSliderChange && props.onSliderChange(dayjs(nowDate).format('YYYY-MM-DD HH:mm:ss'))
+
         getViewer().clock.currentTime = newTime
     }
 
-    type TContronType = 'rewind' | 'pause' | 'play' | 'stop' | 'fastForward'
     const control = {
         rewind: () => {
             getViewer().clock.currentTime = Cesium.JulianDate.addSeconds(
@@ -73,16 +89,23 @@ const Timeline: React.FC<{
                 -30 * 60,
                 new Cesium.JulianDate()
             )
+
+            const nowDate = dayjs(Cesium.JulianDate.toDate(getViewer().clock.currentTime))
+            props.onControlEvent && props.onControlEvent('rewind', dayjs(nowDate).format('YYYY-MM-DD HH:mm:ss'))
         },
         play: () => {
             getViewer().clock.shouldAnimate = true
+            props.onControlEvent && props.onControlEvent('play', 'PLAY')
         },
         pause: () => {
             getViewer().clock.shouldAnimate = false
+            props.onControlEvent && props.onControlEvent('pause', 'PAUSE')
         },
         stop: () => {
             getViewer().clock.currentTime = getViewer().clock.startTime
             getViewer().clock.shouldAnimate = false
+            props.onControlEvent && props.onControlEvent('stop', 'STOP')
+
         },
         fastForward: () => {
             getViewer().clock.currentTime = Cesium.JulianDate.addSeconds(
@@ -90,6 +113,9 @@ const Timeline: React.FC<{
                 30 * 60,
                 new Cesium.JulianDate()
             )
+
+            const nowDate = dayjs(Cesium.JulianDate.toDate(getViewer().clock.currentTime))
+            props.onControlEvent && props.onControlEvent('fastForward', dayjs(nowDate).format('YYYY-MM-DD HH:mm:ss'))
         }
     }
 
@@ -117,27 +143,31 @@ const Timeline: React.FC<{
         }}>
             <div className={Styles['slider-box']} style={{ ...props.style }}>
                 <Slider
+                    disabled={props.enabledControl === false}
                     min={0}
                     max={100}
                     step={0.1}
                     value={percent}
-                    onChange={(value: number) => onSliderChange(value)}
+                    onChange={(value: number) => sliderChange(value)}
                 />
                 <div className={Styles['control']}>
                     {
-                        (['rewind', 'pause', 'play', 'stop', 'fastForward'] as TContronType[]).map(item =>
+                        props.enabledControl !== false && (['rewind', 'pause', 'play', 'stop', 'fastForward'] as (keyof IControlEvent)[]).map(item =>
                             <img key={item} onClick={() => control[item]()} src={import.meta.env.MODE === 'development' ? (window as any).__POLT__URL__ + `/assets/image/${item}_01.png` : `/assets/image/${item}_01.png`} />
                         )
                     }
                     <div className={Styles['control-box']}>
-                        <div className={Styles['control-input']}>
-                            <div style={{ minWidth: '45px' }}>倍速：</div>
-                            <Input value={speed} onInput={(e) => {
-                                setSpeed(Number((e.target as any).value))
-                                getViewer().clock.multiplier = Number((e.target as any).value)
-                            }}></Input>
-                            <div>X</div>
-                        </div>
+                        {
+                            props.enabledControl !== false && <div className={Styles['control-input']}>
+                                <div style={{ minWidth: '45px' }}>倍速：</div>
+                                <Input value={speed} onInput={(e) => {
+                                    setSpeed(Number((e.target as any).value))
+                                    getViewer().clock.multiplier = Number((e.target as any).value)
+                                    props.onSpeedChange && props.onSpeedChange(Number((e.target as any).value))
+                                }}></Input>
+                                <div>X</div>
+                            </div>
+                        }
                         <div className={Styles['time-text']}><span style={{ color: '#00f2fe' }}>{currentTime}</span><div style={{ padding: "0 4px" }}>/</div>{totalTime}</div>
                     </div>
                 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.395",
+  "version": "0.0.396",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -8,5 +8,5 @@
   "author": "",
   "license": "ISC",
   "types": "./index.d.ts",
-  "description": ""
+  "description": "修改时间轴，新增参数"
 }