smallshen / x6-svelte-shape Goto Github PK

Is it possible to somehow inherit x6' basic shapes like Rect when registry has to mark inheritance as "svelte-shape" in order for this to work?

I can't figure out how to do that. I'm using x6 with ELK as per example on https://x6.antv.vision/en/examples/showcase/practices#elk.

ELK computes the layout and dimensions of nodes which I need to pass to shapes. Basic shapes has this implemented already so I'd prefer inheriting it.

@smallshen have you tested this in safari?

We noticed today that although the x6 nodes seem to be in the correct location, have correct sizing, and edges are routed correctly, the actual svelte components are all rendered at (0,0). Not sure if it's the implementation of x6-svelte-shape or something we've done wrong

@smallshen great work, just used this pattern on a project we are working on.

Adding it to the main repo of x6 would be awesome: https://github.com/antvis/X6/tree/master/packages

lloydzhou/x6-html-shape#7

1. using x6-html-shape
2. add helper function createRender

import { Graph, Cell } from "@antv/x6";
import type { SvelteComponentTyped } from "svelte"

export default function createRender(Component: SvelteComponentTyped) {
  return function render(node: Cell, graph: Graph, container: HTMLElement) {
    const component = new Component({
      target: container,
      props: {
        node,
        graph,
      }
    })
    return () => component.$destroy()
  }
}

4. register svelte node

import { register } from 'x6-html-shape'
import SvslteNode from './node.svelte'

const render = createRender(Component)

register({
  shape: 'custom-svelte-node',
  render,
  width: 100,
  height: 40,
})