现版本

src/components/radial-toolbar/index.ts

@@ -97,6 +97,7 @@ export class RadialToolbar implements IBimComponent {
         this.mainButton.addEventListener('mouseenter', this.handlePointerEnter);
         this.mainButton.addEventListener('mouseleave', this.handlePointerLeave);
         this.mainButton.addEventListener('click', this.handleMainButtonClick);
+        this.mainButton.addEventListener('dblclick', this.handleMainButtonDoubleClick);
         document.addEventListener('click', this.handleDocumentClick);
         document.addEventListener('mousemove', this.handleDocumentMouseMove);
         document.addEventListener('mouseleave', this.handleDocumentMouseLeave);
@@ -148,15 +149,14 @@ export class RadialToolbar implements IBimComponent {
 
     private readonly handleMainButtonClick = (event: MouseEvent): void => {
         event.stopPropagation();
+    };
+
+    private readonly handleMainButtonDoubleClick = (event: MouseEvent): void => {
+        event.stopPropagation();
         if (this.onMainButtonClick) {
             this.onMainButtonClick();
             return;
         }
-        if (this.isActive) {
-            this.collapse();
-            return;
-        }
-        this.expand();
     };
 
     private readonly handleDocumentClick = (event: MouseEvent): void => {

src/components/section-dock-panel/index.css

@@ -66,6 +66,10 @@
     background: color-mix(in srgb, var(--bim-border-default, #cbd5e1) 84%, transparent 16%);
 }
 
+.section-dock-divider.is-hidden {
+    display: none;
+}
+
 .section-dock-type-btn,
 .section-dock-tool-btn {
     width: 32px;
@@ -139,4 +143,4 @@
 .section-dock-panel [data-tooltip]:focus-visible::after {
     opacity: 1;
     visibility: visible;
-}
+}

src/components/section-dock-panel/index.ts

@@ -8,7 +8,7 @@ export type SectionDockType = 'face' | 'axis' | 'box';
 export type SectionDockAxis = 'x' | 'y' | 'z';
 
 export interface SectionDockPanelOptions {
-    defaultType?: SectionDockType;
+    defaultType?: SectionDockType | null;
     defaultAxis?: SectionDockAxis;
     defaultHidden?: boolean;
     onTypeChange?: (type: SectionDockType, axis: SectionDockAxis) => void;
@@ -35,21 +35,23 @@ export class SectionDockPanel implements IBimComponent {
     private readonly axisButtons: Map<SectionDockAxis, HTMLButtonElement> = new Map();
     private readonly toolContainer: HTMLElement;
     private readonly axisPanel: HTMLElement;
+    private readonly divider: HTMLElement;
 
-    private activeType: SectionDockType;
+    private activeType: SectionDockType | null;
     private activeAxis: SectionDockAxis;
     private isHidden: boolean;
 
     constructor(options: SectionDockPanelOptions = {}) {
         this.options = options;
-        this.activeType = options.defaultType ?? 'face';
+        this.activeType = options.defaultType ?? null;
         this.activeAxis = options.defaultAxis ?? 'x';
         this.isHidden = options.defaultHidden ?? false;
 
-        const { root, toolContainer, axisPanel } = this.createDom();
+        const { root, toolContainer, axisPanel, divider } = this.createDom();
         this.element = root;
         this.toolContainer = toolContainer;
         this.axisPanel = axisPanel;
+        this.divider = divider;
     }
 
     public init(): void {
@@ -96,15 +98,13 @@ export class SectionDockPanel implements IBimComponent {
     }
 
     public resetForOpen(): void {
-        this.activeType = 'face';
+        this.activeType = null;
         this.isHidden = false;
         this.applyTypeState();
         this.renderTools();
-        this.options.onTypeChange?.(this.activeType, this.activeAxis);
-        this.options.onHideToggle?.(false);
     }
 
-    public getActiveType(): SectionDockType {
+    public getActiveType(): SectionDockType | null {
         return this.activeType;
     }
 
@@ -112,7 +112,7 @@ export class SectionDockPanel implements IBimComponent {
         return this.activeAxis;
     }
 
-    private createDom(): { root: HTMLElement; toolContainer: HTMLElement; axisPanel: HTMLElement } {
+    private createDom(): { root: HTMLElement; toolContainer: HTMLElement; axisPanel: HTMLElement; divider: HTMLElement } {
         const root = document.createElement('div');
         root.className = 'section-dock-panel';
 
@@ -158,7 +158,7 @@ export class SectionDockPanel implements IBimComponent {
         root.appendChild(axisPanel);
         root.appendChild(main);
 
-        return { root, toolContainer, axisPanel };
+        return { root, toolContainer, axisPanel, divider };
     }
 
     private createTypeButton(type: SectionDockType, iconSvg: string): HTMLButtonElement {
@@ -227,6 +227,13 @@ export class SectionDockPanel implements IBimComponent {
     private renderTools(): void {
         this.toolContainer.innerHTML = '';
 
+        if (!this.activeType) {
+            this.divider.classList.add('is-hidden');
+            return;
+        }
+
+        this.divider.classList.remove('is-hidden');
+
         this.getToolsForType(this.activeType).forEach((tool) => {
             const button = document.createElement('button');
             button.type = 'button';
@@ -281,7 +288,7 @@ export class SectionDockPanel implements IBimComponent {
                     textKey: 'sectionAxis.actions.reset',
                     onClick: () => {
                         this.isHidden = false;
-                        this.options.onReset?.(this.activeType, this.activeAxis);
+                        this.options.onReset?.(type, this.activeAxis);
                         this.renderTools();
                     }
                 }
@@ -305,7 +312,7 @@ export class SectionDockPanel implements IBimComponent {
                     textKey: 'sectionBox.actions.reset',
                     onClick: () => {
                         this.isHidden = false;
-                        this.options.onReset?.(this.activeType, this.activeAxis);
+                        this.options.onReset?.(type, this.activeAxis);
                         this.renderTools();
                     }
                 }
@@ -321,7 +328,7 @@ export class SectionDockPanel implements IBimComponent {
                 textKey: 'sectionPlane.actions.reset',
                 onClick: () => {
                     this.isHidden = false;
-                    this.options.onReset?.(this.activeType, this.activeAxis);
+                    this.options.onReset?.(type, this.activeAxis);
                     this.renderTools();
                 }
             }