chore: update README

2022-10-10 21:33:44 +02:00
parent e2924918a2
commit d7b956dd2a
1 changed files with 2 additions and 83 deletions
@@ -1,84 +1,3 @@
-# Vue Flow Resizable Rotatable Node
+# Vue Flow Additional Components
-### Custom Node that can be resized and rotated
+This package contains additional components like `Background`, `Controls` & `MiniMap`.
 ## 🛠 Setup
 ```bash
 # install
 $ yarn add @vue-flow/core-resize-rotate-node
 # or
 $ npm i --save @vue-flow/core-resize-rotate-node
 ```
 ## 🎮 Quickstart
 ```vue
 <script setup>
 import { VueFlow } from '@vue-flow/core'
 import { ResizeRotateNode } from '@vue-flow/core-resize-rotate-node'
 import initialElements from './initial-elements'
 const elements = ref(initialElements)
 </script>
 <template>
  <div style="height: 300px">
    <VueFlow v-model="elements">
      <template #node-resize-rotate="props">
        <ResizeRotateNode v-bind="props" />
      </template>
    </VueFlow>
  </div>
 </template>
 ```
 ```js
 // initial-elements.js
 export default [
  {
    id: '1',
    label: 'Node 1',
    type: 'resize-rotate',
    targetPosition: 'left',
    sourcePosition: 'right',
    position: {
      x: 0,
      y: 0,
    },
    data: {
      // additional styles for the node
      // cannot use the regular style tag as those apply to the node wrapper
      style: {
        background: 'rgb(255, 0, 114) none repeat scroll 0% 0%',
        padding: '20px',
        borderRadius: '20px',
      },
    },
  },
  {
    id: '2',
    label: 'Node 2',
    type: 'resize-rotate',
    targetPosition: 'left',
    position: {
      x: 330,
      y: 50,
    },
    data: {
      style: {
        background: 'rgb(50, 188, 188) none repeat scroll 0% 0%',
        padding: '20px',
        borderRadius: '20px',
      },
    },
  },
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'smoothstep',
  },
 ]
 ```