refactor(additional-components): use regular component for mini map nodes

2022-11-06 11:48:42 +01:00
parent 03412acf0d
commit 9b60790c31
2 changed files with 43 additions and 43 deletions
@@ -1,46 +1,35 @@
-import type { CSSProperties, FunctionalComponent } from 'vue'
+import type { CSSProperties } from 'vue'
 import type { MiniMapNodeProps } from './types'

-const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
-  {
-    position: { x, y },
-    dimensions: { height, width },
-    strokeWidth,
-    strokeColor,
-    borderRadius,
-    color,
-    shapeRendering = 'geometricPrecision',
+export default defineComponent({
+  name: 'MiniMapNode',
+  props: ['id', 'position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering'],
+  emits: ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave'],
+  setup(props: MiniMapNodeProps, { attrs, emit, slots }) {
+    const style = (attrs.style ?? {}) as CSSProperties
+
+    return () => [
+      h('rect', {
+        id: props.id,
+        class: ['vue-flow__minimap-node', attrs.class].join(' '),
+        style,
+        x: props.position.x,
+        y: props.position.y,
+        rx: props.borderRadius,
+        ry: props.borderRadius,
+        width: props.dimensions.width,
+        height: props.dimensions.height,
+        fill: props.color || (style.background as string) || style.backgroundColor,
+        stroke: props.strokeColor,
+        strokeWidth: props.strokeWidth,
+        shapeRendering: props.shapeRendering,
+        onClick: (e: MouseEvent) => emit('click', e),
+        onDblClick: (e: MouseEvent) => emit('dblclick', e),
+        onMouseenter: (e: MouseEvent) => emit('mouseenter', e),
+        onMousemove: (e: MouseEvent) => emit('mousemove', e),
+        onMouseleave: (e: MouseEvent) => emit('mouseleave', e),
+      }),
+      slots?.default?.(),
+    ]
  },
-  { attrs, emit, slots },
-) {
-  const style = (attrs.style ?? {}) as CSSProperties
-
-  return [
-    h('rect', {
-      class: ['vue-flow__minimap-node', attrs.class].join(' '),
-      style,
-      x,
-      y,
-      rx: borderRadius,
-      ry: borderRadius,
-      width,
-      height,
-      fill: color || (style.background as string) || style.backgroundColor,
-      stroke: strokeColor,
-      strokeWidth,
-      shapeRendering,
-      onClick: (e: MouseEvent) => emit('click', e),
-      onDblClick: (e: MouseEvent) => emit('dblclick', e),
-      onMouseenter: (e: MouseEvent) => emit('mouseenter', e),
-      onMousemove: (e: MouseEvent) => emit('mousemove', e),
-      onMouseleave: (e: MouseEvent) => emit('mouseleave', e),
-    }),
-    slots?.default?.(),
-  ]
-}
-
-MiniMapNode.props = ['position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering']
-
-MiniMapNode.emits = ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave']
-
-export default MiniMapNode
+})