kd-lane-chart-v3 0.1.4 → 0.1.5

package/dist/esm/index.js

@@ -3790,6 +3790,7 @@ class TrendLineManager {
     this._zoomRaf = null;
     this._zoomPending = false;
     this._zoomEndTimer = null;
+    this._graphicIds = /* @__PURE__ */ Object.create(null);
     this._ignoreClickUntil = 0;
   }
   destroy() {
@@ -3939,15 +3940,13 @@ class TrendLineManager {
     }
   }
   /** 图表重绘后对齐叠加层；拖拽中跳过，避免和 _onDragMove 抢 setOption。8.21 */
+  // 只排一帧，不再连刷两次 renderAll（会闪）。8.24
   scheduleRender() {
     if (this.dragSession) return;
     if (this._raf) return;
     this._raf = requestAnimationFrame(() => {
       this._raf = null;
       this.renderAll();
-      requestAnimationFrame(() => {
-        if (!this.dragSession) this.renderAll();
-      });
     });
   }
   /** 缩放过程用 ZR 就地改像素，结束后再整层重画，避免 replaceMerge 把线冲掉。8.22 */
@@ -3994,7 +3993,7 @@ class TrendLineManager {
       patches.push(...this._buildPatches(chart, target));
     });
     if (!patches.length) return;
-    if (!this._applyPatchesViaZr(chart, patches)) {
+    if (!this._applyPatchesViaZr(chart, patches) && !this._zoomPending) {
       this.renderLane(laneId);
     }
   }
@@ -4145,8 +4144,7 @@ class TrendLineManager {
       this.dragSession = null;
       this._setPanLocked(false, true);
       this._ignoreClickUntil = Date.now() + 300;
-      this.renderLane(sessionTarget.laneId);
-      this._emitChange(sessionTarget);
+      this._emitChange(sessionTarget, { redraw: false });
     };
     el.__trendOnDown = onDown;
     el.__trendOnDrag = onDrag;
@@ -4170,12 +4168,32 @@ class TrendLineManager {
     }
     return applied > 0;
   }
-  renderAll() {
+  // 只 merge 新图形，不动已有线。8.24
+  _addGraphicElements(chart, elements) {
+    if (!elements.length) return;
+    chart.setOption(
+      {
+        graphic: elements.map((el) => ({ ...el, $action: "merge" }))
+      },
+      { silent: true, lazyUpdate: false }
+    );
+  }
+  // 按 id 删除，不 replaceMerge 整层 graphic。8.24
+  _removeGraphicIds(chart, ids) {
+    if (!ids.length) return;
+    chart.setOption(
+      {
+        graphic: ids.map((id) => ({ id, $action: "remove" }))
+      },
+      { silent: true, lazyUpdate: false }
+    );
+  }
+  renderAll(forceReplace = false) {
     const lanes = this.host.currentTemplate && this.host.currentTemplate.lanes || [];
-    lanes.forEach((lane) => this.renderLane(lane.laneId));
+    lanes.forEach((lane) => this.renderLane(lane.laneId, forceReplace));
   }
-  /** 用 graphic replaceMerge 整层替换，避免和图表其它 graphic 混在一起。8.21 */
-  renderLane(laneId) {
+  /** 已有线只改 ZR 形状；新点/新线段单独 merge 进去，绝不整层 graphic 替换。8.24 */
+  renderLane(laneId, forceReplace = false) {
     const chart = this.getChart(laneId);
     if (!chart) return;
     const targets = this.listDrawableTargets().filter((t) => t.laneId === laneId);
@@ -4185,12 +4203,28 @@ class TrendLineManager {
     });
     const hasKnots = targets.some((t) => (t.segments || []).some((s) => (s.knots || []).length));
     if (hasKnots && !elements.length) return;
-    chart.setOption(
-      { graphic: { elements } },
-      { replaceMerge: ["graphic"], lazyUpdate: false, silent: true }
-    );
+    const nextIds = elements.map((el) => el.id);
+    const prevIds = this._graphicIds[laneId] || [];
+    const prevSet = new Set(prevIds);
+    const nextSet = new Set(nextIds);
+    const added = elements.filter((el) => !prevSet.has(el.id));
+    const kept = elements.filter((el) => prevSet.has(el.id));
+    const removedIds = prevIds.filter((id) => !nextSet.has(id));
+    if (forceReplace) {
+      this._removeGraphicIds(chart, prevIds);
+      this._addGraphicElements(chart, elements);
+    } else {
+      if (kept.length) {
+        this._applyPatchesViaZr(
+          chart,
+          kept.map((el) => ({ id: el.id, shape: el.shape }))
+        );
+      }
+      if (removedIds.length) this._removeGraphicIds(chart, removedIds);
+      if (added.length) this._addGraphicElements(chart, added);
+    }
+    this._graphicIds[laneId] = nextIds;
     this._bindPointInteractions(chart, laneId);
-    requestAnimationFrame(() => this._bindPointInteractions(chart, laneId));
     this.updateCursor(laneId);
   }
   _buildElements(chart, target) {
@@ -4444,7 +4478,7 @@ class TrendLineManager {
     }
     seg.knots = [...rest, knot].sort((a, b) => a.depth - b.depth);
     this.renderLane(target.laneId);
-    this._emitChange(target);
+    this._emitChange(target, { redraw: false });
   }
   /** 取未关闭的最后一段；没有或已 _closed 则开新段。8.21 */
   _ensureActiveSegment(key) {
@@ -4488,7 +4522,7 @@ class TrendLineManager {
     const target = this.listDrawableTargets().find((t) => t.key === k);
     if (target) {
       this.renderLane(target.laneId);
-      this._emitChange(target);
+      this._emitChange(target, { redraw: false });
     }
     return true;
   }
@@ -4507,15 +4541,15 @@ class TrendLineManager {
         segments: []
       });
     });
