fix(svelte): pass dragHandle #3398
This commit is contained in:
@@ -15,12 +15,14 @@
|
||||
} from '@xyflow/svelte';
|
||||
|
||||
import CustomNode from './CustomNode.svelte';
|
||||
import CustomNodeDragHandle from './CustomNodeDragHandle.svelte';
|
||||
import CustomEdge from './CustomEdge.svelte';
|
||||
|
||||
import '@xyflow/svelte/dist/style.css';
|
||||
|
||||
const nodeTypes: NodeTypes = {
|
||||
custom: CustomNode
|
||||
custom: CustomNode,
|
||||
dragHandle: CustomNodeDragHandle
|
||||
};
|
||||
|
||||
const edgeTypes: EdgeTypes = {
|
||||
@@ -68,6 +70,13 @@
|
||||
style: 'border: 2px solid #ff5050;',
|
||||
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',
|
||||
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,
|
||||
isSelectable: selectable,
|
||||
disabled: false,
|
||||
handleSelector: undefined,
|
||||
handleSelector: dragHandle,
|
||||
noDragClassName: 'nodrag',
|
||||
store
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user