Comments (5)
@sanderjson I think would be better to support Custom Svelte Components no?
We can render with <svelte:component this={customComponent} ... />
from svelvet.
Yes, this is great. Breaking change for 4.0?
from svelvet.
Both html and svelte elements/components would make this infinitely more useful and awesome. I second this idea :-)
from svelvet.
If you're happy to use a hack until maintainers add it, you can modify node_modules
to get this working. Add the following two lines at /node_modules/svelvet/Containers/GraphView/index.svelte#L75
:
{#if node.image && !node.data.label}
<ImageNode {node} {key} />
+ {:else if node.data.html}
+ <Node {node} {key}>{@html node.data.html}</Node>
{:else}
<Node {node} {key}>{node.data.label}</Node>
Then use a html
property instead of the usual label
:
const nodes = [
{
id: 1,
width: 100,
height: 100,
position: { x: 0, y: 250 },
data: { html: `<p>This is <a href="https://html.com">HTML</a></p>` },
},
];
from svelvet.
This is great! I was previously using this code below. Great addition thank you 😀🎉
<div class={`Node Node-${key}`}>
{#each $nodesStore as node}
{#if node.image && !node.data.label}
<ImageNode {node} {key} />
{:else}
<Node {node} {key}>
{#if node.data.label_type == 'HTML'}
{@html node.data.label}
{:else}
{node.data.label}
{/if}
</Node>
{/if}
{/each}
</div>
from svelvet.
Related Issues (20)
- Questions regarding the future of this library HOT 3
- Docs with dynamic prop
- Multiple Anchors cause Edge path to always start at the Center of first Anchor
- Is it possible to prevent panning and generally interacting with the Svelvet canvas? HOT 1
- Styles are not applied inside a custom element
- Is it possible to just pass a hex string to the edgeColor prop?
- Click entire custom edge to destroy HOT 1
- how to add nodes and edges programatically HOT 1
- Basic example of new Edge syntax?
- Align snapTo based on Grid dots if grid and snapTo is the same size HOT 2
- Gradient edges based on anchor color HOT 1
- Parasitic on:connection events are firing when connections created programatically (not manually) through Anchors' props HOT 1
- Is there any way to avoid drawer and minimap getting in the bundle?
- Add setting for key shortcut only for moving viewport, without draging nodes HOT 1
- Compatability with Astro
- Custom Input Type
- Subgroup Support?
- Right click menu is buggy
- Tip for svelte components to add Intelliense hover hint for params.
- Importing and Exporting Diagrams HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelvet.