@mx-sose-front/mx-sose-graph 1.1.3 → 1.1.5

package/src/utils/viewportCulling.ts

@@ -0,0 +1,193 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import type { Shape } from '../types'
+
+/**
+ * 视口边界类型
+ */
+export interface ViewportBounds {
+  left: number
+  top: number
+  right: number
+  bottom: number
+}
+
+/**
+ * 视口裁剪配置
+ */
+export interface ViewportCullingOptions {
+  /** 缓冲区大小(像素),默认200 */
+  bufferSize?: number
+  /** 是否启用连线完整性保证,默认true */
+  ensureEdgeIntegrity?: boolean
+}
+
+/**
+ * 视口裁剪工具类
+ * 用于优化大数据量场景下的渲染性能,只渲染可见区域内的图元
+ */
+export class ViewportCulling {
+  private viewportBounds: Ref<ViewportBounds>
+  private bufferSize: number
+  private ensureEdgeIntegrity: boolean
+
+  constructor(options: ViewportCullingOptions = {}) {
+    this.bufferSize = options.bufferSize ?? 200
+    this.ensureEdgeIntegrity = options.ensureEdgeIntegrity ?? true
+
+    // 初始化视口边界(默认无限大,渲染所有图元)
+    this.viewportBounds = ref({
+      left: -Infinity,
+      top: -Infinity,
+      right: Infinity,
+      bottom: Infinity
+    })
+  }
+
+  /**
+   * 更新视口边界
+   * @param container 画布容器元素
+   * @param scale 当前缩放比例
+   */
+  updateViewport(container: HTMLElement | null, scale: number): void {
+    if (!container) return
+
+    const rect = container.getBoundingClientRect()
+    
+    // 缓冲区:根据缩放比例调整,提前加载即将进入视口的图元
+    const buffer = this.bufferSize / scale
+
+    this.viewportBounds.value = {
+      left: (container.scrollLeft / scale) - buffer,
+      top: (container.scrollTop / scale) - buffer,
+      right: (container.scrollLeft + rect.width) / scale + buffer,
+      bottom: (container.scrollTop + rect.height) / scale + buffer
+    }
+  }
+
+  /**
+   * 判断图元是否在视口内(AABB碰撞检测)
+   * @param shape 图元对象
+   * @returns 是否在视口内
+   */
+  isShapeInViewport(shape: Shape): boolean {
+    const bounds = shape.bounds
+    const viewport = this.viewportBounds.value
+
+    // 没有完整bounds的图元默认渲染
+    if (!bounds || bounds.x === undefined || bounds.y === undefined || 
+        bounds.width === undefined || bounds.height === undefined) {
+      return true
+    }
+
+    // AABB碰撞检测:判断矩形是否相交
+    // 如果图元完全在视口外的任一方向,则返回false
+    return !(
+      bounds.x + bounds.width < viewport.left ||   // 完全在左边
+      bounds.x > viewport.right ||                 // 完全在右边
+      bounds.y + bounds.height < viewport.top ||   // 完全在上边
+      bounds.y > viewport.bottom                   // 完全在下边
+    )
+  }
+
+  /**
+   * 过滤出可见的图元
+   * @param shapes 所有图元数组
+   * @returns 可见图元数组
+   */
+  filterVisibleShapes(shapes: Shape[]): Shape[] {
+    if (!shapes.length) return []
+
+    // 创建图元索引,优化查找性能
+    const shapeMap = new Map<string, Shape>()
+    shapes.forEach(s => shapeMap.set(s.id, s))
+
+    // 收集需要渲染的图元ID
+    const visibleIds = new Set<string>()
+
+    // 1. 添加视口内的图元
+    shapes.forEach(shape => {
+      if (this.isShapeInViewport(shape)) {
+        visibleIds.add(shape.id)
+      }
+    })
+
+    // 2. 添加可见图元的所有父级(嵌套支持)
+    // 确保嵌套图元的父容器也被渲染
+    const shapesToAdd = new Set<string>()
+    shapes.forEach(shape => {
+      if (visibleIds.has(shape.id) && shape.parenShapeId) {
+        let parentId: string | undefined = shape.parenShapeId
+        while (parentId) {
+          if (!visibleIds.has(parentId)) {
+            shapesToAdd.add(parentId)
+          }
+          const parent = shapeMap.get(parentId)  // ✅ O(1) 查找
+          parentId = parent?.parenShapeId
+        }
+      }
+    })
+    shapesToAdd.forEach(id => visibleIds.add(id))
+
+    // 3. 处理连线:如果连线的任一端点在视口内,则渲染整条连线及两个端点
+    if (this.ensureEdgeIntegrity) {
+      shapes.forEach(shape => {
+        if (shape.shapeType === 'edge' && shape.sourceId && shape.targetId) {
+          // 检查端点图元是否存在 (使用 shapeMap, O(1))
+          const hasSource = shapeMap.has(shape.sourceId)
+          const hasTarget = shapeMap.has(shape.targetId)
+          
+          // 只有当两个端点都存在时才处理连线
+          if (hasSource && hasTarget) {
+            // 如果连线本身在视口内,或任一端点在视口内
+            if (visibleIds.has(shape.id) || 
+                visibleIds.has(shape.sourceId) || 
+                visibleIds.has(shape.targetId)) {
+              visibleIds.add(shape.id)
+              visibleIds.add(shape.sourceId)
+              visibleIds.add(shape.targetId)
+            }
+          }
+        }
+      })
+    }
+
+    // 4. 返回需要渲染的图元
+    return shapes.filter(s => visibleIds.has(s.id))
+  }
+
+  /**
+   * 创建可见图元的计算属性
+   * @param allShapes 所有图元的Ref
+   * @returns 可见图元的ComputedRef
+   */
+  createVisibleShapesComputed(allShapes: Ref<Shape[]>): ComputedRef<Shape[]> {
+    return computed(() => this.filterVisibleShapes(allShapes.value))
+  }
+
+  /**
+   * 获取当前视口边界
+   */
+  getViewportBounds(): ViewportBounds {
+    return this.viewportBounds.value
+  }
+
+  /**
+   * 计算性能提升百分比
+   * @param totalCount 总图元数量
+   * @param visibleCount 可见图元数量
+   * @returns 性能提升百分比
+   */
+  static calculatePerformanceImprovement(totalCount: number, visibleCount: number): number {
+    if (totalCount === 0) return 0
+    return Math.round(((totalCount - visibleCount) / totalCount) * 100)
+  }
+}
+
+/**
+ * 创建视口裁剪实例的便捷函数
+ * @param options 配置选项
+ * @returns ViewportCulling实例
+ */
+export function useViewportCulling(options?: ViewportCullingOptions): ViewportCulling {
+  return new ViewportCulling(options)
+}