-    this.renderAll();
+    this.renderAll(true);
   }
   /** 清空指定曲线的控制点；不传 key 则清当前编辑曲线。8.21 */
   resetTrendLine(key) {
     const target = key ? this.listDrawableTargets().find((t) => t.key === key) : this.getActiveTarget() || this.listDrawableTargets().find((t) => t.editable);
     if (!target) return;
     this.store[target.key] = { segments: [] };
-    this.renderLane(target.laneId);
-    this._emitChange(target);
+    this.renderLane(target.laneId, true);
+    this._emitChange(target, { redraw: false });
   }
   /** 删除一个控制点。段内只剩 0～1 个点时整段丢掉（画不出线）。8.21 */
   deleteKnot(payload) {
@@ -4533,8 +4567,8 @@ class TrendLineManager {
     }).filter((s) => s.knots.length > 0);
     const target = this.listDrawableTargets().find((t) => t.key === payload.key);
     const laneId = target && target.laneId || payload.laneId;
-    if (laneId) this.renderLane(laneId);
-    if (target) this._emitChange(target);
+    if (laneId) this.renderLane(laneId, true);
+    if (target) this._emitChange(target, { redraw: false });
   }
   /** 返回 geosteering trendLinePoint 格式的线段数组；8137 带上 isDouble / calcType。8.22 */
   getTrendLineData(mainId = "demo") {
@@ -4653,9 +4687,7 @@ class TrendLineManager {
     }
     this._ignoreClickUntil = Date.now() + 300;
     this.updateCursor(session.target.laneId);
-    this.renderLane(session.target.laneId);
-    if (emit) this._emitChange(session.target);
-    else this._scheduleRenderAfterVue();
+    if (emit) this._emitChange(session.target, { redraw: false });
   }
   _clearClickTimer() {
     if (this.clickTimer) {
@@ -4664,25 +4696,23 @@ class TrendLineManager {
     }
   }
   /** 抛 trend-change（拖拽过程中不抛，只在松开时抛）；不写回响应式模板。8.22 */
-  _emitChange(target) {
+  // redraw=false：本地已画过，避免再 scheduleRender 把线闪掉。8.24
+  _emitChange(target, { redraw = true } = {}) {
     const segments = cloneSegments(this.store[target.key] && this.store[target.key].segments || []);
     this.host.$emit("trend-change", {
       paramId: target.paramId,
       laneId: target.laneId,
       segments
     });
-    this._scheduleRenderAfterVue();
+    if (redraw) this._scheduleRenderAfterVue();
   }
   /** 等 Vue / 图表 setOption 完成后再画叠加层。8.22 */
+  // 只 nextTick 一次，不再叠 rAF 连刷。8.24
   _scheduleRenderAfterVue() {
-    const run = () => this.scheduleRender();
     if (this.host && typeof this.host.$nextTick === "function") {
-      this.host.$nextTick(() => {
-        run();
-        requestAnimationFrame(run);
-      });
+      this.host.$nextTick(() => this.scheduleRender());
     } else {
-      requestAnimationFrame(run);
+      this.scheduleRender();
     }
   }
   /** 手动填写不画镜像；模型计算或回显数据里已有 mirrorValue 则画第二条线。8.22 */
@@ -4867,7 +4897,7 @@ class TrendLineManager {
     }).filter((s) => s.knots.length > 0);
     this.renderLane(found.laneId);
     const target = this.listDrawableTargets().find((t) => t.key === key);
-    if (target) this._emitChange(target);
+    if (target) this._emitChange(target, { redraw: false });
   }
   /** 模型计算抽屉确定：写入岩性/偏移并生成镜像值。8.22 */
   applyMoxingConfig(paramId, form) {
@@ -4938,7 +4968,7 @@ class TrendLineManager {
     seg.knots = [...rest, knot].sort((a, b) => a.depth - b.depth);
     this.renderLane(found.laneId);
     const target = this.listDrawableTargets().find((t) => t.key === key);
-    if (target) this._emitChange(target);
+    if (target) this._emitChange(target, { redraw: false });
   }
 }
 const _sfc_main$6 = {
@@ -6332,6 +6362,8 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
         group: { name: "laneGroup", pull: false, put: false },
         "item-key": "laneId",
         filter: $options.laneDragFilter,
+        "prevent-on-filter": false,
+        handle: $props.isGeomechanical ? ".kd-lane-chart-lane-header" : void 0,
         axis: "x"
       }, {
         default: withCtx(() => [
@@ -6436,7 +6468,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128))
         ]),
         _: 3
