mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 10:42:44 +00:00
add interfaces for bounds mutations
This commit is contained in:
@@ -19,6 +19,7 @@ import type {
|
|||||||
LayoutOperation,
|
LayoutOperation,
|
||||||
MoveNodeOperation,
|
MoveNodeOperation,
|
||||||
MoveRerouteOperation,
|
MoveRerouteOperation,
|
||||||
|
NodeBoundsUpdate,
|
||||||
ResizeNodeOperation,
|
ResizeNodeOperation,
|
||||||
SetNodeZIndexOperation
|
SetNodeZIndexOperation
|
||||||
} from '@/renderer/core/layout/types'
|
} from '@/renderer/core/layout/types'
|
||||||
@@ -1429,9 +1430,7 @@ class LayoutStoreImpl implements LayoutStore {
|
|||||||
/**
|
/**
|
||||||
* Batch update node bounds using Yjs transaction for atomicity.
|
* Batch update node bounds using Yjs transaction for atomicity.
|
||||||
*/
|
*/
|
||||||
batchUpdateNodeBounds(
|
batchUpdateNodeBounds(updates: NodeBoundsUpdate[]): void {
|
||||||
updates: Array<{ nodeId: NodeId; bounds: Bounds }>
|
|
||||||
): void {
|
|
||||||
if (updates.length === 0) return
|
if (updates.length === 0) return
|
||||||
|
|
||||||
// Set source to Vue for these DOM-driven updates
|
// Set source to Vue for these DOM-driven updates
|
||||||
|
|||||||
@@ -31,6 +31,11 @@ export interface Bounds {
|
|||||||
height: number
|
height: number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface NodeBoundsUpdate {
|
||||||
|
nodeId: NodeId
|
||||||
|
bounds: Bounds
|
||||||
|
}
|
||||||
|
|
||||||
export type NodeId = string
|
export type NodeId = string
|
||||||
export type LinkId = number
|
export type LinkId = number
|
||||||
export type RerouteId = number
|
export type RerouteId = number
|
||||||
|
|||||||
@@ -10,9 +10,20 @@
|
|||||||
*/
|
*/
|
||||||
import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
|
import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
|
||||||
|
|
||||||
|
import { LiteGraph } from '@/lib/litegraph/src/litegraph'
|
||||||
import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
|
import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
|
||||||
import type { Bounds, NodeId } from '@/renderer/core/layout/types'
|
import type { Bounds, NodeId } from '@/renderer/core/layout/types'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generic update item for element bounds tracking
|
||||||
|
*/
|
||||||
|
interface ElementBoundsUpdate {
|
||||||
|
/** Element identifier (could be nodeId, widgetId, slotId, etc.) */
|
||||||
|
id: string
|
||||||
|
/** Updated bounds */
|
||||||
|
bounds: Bounds
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Configuration for different types of tracked elements
|
* Configuration for different types of tracked elements
|
||||||
*/
|
*/
|
||||||
@@ -20,7 +31,7 @@ interface ElementTrackingConfig {
|
|||||||
/** Data attribute name (e.g., 'nodeId') */
|
/** Data attribute name (e.g., 'nodeId') */
|
||||||
dataAttribute: string
|
dataAttribute: string
|
||||||
/** Handler for processing bounds updates */
|
/** Handler for processing bounds updates */
|
||||||
updateHandler: (updates: Array<{ id: string; bounds: Bounds }>) => void
|
updateHandler: (updates: ElementBoundsUpdate[]) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -45,7 +56,7 @@ const trackingConfigs: Map<string, ElementTrackingConfig> = new Map([
|
|||||||
// Single ResizeObserver instance for all Vue elements
|
// Single ResizeObserver instance for all Vue elements
|
||||||
const resizeObserver = new ResizeObserver((entries) => {
|
const resizeObserver = new ResizeObserver((entries) => {
|
||||||
// Group updates by element type
|
// Group updates by element type
|
||||||
const updatesByType = new Map<string, Array<{ id: string; bounds: Bounds }>>()
|
const updatesByType = new Map<string, ElementBoundsUpdate[]>()
|
||||||
|
|
||||||
for (const entry of entries) {
|
for (const entry of entries) {
|
||||||
if (!(entry.target instanceof HTMLElement)) continue
|
if (!(entry.target instanceof HTMLElement)) continue
|
||||||
@@ -73,7 +84,7 @@ const resizeObserver = new ResizeObserver((entries) => {
|
|||||||
x: rect.left,
|
x: rect.left,
|
||||||
y: rect.top,
|
y: rect.top,
|
||||||
width,
|
width,
|
||||||
height: height-LiteGraph.NODE_TITLE_HEIGHT
|
height: height - LiteGraph.NODE_TITLE_HEIGHT
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!updatesByType.has(elementType)) {
|
if (!updatesByType.has(elementType)) {
|
||||||
|
|||||||
Reference in New Issue
Block a user