kd-lane-chart-v3 0.1.2 → 0.1.3

package/dist/esm/index.js

@@ -262,7 +262,7 @@ const _sfc_main$d = {
       })
     },
     parentElement: {
-      type: Object,
+      type: HTMLElement,
       default: null
     }
   },
@@ -371,7 +371,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const VueSimpleContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__scopeId", "data-v-b1e7434d"]]);
+const VueSimpleContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d], ["__scopeId", "data-v-5e769d89"]]);
 class CustomStrategy {
   constructor(strategy) {
     this.strategy = strategy;
@@ -2430,7 +2430,6 @@ const _sfc_main$9 = {
       } else {
         const treeData = [];
         this.inputTempates.forEach((template) => {
-          console.log(template, "template");
           const tData = { ...template, id: template.templateId, label: template.templateName };
           tData.children = [];
           if (!template.lanes) {
@@ -2602,7 +2601,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     [_directive_loading, $data.curveConfigLoading]
   ]);
 }
-const RealTimeCurveConfig = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__scopeId", "data-v-41fc6892"]]);
+const RealTimeCurveConfig = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__scopeId", "data-v-3338a667"]]);
 const ACTION_TYPE = {
   UPSERT_LINE: "upsertLine",
   DELETE_LINE: "delLine"
@@ -2969,7 +2968,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 4);
 }
-const LegendItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__scopeId", "data-v-efba8aa1"]]);
+const LegendItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__scopeId", "data-v-6190e06c"]]);
 const _sfc_main$6 = {
   name: "KdLaneContainer",
   provide() {
@@ -3239,7 +3238,9 @@ const _sfc_main$6 = {
         const headerEl = document.getElementById(`lane-header-${lane.laneId}`);
         if (headerEl) {
           const id = String(lane.laneId);
-          const newWidth = headerEl.clientWidth;
+          const flexWidth = headerEl.clientWidth;
+          const minWidth = lane.minWidth || 40;
+          const newWidth = Math.max(minWidth, flexWidth);
           const oldWidth = this.laneWidthOverrides[id];
           if (oldWidth !== newWidth) {
             this.setLaneWidthOverride(lane.laneId, newWidth);
@@ -3270,7 +3271,7 @@ const _sfc_main$6 = {
         (l) => l.laneId === this.currentLane.laneId
       );
       if (laneIndex === -1) return;
-      const minWidth = 40;
+      const minWidth = lanes[laneIndex].minWidth || 40;
       const getWidth = (lane) => this.getEffectiveLaneWidthPx(lane);
       const currentLane = lanes[laneIndex];
       let currentWidth = getWidth(currentLane);
@@ -3344,6 +3345,9 @@ const _sfc_main$6 = {
     },
     onLaneDragStart() {
       this.isLaneDragging = true;
+      this._laneOrderBeforeDrag = (this.currentTemplate.lanes || []).map(
+        (l) => l.laneId
+      );
     },
     onLineDragEnd() {
       this.syncLinesLaneIdsFromCurrent();
@@ -3357,15 +3361,22 @@ const _sfc_main$6 = {
     },
     onLaneDragEnd() {
       const lanes = this.currentTemplate.lanes || [];
+      const currentOrder = lanes.map((l) => l.laneId);
+      const hasChanged = !this._laneOrderBeforeDrag || this._laneOrderBeforeDrag.length !== currentOrder.length || this._laneOrderBeforeDrag.some((id, i) => id !== currentOrder[i]);
       lanes.forEach((lane, index2) => {
         lane.sort = index2;
       });
       sortLanes(lanes);
-      this.notifyTemplateChangeImmediately();
-      Promise.all(lanes.map((lane) => this.dragUpdateLane(lane))).then(() => {
-        this.setDefaultAndNotify();
+      if (hasChanged) {
+        this.notifyTemplateChangeImmediately();
+        Promise.all(lanes.map((lane) => this.dragUpdateLane(lane))).then(() => {
+          this.setDefaultAndNotify();
+          this.isLaneDragging = false;
+        });
+      } else {
         this.isLaneDragging = false;
-      });
+      }
+      this._laneOrderBeforeDrag = null;
     },
     // 拖拽更新曲线
     dragUpdateLine(data) {
@@ -4046,6 +4057,12 @@ const _sfc_main$6 = {
         }
       }
     },
+    laneDragFilter() {
+      if (this.isGeomechanical) {
+        return ".no-drag, .kd-lane-chart-lane-container-echart, .kd-lane-chart-container-draw-area";
+      }
+      return ".no-drag";
+    },
     darwAreaStyle() {
       const headerStyle = this.headerStyle;
       const heightNum = pxToNumber(headerStyle.height);
@@ -4076,7 +4093,7 @@ const _hoisted_6$2 = ["onMousedown"];
 const _hoisted_7$2 = ["id", "lane-id"];
 const _hoisted_8$1 = ["onMousedown"];
 const _hoisted_9$1 = {
-  key: 1,
+  key: 0,
   class: "kd-lane-chart-lane-container-echart"
 };
 const _hoisted_10$1 = ["onContextmenu"];
@@ -4140,11 +4157,10 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
             $props.isKdCurveV2 ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
               renderSlot(_ctx.$slots, `slotheader-content-${lane.laneId}`, { lane }, void 0, true)
             ])) : createCommentVNode("", true),
-            index2 < $options.fixedLanes.length - 1 || $options.scrollableLanes.length > 0 ? (openBlock(), createElementBlock("div", {
-              key: 1,
+            createElementVNode("div", {
               class: "kd-lane-resize-handle kd-lane-resize-handle-right",
               onMousedown: ($event) => $options.startResize($event, lane, "right")
-            }, null, 40, _hoisted_3$4)) : createCommentVNode("", true)
+            }, null, 40, _hoisted_3$4)
           ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createElementVNode("div", {
               class: normalizeClass(["kd-lane-chart-lane-header", {
@@ -4200,11 +4216,10 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
             $props.isKdCurveV2 ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
               renderSlot(_ctx.$slots, `content-${lane.laneId}`, { lane }, void 0, true)
             ])) : createCommentVNode("", true),
-            index2 < $options.fixedLanes.length - 1 || $options.scrollableLanes.length > 0 ? (openBlock(), createElementBlock("div", {
-              key: 1,
+            createElementVNode("div", {
               class: "kd-lane-resize-handle kd-lane-resize-handle-right",
               onMousedown: ($event) => $options.startResize($event, lane, "right")
-            }, null, 40, _hoisted_6$2)) : createCommentVNode("", true)
+            }, null, 40, _hoisted_6$2)
           ], 64))
         ], 14, _hoisted_1$6);
       }), 128)),
