From 636eeff9fe752c79cf987ff70bb3ca7e5bf151be Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Oct 2021 15:29:17 +0200
Subject: [PATCH] feat: use v-html for node labels

* add span tag as wrapper for node labels

feat(examples):

* Add overview example
---
 .../NodeTypeChange/NodeTypeChangeExample.vue  |  45 +++++
 examples/Overview/Overview.vue                | 172 ++++++++++++++++++
 examples/router.ts                            |  10 +-
 src/components/Edges/EdgeText.vue             |   2 +-
 src/components/Nodes/DefaultNode.vue          |   4 +-
 src/components/Nodes/InputNode.vue            |   4 +-
 src/components/Nodes/OutputNode.vue           |   4 +-
 src/composables/useKeyPress.ts                |   1 +
 8 files changed, 231 insertions(+), 11 deletions(-)
 create mode 100644 examples/NodeTypeChange/NodeTypeChangeExample.vue
 create mode 100644 examples/Overview/Overview.vue

diff --git a/examples/NodeTypeChange/NodeTypeChangeExample.vue b/examples/NodeTypeChange/NodeTypeChangeExample.vue
new file mode 100644
index 00000000..da2f933e
--- /dev/null
+++ b/examples/NodeTypeChange/NodeTypeChangeExample.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import Flow, { addEdge, Connection, Elements, OnLoadParams, Position, Edge, isEdge } from '~/index'
+
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView()
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    sourcePosition: Position.Right,
+    type: 'input',
+    data: { label: 'Input' },
+    position: { x: 0, y: 80 },
+  },
+  {
+    id: '2',
+    type: 'output',
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    data: { label: 'A Node' },
+    position: { x: 250, y: 0 },
+  },
+  { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
+] as Elements
+
+const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 }
+
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const changeType = () => {
+  elements.value = elements.value.map((el) => {
+    if (isEdge(el) || el.type === 'input') return el
+
+    return {
+      ...el,
+      type: el.type === 'default' ? 'output' : 'default',
+    }
+  })
+}
+</script>
+<template>
+  <Flow :elements="elements" @connect="onConnect" @load="onLoad">
+    <button :style="buttonStyle" @click="changeType">change type</button>
+  </Flow>
+</template>
diff --git a/examples/Overview/Overview.vue b/examples/Overview/Overview.vue
new file mode 100644
index 00000000..209bfb7e
--- /dev/null
+++ b/examples/Overview/Overview.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import Flow, {
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  isNode,
+  Node,
+  Elements,
+  FlowElement,
+  OnLoadParams,
+  FlowTransform,
+  SnapGrid,
+  ArrowHeadType,
+  Connection,
+  Edge,
+} from '~/index'
+
+const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node)
+const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node)
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
+const onNodeDoubleClick = (_: MouseEvent, node: Node) => console.log('node double click', node)
+const onPaneClick = (event: MouseEvent) => console.log('pane click', event)
+const onPaneScroll = (event?: MouseEvent) => console.log('pane scroll', event)
+const onPaneContextMenu = (event: MouseEvent) => console.log('pane context menu', event)
+const onSelectionDrag = (_: MouseEvent, nodes: Node[]) => console.log('selection drag', nodes)
+const onSelectionDragStart = (_: MouseEvent, nodes: Node[]) => console.log('selection drag start', nodes)
+const onSelectionDragStop = (_: MouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes)
+const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
+  event.preventDefault()
+  console.log('selection context menu', nodes)
+}
+const onElementClick = (_: MouseEvent, element: FlowElement) =>
+  console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element)
+const onSelectionChange = (elements: Elements | null) => console.log('selection change', elements)
+const onLoad = (reactFlowInstance: OnLoadParams) => {
+  console.log('flow loaded:', reactFlowInstance)
+  reactFlowInstance.fitView()
+}
+
+const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform)
+const onEdgeContextMenu = (_: MouseEvent, edge: Edge) => console.log('edge context menu', edge)
+const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('edge mouse enter', edge)
+const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('edge mouse move', edge)
+const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('edge mouse leave', edge)
+const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('edge double click', edge)
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: 'Welcome to <strong>Vue Flow!</strong>',
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: 'This is a <strong>default node</strong>',
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: {
+      label: 'This one has a <strong>custom style</strong>',
+    },
+    position: { x: 400, y: 100 },
+    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
+  },
+  {
+    id: '4',
+    position: { x: 250, y: 200 },
+    data: {
+      label: `You can find the docs on
+          <a href="https://github.com/bcakmakoglu/vue-flow" target="_blank" rel="noopener noreferrer">
+            Github
+          </a>`,
+    },
+  },
+  {
+    id: '5',
+    data: {
+      label: 'Or check out the other <strong>examples</strong>',
+    },
+    position: { x: 250, y: 325 },
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: {
+      label: 'An <strong>output node</strong>',
+    },
+    position: { x: 100, y: 480 },
+  },
+  { id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } },
+  { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
+  { id: 'e4-5', source: '4', target: '5', arrowHeadType: ArrowHeadType.Arrow, label: 'edge with arrow head' },
+  { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    type: 'step',
+    style: { stroke: '#f6ab6c' },
+    label: 'a step edge',
+    animated: true,
+    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
+  },
+] as Elements
+
+const connectionLineStyle: CSSProperties = { stroke: '#ddd' }
+const snapGrid: SnapGrid = [16, 16]
+
+const nodeStrokeColor = (n: Node): string => {
+  if (n.style?.background) return n.style.background as string
+  if (n.type === 'input') return '#0041d0'
+  if (n.type === 'output') return '#ff0072'
+  if (n.type === 'default') return '#1a192b'
+
+  return '#eee'
+}
+
+const nodeColor = (n: Node): string => {
+  if (n.style?.background) return n.style.background as string
+
+  return '#fff'
+}
+
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :connection-line-style="connectionLineStyle"
+    :snap-to-grid="true"
+    :snap-grid="snapGrid"
+    @element-click="onElementClick"
+    @elements-remove="onElementsRemove"
+    @eonnect="onConnect"
+    @pane-click="onPaneClick"
+    @pane-scroll="onPaneScroll"
+    @pane-contex-menu="onPaneContextMenu"
+    @node-drag-start="onNodeDragStart"
+    @node-drag="onNodeDrag"
+    @node-drag-stop="onNodeDragStop"
+    @node-double-click="onNodeDoubleClick"
+    @selection-drag-start="onSelectionDragStart"
+    @selection-drag="onSelectionDrag"
+    @selection-drag-stop="onSelectionDragStop"
+    @selection-context-menu="onSelectionContextMenu"
+    @selection-change="onSelectionChange"
+    @move-end="onMoveEnd"
+    @load="onLoad"
+    @edge-context-menu="onEdgeContextMenu"
+    @edge-mouse-enter="onEdgeMouseEnter"
+    @edge-mouse-move="onEdgeMouseMove"
+    @edge-mouse-leave="onEdgeMouseLeave"
+    @edge-double-click="onEdgeDoubleClick"
+  >
+    <MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
+    <Controls />
+    <Background color="#aaa" gap="20" />
+  </Flow>
+</template>
diff --git a/examples/router.ts b/examples/router.ts
index b0322df8..5b1aa6f0 100644
--- a/examples/router.ts
+++ b/examples/router.ts
@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory, RouterOptions } from 'vue-router'
 export const routes: RouterOptions['routes'] = [
   {
     path: '/',
-    redirect: '/basic',
+    redirect: '/overview',
   },
   {
     path: '/basic',
@@ -53,6 +53,14 @@ export const routes: RouterOptions['routes'] = [
     path: '/multi-flows',
     component: () => import('./MultiFlows/MultiFlowsExample.vue'),
   },
+  {
+    path: '/node-type-change',
+    component: () => import('./NodeTypeChange/NodeTypeChangeExample.vue'),
+  },
+  {
+    path: '/overview',
+    component: () => import('./Overview/Overview.vue'),
+  },
 ]
 
 export const router = createRouter({
diff --git a/src/components/Edges/EdgeText.vue b/src/components/Edges/EdgeText.vue
index 7a9ed4ae..6a6b254b 100644
--- a/src/components/Edges/EdgeText.vue
+++ b/src/components/Edges/EdgeText.vue
@@ -48,7 +48,7 @@ const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
         v-if="typeof props.label.component !== 'undefined'"
         v-bind="{ ...props, ...props.label.props, width, height, x, y }"
       />
-      <template v-else>
+      <template v-else v-html="props.label">
         {{ props.label }}
       </template>
     </text>
diff --git a/src/components/Nodes/DefaultNode.vue b/src/components/Nodes/DefaultNode.vue
index b37d78af..581c2d42 100644
--- a/src/components/Nodes/DefaultNode.vue
+++ b/src/components/Nodes/DefaultNode.vue
@@ -19,8 +19,6 @@ const props = withDefaults(defineProps<DefaultNodeProps>(), {
 <template>
   <Handle type="target" :position="props.targetPosition" :is-connectable="props.connectable" />
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-  <template v-else>
-    {{ props.data?.label }}
-  </template>
+  <span v-else v-html="props.data?.label"></span>
   <Handle type="source" :position="props.sourcePosition" :is-connectable="props.connectable" />
 </template>
diff --git a/src/components/Nodes/InputNode.vue b/src/components/Nodes/InputNode.vue
index 307ce45f..fc81b9f8 100644
--- a/src/components/Nodes/InputNode.vue
+++ b/src/components/Nodes/InputNode.vue
@@ -16,8 +16,6 @@ const props = withDefaults(defineProps<InputNodeProps>(), {
 </script>
 <template>
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-  <template v-else>
-    {{ props.data?.label }}
-  </template>
+  <span v-else v-html="props.data?.label"></span>
   <Handle type="source" :position="props.sourcePosition" :connectable="props.connectable" />
 </template>
diff --git a/src/components/Nodes/OutputNode.vue b/src/components/Nodes/OutputNode.vue
index 5f9434db..ac6ff154 100644
--- a/src/components/Nodes/OutputNode.vue
+++ b/src/components/Nodes/OutputNode.vue
@@ -16,8 +16,6 @@ const props = withDefaults(defineProps<OutputNodeProps>(), {
 </script>
 <template>
   <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-  <template v-else>
-    {{ props.data?.label }}
-  </template>
+  <span v-else v-html="props.data?.label"></span>
   <Handle type="source" :position="props.targetPosition" :is-connectable="props.connectable" />
 </template>
diff --git a/src/composables/useKeyPress.ts b/src/composables/useKeyPress.ts
index 16c697b5..6ad2f075 100644
--- a/src/composables/useKeyPress.ts
+++ b/src/composables/useKeyPress.ts
@@ -2,6 +2,7 @@ import { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
 import { KeyCode } from '~/types'
 
+// todo cancel keypress for input dom nodes
 export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
   const isPressed = controlledRef<boolean>(false, {
     onBeforeChange(val, oldVal) {