med-viewer-sdk 0.1.13 → 0.1.14

package/dist/core/Toolbar.d.ts

@@ -1,4 +1,4 @@
-import type { MedViewerEngine } from "./Engine";
+import type { MedViewerEngine } from './Engine';
 export declare enum ToolbarPosition {
     TOP_LEFT = "TOP_LEFT",
     TOP_CENTER = "TOP_CENTER",

package/dist/med-viewer-sdk.mjs

@@ -13556,9 +13556,9 @@ const dicts = {
       line: "线段",
       freehand: "手绘",
       reset: "重置",
-      annoSettings: "标注设置",
+      annoSettings: "标注",
       colorAdjust: "颜色调整",
-      screenshot: "截图设置",
+      screenshot: "截图",
       brightness: "亮度",
       contrast: "对比度",
       saturation: "饱和度",
@@ -13596,9 +13596,9 @@ const dicts = {
       line: "Line",
       freehand: "Freehand",
       reset: "Reset",
-      annoSettings: "Annotation Settings",
+      annoSettings: "Annotation",
       colorAdjust: "Color Adjust",
-      screenshot: "Screenshot Settings",
+      screenshot: "Screenshot",
       brightness: "Brightness",
       contrast: "Contrast",
       saturation: "Saturation",
@@ -15426,14 +15426,7 @@ const createAnnoDropdownContent = (engine, hide) => {
   colorSection.innerHTML = `<div class="med-toolbar-section-title">${t("toolbar.annoColor")}</div>`;
   const colorGrid = document.createElement("div");
   colorGrid.className = "med-color-grid";
-  const colors = [
-    "#ff0000",
-    "#00ff00",
-    "#0000ff",
-    "#ffff00",
-    "#00ffff",
-    "#ffffff"
-  ];
+  const colors = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff", "#ffffff"];
   colors.forEach((c2) => {
     const dot = document.createElement("div");
     dot.className = "med-color-item";
@@ -15584,24 +15577,16 @@ const createColorAdjustDropdownContent = (engine, hide) => {
     )
   );
   container.appendChild(
-    createSlider(
-      t("toolbar.hue"),
-      "hue-slider",
-      0,
-      360,
-      1,
-      currentAdjustments.hue || 0,
-      (val) => {
-        var _a3;
-        (_a3 = engine.colorAdjust) == null ? void 0 : _a3.setAdjustments({
-          hue: val,
-          sepia: false,
-          greyscale: false
-        });
-        container.querySelector("#sepia-checkbox").checked = false;
-        container.querySelector("#greyscale-checkbox").checked = false;
-      }
-    )
+    createSlider(t("toolbar.hue"), "hue-slider", 0, 360, 1, currentAdjustments.hue || 0, (val) => {
+      var _a3;
+      (_a3 = engine.colorAdjust) == null ? void 0 : _a3.setAdjustments({
+        hue: val,
+        sepia: false,
+        greyscale: false
+      });
+      container.querySelector("#sepia-checkbox").checked = false;
+      container.querySelector("#greyscale-checkbox").checked = false;
+    })
   );
   container.appendChild(
     createSlider(
@@ -15758,9 +15743,7 @@ class MedToolbar {
     this.element.innerHTML = "";
     let buttonsToRender;
     if (this.options.buttons && this.options.buttons.length > 0) {
-      const defaultButtonMap = new Map(
-        DEFAULT_BUTTONS.map((btn) => [btn.id, btn])
-      );
+      const defaultButtonMap = new Map(DEFAULT_BUTTONS.map((btn) => [btn.id, btn]));
       buttonsToRender = this.options.buttons.map((userBtn) => {
         const defaultBtn = defaultButtonMap.get(userBtn.id);
         return defaultBtn ? { ...defaultBtn, ...userBtn } : userBtn;
@@ -15795,16 +15778,19 @@ class MedToolbar {
         }
       };
       wrapper.appendChild(btn);
+      if (btnConfig.label) {
+        const tooltip = document.createElement("div");
+        tooltip.className = "med-tooltip";
+        tooltip.textContent = btnConfig.label;
+        wrapper.appendChild(tooltip);
+      }
       this.element.appendChild(wrapper);
     });
   }
   showDropdown(parent, config) {
     this.dropdownElement = document.createElement("div");
     this.dropdownElement.className = "med-toolbar-dropdown";
-    const content = config.dropdownContent(
-      this.engine,
-      () => this.closeDropdown()
-    );
+    const content = config.dropdownContent(this.engine, () => this.closeDropdown());
     this.dropdownElement.appendChild(content);
     parent.appendChild(this.dropdownElement);
     this.adjustDropdownPosition();
@@ -15817,10 +15803,7 @@ class MedToolbar {
         this.closeDropdown();
       }
     };
-    setTimeout(
-      () => document.addEventListener("click", this.outsideClickHandler),
-      0
-    );
+    setTimeout(() => document.addEventListener("click", this.outsideClickHandler), 0);
   }
   adjustDropdownPosition() {
     if (!this.dropdownElement)
@@ -15970,6 +15953,71 @@ class MedToolbar {
       }
       .med-toolbar--MIDDLE_RIGHT .med-toolbar-dropdown.show { transform: translateX(0) !important; }
 
+      /* Tooltip styles */
+      .med-tooltip {
+        position: absolute;
+        padding: 6px 10px;
+        background: rgba(0, 0, 0, 0.75);
+        color: #fff;
+        border-radius: 6px;
+        font-size: 12px;
+        white-space: nowrap;
+        z-index: 102;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease, transform 0.2s ease;
+      }
+
+      .med-toolbar-item-wrapper:hover .med-tooltip {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      /* Tooltip directions based on toolbar position */
+
+      /* Default: bottom tooltip (for top toolbars) */
+      .med-toolbar-item-wrapper .med-tooltip {
+        top: calc(100% + 12px); /* Position below the button */
+        left: 50%;
+        transform: translateX(-50%) translateY(0px);
+      }
+      .med-toolbar-item-wrapper:hover .med-tooltip {
+        transform: translateX(-50%) translateY(0);
+      }
+
+
+      /* Top tooltip (for bottom toolbars) */
+      [class*="med-toolbar--BOTTOM"] .med-toolbar-item-wrapper .med-tooltip {
+        bottom: calc(100% + 12px); /* Position above the button */
+        top: auto;
+        left: 50%;
+        transform: translateX(-50%) translateY(0px);
+      }
+      [class*="med-toolbar--BOTTOM"] .med-toolbar-item-wrapper:hover .med-tooltip {
+        transform: translateX(-50%) translateY(0);
+      }
+
+      /* Right tooltip (for middle-left toolbars) */
+      [class*="med-toolbar--MIDDLE_LEFT"] .med-toolbar-item-wrapper .med-tooltip {
+        left: calc(100% + 12px); /* Position to the right of the button */
+        top: 50%;
+        transform: translateY(-50%) translateX(0px);
+      }
+      [class*="med-toolbar--MIDDLE_LEFT"] .med-toolbar-item-wrapper:hover .med-tooltip {
+        transform: translateY(-50%) translateX(0);
+      }
+
+      /* Left tooltip (for middle-right toolbars) */
+      [class*="med-toolbar--MIDDLE_RIGHT"] .med-toolbar-item-wrapper .med-tooltip {
+        right: calc(100% + 12px); /* Position to the left of the button */
+        top: 50%;
+        left: auto;
+        transform: translateY(-50%) translateX(0px);
+      }
+      [class*="med-toolbar--MIDDLE_RIGHT"] .med-toolbar-item-wrapper:hover .med-tooltip {
+        transform: translateY(-50%) translateX(0);
+      }
+
       /* 内容样式 */
       .med-toolbar-section-title { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 10px; letter-spacing: 1px; }
       .med-color-grid { display: flex; gap: 10px; margin-bottom: 20px; }