huweili-cesium 1.2.41 → 1.2.43

package/js/basis.js

@@ -721,6 +721,109 @@ export function basicConfig() {
     }
   }
 
+  /**
+   * 创建工具栏展开/折叠和拖拽控制器
+   * - 单击展开按钮：初始化拖拽能力，不触发展开/折叠
+   * - 双击展开按钮：展开/折叠同级工具栏按钮
+   * - 拖拽展开按钮：移动整个工具栏按钮组
+   */
+  const createToolbarExpandController = () => {
+    let isToolbarExpanded = true
+    let isToolbarDragging = false
+
+    const applyToggleExpand = (btn) => {
+      const toolbar = btn?.parentElement
+      if (!toolbar) return
+
+      isToolbarExpanded = !isToolbarExpanded
+
+      Array.from(toolbar.children).forEach((item) => {
+        if (item === btn) return
+        item.style.display = isToolbarExpanded ? '' : 'none'
+      })
+
+      btn.title = isToolbarExpanded ? '收缩' : '展开'
+      btn.setAttribute('aria-expanded', String(isToolbarExpanded))
+      btn.classList.toggle('is-collapsed', !isToolbarExpanded)
+    }
+
+    const setupToolbarDrag = (btn) => {
+      if (!btn || btn.dataset.toolbarDragReady === 'true') return
+
+      btn.dataset.toolbarDragReady = 'true'
+      btn.style.cursor = 'move'
+
+      btn.addEventListener('dblclick', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        if (isToolbarDragging) return
+        applyToggleExpand(btn)
+      })
+
+      btn.addEventListener('pointerdown', (event) => {
+        const toolbar = btn.parentElement
+        if (!toolbar) return
+
+        const startX = event.clientX
+        const startY = event.clientY
+        const rect = toolbar.getBoundingClientRect()
+        const startLeft = rect.left
+        const startTop = rect.top
+        let hasMoved = false
+
+        toolbar.style.position = 'fixed'
+        toolbar.style.left = `${startLeft}px`
+        toolbar.style.top = `${startTop}px`
+        toolbar.style.right = 'auto'
+        toolbar.style.bottom = 'auto'
+        toolbar.style.zIndex = toolbar.style.zIndex || '9999'
+        toolbar.style.margin = '0'
+
+        const moveToolbar = (moveEvent) => {
+          const deltaX = moveEvent.clientX - startX
+          const deltaY = moveEvent.clientY - startY
+
+          if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {
+            hasMoved = true
+            isToolbarDragging = true
+          }
+
+          const maxLeft = window.innerWidth - toolbar.offsetWidth
+          const maxTop = window.innerHeight - toolbar.offsetHeight
+          const nextLeft = Math.min(Math.max(startLeft + deltaX, 0), Math.max(maxLeft, 0))
+          const nextTop = Math.min(Math.max(startTop + deltaY, 0), Math.max(maxTop, 0))
+
+          toolbar.style.left = `${nextLeft}px`
+          toolbar.style.top = `${nextTop}px`
+        }
+
+        const stopDrag = () => {
+          window.removeEventListener('pointermove', moveToolbar)
+          window.removeEventListener('pointerup', stopDrag)
+          window.removeEventListener('pointercancel', stopDrag)
+
+          if (hasMoved) {
+            window.setTimeout(() => {
+              isToolbarDragging = false
+            }, 0)
+          }
+        }
+
+        window.addEventListener('pointermove', moveToolbar)
+        window.addEventListener('pointerup', stopDrag)
+        window.addEventListener('pointercancel', stopDrag)
+      })
+    }
+
+    return {
+      toggleExpand: (_viewer, btn) => {
+        setupToolbarDrag(btn)
+      },
+      setupToolbarDrag,
+      applyToggleExpand,
+    }
+  }
+
   /**
    * 以当前视口中心点为锚点，在 2D 俯视 / 3D 斜视之间切换（不依赖 RTK）
    * @param {string=} mapId 地图实例ID
@@ -781,8 +884,9 @@ export function basicConfig() {
     applyOrthographicFrustum,
     restorePerspectiveFrustum,
     setInitialCameraView,
+    createToolbarExpandController,
     syncCameraInteractionMode: (map, mapId, sceneMode) =>
-      syncCameraInteractionMode(map, mapId, sceneMode, orthoViewHelpers()),
+    syncCameraInteractionMode(map, mapId, sceneMode, orthoViewHelpers()),
   }
 }
 

package/js/customToolbarButtons.js

@@ -86,7 +86,7 @@ export function createCustomToolbarButtons() {
     const isRow = direction !== 'column'
     toolbar.style.display = 'flex'
     toolbar.style.flexDirection = isRow ? 'row' : 'column'
-    toolbar.style.alignItems = 'center'
+    toolbar.style.alignItems = 'flex-start'
     toolbar.style.gap = '4px'
     toolbar.style.width = isRow ? 'fit-content' : 'auto'
     toolbar.style.minWidth = 'unset'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huweili-cesium",
-  "version": "1.2.41",
+  "version": "1.2.43",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",