@@ -4219,7 +4234,8 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         swapThreshold: 0.65,
         group: { name: "laneGroup", pull: false, put: false },
         "item-key": "laneId",
-        filter: ".no-drag"
+        filter: $options.laneDragFilter,
+        axis: "x"
       }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.scrollableLanes || [], (lane, index2) => {
@@ -4252,11 +4268,10 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
                 }, [
                   renderSlot(_ctx.$slots, `lane${lane.laneId}`, { lane }, void 0, true)
                 ], 4),
-                index2 < $options.scrollableLanes.length - 1 ? (openBlock(), createElementBlock("div", {
-                  key: 0,
+                createElementVNode("div", {
                   class: "kd-lane-resize-handle kd-lane-resize-handle-right",
                   onMousedown: ($event) => $options.startResize($event, lane, "right")
-                }, null, 40, _hoisted_8$1)) : createCommentVNode("", true),
+                }, null, 40, _hoisted_8$1),
                 $props.isKdCurveV2 ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
                   renderSlot(_ctx.$slots, `slotheader-content-${lane.laneId}`, { lane }, void 0, true)
                 ])) : createCommentVNode("", true)
@@ -4315,17 +4330,16 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
                 $props.isKdCurveV2 ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
                   renderSlot(_ctx.$slots, `content-${lane.laneId}`, { lane }, void 0, true)
                 ])) : createCommentVNode("", true),
