Feat(nodes): add initialWidth and initialHeight (#3953)
* feat(react/svelte): add initialWidth/initialHeight closes #3793 * chore(packages): update changelogs
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
|
||||
|
||||
type $$Props = NodeProps;
|
||||
|
||||
let text = 'some default text';
|
||||
</script>
|
||||
|
||||
<Handle type="target" position={Position.Left} />
|
||||
<div class="custom">
|
||||
<div>
|
||||
text: {text}
|
||||
</div>
|
||||
<input type="text" bind:value={text} />
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} />
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
border: 1px solid #777;
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
import { SvelteFlow, Controls, Background, BackgroundVariant, type Node, type Edge } from '@xyflow/svelte';
|
||||
|
||||
import '@xyflow/svelte/dist/style.css';
|
||||
import CustomNode from './CustomNode.svelte';
|
||||
|
||||
const nodes = writable<Node[]>([
|
||||
{
|
||||
id: '1',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {},
|
||||
initialWidth: 100,
|
||||
initialHeight: 40,
|
||||
type: 'input-node',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
position: { x: 0, y: 150 },
|
||||
data: {},
|
||||
initialWidth: 100,
|
||||
initialHeight: 40,
|
||||
type: 'input-node',
|
||||
},
|
||||
]);
|
||||
|
||||
const edges = writable<Edge[]>([{ id: '1-2', source: '1', target: '2' }]);
|
||||
|
||||
const nodeTypes = {
|
||||
'input-node': CustomNode,
|
||||
};
|
||||
</script>
|
||||
|
||||
<div style="height: 400px; width: 700px;">
|
||||
<SvelteFlow {nodes} {edges} {nodeTypes} fitView width={700} height={400}>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
</SvelteFlow>
|
||||
</div>
|
||||
Reference in New Issue
Block a user