package/src/view/graph.vue

@@ -3,14 +3,25 @@
     <!-- 画布内容区域 -->
     <div class="diagram-content" ref="diagramContentRef" @wheel="handleWheel">
       <div class="shapes-container" v-if="shapes.length > 0">
-        <component v-for="shape in shapes" :key="shape.id" :is="getShapeComponent(shape)" :shape="shape"
-          :style="getShapeStyle(shape)" @name-click="handleNameClick" @shape-click="handleShapeClick"
+        <component v-for="shape in shapes" :key="shape.id"
+          v-memo="[shape.id, shape.bounds, graphStore.selectedShape?.id === shape.id]" :is="getShapeComponent(shape)"
+          :shape="shape" :style="getShapeStyle(shape)" @name-click="handleNameClick" @shape-click="handleShapeClick"
           @edge-click="handleEdgeClick"
-          :is-selected="graphStore.selectedShape?.id === shape.id && shape.shapeType === 'edge'" ref="shapeComponents"
-          class="shape-element" :data-shape-id="shape.id"
+          :is-selected="graphStore.selectedShape?.id === shape.id && shape.shapeType === 'edge'" class="shape-element"
+          :data-shape-id="shape.id"
           @compartment-metrics="(m: any, shape: any) => onCompartmentMetrics(m, shape)" />
       </div>
 
+      <!-- 剪切状态遮盖层 - 使用 SVG 渲染，性能更优 -->
+      <svg v-if="cutShapeBounds.length > 0" class="cut-overlay-svg">
+        <rect v-for="bounds in cutShapeBounds" :key="bounds.id"
+          :x="bounds.x"
+          :y="bounds.y"
+          :width="bounds.width"
+          :height="bounds.height"
+          fill="rgba(255, 255, 255, 0.6)" />
+      </svg>
+
       <!-- 交互层 - 整合了连接层逻辑 -->
       <InteractionLayer v-if="diagramBounds" ref="interactionLayerRef" :connect-shape-data="connectShapeData"
         :diagram-bounds="diagramBounds" :style="{
