update(script-setup): Refactor additional-components

* Remove jsx files fix: ConnectionLine.vue not recalculating properly
2021-10-20 22:39:54 +02:00
parent 560bdc203b
commit 1ff3a8dc9c
26 changed files with 359 additions and 1269 deletions
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { HTMLAttributes } from 'vue'
+import MiniMapNodeDepr from './MiniMapNodeDepr'
+import { getRectOfNodes, getBoundsofRects } from '~/utils/graph'
+import { Node, Rect, RevueFlowStore } from '~/types'
+
+type StringFunc = (node: Node) => string
+
+export interface MiniMapProps extends HTMLAttributes {
+  nodeColor?: string | StringFunc
+  nodeStrokeColor?: string | StringFunc
+  nodeClassName?: string | StringFunc
+  nodeBorderRadius?: number
+  nodeStrokeWidth?: number
+  maskColor?: string
+}
+
+const props = withDefaults(defineProps<MiniMapProps>(), {
+  nodeStrokeColor: '#555',
+  nodeColor: '#fff',
+  nodeClassName: '',
+  nodeBorderRadius: 5,
+  nodeStrokeWidth: 2,
+  maskColor: 'rgb(240, 242, 243, 0.7)',
+})
+const attrs: any = useAttrs()
+
+declare const window: any
+
+const defaultWidth = 200
+const defaultHeight = 150
+
+const store = inject<RevueFlowStore>('store')!
+const transform = computed(() => store.transform)
+const elementWidth = computed(() => (attrs.style?.width ?? defaultWidth)! as number)
+const elementHeight = computed(() => (attrs.style?.height ?? defaultHeight)! as number)
+const nodeColorFunc = computed(
+  () => (props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor) as StringFunc,
+)
+const nodeStrokeColorFunc = computed(
+  () => (props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor) as StringFunc,
+)
+const nodeClassNameFunc = computed(
+  () => (props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName) as StringFunc,
+)
+const hasNodes = computed(() => store.nodes && store.nodes.length)
+const bb = computed(() => getRectOfNodes(store.nodes))
+const viewBB = computed<Rect>(() => ({
+  x: -transform.value[0] / transform.value[2],
+  y: -transform.value[1] / transform.value[2],
+  width: store.width / transform.value[2],
+  height: store.height / transform.value[2],
+}))
+const boundingRect = computed(() => (hasNodes.value ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value))
+const scaledWidth = computed(() => boundingRect.value.width / elementWidth.value)
+const scaledHeight = computed(() => boundingRect.value.height / elementHeight.value)
+const viewScale = computed(() => Math.max(scaledWidth.value, scaledHeight.value))
+const viewWidth = computed(() => viewScale.value * elementWidth.value)
+const viewHeight = computed(() => viewScale.value * elementHeight.value)
+const offset = computed(() => 5 * viewScale.value)
+const x = computed(() => boundingRect.value.x - (viewWidth.value - boundingRect.value.width) / 2 - offset.value)
+const y = computed(() => boundingRect.value.y - (viewHeight.value - boundingRect.value.height) / 2 - offset.value)
+const width = computed(() => viewWidth.value + offset.value * 2)
+const height = computed(() => viewHeight.value + offset.value * 2)
+const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
+</script>
+<template>
+  <svg :width="elementWidth" :height="elementHeight" :viewBox="`${x} ${y} ${width} ${height}`" class="revue-flow__minimap">
+    <template v-for="(node, i) of store.nodes" :key="`mini-map-node-${i}`">
+      <MiniMapNodeDepr
+        v-if="!node.isHidden"
+        :x="node.__rf.position.x"
+        :y="node.__rf.position.y"
+        :width="node.__rf.width || 0"
+        :height="node.__rf.height || 0"
+        :style="node.style"
+        :class="nodeClassNameFunc(node)"
+        :color="nodeColorFunc(node)"
+        :border-radius="props.nodeBorderRadius"
+        :stroke-color="nodeStrokeColorFunc(node)"
+        :stroke-width="props.nodeStrokeWidth"
+        :shape-rendering="shapeRendering"
+      />
+    </template>
+    <path
+      class="revue-flow__minimap-mask"
+      :d="`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+      M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`"
+      :fill="props.maskColor"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
@@ -1,86 +0,0 @@
-import { computed, defineComponent, PropType } from 'vue'
-
-interface MiniMapNodeProps {
-  x: number
-  y: number
-  width: number
-  height: number
-  borderRadius: number
-  color: string
-  shapeRendering: string
-  strokeColor: string
-  strokeWidth: number
-}
-
-const MiniMapNode = defineComponent({
-  name: 'MiniMapNode',
-  props: {
-    x: {
-      type: Number as PropType<MiniMapNodeProps['x']>,
-      required: false,
-      default: undefined
-    },
-    y: {
-      type: Number as PropType<MiniMapNodeProps['y']>,
-      required: false,
-      default: undefined
-    },
-    width: {
-      type: Number as PropType<MiniMapNodeProps['width']>,
-      required: false,
-      default: undefined
-    },
-    height: {
-      type: Number as PropType<MiniMapNodeProps['height']>,
-      required: false,
-      default: undefined
-    },
-    borderRadius: {
-      type: Number as PropType<MiniMapNodeProps['borderRadius']>,
-      required: false,
-      default: undefined
-    },
-    color: {
-      type: String as PropType<MiniMapNodeProps['color']>,
-      required: false,
-      default: undefined
-    },
-    shapeRendering: {
-      type: String as PropType<MiniMapNodeProps['shapeRendering']>,
-      required: false,
-      default: undefined
-    },
-    strokeColor: {
-      type: String as PropType<MiniMapNodeProps['strokeColor']>,
-      required: false,
-      default: undefined
-    },
-    strokeWidth: {
-      type: Number as PropType<MiniMapNodeProps['strokeWidth']>,
-      required: false,
-      default: undefined
-    }
-  },
-  setup(props, { attrs }: { attrs: Record<string, any> }) {
-    const styles = attrs.style || {}
-    const fill = computed(() => (props.color || styles.value.background || styles.value.backgroundColor) as string)
-
-    return () => (
-      <rect
-        class="revue-flow__minimap-node"
-        x={props.x}
-        y={props.y}
-        rx={props.borderRadius}
-        ry={props.borderRadius}
-        width={props.width}
-        height={props.height}
-        fill={fill.value}
-        stroke={props.strokeColor}
-        stroke-width={props.strokeWidth}
-        shape-rendering={props.shapeRendering}
-      />
-    )
-  }
-})
-
-export default MiniMapNode
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { computed, CSSProperties } from 'vue'
+
+interface MiniMapNodeProps {
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  borderRadius?: number
+  color?: string
+  shapeRendering?: string
+  strokeColor?: string
+  strokeWidth?: number
+}
+const props = defineProps<MiniMapNodeProps>()
+const attrs = useAttrs()
+
+const styles = (attrs.style ?? {}) as CSSProperties
+const fill = computed(() => (props.color || styles.background || styles.backgroundColor) as string)
+</script>
+<template>
+  <rect
+    class="revue-flow__minimap-node"
+    :x="props.x"
+    :y="props.y"
+    :rx="props.borderRadius"
+    :ry="props.borderRadius"
+    :width="props.width"
+    :height="props.height"
+    :fill="fill"
+    :stroke="props.strokeColor"
+    :stroke-width="props.strokeWidth"
+    :shape-rendering="props.shapeRendering"
+  />
+</template>
@@ -1,130 +0,0 @@
-import { getRectOfNodes, getBoundsofRects } from '../../utils/graph'
-import { Node, Rect, RevueFlowStore } from '../../types'
-import MiniMapNode from './MiniMapNode'
-import { computed, defineComponent, HTMLAttributes, inject, PropType } from 'vue'
-
-type StringFunc = (node: Node) => string
-
-export interface MiniMapProps extends HTMLAttributes {
-  nodeColor?: string | StringFunc
-  nodeStrokeColor?: string | StringFunc
-  nodeClassName?: string | StringFunc
-  nodeBorderRadius?: number
-  nodeStrokeWidth?: number
-  maskColor?: string
-}
-
-declare const window: any
-
-const defaultWidth = 200
-const defaultHeight = 150
-
-const MiniMap = defineComponent({
-  name: 'MiniMap',
-  props: {
-    nodeStrokeColor: {
-      type: [String, Function] as PropType<MiniMapProps['nodeStrokeColor']>,
-      required: false,
-      default: '#555'
-    },
-    nodeColor: {
-      type: [String, Function] as PropType<MiniMapProps['nodeColor']>,
-      required: false,
-      default: '#fff'
-    },
-    nodeClassName: {
-      type: [String, Function] as PropType<MiniMapProps['nodeClassName']>,
-      required: false,
-      default: ''
-    },
-    nodeBorderRadius: {
-      type: Number as PropType<MiniMapProps['nodeBorderRadius']>,
-      required: false,
-      default: 5
-    },
-    nodeStrokeWidth: {
-      type: Number as PropType<MiniMapProps['nodeStrokeWidth']>,
-      required: false,
-      default: 2
-    },
-    maskColor: {
-      type: String as PropType<MiniMapProps['maskColor']>,
-      required: false,
-      default: 'rgb(240, 242, 243, 0.7)'
-    }
-  },
-  setup(props, { attrs }: { attrs: Record<string, any> }) {
-    const store = inject<RevueFlowStore>('store')!
-    const transform = computed(() => store.transform)
-    const elementWidth = computed(() => (attrs.style?.width || defaultWidth)! as number)
-    const elementHeight = computed(() => (attrs.style?.height || defaultHeight)! as number)
-    const nodeColorFunc = computed(
-      () => (props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor) as StringFunc
-    )
-    const nodeStrokeColorFunc = computed(
-      () => (props.nodeStrokeColor instanceof Function ? props.nodeStrokeColor : () => props.nodeStrokeColor) as StringFunc
-    )
-    const nodeClassNameFunc = computed(
-      () => (props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName) as StringFunc
-    )
-    const hasNodes = computed(() => store.nodes && store.nodes.length)
-    const bb = computed(() => getRectOfNodes(store.nodes))
-    const viewBB = computed<Rect>(() => ({
-      x: -transform.value[0] / transform.value[2],
-      y: -transform.value[1] / transform.value[2],
-      width: store.width / transform.value[2],
-      height: store.height / transform.value[2]
-    }))
-    const boundingRect = computed(() => (hasNodes.value ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value))
-    const scaledWidth = computed(() => boundingRect.value.width / elementWidth.value)
-    const scaledHeight = computed(() => boundingRect.value.height / elementHeight.value)
-    const viewScale = computed(() => Math.max(scaledWidth.value, scaledHeight.value))
-    const viewWidth = computed(() => viewScale.value * elementWidth.value)
-    const viewHeight = computed(() => viewScale.value * elementHeight.value)
-    const offset = computed(() => 5 * viewScale.value)
-    const x = computed(() => boundingRect.value.x - (viewWidth.value - boundingRect.value.width) / 2 - offset.value)
-    const y = computed(() => boundingRect.value.y - (viewHeight.value - boundingRect.value.height) / 2 - offset.value)
-    const width = computed(() => viewWidth.value + offset.value * 2)
-    const height = computed(() => viewHeight.value + offset.value * 2)
-    const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
-
-    return () => (
-      <svg
-        width={elementWidth.value}
-        height={elementHeight.value}
-        viewBox={`${x.value} ${y.value} ${width.value} ${height.value}`}
-        class="revue-flow__minimap"
-      >
-        {store.nodes
-          .filter((node) => !node.isHidden)
-          .map((node) => (
-            <MiniMapNode
-              key={node.id}
-              x={node.__rf.position.x}
-              y={node.__rf.position.y}
-              width={node.__rf.width || 0}
-              height={node.__rf.height || 0}
-              style={node.style}
-              class={nodeClassNameFunc.value(node)}
-              color={nodeColorFunc.value(node)}
-              borderRadius={props.nodeBorderRadius}
-              strokeColor={nodeStrokeColorFunc.value(node)}
-              strokeWidth={props.nodeStrokeWidth}
-              shapeRendering={shapeRendering}
-            />
-          ))}
-        <path
-          class="revue-flow__minimap-mask"
-          d={`M${x.value - offset.value},${y.value - offset.value}h${width.value + offset.value * 2}v${
-            height.value + offset.value * 2
-          }h${-width.value - offset.value * 2}z
-        M${viewBB.value.x},${viewBB.value.y}h${viewBB.value.width}v${viewBB.value.height}h${-viewBB.value.width}z`}
-          fill={props.maskColor}
-          fill-rule="evenodd"
-        />
-      </svg>
-    )
-  }
-})
-
-export default MiniMap