-      }, 8, ["onStart", "onEnd", "modelValue", "filter"])
+      }, 8, ["onStart", "onEnd", "modelValue", "filter", "handle"])
     ], 64)) : (openBlock(), createElementBlock("div", _hoisted_13$1, [
       createElementVNode("div", {
         class: normalizeClass(["kd-lane-chart-lane-header", { "kd-lane-chart-lane-header-isKdCurveV2": $props.isKdCurveV2 }]),
@@ -6518,7 +6550,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-4f706753"]]);
+const KdLaneContainerComponent = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-afde8956"]]);
 const SLIDER_GROUP_ID = "depthSliderGroup";
 function pad2(n) {
   return n < 10 ? "0" + n : "" + n;
@@ -9104,24 +9136,53 @@ const _sfc_main$3 = {
       }
       return null;
     },
-    _restoreDataZoomState(savedState) {
-      if (!savedState || !this.chart || this.chart.isDisposed()) return;
+    // notMerge 刷 option 时把当前趋势线 graphic 带回去，避免先消失再画。8.24
+    _preserveGraphic(options) {
+      if (!options || options.graphic || !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 });
+        const current = this.chart.getOption();
+        if (current && current.graphic && current.graphic.length) {
+          options.graphic = current.graphic;
+        }
       } catch (e) {
       }
     },
+    // dataZoom 写进即将下发的 option，不再二次 setOption 打断 Chrome 平移。8.24
+    _applySavedDataZoomToOptions(options, savedState) {
+      if (!savedState || !options) return;
+      const raw = options.dataZoom;
+      if (!raw) return;
+      const list = Array.isArray(raw) ? raw : [raw];
+      savedState.forEach((state, i) => {
+        if (!list[i] || !state) return;
+        if (state.start !== void 0) list[i].start = state.start;
+        if (state.end !== void 0) list[i].end = state.end;
+        if (state.startValue !== void 0) list[i].startValue = state.startValue;
+        if (state.endValue !== void 0) list[i].endValue = state.endValue;
+      });
+    },
+    // 拦截 HTML5 dragstart，Chrome 才能把 mousemove 交给 dataZoom。8.24
+    _preventNativeDrag(e) {
+      e.preventDefault();
+    },
+    _bindNativeDragGuard() {
+      const el = this.$el;
+      if (!el || el.__kdNativeDragBound) return;
+      el.__kdNativeDragBound = true;
+      el.setAttribute("draggable", "false");
+      el.addEventListener("dragstart", this._preventNativeDrag, true);
+      const canvases = el.querySelectorAll("canvas");
+      canvases.forEach((canvas) => {
+        canvas.draggable = false;
+        canvas.setAttribute("draggable", "false");
+      });
+    },
+    _unbindNativeDragGuard() {
+      const el = this.$el;
+      if (!el) return;
+      el.removeEventListener("dragstart", this._preventNativeDrag, true);
+      el.__kdNativeDragBound = false;
+    },
     // provide an explicit merge option method
     mergeOptions(options, notMerge, lazyUpdate, skipClone) {
       if (this.manualUpdate) {
@@ -9132,10 +9193,10 @@ const _sfc_main$3 = {
       } else {
         this._skipWatcher = true;
         const savedDataZoom = this._saveDataZoomState();
-        this.delegateMethod("setOption", this.getOptionsWithTheme(options, skipClone), notMerge, lazyUpdate);
-        if (savedDataZoom) {
-          this._restoreDataZoomState(savedDataZoom);
-        }
+        const next = this.getOptionsWithTheme(options, skipClone);
+        this._applySavedDataZoomToOptions(next, savedDataZoom);
+        this._preserveGraphic(next);
+        this.delegateMethod("setOption", next, notMerge, lazyUpdate);
         this.$nextTick(() => {
           this._skipWatcher = false;
         });
@@ -9215,6 +9276,7 @@ const _sfc_main$3 = {
         chart.group = this.group;
       }
       chart.setOption(this.getOptionsWithTheme(options || this.manualOptions || this.options || {}), true);
+      this._bindNativeDragGuard();
       Object.keys(this.$attrs).forEach((key) => {
         if (!key.startsWith("on") || typeof this.$attrs[key] !== "function") {
           return;
@@ -9294,10 +9356,10 @@ const _sfc_main$3 = {
               this.init(val);
             } else {
               const savedDataZoom = this._saveDataZoomState();
-              this.chart.setOption(this.getOptionsWithTheme(val), val !== oldVal);
-              if (savedDataZoom) {
-                this._restoreDataZoomState(savedDataZoom);
-              }
+              const next = this.getOptionsWithTheme(val);
+              this._applySavedDataZoomToOptions(next, savedDataZoom);
+              this._preserveGraphic(next);
+              this.chart.setOption(next, val !== oldVal);
               if (this.group) {
                 this.chart.group = this.group;
               }
@@ -9308,6 +9370,7 @@ const _sfc_main$3 = {
       }
     },
     destroy() {
+      this._unbindNativeDragGuard();
       if (this.autoresize) {
         removeListener(this.$el, this.__resizeHandler);
       }
@@ -9382,7 +9445,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-de2449c9"]]);
+const resizeEcharts = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-0df7a705"]]);
 const DRAW_POINT_MIN = 600;
 const DRAW_POINT_MAX = 1800;
 function getSeriesDrawThreshold(laneHeightPx) {
@@ -10645,12 +10708,10 @@ const _sfc_main$2 = {
       this.visibleData = markRaw(this.realTimeData.slice(startIndex, end));
       return this.visibleData;
     },
-    /** 地应力：进图用全量行，不按窗口截断。8.24 */
+    /** 进图只吃当前窗口。地应力也不准喂整口井，否则井深轴会拉成全井量程。8.24 */
     getChartDrawRows(transferData) {
       if (transferData && transferData.length > 0) return transferData;
-      this.getVisibleData();
-      if (this.isGeomechanical) return this.realTimeData || [];
-      return this.visibleData;
+      return this.getVisibleData();
     },
     getRowsAxisExtent(rows, key) {
       let min = Infinity;
@@ -14336,7 +14397,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 544);
 }
-const chartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-f4dde916"]]);
+const chartContainer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-5da40120"]]);
 const _sfc_main$1 = {
   name: "ParameterPanel",
   props: {