@@ -20,9 +31,9 @@
           top: `${diagramBounds.y}px`
         }" :resShape="resShape" :edgeCheck="edgeCheck" @property-panel="handlePropertyPanel"
         :actionButtonShapeDataId="actionButtonShapeId" @edit-name="handleEditName"
-        @update-shape="handleUpdateConnectShape" @diagramDoubleClick="handleDiagramDoubleClick"
-        @connect-end="handleConnectEnd" @action-button-click="handleActionButtonClick"
-        @object-flow-connect-end="handleObjectFlowConnectEnd"
+        :is-textarea-dialog-open="props.isTextareaDialogOpen" @update-shape="handleUpdateConnectShape"
+        @diagramDoubleClick="handleDiagramDoubleClick" @connect-end="handleConnectEnd"
+        @action-button-click="handleActionButtonClick" @object-flow-connect-end="handleObjectFlowConnectEnd"
         @model-type-property-id-button-click="handleModelTypePropertyIdButtonClick" :lines="props.lines"
         :packages="props.packages" :diagram="props.diagram" :tagged-value-labels="props.taggedValueLabels"
         @action-button-add="handleActionButtonAdd" />
@@ -30,19 +41,7 @@
 
     <!-- 所在图表 -->
     <DiagramListTooltip :visible="tooltipVisible" :x="tooltipX" :y="tooltipY" :current-diagram-id="currentDiagramId"
-  @close="tooltipVisible = false" :diagram-location-data="chartLocationData || []" />
-
-    <!-- 缩放条 -->
-    <ZoomSlider
-      v-model="zoomValue"
-      :min="0.1"
-      :max="3"
-      :step="0.1"
-      @zoom-in="handleZoomIn"
-      @zoom-out="handleZoomOut"
-      @scale-change="handleScaleChange"
-      v-if="graphStore.canOperate"
-    />
+      @close="tooltipVisible = false" :diagram-location-data="chartLocationData || []" />
   </div>
 </template>
 
@@ -66,13 +65,12 @@ import ActivityAction from '../components/Shape/ActivityAction.vue'
 import Pin from '../components/Pin/Pin.vue'
 import Port from '../components/Pin/Port.vue'
 import { registerShapes } from "../render/shape-registry";
-import { getShapeComponent, getShapeStyle } from "../render/shape-renderer";
+import { getShapeComponent, getShapeStyle, clearEdgeStyleCache } from "../render/shape-renderer";
 import { ShapeConfig } from '../utils/diagram'
 import { setCompartmentZones, buildZones, setTaggedValueLabelsCache, setPackageTypesCache } from '../utils/compartment'
 import { eventBus } from "../store";
 import { guardOperate } from "../utils/license-guard"
 import DiagramListTooltip from '../components/DiagramListTooltip/DiagramListTooltip.vue';