-                index2 < $options.scrollableLanes.length - 1 ? (openBlock(), createElementBlock("div", {
-                  key: 1,
+                createElementVNode("div", {
                   class: "kd-lane-resize-handle kd-lane-resize-handle-right",
                   onMousedown: ($event) => $options.startResize($event, lane, "right")
-                }, null, 40, _hoisted_12$1)) : createCommentVNode("", true)
+                }, null, 40, _hoisted_12$1)
               ], 64))
             ], 14, _hoisted_7$2);
           }), 128))
         ]),
         _: 3
-      }, 8, ["onStart", "onEnd", "modelValue"])
+      }, 8, ["onStart", "onEnd", "modelValue", "filter"])
     ], 64)) : (openBlock(), createElementBlock("div", _hoisted_13$1, [
       createElementVNode("div", {
         class: normalizeClass(["kd-lane-chart-lane-header", { "kd-lane-chart-lane-header-isKdCurveV2": $props.isKdCurveV2 }]),
@@ -4407,7 +4421,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["modelValue", "onClose"])
   ], 544);
 }
-const KdLaneContainerComponent = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-58d1cc31"]]);
+const KdLaneContainerComponent = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-dcac42f7"]]);
 const SLIDER_GROUP_ID = "depthSliderGroup";
 function pad2(n) {
   return n < 10 ? "0" + n : "" + n;
@@ -6968,6 +6982,41 @@ const _sfc_main$3 = {
     }
   },
   methods: {
+    // 保存 dataZoom 状态，用于 setOption 后恢复
+    _saveDataZoomState() {
+      if (!this.chart || this.chart.isDisposed()) return null;
+      try {
+        const option = this.chart.getOption();
+        if (option && option.dataZoom && option.dataZoom.length > 0) {
+          return option.dataZoom.map((dz) => ({
+            start: dz.start,
+            end: dz.end,
+            startValue: dz.startValue,
+            endValue: dz.endValue
+          }));
+        }
+      } catch (e) {
+      }
+      return null;
+    },
+    _restoreDataZoomState(savedState) {
+      if (!savedState || !this.chart || this.chart.isDisposed()) return;
+      try {
+        const currentOption = this.chart.getOption();
+        if (!currentOption.dataZoom || currentOption.dataZoom.length === 0) return;
+        savedState.forEach((state, i) => {
+          if (i < currentOption.dataZoom.length) {
+            const dz = currentOption.dataZoom[i];
+            if (state.start !== void 0) dz.start = state.start;
+            if (state.end !== void 0) dz.end = state.end;
+            if (state.startValue !== void 0) dz.startValue = state.startValue;
+            if (state.endValue !== void 0) dz.endValue = state.endValue;
+          }
+        });
+        this.chart.setOption({ dataZoom: currentOption.dataZoom });
+      } catch (e) {
+      }
+    },
     // provide an explicit merge option method
     mergeOptions(options, notMerge, lazyUpdate, skipClone) {
       if (this.manualUpdate) {
@@ -6977,7 +7026,11 @@ const _sfc_main$3 = {
         this.init(options);
       } else {
         this._skipWatcher = true;
+        const savedDataZoom = this._saveDataZoomState();
         this.delegateMethod("setOption", this.getOptionsWithTheme(options, skipClone), notMerge, lazyUpdate);
+        if (savedDataZoom) {
+          this._restoreDataZoomState(savedDataZoom);
+        }
         this.$nextTick(() => {
           this._skipWatcher = false;
         });
@@ -7129,7 +7182,11 @@ const _sfc_main$3 = {
             if (!this.chart) {
               this.init(val);
             } else {
+              const savedDataZoom = this._saveDataZoomState();
               this.chart.setOption(this.getOptionsWithTheme(val), val !== oldVal);
+              if (savedDataZoom) {
+                this._restoreDataZoomState(savedDataZoom);
+              }
               if (this.group) {
                 this.chart.group = this.group;
               }
@@ -7213,7 +7270,7 @@ const _hoisted_1$3 = { class: "echarts" };
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$3);
 }
-const resizeEcharts = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-d8f35894"]]);
+const resizeEcharts = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-137d625e"]]);
 const _sfc_main$2 = {
   name: "LineChartContainer",
   components: {
@@ -7743,11 +7800,13 @@ const _sfc_main$2 = {
         if (scaleValues.length === 0) return;
         const minScale = Math.min(...scaleValues);
         const maxScale = Math.max(...scaleValues);
+        const safeCm = this.pxToCm();
+        const safeDepthInterval = this.depthInterval || 1;
         this.minWindowSize = Math.round(
-          this.pxToCm() * (+minScale / this.depthInterval)
+          safeCm * (+minScale / safeDepthInterval)
         );
         this.maxWindowSize = Math.round(
-          this.pxToCm() * (+maxScale / this.depthInterval)
+          safeCm * (+maxScale / safeDepthInterval)
         );
         this.updateSettings({
           key: "scale",
@@ -7800,11 +7859,12 @@ const _sfc_main$2 = {
     // 将当前页面px转换为cm
     pxToCm() {
       const container = this.$refs.targetDom;
+      if (!container) return 4;
       const rect = container.getBoundingClientRect();
       const headerHeight = this.$refs.chartContainer && this.$refs.chartContainer.getLaneHeightPx() || 0;
       const px = rect.height - headerHeight;
       const cm = px / 25;
-      return cm;
+      return cm > 0 ? cm : 4;
     },
     // 获取当前可见数据的x轴范围
     getXAxisRangeByHeader(lineInfo, validData = []) {
@@ -7981,6 +8041,7 @@ const _sfc_main$2 = {
     },
     // 处理鼠标滚轮事件
     handleWheel(e) {
+      if (this.isGeomechanical) return;
       e.preventDefault();
       const dataLength = this.realTimeData && this.realTimeData.length || 0;
       this.wheelDelta = Math.sign(e.deltaY);
@@ -8132,14 +8193,20 @@ const _sfc_main$2 = {
     // 处理工具栏设置变更
     async updateSettings(settings) {
       if (settings.key === "displayType") {
+        cancelAnimationFrame(this.animationId);
         this.toggleTooltip(settings.value == "float");
       }
       if (settings.key === "scale") {
+        cancelAnimationFrame(this.animationId);
+        this.targetStartIndex = this.startIndex;
         this.scaleToDataSize(settings.value);
+        this.targetWindowSize = this.windowSize;
+        this.targetStartIndex = this.startIndex;
         await this.$nextTick();
         this.updateLanesChartOption();
       }
       if (settings.key === "depthRange" || settings.key === "timeRange") {
+        cancelAnimationFrame(this.animationId);
         if (this.realTimeData.length > 0) {
           const axisType = this.formCache.axisType;
           const axisKey = this.currentToolBarConfig.axisTypeList && this.currentToolBarConfig.axisTypeList[axisType];
@@ -8422,7 +8489,7 @@ const _sfc_main$2 = {
             type: "inside",
             orient: "vertical",
             filterMode: "none",
-            disabled: true
+            disabled: !this.isGeomechanical
           }
         ],
         tooltip: {
@@ -8432,6 +8499,7 @@ const _sfc_main$2 = {
           axisPointer: {
             type: "line",
             axis: "y",
+            z: 999,
             snap: true,
             label: {
               backgroundColor: `${getCssVariable("--kd-lane-container-border-color")}99`,
@@ -10179,15 +10247,12 @@ const _sfc_main$2 = {
         if (!areaItem.data || areaItem.data.length < 2) continue;
         if (lineInfo.laneId !== this.activeLaneId && areaItem.type === "markArea")
           continue;
-        if (areaItem.data[0].timestamp) {
-          areaItem.data.sort(
-            (a, b) => this.toMillisecondTimestamp(a.timestamp) - this.toMillisecondTimestamp(b.timestamp)
-          );
-        } else {
-          areaItem.data.sort((a, b) => Number(a[axisKey]) - Number(b[axisKey]));
-        }
-        const startData = areaItem.data[0];
-        const endData = areaItem.data[1];
+        const hasTimestamp = areaItem.data[0].timestamp;
+        const sortedData = hasTimestamp ? [...areaItem.data].sort(
+          (a, b) => this.toMillisecondTimestamp(a.timestamp) - this.toMillisecondTimestamp(b.timestamp)
+        ) : [...areaItem.data].sort((a, b) => Number(a[axisKey]) - Number(b[axisKey]));
+        const startData = sortedData[0];
+        const endData = sortedData[1];
         console.log("startData", startData, "endData", endData);
         let startY, endY;
         if (this.formCache.axisType === "depth") {
@@ -10237,6 +10302,8 @@ const _sfc_main$2 = {
               const diff = Number(d[axisKey]) - Number(endDepth);
               if (diff <= 0) {
                 closestEndItem = d;
+              } else {
+                break;
               }
             }
             if (closestEndItem) {
@@ -10282,6 +10349,8 @@ const _sfc_main$2 = {
               const diff = this.toMillisecondTimestamp(d[axisKey]) - endTimeMs;
               if (diff < 0) {
                 closestEndItem = d;
+              } else {
+                break;
               }
             }
             endY = closestEndItem ? endTimeMs : null;
@@ -10847,16 +10916,18 @@ const _sfc_main$2 = {
       if (typeof scale == "string") {
         scale = +scale.replace("1:", "") / 100;
       }
-      let size = Math.round(this.pxToCm() * (+scale / this.depthInterval));
+      const safeCm = this.pxToCm();
+      const safeDepthInterval = this.depthInterval || 1;
+      let size = Math.round(safeCm * (+scale / safeDepthInterval));
       let maxSize = Math.max(
-        Math.round(this.pxToCm() * (1 / this.depthInterval)),
+        Math.round(safeCm * (1 / safeDepthInterval)),
         this.realTimeData.length
       );
       if (size < maxSize) {
         this.windowSize = size;
       } else {
         this.windowSize = maxSize;
-        let newsize = Math.round(maxSize / this.pxToCm() * this.depthInterval);
+        let newsize = Math.round(maxSize / safeCm * safeDepthInterval);
         let data = ((_b = (_a = this.currentToolBarConfig) == null ? void 0 : _a.scaleList) == null ? void 0 : _b.map((item) => item.value)) || [];
         this.$emit(
           "updateScale",
@@ -10983,7 +11054,9 @@ const _sfc_main$2 = {
         }
         if (newVal && this.formCache.axisType == "depth") {
           let data = ((_b = (_a = this.currentToolBarConfig) == null ? void 0 : _a.scaleList) == null ? void 0 : _b.map((item) => item.value)) || [];
-          let size = Math.round(newVal * this.depthInterval / this.pxToCm()) < Math.max(...data) ? Math.round(newVal * this.depthInterval / this.pxToCm()) : Math.max(...data);
+          const safeCm = this.pxToCm();
+          const safeDepthInterval = this.depthInterval || 1;
+          let size = Math.round(newVal * safeDepthInterval / safeCm) < Math.max(...data) ? Math.round(newVal * safeDepthInterval / safeCm) : Math.max(...data);
           this.$emit(
             "updateScale",
             data.includes(size) ? size : `1:${size * 100}`
@@ -11341,7 +11414,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 512);
 }
-const chartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-4fbcd1bb"]]);
+const chartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-fa130d62"]]);
 const _sfc_main$1 = {
   name: "ParameterPanel",
   props: {