https://github.com/smallshen/x6-svelte-shape

https://github.com/smallshen/x6-svelte-shape

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/smallshen/x6-svelte-shape
• Owner: smallshen
• Created: 2023-03-16T03:20:19.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-16T21:51:08.000Z (almost 2 years ago)
• Last Synced: 2024-07-31T07:15:47.773Z (7 months ago)
• Language: TypeScript
• Size: 5.86 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: ReadMe.MD

Awesome Lists containing this project

• awesome-x6 - x6-svelte-shape - antv x6 svelte shape (Frameworks / Svelte Component)

README

        
# X6-Svelte-Shape

Svelte Shape registry for x6 graph library

# Example

> register

```typescript

register({

    shape: "player-node",

    component: PlayerNode,

    attrs: ...,

})

 ```

> BaseNode.svelte

```svelte

    export let width: number

    export let height: number



    



    div {

        display: flex;

        flex-direction: row;

        gap: 10px;

        padding: 10px 20px;

        background-color: var(--gray2);

        border: 1px solid var(--gray8);

        border-radius: 12px;

        width: fit-content;

        height: fit-content;

    }

    div :global(h1) {

        font-size: 1.5em;

    }

```

> PlayerNode.svelte

```svelte

    import { nodeDataStore } from "../stores"

    import type { Node } from "@antv/x6"

    import BaseNode from "./BaseNode.svelte"

    export let node: Node

    export let width: number

    export let height: number

    $: node.attr("movable", false)

    $: data = nodeDataStore(node)

 {}}>

    

        

    

    
Player


```