-import ZoomSlider from '../components/ZoomSlider/ZoomSlider.vue'
 
 registerShapes({
   StrategicTaxonomyDiagram,
@@ -89,6 +87,7 @@ registerShapes({
   Port
 })
 const interactionLayerRef = ref<InstanceType<typeof InteractionLayer> | null>(null)
+const diagramContentRef = ref<HTMLDivElement | null>(null) // 画布内容区域ref
 
 // 所在图表弹窗相关变量
 const tooltipVisible = ref(false)
@@ -111,6 +110,7 @@ const props = defineProps<{
   ports: string[],
   canOperate: boolean
   chartLocationData?: locationChart[] | null,
+  isTextareaDialogOpen: boolean
 }>()
 
 const emit = defineEmits<{
@@ -134,45 +134,78 @@ const currentScale = computed(() => graphStore.getScale())
 // 缩放值，用于双向绑定滑块
 const zoomValue = ref(currentScale.value)
 
-// 监听当前缩放比例变化，更新滑块值
+// 监听当前缩放比例变化,更新滑块值
 watch(currentScale, (newScale) => {
   zoomValue.value = newScale
+
+  // ========== 视口裁剪优化:缩放时更新视口 ==========
+  nextTick(() => {
+    updateViewport()
+  })
+  // ========== 视口裁剪优化结束 ==========
 })
 
-// 处理缩放滑块变化
-const handleScaleChange = (scale: number) => {
-  graphStore.setScale(scale)
-  emit('scale-changed', scale)
-}
+// ========== 视口裁剪优化 ==========
+import { useViewportCulling } from '../utils/viewportCulling'
 
-// 处理放大按钮点击
-const handleZoomIn = () => {
-  // ZoomSlider组件已经处理了内部逻辑，这里只需要触发外部事件
-  const newScale = Math.min(currentScale.value + 0.1, 3)
-  graphStore.setScale(newScale)
-  emit('scale-changed', newScale)
-}
+// 创建视口裁剪实例
+const viewportCulling = useViewportCulling({
+  bufferSize: 200,              // 缓冲区大小
+  ensureEdgeIntegrity: true     // 确保连线完整性
+})
 
-// 处理缩小按钮点击
-const handleZoomOut = () => {
-  // ZoomSlider组件已经处理了内部逻辑，这里只需要触发外部事件
-  const newScale = Math.max(currentScale.value - 0.1, 0.1)
-  graphStore.setScale(newScale)
-  emit('scale-changed', newScale)
+// 更新视口边界(封装原有逻辑)，使用 rAF 节流避免滚动时每帧多次重算
+let viewportRafId: number | null = null
+const updateViewport = () => {
+  if (viewportRafId != null) return
+  viewportRafId = requestAnimationFrame(() => {
+    viewportRafId = null
+    viewportCulling.updateViewport(diagramContentRef.value, currentScale.value)
+  })
 }
 
-// 响应式数据
-const shapes = computed(() =>
+// 所有图元(应用原有过滤逻辑)
+const allShapes = computed(() =>
   (graphStore.visibleShapes || []).filter(s => {
-    // 外部拖拽创建中的形状应该被隐藏，只显示 ghost
+    // 外部拖拽创建中的形状应该被隐藏,只显示 ghost
     if (graphStore.externalCreatingId && s.id === graphStore.externalCreatingId) {
       return false
     }
-    return (s?.shapeType !== 'shape' && s?.shapeType !== 'pin')       // 非 shape：一律渲染
-      || s?.inert !== false         // 仅当是 shape 才检查；inert===false 才被过滤掉
+    return (s?.shapeType !== 'shape' && s?.shapeType !== 'pin')       // 非 shape:一律渲染
+      || s?.inert !== false         // 仅当是 shape 才检查;inert===false 才被过滤掉
   })
 )
 
+// 可见图元(基于视口裁剪) - 使用工具类
+const visibleShapes = viewportCulling.createVisibleShapesComputed(allShapes)
+
+// 使用visibleShapes替代shapes进行渲染
+const shapes = visibleShapes
+// ========== 视口裁剪优化结束 ==========
+
+// 剪切状态图元的边界信息（用于 SVG 遮盖层渲染）
+const cutShapeBounds = computed(() => {
+  const cutIdsSet = graphStore.cutShapeIds as Set<string>
+  
+  if (!cutIdsSet || !(cutIdsSet instanceof Set) || cutIdsSet.size === 0) return []
+  
+  const idsArray = Array.from(cutIdsSet)
+  
+  return idsArray
+    .map(id => {
+      const shape = graphStore.shapeMap.get(id)
+      if (!shape?.bounds) return null
+      return {
+        id,
+        x: shape.bounds.x ?? 0,
+        y: shape.bounds.y ?? 0,
+        width: shape.bounds.width ?? 0,
+        height: shape.bounds.height ?? 0,
+      }
+    })
+    .filter(Boolean) as Array<{ id: string; x: number; y: number; width: number; height: number }>
+})
+
 // 将隔间组件从 DOM 量测得到的头/内容高度写回 shape.meta，
 const onCompartmentMetrics = (
   m: { headerH: number; contentH: number },
@@ -325,8 +358,10 @@ const updateShapes = (shapes: Shape[]) => {
     if (b.shapeType === 'diagram') return 1
     return 0
   })
-  graphStore.updateShapes(shapes)
-
+  clearEdgeStyleCache() // 批量更新时清空 edge 样式缓存，避免旧数据残留
+  // graphStore.updateShapes(shapes)
+   graphStore.shapes=[]
+  graphStore.updateShapes(shapes, 'replace');
   // 在图形批量更新后（通常是从后端加载数据），初始化所有连线的端点
   // 确保连线不会横跨图元，而是从合适的位置连接
   nextTick(() => {
@@ -369,16 +404,7 @@ const continueExternalCreateDrag = (payload: { clientX: number; clientY: number
 const finishExternalCreateDrag = (payload: { clientX: number; clientY: number }) => {
   interactionLayerRef.value?.finishExternalCreateDrag(payload)
 }
-// 监听shapes变化，确保InteractionLayer位置正确
-watch(shapes, () => {
-  nextTick(() => {
-    // 可以在这里添加额外的位置调整逻辑
-  })
-}, { deep: true })
 
-watch(() => props.actionButtonShapeId, (newVal) => {
-  console.log('newVal', newVal);
-})
 // 监听 taggedValueLabels，立即同步到 graphStore
 watch(
   () => props.taggedValueLabels,
@@ -445,6 +471,18 @@ onMounted(() => {
 
   // 监听所在图表弹窗位置信息事件
   eventBus.on('locate-chart-position', handleLocateChartPosition)
+
+  // ========== 视口裁剪优化:初始化视口 ==========
+  nextTick(() => {
+    updateViewport() // 初始化视口边界
+
+    // 监听滚动事件
+    const container = diagramContentRef.value
+    if (container) {
+      container.addEventListener('scroll', updateViewport)
+    }
+  })
+  // ========== 视口裁剪优化结束 ==========
 })
 
 onUnmounted(() => {
@@ -457,6 +495,13 @@ onUnmounted(() => {
 
   // 移除所在图表弹窗位置信息事件监听器
   eventBus.off('locate-chart-position', handleLocateChartPosition)
+
+  // ========== 视口裁剪优化:移除滚动监听 ==========
+  const container = diagramContentRef.value
+  if (container) {
+    container.removeEventListener('scroll', updateViewport)
+  }
+  // ========== 视口裁剪优化结束 ==========
 })
 
 defineExpose({
@@ -484,7 +529,7 @@ defineExpose({
   top: 10px;
   left: 10px;
   right: 0;
-  bottom: 30px;
+  bottom: 10px;
   overflow: auto;
   /* 防止Firefox中的默认缩放行为 */
   touch-action: none;
@@ -500,9 +545,10 @@ defineExpose({
   transform: scale(v-bind('currentScale'));
 }
 
-/* 所有 shape 组件都使用绝对定位 */
+/* 所有 shape 组件都使用绝对定位，启用 GPU 合成减少重绘 */
 .shapes-container>* {
   position: absolute;
+  will-change: transform;
 }
 
 /* 缩放百分比显示 */
@@ -521,5 +567,14 @@ defineExpose({
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-
+/* 剪切状态遮盖层 - SVG 方案 */
+.cut-overlay-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 998;
+}
 </style>

package/src/utils/highlightUtils.ts

@@ -1,162 +0,0 @@
-import type { Shape } from '../types';
-
-// GraphStore接口定义，包含highlightUtils所需的方法和属性
-interface GraphStore {
-  shapes: Shape[];
-  updateShape: (shapeId: string, updates: Partial<Shape>, id?: 'id' | 'modelId') => void;
-}
-
-/**
- * 图元高亮工具类
- * 用于处理图元高亮状态管理和样式转换
- */
-export class HighlightUtils {
-  private highlightedShapeId: string | null = null;
-  private originalShapeStyles = new Map<string, { borderColor?: string; borderWidth?: number }>();
-  private graphStore: GraphStore;
-  private highlightTimeout: ReturnType<typeof setTimeout> | null = null;
-
-  /**
-   * 构造函数
-   * @param graphStore 图元存储实例
-   */
-  constructor(graphStore: GraphStore) {
-    this.graphStore = graphStore;
-  }
-
-  /**
-   * 高亮或取消高亮图元
-   * @param shape 要高亮的图元，null表示取消所有高亮
-   * @param isHighlight 是否高亮
-   * @param isValidSource 是否是有效的连接源（影响高亮颜色）
-   * @returns 高亮后的图元（如果有）
-   */
-  public highlightShape(
-    shape: Shape | null,
-    isHighlight: boolean,
-    isValidSource: boolean = true
-  ): Shape | null {
-    // 取消高亮处理
-    if (!shape && !isHighlight) {
-      this.cancelAllHighlights();
-      return null;
-    }
-
-    // 无效图元或边类型图元不处理
-    if (!shape || shape.shapeType === 'edge') return null;
-
-    // 高亮操作
-    if (isHighlight && shape) {
-      // 先取消之前可能存在的高亮
-      if (this.highlightedShapeId && this.highlightedShapeId !== shape.id) {
-        this.cancelAllHighlights();
-      }
-
-      // 保存原始样式
-      if (!this.originalShapeStyles.has(shape.id)) {
-        // 确保borderWidth是number类型
-        let borderWidth: number | undefined;
-        if (shape.style?.borderWidth !== undefined) {
-          borderWidth = typeof shape.style.borderWidth === 'string' 
-            ? parseFloat(shape.style.borderWidth) 
-            : shape.style.borderWidth;
-        }
-        
-        this.originalShapeStyles.set(shape.id, {
-          borderColor: shape.style?.borderColor,
-          borderWidth: borderWidth
-        });
-      }
-
-      // 设置高亮样式（蓝色表示可以连接，红色表示不可以）
-      const highlightStyle = {
-        ...shape.style,
-        borderColor: isValidSource ? '#1890ff' : '#f56c6c', // 蓝色或红色
-        borderWidth: 3,
-      };
-
-      // 更新图元样式
-      this.graphStore.updateShape(shape.id, { style: highlightStyle });
-      this.highlightedShapeId = shape.id;
-      
-      return shape;
-    }
-
-    return null;
-  }
-
-  /**
-   * 取消所有图元的高亮状态
-   */
-  public cancelAllHighlights(): void {
-    if (this.highlightedShapeId) {
-      // 找到当前高亮的图元
-      const currentHighlighted = this.graphStore.shapes.find(s => s.id === this.highlightedShapeId);
-      if (currentHighlighted) {
-        // 恢复原始样式
-        const originalStyle = this.originalShapeStyles.get(this.highlightedShapeId);
-        if (originalStyle) {
-          const restoreStyle = {
-            ...currentHighlighted.style,
-            borderColor: originalStyle.borderColor !== undefined ? originalStyle.borderColor : undefined,
-            borderWidth: originalStyle.borderWidth !== undefined ? Number(originalStyle.borderWidth) : undefined
-          };
-
-          // 更新图元恢复原始样式
-          this.graphStore.updateShape(this.highlightedShapeId, { style: restoreStyle });
-        }
-
-        this.originalShapeStyles.delete(this.highlightedShapeId);
-      }
-    }
-    
-    // 重置状态
-    this.highlightedShapeId = null;
-  }
-
-  /**
-   * 获取当前高亮的图元ID
-   */
-  public getHighlightedShapeId(): string | null {
-    return this.highlightedShapeId;
-  }
-
-  /**
-   * 获取当前高亮的图元
-   */
-  public getHighlightedShape(): Shape | null {
-    if (!this.highlightedShapeId) return null;
-    return this.graphStore.shapes.find(s => s.id === this.highlightedShapeId) || null;
-  }
-
-  /**
-   * 设置高亮定时器
-   * @param callback 回调函数
-   * @param delay 延迟时间（毫秒）
-   */
-  public setHighlightTimeout(callback: () => void, delay: number): void {
-    // 先清除已存在的定时器
-    this.clearHighlightTimeout();
-    // 设置新的定时器
-    this.highlightTimeout = setTimeout(callback, delay);
-  }
-
-  /**
-   * 清除高亮定时器
-   */
-  public clearHighlightTimeout(): void {
-    if (this.highlightTimeout) {
-      clearTimeout(this.highlightTimeout);
-      this.highlightTimeout = null;
-    }
-  }
-
-  /**
-   * 清理所有高亮状态和数据
-   */
-  public dispose(): void {
-    this.cancelAllHighlights();
-    this.clearHighlightTimeout();
-    this.originalShapeStyles.clear();
-  }
-}