fix(svelte): pass dragHandle #3398
This commit is contained in:
@@ -15,12 +15,14 @@
|
|||||||
} from '@xyflow/svelte';
|
} from '@xyflow/svelte';
|
||||||
|
|
||||||
import CustomNode from './CustomNode.svelte';
|
import CustomNode from './CustomNode.svelte';
|
||||||
|
import CustomNodeDragHandle from './CustomNodeDragHandle.svelte';
|
||||||
import CustomEdge from './CustomEdge.svelte';
|
import CustomEdge from './CustomEdge.svelte';
|
||||||
|
|
||||||
import '@xyflow/svelte/dist/style.css';
|
import '@xyflow/svelte/dist/style.css';
|
||||||
|
|
||||||
const nodeTypes: NodeTypes = {
|
const nodeTypes: NodeTypes = {
|
||||||
custom: CustomNode
|
custom: CustomNode,
|
||||||
|
dragHandle: CustomNodeDragHandle
|
||||||
};
|
};
|
||||||
|
|
||||||
const edgeTypes: EdgeTypes = {
|
const edgeTypes: EdgeTypes = {
|
||||||
@@ -68,6 +70,13 @@
|
|||||||
style: 'border: 2px solid #ff5050;',
|
style: 'border: 2px solid #ff5050;',
|
||||||
position: { x: 450, y: 150 }
|
position: { x: 450, y: 150 }
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'C',
|
||||||
|
type: 'dragHandle',
|
||||||
|
data: { label: 'custom drag handle' },
|
||||||
|
dragHandle: '.custom-drag-handle',
|
||||||
|
position: { x: 450, y: 250 }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: '4',
|
id: '4',
|
||||||
type: 'custom',
|
type: 'custom',
|
||||||
|
|||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { NodeProps } from '@xyflow/svelte';
|
||||||
|
|
||||||
|
type $$Props = NodeProps;
|
||||||
|
|
||||||
|
export let data: { label: string } = { label: 'Node' };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="custom">
|
||||||
|
<div>{data.label}</div>
|
||||||
|
<div class="custom-drag-handle" style="width:15px;height:15px;background:#222;" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.custom {
|
||||||
|
background: white;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -95,7 +95,7 @@
|
|||||||
nodeId: id,
|
nodeId: id,
|
||||||
isSelectable: selectable,
|
isSelectable: selectable,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
handleSelector: undefined,
|
handleSelector: dragHandle,
|
||||||
noDragClassName: 'nodrag',
|
noDragClassName: 'nodrag',
|
||||||
store
|
store
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user