diff --git a/packages/additional-components/src/minimap/MiniMap.vue b/packages/additional-components/src/minimap/MiniMap.vue index 530bb9e3..eb00240c 100644 --- a/packages/additional-components/src/minimap/MiniMap.vue +++ b/packages/additional-components/src/minimap/MiniMap.vue @@ -34,6 +34,15 @@ const { id, edges, viewport, dimensions, emits, getNodes, d3Selection, d3Zoom } const el = ref() +const slots = useSlots() + +const hasSlot = (type: string) => { + const slotType = slots[type] + + console.log(slotType && slotType().length > 0) + return !!(slotType && slotType().length > 0) +} + const elementWidth = computed(() => width ?? attrs.style?.width ?? defaultWidth) const elementHeight = computed(() => height ?? attrs.style?.height ?? defaultHeight) @@ -196,6 +205,7 @@ export default { @click="onSvgClick" > Vue Flow mini map {{ id }} + + = function ( - { - position: { x, y }, - dimensions: { height, width }, - strokeWidth, - strokeColor, - borderRadius, - color, - shapeRendering = 'geometricPrecision', +export default defineComponent({ + name: 'MiniMapNode', + props: ['id', 'position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering'], + emits: ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave'], + setup(props: MiniMapNodeProps, { attrs, emit, slots }) { + const style = (attrs.style ?? {}) as CSSProperties + + return () => [ + h('rect', { + id: props.id, + class: ['vue-flow__minimap-node', attrs.class].join(' '), + style, + x: props.position.x, + y: props.position.y, + rx: props.borderRadius, + ry: props.borderRadius, + width: props.dimensions.width, + height: props.dimensions.height, + fill: props.color || (style.background as string) || style.backgroundColor, + stroke: props.strokeColor, + strokeWidth: props.strokeWidth, + shapeRendering: props.shapeRendering, + onClick: (e: MouseEvent) => emit('click', e), + onDblClick: (e: MouseEvent) => emit('dblclick', e), + onMouseenter: (e: MouseEvent) => emit('mouseenter', e), + onMousemove: (e: MouseEvent) => emit('mousemove', e), + onMouseleave: (e: MouseEvent) => emit('mouseleave', e), + }), + slots?.default?.(), + ] }, - { attrs, emit, slots }, -) { - const style = (attrs.style ?? {}) as CSSProperties - - return [ - h('rect', { - class: ['vue-flow__minimap-node', attrs.class].join(' '), - style, - x, - y, - rx: borderRadius, - ry: borderRadius, - width, - height, - fill: color || (style.background as string) || style.backgroundColor, - stroke: strokeColor, - strokeWidth, - shapeRendering, - onClick: (e: MouseEvent) => emit('click', e), - onDblClick: (e: MouseEvent) => emit('dblclick', e), - onMouseenter: (e: MouseEvent) => emit('mouseenter', e), - onMousemove: (e: MouseEvent) => emit('mousemove', e), - onMouseleave: (e: MouseEvent) => emit('mouseleave', e), - }), - slots?.default?.(), - ] -} - -MiniMapNode.props = ['position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering'] - -MiniMapNode.emits = ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave'] - -export default MiniMapNode +})