@antv/x6-vue3-shape
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    @antv/x6-vue3-shape

    x6 shape for rendering vue3 components

    Installation

    # npm
    $ npm install @antv/x6-vue3-shape --save
    
    # yarn
    $ yarn add @antv/x6-vue3-shape

    Usage

    useGraph

    import { shallowRef, ref, onMounted } from 'vue'
    import { Graph } from '@antv/x6'
    import '@antv/x6-vue3-shape'
    import Comp from './Comp'
    
    export default function useGraph() {
      const container = ref<HTMLElement | null>(null)
      const graph = shallowRef<Graph | null>()
      onMounted(() => {
        if (container.value) {
          graph.value = new Graph({
            container: container.value,
            panning: true,
          })
          graph.value.addNode({
            id: 'node1',
            x: 40,
            y: 40,
            width: 100,
            height: 40,
            shape: 'vue3-shape',
            // here are 4 ways usages:
            // 1. component: Comp
            // 2. component: <Comp />
            // 3. component: () => <Comp />
            // 4. component: 'text node'
            component: Comp,
          })
        }
      })
      return {
        container,
        graph,
      }
    }

    usage in tsx

    import { defineComponent } from 'vue'
    import useGraph from './useGraph'
    
    export default defineComponent({
      name: 'Home',
      setup() {
        const { container } = useGraph()
        return () => {
          return (
            <div class="home">
              <div class="home__container" ref={container}></div>
            </div>
          )
        }
      }
    })

    usage in vue sfc

    <template>
      <div ref="container">xxx</div>
    </template>
    
    <script lang="ts">
    import { defineComponent } from 'vue'
    import useGraph from './useGraph'
    
    export default defineComponent({
      name: 'app',
      setup() {
        const { container } = useGraph()
        return {
          container,
        }
      }
    })
    
    </script>

    Install

    npm i @antv/x6-vue3-shape

    DownloadsWeekly Downloads

    11

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    58.7 kB

    Total Files

    35

    Last publish

    Collaborators

    • zeyuwang
    • yanxiong
    • susiwen8
    • freestyle21
    • soundquiet
    • elaine.q.10
    • sturuby
    • lviser
    • sakuya223
    • serializedowen
    • xdzhao
    • yangzhanmei
    • wjgogogo
    • leungwensen
    • dori
    • iaaron
    • yard
    • simaq
    • dxq613
    • intchous
    • susan_ann
    • jinke.li
    • lzxue
    • army8735
    • atool
    • baizn
    • dengfuping
    • neoddish
    • jeffy2012
    • zqlu
    • afc163
    • pomelo-nwu
    • kopiluwaky
    • ccnuzindex
    • panyuqi
    • bubkoo
    • zengyue
    • kasmine
    • boyu.zlj
    • l1ud0ngq1
    • newbyvector
    • winniexing
    • chenluli
    • kn9117
    • xdddst
    • semious2020
    • esora
    • nadia_liu
    • bbsqq
    • mxz96102
    • openwayne
    • pearmini
    • pddpd
    • yiqianyao
    • zhanba
    • cxxxxxn