element has child elements that allow for mouse events, so we need to disable the linter rule */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n
{sceneDiv}
\n \n \n );\n};\n","import { MoveableManagerInterface, Renderer } from 'moveable';\n\nimport { HorizontalConstraint, VerticalConstraint } from '../types';\n\nimport { Scene } from './scene';\n\nexport const settingsViewable = (scene: Scene) => ({\n name: 'settingsViewable',\n props: [],\n events: [],\n render(moveable: MoveableManagerInterface
, React: Renderer) {\n // If selection is more than 1 element don't display settings button\n if (scene.selecto?.getSelectedTargets() && scene.selecto?.getSelectedTargets().length > 1) {\n return;\n }\n\n const openSettings = (x: number, y: number) => {\n const container = moveable.getContainer();\n const evt = new PointerEvent('contextmenu', { clientX: x, clientY: y });\n container.dispatchEvent(evt);\n };\n\n const onClick = (event: React.MouseEvent) => {\n openSettings(event.clientX, event.clientY);\n };\n\n const onKeyPress = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n const rect = event.currentTarget.getBoundingClientRect();\n openSettings(rect.x, rect.y);\n }\n };\n\n const rect = moveable.getRect();\n return (\n \n {``}\n ⚙️\n {``}\n
\n );\n },\n});\n\nexport const dimensionViewable = {\n name: 'dimensionViewable',\n props: [],\n events: [],\n render(moveable: MoveableManagerInterface, React: Renderer) {\n const rect = moveable.getRect();\n return (\n \n {Math.round(rect.offsetWidth)} x {Math.round(rect.offsetHeight)}\n
\n );\n },\n};\n\nexport const constraintViewable = (scene: Scene) => ({\n name: 'constraintViewable',\n props: [],\n events: [],\n render(moveable: MoveableManagerInterface, React: Renderer) {\n const rect = moveable.getRect();\n const targetElement = scene.findElementByTarget(moveable.state.target!);\n\n // If selection is more than 1 element don't display constraint visualizations\n if (scene.selecto?.getSelectedTargets() && scene.selecto?.getSelectedTargets().length > 1) {\n return;\n }\n\n let verticalConstraintVisualization = null;\n let horizontalConstraintVisualization = null;\n\n const constraint = targetElement?.tempConstraint ?? targetElement?.options.constraint ?? {};\n\n const borderStyle = '1px dashed #4af';\n\n const centerIndicatorLineOne = React.createElement('div', {\n style: {\n position: 'absolute',\n left: `${rect.width / 2}px`,\n top: `${rect.height / 2 - rect.height / 16}px`,\n borderLeft: borderStyle,\n height: `${rect.height / 8}px`,\n transform: 'rotate(45deg)',\n },\n });\n\n const centerIndicatorLineTwo = React.createElement('div', {\n style: {\n position: 'absolute',\n left: `${rect.width / 2}px`,\n top: `${rect.height / 2 - rect.height / 16}px`,\n borderLeft: borderStyle,\n height: `${rect.height / 8}px`,\n transform: 'rotate(-45deg)',\n },\n });\n\n const centerIndicator = React.createElement('div', {}, [centerIndicatorLineOne, centerIndicatorLineTwo]);\n\n const verticalConstraintTop = React.createElement('div', {\n style: {\n position: 'absolute',\n left: `${rect.width / 2}px`,\n bottom: '0px',\n borderLeft: borderStyle,\n height: '100vh',\n },\n });\n\n const verticalConstraintBottom = React.createElement('div', {\n style: {\n position: 'absolute',\n left: `${rect.width / 2}px`,\n top: `${rect.height}px`,\n borderLeft: borderStyle,\n height: '100vh',\n },\n });\n\n const verticalConstraintTopBottom = React.createElement('div', {}, [\n verticalConstraintTop,\n verticalConstraintBottom,\n ]);\n\n const verticalConstraintCenterLine = React.createElement('div', {\n style: {\n position: 'absolute',\n left: `${rect.width / 2}px`,\n top: `${rect.height / 4}px`,\n borderLeft: borderStyle,\n height: `${rect.height / 2}px`,\n },\n });\n\n const verticalConstraintCenter = React.createElement('div', {}, [verticalConstraintCenterLine, centerIndicator]);\n\n switch (constraint.vertical) {\n case VerticalConstraint.Top:\n verticalConstraintVisualization = verticalConstraintTop;\n break;\n case VerticalConstraint.Bottom:\n verticalConstraintVisualization = verticalConstraintBottom;\n break;\n case VerticalConstraint.TopBottom:\n verticalConstraintVisualization = verticalConstraintTopBottom;\n break;\n case VerticalConstraint.Center:\n verticalConstraintVisualization = verticalConstraintCenter;\n break;\n }\n\n const horizontalConstraintLeft = React.createElement('div', {\n style: {\n position: 'absolute',\n right: '0px',\n top: `${rect.height / 2}px`,\n borderTop: borderStyle,\n width: '100vw',\n },\n });\n\n const horizontalConstraintRight = React.createElement('div', {\n style: {\n position: 'absolute',\n left: `${rect.width}px`,\n top: `${rect.height / 2}px`,\n borderTop: borderStyle,\n width: '100vw',\n },\n });\n\n const horizontalConstraintLeftRight = React.createElement('div', {}, [\n horizontalConstraintLeft,\n horizontalConstraintRight,\n ]);\n\n const horizontalConstraintCenterLine = React.createElement('div', {\n style: {\n position: 'absolute',\n left: `${rect.width / 4}px`,\n top: `${rect.height / 2}px`,\n borderTop: borderStyle,\n width: `${rect.width / 2}px`,\n },\n });\n\n const horizontalConstraintCenter = React.createElement('div', {}, [\n horizontalConstraintCenterLine,\n centerIndicator,\n ]);\n\n switch (constraint.horizontal) {\n case HorizontalConstraint.Left:\n horizontalConstraintVisualization = horizontalConstraintLeft;\n break;\n case HorizontalConstraint.Right:\n horizontalConstraintVisualization = horizontalConstraintRight;\n break;\n case HorizontalConstraint.LeftRight:\n horizontalConstraintVisualization = horizontalConstraintLeftRight;\n break;\n case HorizontalConstraint.Center:\n horizontalConstraintVisualization = horizontalConstraintCenter;\n break;\n }\n\n const constraintVisualization = React.createElement('div', {}, [\n verticalConstraintVisualization,\n horizontalConstraintVisualization,\n ]);\n\n return constraintVisualization;\n },\n});\n","import React from 'react';\n\nimport { CanvasElementOptions, CanvasFrameOptions } from 'app/features/canvas';\n\nimport { FrameState } from './frame';\nimport { Scene } from './scene';\n\nexport class RootElement extends FrameState {\n constructor(\n public options: CanvasFrameOptions,\n public scene: Scene,\n private changeCallback: () => void\n ) {\n super(options, scene);\n\n this.sizeStyle = {\n height: '100%',\n width: '100%',\n };\n }\n\n isRoot(): this is RootElement {\n return true;\n }\n\n // root type can not change\n onChange(options: CanvasElementOptions) {\n this.revId++;\n this.options = { ...options } as CanvasFrameOptions;\n this.changeCallback();\n }\n\n getSaveModel(): CanvasFrameOptions {\n const { placement, constraint, ...rest } = this.options;\n\n return {\n ...rest, // everything except placement & constraint\n elements: this.elements.map((v) => v.getSaveModel()),\n };\n }\n\n setRootRef = (target: HTMLDivElement) => {\n this.div = target;\n };\n\n render() {\n return (\n event.preventDefault()}\n key={this.UID}\n ref={this.setRootRef}\n style={{ ...this.sizeStyle, ...this.dataStyle }}\n >\n {this.elements.map((v) => v.render())}\n
\n );\n }\n}\n","import { css } from '@emotion/css';\nimport Moveable from 'moveable';\nimport React, { createRef, CSSProperties, RefObject } from 'react';\nimport { ReactZoomPanPinchContentRef } from 'react-zoom-pan-pinch';\nimport { BehaviorSubject, ReplaySubject, Subject, Subscription } from 'rxjs';\nimport { first } from 'rxjs/operators';\nimport Selecto from 'selecto';\n\nimport { AppEvents, GrafanaTheme2, PanelData } from '@grafana/data';\nimport { locationService } from '@grafana/runtime/src';\nimport {\n ColorDimensionConfig,\n ResourceDimensionConfig,\n ScalarDimensionConfig,\n ScaleDimensionConfig,\n TextDimensionConfig,\n} from '@grafana/schema';\nimport { Portal, stylesFactory } from '@grafana/ui';\nimport { config } from 'app/core/config';\nimport { CanvasFrameOptions, DEFAULT_CANVAS_ELEMENT_CONFIG } from 'app/features/canvas';\nimport { DimensionContext } from 'app/features/dimensions';\nimport {\n getColorDimensionFromData,\n getResourceDimensionFromData,\n getScalarDimensionFromData,\n getScaleDimensionFromData,\n getTextDimensionFromData,\n} from 'app/features/dimensions/utils';\nimport { CanvasContextMenu } from 'app/plugins/panel/canvas/components/CanvasContextMenu';\nimport { CanvasTooltip } from 'app/plugins/panel/canvas/components/CanvasTooltip';\nimport { CONNECTION_ANCHOR_DIV_ID } from 'app/plugins/panel/canvas/components/connections/ConnectionAnchors';\nimport { Connections } from 'app/plugins/panel/canvas/components/connections/Connections';\nimport { AnchorPoint, CanvasTooltipPayload, LayerActionID } from 'app/plugins/panel/canvas/types';\nimport { getParent, getTransformInstance } from 'app/plugins/panel/canvas/utils';\n\nimport appEvents from '../../../core/app_events';\nimport { CanvasPanel } from '../../../plugins/panel/canvas/CanvasPanel';\nimport { HorizontalConstraint, Placement, VerticalConstraint } from '../types';\n\nimport { SceneTransformWrapper } from './SceneTransformWrapper';\nimport { constraintViewable, dimensionViewable, settingsViewable } from './ables';\nimport { ElementState } from './element';\nimport { FrameState } from './frame';\nimport { RootElement } from './root';\n\nexport interface SelectionParams {\n targets: Array;\n frame?: FrameState;\n}\n\nexport class Scene {\n styles = getStyles(config.theme2);\n readonly selection = new ReplaySubject(1);\n readonly moved = new Subject(); // called after resize/drag for editor updates\n readonly byName = new Map();\n\n root: RootElement;\n\n revId = 0;\n\n width = 0;\n height = 0;\n scale = 1;\n style: CSSProperties = {};\n data?: PanelData;\n selecto?: Selecto;\n moveable?: Moveable;\n div?: HTMLDivElement;\n connections: Connections;\n currentLayer?: FrameState;\n isEditingEnabled?: boolean;\n shouldShowAdvancedTypes?: boolean;\n shouldPanZoom?: boolean;\n shouldInfinitePan?: boolean;\n skipNextSelectionBroadcast = false;\n ignoreDataUpdate = false;\n panel: CanvasPanel;\n contextMenuVisible?: boolean;\n contextMenuOnVisibilityChange = (visible: boolean) => {\n this.contextMenuVisible = visible;\n const transformInstance = getTransformInstance(this);\n if (transformInstance) {\n if (visible) {\n transformInstance.setup.disabled = true;\n } else {\n transformInstance.setup.disabled = false;\n }\n }\n };\n\n isPanelEditing = locationService.getSearchObject().editPanel !== undefined;\n\n inlineEditingCallback?: () => void;\n setBackgroundCallback?: (anchorPoint: AnchorPoint) => void;\n\n tooltipCallback?: (tooltip: CanvasTooltipPayload | undefined) => void;\n tooltip?: CanvasTooltipPayload;\n\n moveableActionCallback?: (moved: boolean) => void;\n\n readonly editModeEnabled = new BehaviorSubject(false);\n subscription: Subscription;\n\n targetsToSelect = new Set();\n transformComponentRef: RefObject | undefined;\n\n constructor(\n cfg: CanvasFrameOptions,\n enableEditing: boolean,\n showAdvancedTypes: boolean,\n panZoom: boolean,\n infinitePan: boolean,\n public onSave: (cfg: CanvasFrameOptions) => void,\n panel: CanvasPanel\n ) {\n this.root = this.load(cfg, enableEditing, showAdvancedTypes, panZoom, infinitePan);\n\n this.subscription = this.editModeEnabled.subscribe((open) => {\n if (!this.moveable || !this.isEditingEnabled) {\n return;\n }\n this.moveable.draggable = !open;\n });\n\n this.panel = panel;\n this.connections = new Connections(this);\n this.transformComponentRef = createRef();\n }\n\n getNextElementName = (isFrame = false) => {\n const label = isFrame ? 'Frame' : 'Element';\n let idx = this.byName.size + 1;\n\n const max = idx + 100;\n while (true && idx < max) {\n const name = `${label} ${idx++}`;\n if (!this.byName.has(name)) {\n return name;\n }\n }\n\n return `${label} ${Date.now()}`;\n };\n\n canRename = (v: string) => {\n return !this.byName.has(v);\n };\n\n load(\n cfg: CanvasFrameOptions,\n enableEditing: boolean,\n showAdvancedTypes: boolean,\n panZoom: boolean,\n infinitePan: boolean\n ) {\n this.root = new RootElement(\n cfg ?? {\n type: 'frame',\n elements: [DEFAULT_CANVAS_ELEMENT_CONFIG],\n },\n this,\n this.save // callback when changes are made\n );\n\n this.isEditingEnabled = enableEditing;\n this.shouldShowAdvancedTypes = showAdvancedTypes;\n this.shouldPanZoom = panZoom;\n this.shouldInfinitePan = infinitePan;\n\n setTimeout(() => {\n if (this.div) {\n // If editing is enabled, clear selecto instance\n const destroySelecto = enableEditing;\n this.initMoveable(destroySelecto, enableEditing);\n this.currentLayer = this.root;\n this.selection.next([]);\n this.connections.select(undefined);\n this.connections.updateState();\n }\n });\n return this.root;\n }\n\n context: DimensionContext = {\n getColor: (color: ColorDimensionConfig) => getColorDimensionFromData(this.data, color),\n getScale: (scale: ScaleDimensionConfig) => getScaleDimensionFromData(this.data, scale),\n getScalar: (scalar: ScalarDimensionConfig) => getScalarDimensionFromData(this.data, scalar),\n getText: (text: TextDimensionConfig) => getTextDimensionFromData(this.data, text),\n getResource: (res: ResourceDimensionConfig) => getResourceDimensionFromData(this.data, res),\n getPanelData: () => this.data,\n };\n\n updateData(data: PanelData) {\n this.data = data;\n this.root.updateData(this.context);\n }\n\n updateSize(width: number, height: number) {\n this.width = width;\n this.height = height;\n this.style = { width, height };\n\n if (this.selecto?.getSelectedTargets().length) {\n this.clearCurrentSelection();\n }\n }\n\n frameSelection() {\n this.selection.pipe(first()).subscribe((currentSelectedElements) => {\n const currentLayer = currentSelectedElements[0].parent!;\n\n const newLayer = new FrameState(\n {\n type: 'frame',\n name: this.getNextElementName(true),\n elements: [],\n },\n this,\n currentSelectedElements[0].parent\n );\n\n const framePlacement = this.generateFrameContainer(currentSelectedElements);\n\n newLayer.options.placement = framePlacement;\n\n currentSelectedElements.forEach((element: ElementState) => {\n const elementContainer = element.div?.getBoundingClientRect();\n element.setPlacementFromConstraint(elementContainer, framePlacement as DOMRect);\n currentLayer.doAction(LayerActionID.Delete, element);\n newLayer.doAction(LayerActionID.Duplicate, element, false, false);\n });\n\n newLayer.setPlacementFromConstraint(framePlacement as DOMRect, currentLayer.div?.getBoundingClientRect());\n\n currentLayer.elements.push(newLayer);\n\n this.byName.set(newLayer.getName(), newLayer);\n\n this.save();\n });\n }\n\n private generateFrameContainer = (elements: ElementState[]): Placement => {\n let minTop = Infinity;\n let minLeft = Infinity;\n let maxRight = 0;\n let maxBottom = 0;\n\n elements.forEach((element: ElementState) => {\n const elementContainer = element.div?.getBoundingClientRect();\n\n if (!elementContainer) {\n return;\n }\n\n if (minTop > elementContainer.top) {\n minTop = elementContainer.top;\n }\n\n if (minLeft > elementContainer.left) {\n minLeft = elementContainer.left;\n }\n\n if (maxRight < elementContainer.right) {\n maxRight = elementContainer.right;\n }\n\n if (maxBottom < elementContainer.bottom) {\n maxBottom = elementContainer.bottom;\n }\n });\n\n return {\n top: minTop,\n left: minLeft,\n width: maxRight - minLeft,\n height: maxBottom - minTop,\n };\n };\n\n clearCurrentSelection(skipNextSelectionBroadcast = false) {\n this.skipNextSelectionBroadcast = skipNextSelectionBroadcast;\n let event: MouseEvent = new MouseEvent('click');\n this.selecto?.clickTarget(event, this.div);\n }\n\n updateCurrentLayer(newLayer: FrameState) {\n this.currentLayer = newLayer;\n this.clearCurrentSelection();\n this.save();\n }\n\n save = (updateMoveable = false) => {\n this.onSave(this.root.getSaveModel());\n\n if (updateMoveable) {\n setTimeout(() => {\n if (this.div) {\n this.initMoveable(true, this.isEditingEnabled);\n }\n });\n }\n };\n\n findElementByTarget = (target: Element): ElementState | undefined => {\n // We will probably want to add memoization to this as we are calling on drag / resize\n\n const stack = [...this.root.elements];\n while (stack.length > 0) {\n const currentElement = stack.shift();\n\n if (currentElement && currentElement.div && currentElement.div === target) {\n return currentElement;\n }\n\n const nestedElements = currentElement instanceof FrameState ? currentElement.elements : [];\n for (const nestedElement of nestedElements) {\n stack.unshift(nestedElement);\n }\n }\n\n return undefined;\n };\n\n setNonTargetPointerEvents = (target: Element, disablePointerEvents: boolean) => {\n const stack = [...this.root.elements];\n while (stack.length > 0) {\n const currentElement = stack.shift();\n\n if (currentElement && currentElement.div && currentElement.div !== target) {\n currentElement.applyLayoutStylesToDiv(disablePointerEvents);\n }\n\n const nestedElements = currentElement instanceof FrameState ? currentElement.elements : [];\n for (const nestedElement of nestedElements) {\n stack.unshift(nestedElement);\n }\n }\n };\n\n setRef = (sceneContainer: HTMLDivElement) => {\n this.div = sceneContainer;\n };\n\n select = (selection: SelectionParams) => {\n if (this.selecto) {\n this.selecto.setSelectedTargets(selection.targets);\n this.updateSelection(selection);\n this.editModeEnabled.next(false);\n\n // Hide connection anchors on programmatic select\n if (this.connections.connectionAnchorDiv) {\n this.connections.connectionAnchorDiv.style.display = 'none';\n }\n }\n };\n\n private updateSelection = (selection: SelectionParams) => {\n this.moveable!.target = selection.targets;\n if (this.skipNextSelectionBroadcast) {\n this.skipNextSelectionBroadcast = false;\n return;\n }\n\n if (selection.frame) {\n this.selection.next([selection.frame]);\n } else {\n const s = selection.targets.map((t) => this.findElementByTarget(t)!);\n this.selection.next(s);\n }\n };\n\n private generateTargetElements = (rootElements: ElementState[]): HTMLDivElement[] => {\n let targetElements: HTMLDivElement[] = [];\n\n const stack = [...rootElements];\n while (stack.length > 0) {\n const currentElement = stack.shift();\n\n if (currentElement && currentElement.div) {\n targetElements.push(currentElement.div);\n }\n\n const nestedElements = currentElement instanceof FrameState ? currentElement.elements : [];\n for (const nestedElement of nestedElements) {\n stack.unshift(nestedElement);\n }\n }\n\n return targetElements;\n };\n\n initMoveable = (destroySelecto = false, allowChanges = true) => {\n const targetElements = this.generateTargetElements(this.root.elements);\n\n if (destroySelecto && this.selecto) {\n this.selecto.destroy();\n }\n\n this.selecto = new Selecto({\n container: this.div,\n rootContainer: getParent(this),\n selectableTargets: targetElements,\n toggleContinueSelect: 'shift',\n selectFromInside: false,\n hitRate: 0,\n });\n\n const snapDirections = { top: true, left: true, bottom: true, right: true, center: true, middle: true };\n const elementSnapDirections = { top: true, left: true, bottom: true, right: true, center: true, middle: true };\n\n this.moveable = new Moveable(this.div!, {\n draggable: allowChanges && !this.editModeEnabled.getValue(),\n resizable: allowChanges,\n\n // Setup snappable\n snappable: allowChanges,\n snapDirections: snapDirections,\n elementSnapDirections: elementSnapDirections,\n elementGuidelines: targetElements,\n\n ables: [dimensionViewable, constraintViewable(this), settingsViewable(this)],\n props: {\n dimensionViewable: allowChanges,\n constraintViewable: allowChanges,\n settingsViewable: allowChanges,\n },\n origin: false,\n className: this.styles.selected,\n })\n .on('click', (event) => {\n const targetedElement = this.findElementByTarget(event.target);\n let elementSupportsEditing = false;\n if (targetedElement) {\n elementSupportsEditing = targetedElement.item.hasEditMode ?? false;\n }\n\n if (event.isDouble && allowChanges && !this.editModeEnabled.getValue() && elementSupportsEditing) {\n this.editModeEnabled.next(true);\n }\n })\n .on('clickGroup', (event) => {\n this.selecto!.clickTarget(event.inputEvent, event.inputTarget);\n })\n .on('dragStart', (event) => {\n this.ignoreDataUpdate = true;\n this.setNonTargetPointerEvents(event.target, true);\n\n // Remove the selected element from the snappable guidelines\n if (this.moveable && this.moveable.elementGuidelines) {\n const targetIndex = this.moveable.elementGuidelines.indexOf(event.target);\n if (targetIndex > -1) {\n this.moveable.elementGuidelines.splice(targetIndex, 1);\n }\n }\n })\n .on('dragGroupStart', (e) => {\n this.ignoreDataUpdate = true;\n\n // Remove the selected elements from the snappable guidelines\n if (this.moveable && this.moveable.elementGuidelines) {\n for (let event of e.events) {\n const targetIndex = this.moveable.elementGuidelines.indexOf(event.target);\n if (targetIndex > -1) {\n this.moveable.elementGuidelines.splice(targetIndex, 1);\n }\n }\n }\n })\n .on('drag', (event) => {\n const targetedElement = this.findElementByTarget(event.target);\n if (targetedElement) {\n targetedElement.applyDrag(event);\n\n if (this.connections.connectionsNeedUpdate(targetedElement) && this.moveableActionCallback) {\n this.moveableActionCallback(true);\n }\n }\n })\n .on('dragGroup', (e) => {\n let needsUpdate = false;\n for (let event of e.events) {\n const targetedElement = this.findElementByTarget(event.target);\n if (targetedElement) {\n targetedElement.applyDrag(event);\n if (!needsUpdate) {\n needsUpdate = this.connections.connectionsNeedUpdate(targetedElement);\n }\n }\n }\n\n if (needsUpdate && this.moveableActionCallback) {\n this.moveableActionCallback(true);\n }\n })\n .on('dragGroupEnd', (e) => {\n e.events.forEach((event) => {\n const targetedElement = this.findElementByTarget(event.target);\n if (targetedElement) {\n if (targetedElement) {\n targetedElement.setPlacementFromConstraint(undefined, undefined, this.scale);\n }\n\n // re-add the selected elements to the snappable guidelines\n if (this.moveable && this.moveable.elementGuidelines) {\n this.moveable.elementGuidelines.push(event.target);\n }\n }\n });\n\n this.moved.next(Date.now());\n this.ignoreDataUpdate = false;\n })\n .on('dragEnd', (event) => {\n const targetedElement = this.findElementByTarget(event.target);\n if (targetedElement) {\n targetedElement.setPlacementFromConstraint(undefined, undefined, this.scale);\n }\n\n this.moved.next(Date.now());\n this.ignoreDataUpdate = false;\n this.setNonTargetPointerEvents(event.target, false);\n\n // re-add the selected element to the snappable guidelines\n if (this.moveable && this.moveable.elementGuidelines) {\n this.moveable.elementGuidelines.push(event.target);\n }\n })\n .on('resizeStart', (event) => {\n const targetedElement = this.findElementByTarget(event.target);\n\n if (targetedElement) {\n // Remove the selected element from the snappable guidelines\n if (this.moveable && this.moveable.elementGuidelines) {\n const targetIndex = this.moveable.elementGuidelines.indexOf(event.target);\n if (targetIndex > -1) {\n this.moveable.elementGuidelines.splice(targetIndex, 1);\n }\n }\n\n targetedElement.tempConstraint = { ...targetedElement.options.constraint };\n targetedElement.options.constraint = {\n vertical: VerticalConstraint.Top,\n horizontal: HorizontalConstraint.Left,\n };\n targetedElement.setPlacementFromConstraint(undefined, undefined, this.scale);\n }\n })\n .on('resizeGroupStart', (e) => {\n // Remove the selected elements from the snappable guidelines\n if (this.moveable && this.moveable.elementGuidelines) {\n for (let event of e.events) {\n const targetIndex = this.moveable.elementGuidelines.indexOf(event.target);\n if (targetIndex > -1) {\n this.moveable.elementGuidelines.splice(targetIndex, 1);\n }\n }\n }\n })\n .on('resize', (event) => {\n const targetedElement = this.findElementByTarget(event.target);\n if (targetedElement) {\n targetedElement.applyResize(event, this.scale);\n\n if (this.connections.connectionsNeedUpdate(targetedElement) && this.moveableActionCallback) {\n this.moveableActionCallback(true);\n }\n }\n this.moved.next(Date.now()); // TODO only on end\n })\n .on('resizeGroup', (e) => {\n let needsUpdate = false;\n for (let event of e.events) {\n const targetedElement = this.findElementByTarget(event.target);\n if (targetedElement) {\n targetedElement.applyResize(event);\n\n if (!needsUpdate) {\n needsUpdate = this.connections.connectionsNeedUpdate(targetedElement);\n }\n }\n }\n\n if (needsUpdate && this.moveableActionCallback) {\n this.moveableActionCallback(true);\n }\n\n this.moved.next(Date.now()); // TODO only on end\n })\n .on('resizeEnd', (event) => {\n const targetedElement = this.findElementByTarget(event.target);\n\n if (targetedElement) {\n if (targetedElement.tempConstraint) {\n targetedElement.options.constraint = targetedElement.tempConstraint;\n targetedElement.tempConstraint = undefined;\n }\n\n targetedElement.setPlacementFromConstraint(undefined, undefined, this.scale);\n\n // re-add the selected element to the snappable guidelines\n if (this.moveable && this.moveable.elementGuidelines) {\n this.moveable.elementGuidelines.push(event.target);\n }\n }\n })\n .on('resizeGroupEnd', (e) => {\n // re-add the selected elements to the snappable guidelines\n if (this.moveable && this.moveable.elementGuidelines) {\n for (let event of e.events) {\n this.moveable.elementGuidelines.push(event.target);\n }\n }\n });\n\n let targets: Array = [];\n this.selecto!.on('dragStart', (event) => {\n const selectedTarget = event.inputEvent.target;\n\n // If selected target is a connection control, eject to handle connection event\n if (selectedTarget.id === CONNECTION_ANCHOR_DIV_ID) {\n this.connections.handleConnectionDragStart(selectedTarget, event.inputEvent.clientX, event.inputEvent.clientY);\n event.stop();\n return;\n }\n\n const isTargetMoveableElement =\n this.moveable!.isMoveableElement(selectedTarget) ||\n targets.some((target) => target === selectedTarget || target.contains(selectedTarget));\n\n const isTargetAlreadySelected = this.selecto\n ?.getSelectedTargets()\n .includes(selectedTarget.parentElement.parentElement);\n\n // Apply grabbing cursor while dragging, applyLayoutStylesToDiv() resets it to grab when done\n if (\n this.isEditingEnabled &&\n !this.editModeEnabled.getValue() &&\n isTargetMoveableElement &&\n this.selecto?.getSelectedTargets().length\n ) {\n this.selecto.getSelectedTargets()[0].style.cursor = 'grabbing';\n }\n\n if (isTargetMoveableElement || isTargetAlreadySelected || !this.isEditingEnabled) {\n // Prevent drawing selection box when selected target is a moveable element or already selected\n event.stop();\n }\n })\n .on('select', () => {\n this.editModeEnabled.next(false);\n\n // Hide connection anchors on select\n if (this.connections.connectionAnchorDiv) {\n this.connections.connectionAnchorDiv.style.display = 'none';\n }\n })\n .on('selectEnd', (event) => {\n targets = event.selected;\n this.updateSelection({ targets });\n\n if (event.isDragStart) {\n if (this.isEditingEnabled && !this.editModeEnabled.getValue() && this.selecto?.getSelectedTargets().length) {\n this.selecto.getSelectedTargets()[0].style.cursor = 'grabbing';\n }\n event.inputEvent.preventDefault();\n event.data.timer = setTimeout(() => {\n this.moveable!.dragStart(event.inputEvent);\n });\n }\n })\n .on('dragEnd', (event) => {\n clearTimeout(event.data.timer);\n });\n };\n\n reorderElements = (src: ElementState, dest: ElementState, dragToGap: boolean, destPosition: number) => {\n switch (dragToGap) {\n case true:\n switch (destPosition) {\n case -1:\n // top of the tree\n if (src.parent instanceof FrameState) {\n // move outside the frame\n if (dest.parent) {\n this.updateElements(src, dest.parent, dest.parent.elements.length);\n src.updateData(dest.parent.scene.context);\n }\n } else {\n dest.parent?.reorderTree(src, dest, true);\n }\n break;\n default:\n if (dest.parent) {\n this.updateElements(src, dest.parent, dest.parent.elements.indexOf(dest));\n src.updateData(dest.parent.scene.context);\n }\n break;\n }\n break;\n case false:\n if (dest instanceof FrameState) {\n if (src.parent === dest) {\n // same frame parent\n src.parent?.reorderTree(src, dest, true);\n } else {\n this.updateElements(src, dest);\n src.updateData(dest.scene.context);\n }\n } else if (src.parent === dest.parent) {\n src.parent?.reorderTree(src, dest);\n } else {\n if (dest.parent) {\n this.updateElements(src, dest.parent);\n src.updateData(dest.parent.scene.context);\n }\n }\n break;\n }\n };\n\n private updateElements = (src: ElementState, dest: FrameState | RootElement, idx: number | null = null) => {\n src.parent?.doAction(LayerActionID.Delete, src);\n src.parent = dest;\n\n const elementContainer = src.div?.getBoundingClientRect();\n src.setPlacementFromConstraint(elementContainer, dest.div?.getBoundingClientRect());\n\n const destIndex = idx ?? dest.elements.length - 1;\n dest.elements.splice(destIndex, 0, src);\n dest.scene.save();\n\n dest.reinitializeMoveable();\n };\n\n addToSelection = () => {\n try {\n let selection: SelectionParams = { targets: [] };\n selection.targets = [...this.targetsToSelect];\n this.select(selection);\n } catch (error) {\n appEvents.emit(AppEvents.alertError, ['Unable to add to selection']);\n }\n };\n\n render() {\n const isTooltipValid = (this.tooltip?.element?.data?.links?.length ?? 0) > 0;\n const canShowElementTooltip = !this.isEditingEnabled && isTooltipValid;\n\n const sceneDiv = (\n \n {this.connections.render()}\n {this.root.render()}\n {this.isEditingEnabled && (\n
\n \n \n )}\n {canShowElementTooltip && (\n
\n \n \n )}\n
\n );\n\n return config.featureToggles.canvasPanelPanZoom ? (\n {sceneDiv}\n ) : (\n sceneDiv\n );\n }\n}\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2) => ({\n wrap: css`\n overflow: hidden;\n position: relative;\n `,\n selected: css`\n z-index: 999 !important;\n `,\n}));\n","import { css } from '@emotion/css';\nimport React, { useState } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { ResourceDimensionMode } from '@grafana/schema';\nimport { Portal, useTheme2 } from '@grafana/ui';\nimport { Scene } from 'app/features/canvas/runtime/scene';\nimport { MediaType, ResourceFolderName } from 'app/features/dimensions';\nimport { ResourcePickerPopover } from 'app/features/dimensions/editors/ResourcePickerPopover';\n\nimport { AnchorPoint } from '../types';\n\ntype Props = {\n onClose: () => void;\n scene: Scene;\n anchorPoint: AnchorPoint;\n};\n\nexport function SetBackground({ onClose, scene, anchorPoint }: Props) {\n const defaultValue = scene.root.options.background?.image?.fixed ?? '';\n\n const [bgImage, setBgImage] = useState(defaultValue);\n const theme = useTheme2();\n const styles = getStyles(theme, anchorPoint);\n\n const onChange = (value: string | undefined) => {\n if (value) {\n setBgImage(value);\n if (scene.root) {\n scene.root.options.background = {\n ...scene.root.options.background,\n image: { mode: ResourceDimensionMode.Fixed, fixed: value },\n };\n scene.revId++;\n scene.save();\n\n scene.root.reinitializeMoveable();\n }\n\n // Force a re-render (update scene data after config update)\n if (scene) {\n scene.updateData(scene.data!);\n }\n }\n\n onClose();\n };\n\n return (\n \n \n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, anchorPoint: AnchorPoint) => ({\n portalWrapper: css({\n width: '315px',\n height: '445px',\n transform: `translate(${anchorPoint.x}px, ${anchorPoint.y - 200}px)`,\n }),\n});\n","import React, { useCallback } from 'react';\n\nimport { SelectableValue, StandardEditorProps } from '@grafana/data';\nimport { InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui/src';\nimport { BackgroundImageSize } from 'app/features/canvas';\n\nconst options: Array> = [\n { value: BackgroundImageSize.Original, label: 'Original' },\n { value: BackgroundImageSize.Contain, label: 'Contain' },\n { value: BackgroundImageSize.Cover, label: 'Cover' },\n { value: BackgroundImageSize.Fill, label: 'Fill' },\n { value: BackgroundImageSize.Tile, label: 'Tile' },\n];\n\nexport const BackgroundSizeEditor = ({ value, onChange }: StandardEditorProps) => {\n const imageSize = value ?? BackgroundImageSize.Cover;\n\n const onImageSizeChange = useCallback(\n (size: string) => {\n onChange(size);\n },\n [onChange]\n );\n\n return (\n \n \n \n \n \n );\n};\n","import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';\nimport { CanvasConnection, CanvasElementOptions } from 'app/features/canvas';\nimport { ColorDimensionEditor, ResourceDimensionEditor, ScaleDimensionEditor } from 'app/features/dimensions/editors';\nimport { BackgroundSizeEditor } from 'app/features/dimensions/editors/BackgroundSizeEditor';\n\ninterface OptionSuppliers {\n addBackground: PanelOptionsSupplier;\n addBorder: PanelOptionsSupplier;\n addColor: PanelOptionsSupplier;\n addSize: PanelOptionsSupplier;\n}\n\nconst getCategoryName = (str: string, type: string | undefined) => {\n if (type !== 'frame' && type !== undefined) {\n return [str + ` (${type})`];\n }\n return [str];\n};\n\nexport const optionBuilder: OptionSuppliers = {\n addBackground: (builder, context) => {\n const category = getCategoryName('Background', context.options?.type);\n builder\n .addCustomEditor({\n category,\n id: 'background.color',\n path: 'background.color',\n name: 'Color',\n editor: ColorDimensionEditor,\n settings: {},\n defaultValue: {\n // Configured values\n fixed: '',\n },\n })\n .addCustomEditor({\n category,\n id: 'background.image',\n path: 'background.image',\n name: 'Image',\n editor: ResourceDimensionEditor,\n settings: {\n resourceType: 'image',\n },\n })\n .addCustomEditor({\n category,\n id: 'background.size',\n path: 'background.size',\n name: 'Image size',\n editor: BackgroundSizeEditor,\n settings: {\n resourceType: 'image',\n },\n });\n },\n\n addBorder: (builder, context) => {\n const category = getCategoryName('Border', context.options?.type);\n builder.addSliderInput({\n category,\n path: 'border.width',\n name: 'Width',\n defaultValue: 2,\n settings: {\n min: 0,\n max: 20,\n },\n });\n\n if (context.options?.border?.width) {\n builder.addCustomEditor({\n category,\n id: 'border.color',\n path: 'border.color',\n name: 'Color',\n editor: ColorDimensionEditor,\n settings: {},\n defaultValue: {\n // Configured values\n fixed: '',\n },\n });\n }\n },\n\n addColor: (builder, context) => {\n const category = ['Color'];\n builder.addCustomEditor({\n category,\n id: 'color',\n path: 'color',\n name: 'Color',\n editor: ColorDimensionEditor,\n settings: {},\n defaultValue: {\n // Configured values\n fixed: '',\n },\n });\n },\n\n addSize: (builder, context) => {\n const category = ['Size'];\n builder.addCustomEditor({\n category,\n id: 'size',\n path: 'size',\n name: 'Size',\n editor: ScaleDimensionEditor,\n settings: {\n min: 1,\n max: 10,\n },\n defaultValue: {\n // Configured values\n fixed: 2,\n min: 1,\n max: 10,\n },\n });\n },\n};\n","import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\nimport { Constraint, HorizontalConstraint, VerticalConstraint } from 'app/features/canvas';\n\ninterface Props {\n onVerticalConstraintChange: (v: VerticalConstraint) => void;\n onHorizontalConstraintChange: (h: HorizontalConstraint) => void;\n currentConstraints: Constraint;\n}\n\nexport const ConstraintSelectionBox = ({\n onVerticalConstraintChange,\n onHorizontalConstraintChange,\n currentConstraints,\n}: Props) => {\n const styles = useStyles2(getStyles(currentConstraints));\n\n const onClickTopConstraint = () => {\n onVerticalConstraintChange(VerticalConstraint.Top);\n };\n\n const onClickBottomConstraint = () => {\n onVerticalConstraintChange(VerticalConstraint.Bottom);\n };\n\n const onClickVerticalCenterConstraint = () => {\n onVerticalConstraintChange(VerticalConstraint.Center);\n };\n\n const onClickLeftConstraint = () => {\n onHorizontalConstraintChange(HorizontalConstraint.Left);\n };\n\n const onClickRightConstraint = () => {\n onHorizontalConstraintChange(HorizontalConstraint.Right);\n };\n\n const onClickHorizontalCenterConstraint = () => {\n onHorizontalConstraintChange(HorizontalConstraint.Center);\n };\n\n return (\n \n );\n};\n\nconst getStyles = (currentConstraints: Constraint) => (theme: GrafanaTheme2) => {\n const HOVER_COLOR = '#daebf7';\n const HOVER_OPACITY = '0.6';\n const SELECTED_COLOR = '#0d99ff';\n\n const selectionBoxColor = theme.isDark ? '#ffffff' : '#000000';\n\n return {\n constraintHover: css({\n '&:hover': {\n fill: HOVER_COLOR,\n fillOpacity: HOVER_OPACITY,\n },\n }),\n topConstraint: css({\n ...(currentConstraints.vertical === VerticalConstraint.Top ||\n currentConstraints.vertical === VerticalConstraint.TopBottom\n ? {\n width: '92pt',\n x: '1085',\n fill: SELECTED_COLOR,\n }\n : {\n fill: selectionBoxColor,\n }),\n }),\n bottomConstraint: css({\n ...(currentConstraints.vertical === VerticalConstraint.Bottom ||\n currentConstraints.vertical === VerticalConstraint.TopBottom\n ? {\n width: '92pt',\n x: '1085',\n fill: SELECTED_COLOR,\n }\n : {\n fill: selectionBoxColor,\n }),\n }),\n leftConstraint: css({\n ...(currentConstraints.horizontal === HorizontalConstraint.Left ||\n currentConstraints.horizontal === HorizontalConstraint.LeftRight\n ? {\n height: '92pt',\n y: '1014',\n fill: SELECTED_COLOR,\n }\n : {\n fill: selectionBoxColor,\n }),\n }),\n rightConstraint: css({\n ...(currentConstraints.horizontal === HorizontalConstraint.Right ||\n currentConstraints.horizontal === HorizontalConstraint.LeftRight\n ? {\n height: '92pt',\n y: '1014',\n fill: SELECTED_COLOR,\n }\n : {\n fill: selectionBoxColor,\n }),\n }),\n horizontalCenterConstraint: css({\n ...(currentConstraints.horizontal === HorizontalConstraint.Center\n ? {\n height: '92pt',\n y: '1014',\n fill: SELECTED_COLOR,\n }\n : {\n fill: selectionBoxColor,\n }),\n }),\n verticalCenterConstraint: css({\n ...(currentConstraints.vertical === VerticalConstraint.Center\n ? {\n width: '92pt',\n x: '1085',\n fill: SELECTED_COLOR,\n }\n : {\n fill: selectionBoxColor,\n }),\n }),\n box: css({\n fill: selectionBoxColor,\n }),\n };\n};\n","import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data/src';\nimport { IconButton, useStyles2 } from '@grafana/ui/src';\nimport { HorizontalConstraint, Placement, QuickPlacement, VerticalConstraint } from 'app/features/canvas';\nimport { ElementState } from 'app/features/canvas/runtime/element';\n\nimport { CanvasEditorOptions } from './elementEditor';\n\ntype Props = {\n onPositionChange: (value: number | undefined, placement: keyof Placement) => void;\n element: ElementState;\n settings: CanvasEditorOptions;\n};\n\nexport const QuickPositioning = ({ onPositionChange, element, settings }: Props) => {\n const styles = useStyles2(getStyles);\n\n const onQuickPositioningChange = (position: QuickPlacement) => {\n const defaultConstraint = { vertical: VerticalConstraint.Top, horizontal: HorizontalConstraint.Left };\n const originalConstraint = { ...element.options.constraint };\n\n element.options.constraint = defaultConstraint;\n element.setPlacementFromConstraint();\n\n switch (position) {\n case QuickPlacement.Top:\n onPositionChange(0, 'top');\n break;\n case QuickPlacement.Bottom:\n onPositionChange(getRightBottomPosition(element.options.placement?.height ?? 0, 'bottom'), 'top');\n break;\n case QuickPlacement.VerticalCenter:\n onPositionChange(getCenterPosition(element.options.placement?.height ?? 0, 'v'), 'top');\n break;\n case QuickPlacement.Left:\n onPositionChange(0, 'left');\n break;\n case QuickPlacement.Right:\n onPositionChange(getRightBottomPosition(element.options.placement?.width ?? 0, 'right'), 'left');\n break;\n case QuickPlacement.HorizontalCenter:\n onPositionChange(getCenterPosition(element.options.placement?.width ?? 0, 'h'), 'left');\n break;\n }\n\n element.options.constraint = originalConstraint;\n element.setPlacementFromConstraint();\n };\n\n // Basing this on scene will mean that center is based on root for the time being\n const getCenterPosition = (elementSize: number, align: 'h' | 'v') => {\n const sceneSize = align === 'h' ? settings.scene.width : settings.scene.height;\n\n return (sceneSize - elementSize) / 2;\n };\n\n const getRightBottomPosition = (elementSize: number, align: 'right' | 'bottom') => {\n const sceneSize = align === 'right' ? settings.scene.width : settings.scene.height;\n\n return sceneSize - elementSize;\n };\n\n return (\n \n onQuickPositioningChange(QuickPlacement.Left)}\n className={styles.button}\n size=\"lg\"\n tooltip=\"Align left\"\n />\n onQuickPositioningChange(QuickPlacement.HorizontalCenter)}\n className={styles.button}\n size=\"lg\"\n tooltip=\"Align horizontal centers\"\n />\n onQuickPositioningChange(QuickPlacement.Right)}\n className={styles.button}\n size=\"lg\"\n tooltip=\"Align right\"\n />\n onQuickPositioningChange(QuickPlacement.Top)}\n size=\"lg\"\n tooltip=\"Align top\"\n />\n onQuickPositioningChange(QuickPlacement.VerticalCenter)}\n className={styles.button}\n size=\"lg\"\n tooltip=\"Align vertical centers\"\n />\n onQuickPositioningChange(QuickPlacement.Bottom)}\n className={styles.button}\n size=\"lg\"\n tooltip=\"Align bottom\"\n />\n
\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n buttonGroup: css({\n display: 'flex',\n flexWrap: 'wrap',\n padding: '12px 0 12px 0',\n }),\n button: css({\n marginLeft: '5px',\n marginRight: '5px',\n }),\n});\n","import React from 'react';\nimport { useObservable } from 'react-use';\nimport { Subject } from 'rxjs';\n\nimport { SelectableValue, StandardEditorProps } from '@grafana/data';\nimport { Field, HorizontalGroup, Icon, InlineField, InlineFieldRow, Select, VerticalGroup } from '@grafana/ui';\nimport { NumberInput } from 'app/core/components/OptionsUI/NumberInput';\nimport { HorizontalConstraint, Placement, VerticalConstraint } from 'app/features/canvas';\n\nimport { Options } from '../../panelcfg.gen';\n\nimport { ConstraintSelectionBox } from './ConstraintSelectionBox';\nimport { QuickPositioning } from './QuickPositioning';\nimport { CanvasEditorOptions } from './elementEditor';\n\nconst places: Array = ['top', 'left', 'bottom', 'right', 'width', 'height'];\n\nconst horizontalOptions: Array> = [\n { label: 'Left', value: HorizontalConstraint.Left },\n { label: 'Right', value: HorizontalConstraint.Right },\n { label: 'Left & right', value: HorizontalConstraint.LeftRight },\n { label: 'Center', value: HorizontalConstraint.Center },\n { label: 'Scale', value: HorizontalConstraint.Scale },\n];\n\nconst verticalOptions: Array> = [\n { label: 'Top', value: VerticalConstraint.Top },\n { label: 'Bottom', value: VerticalConstraint.Bottom },\n { label: 'Top & bottom', value: VerticalConstraint.TopBottom },\n { label: 'Center', value: VerticalConstraint.Center },\n { label: 'Scale', value: VerticalConstraint.Scale },\n];\n\ntype Props = StandardEditorProps;\n\nexport function PlacementEditor({ item }: Props) {\n const settings = item.settings;\n\n // Will force a rerender whenever the subject changes\n useObservable(settings?.scene ? settings.scene.moved : new Subject());\n\n if (!settings) {\n return Loading...
;\n }\n\n const element = settings.element;\n if (!element) {\n return ???
;\n }\n const { options } = element;\n const { placement, constraint: layout } = options;\n\n const reselectElementAfterChange = () => {\n setTimeout(() => {\n settings.scene.select({ targets: [element.div!] });\n });\n };\n\n const onHorizontalConstraintSelect = (h: SelectableValue) => {\n onHorizontalConstraintChange(h.value!);\n };\n\n const onHorizontalConstraintChange = (h: HorizontalConstraint) => {\n element.options.constraint!.horizontal = h;\n element.setPlacementFromConstraint();\n settings.scene.revId++;\n settings.scene.save(true);\n reselectElementAfterChange();\n };\n\n const onVerticalConstraintSelect = (v: SelectableValue) => {\n onVerticalConstraintChange(v.value!);\n };\n\n const onVerticalConstraintChange = (v: VerticalConstraint) => {\n element.options.constraint!.vertical = v;\n element.setPlacementFromConstraint();\n settings.scene.revId++;\n settings.scene.save(true);\n reselectElementAfterChange();\n };\n\n const onPositionChange = (value: number | undefined, placement: keyof Placement) => {\n element.options.placement![placement] = value ?? element.options.placement![placement];\n element.applyLayoutStylesToDiv();\n settings.scene.clearCurrentSelection(true);\n reselectElementAfterChange();\n };\n\n const constraint = element.tempConstraint ?? layout ?? {};\n\n return (\n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
\n\n \n <>\n {places.map((p) => {\n const v = placement![p];\n if (v == null) {\n return null;\n }\n return (\n \n \n onPositionChange(v, p)} />\n \n \n );\n })}\n >\n \n
\n );\n}\n","import { get as lodashGet } from 'lodash';\n\nimport { NestedPanelOptions, NestedValueAccess } from '@grafana/data/src/utils/OptionsUIBuilders';\nimport {\n CanvasElementOptions,\n canvasElementRegistry,\n DEFAULT_CANVAS_ELEMENT_CONFIG,\n defaultElementItems,\n} from 'app/features/canvas';\nimport { ElementState } from 'app/features/canvas/runtime/element';\nimport { FrameState } from 'app/features/canvas/runtime/frame';\nimport { Scene } from 'app/features/canvas/runtime/scene';\nimport { setOptionImmutably } from 'app/features/dashboard/components/PanelEditor/utils';\n\nimport { getElementTypes } from '../../utils';\nimport { optionBuilder } from '../options';\n\nimport { PlacementEditor } from './PlacementEditor';\n\nexport interface CanvasEditorOptions {\n element: ElementState;\n scene: Scene;\n category?: string[];\n}\n\nexport interface TreeViewEditorProps {\n scene: Scene;\n layer: FrameState;\n selected: ElementState[];\n}\n\nexport function getElementEditor(opts: CanvasEditorOptions): NestedPanelOptions {\n return {\n category: opts.category,\n path: '--', // not used!\n\n // Note that canvas editor writes things to the scene!\n values: (parent: NestedValueAccess) => ({\n getValue: (path) => {\n return lodashGet(opts.element.options, path);\n },\n onChange: (path, value) => {\n let options = opts.element.options;\n if (path === 'type' && value) {\n const layer = canvasElementRegistry.getIfExists(value);\n if (!layer) {\n console.warn('layer does not exist', value);\n return;\n }\n options = {\n ...options,\n ...layer.getNewOptions(options),\n type: layer.id,\n };\n } else {\n options = setOptionImmutably(options, path, value);\n }\n opts.element.onChange(options);\n opts.element.updateData(opts.scene.context);\n },\n }),\n\n // Dynamically fill the selected element\n build: (builder, context) => {\n const { options } = opts.element;\n const current = options?.type ? options.type : DEFAULT_CANVAS_ELEMENT_CONFIG.type;\n const layerTypes = getElementTypes(opts.scene.shouldShowAdvancedTypes, current).options;\n\n const isUnsupported =\n !opts.scene.shouldShowAdvancedTypes && !defaultElementItems.filter((item) => item.id === options?.type).length;\n\n builder.addSelect({\n path: 'type',\n name: undefined as any, // required, but hide space\n settings: {\n options: layerTypes,\n },\n description: isUnsupported\n ? 'Selected element type is not supported by current settings. Please enable advanced element types.'\n : '',\n });\n\n // force clean layer configuration\n const layer = canvasElementRegistry.getIfExists(options?.type ?? DEFAULT_CANVAS_ELEMENT_CONFIG.type)!;\n let currentOptions = options;\n if (!currentOptions) {\n currentOptions = {\n ...layer.getNewOptions(options),\n type: layer.id,\n name: `Element ${Date.now()}.${Math.floor(Math.random() * 100)}`,\n };\n }\n const ctx = { ...context, options: currentOptions };\n\n if (layer?.registerOptionsUI) {\n layer.registerOptionsUI(builder, ctx);\n }\n\n const shouldAddLayoutEditor = opts.element.item.standardEditorConfig?.layout ?? true;\n if (shouldAddLayoutEditor) {\n builder.addCustomEditor({\n category: ['Layout'],\n id: 'content',\n path: '__', // not used\n name: 'Quick placement',\n editor: PlacementEditor,\n settings: opts,\n });\n }\n\n const shouldAddBackgroundEditor = opts.element.item.standardEditorConfig?.background ?? true;\n if (shouldAddBackgroundEditor) {\n optionBuilder.addBackground(builder, ctx);\n }\n\n const shouldAddBorderEditor = opts.element.item.standardEditorConfig?.border ?? true;\n if (shouldAddBorderEditor) {\n optionBuilder.addBorder(builder, ctx);\n }\n },\n };\n}\n","/**\n * Webpack has bug for import loop, which is not the same behavior as ES module.\n * When util.js imports the TreeNode for tree generate will cause treeContextTypes be empty.\n */\nimport * as React from 'react';\nexport var TreeContext = /*#__PURE__*/React.createContext(null);","import * as React from 'react';\nexport default function DropIndicator(_ref) {\n var dropPosition = _ref.dropPosition,\n dropLevelOffset = _ref.dropLevelOffset,\n indent = _ref.indent;\n var style = {\n pointerEvents: 'none',\n position: 'absolute',\n right: 0,\n backgroundColor: 'red',\n height: 2\n };\n switch (dropPosition) {\n case -1:\n style.top = 0;\n style.left = -dropLevelOffset * indent;\n break;\n case 1:\n style.bottom = 0;\n style.left = -dropLevelOffset * indent;\n break;\n case 0:\n style.bottom = 0;\n style.left = indent;\n break;\n }\n return /*#__PURE__*/React.createElement(\"div\", {\n style: style\n });\n}","export default function _objectDestructuringEmpty(obj) {\n if (obj == null) throw new TypeError(\"Cannot destructure \" + obj);\n}","import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport * as React from 'react';\nimport classNames from 'classnames';\nvar Indent = function Indent(_ref) {\n var prefixCls = _ref.prefixCls,\n level = _ref.level,\n isStart = _ref.isStart,\n isEnd = _ref.isEnd;\n var baseClassName = \"\".concat(prefixCls, \"-indent-unit\");\n var list = [];\n for (var i = 0; i < level; i += 1) {\n list.push( /*#__PURE__*/React.createElement(\"span\", {\n key: i,\n className: classNames(baseClassName, _defineProperty(_defineProperty({}, \"\".concat(baseClassName, \"-start\"), isStart[i]), \"\".concat(baseClassName, \"-end\"), isEnd[i]))\n }));\n }\n return /*#__PURE__*/React.createElement(\"span\", {\n \"aria-hidden\": \"true\",\n className: \"\".concat(prefixCls, \"-indent\")\n }, list);\n};\nexport default /*#__PURE__*/React.memo(Indent);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\";\nimport _classCallCheck from \"@babel/runtime/helpers/esm/classCallCheck\";\nimport _createClass from \"@babel/runtime/helpers/esm/createClass\";\nimport _assertThisInitialized from \"@babel/runtime/helpers/esm/assertThisInitialized\";\nimport _inherits from \"@babel/runtime/helpers/esm/inherits\";\nimport _createSuper from \"@babel/runtime/helpers/esm/createSuper\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nvar _excluded = [\"eventKey\", \"className\", \"style\", \"dragOver\", \"dragOverGapTop\", \"dragOverGapBottom\", \"isLeaf\", \"isStart\", \"isEnd\", \"expanded\", \"selected\", \"checked\", \"halfChecked\", \"loading\", \"domRef\", \"active\", \"data\", \"onMouseMove\", \"selectable\"];\nimport classNames from 'classnames';\nimport pickAttrs from \"rc-util/es/pickAttrs\";\nimport * as React from 'react';\n// @ts-ignore\nimport { TreeContext } from \"./contextTypes\";\nimport Indent from \"./Indent\";\nimport getEntity from \"./utils/keyUtil\";\nimport { convertNodePropsToEventData } from \"./utils/treeUtil\";\nvar ICON_OPEN = 'open';\nvar ICON_CLOSE = 'close';\nvar defaultTitle = '---';\nvar InternalTreeNode = /*#__PURE__*/function (_React$Component) {\n _inherits(InternalTreeNode, _React$Component);\n var _super = _createSuper(InternalTreeNode);\n function InternalTreeNode() {\n var _this;\n _classCallCheck(this, InternalTreeNode);\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n _this = _super.call.apply(_super, [this].concat(args));\n _defineProperty(_assertThisInitialized(_this), \"state\", {\n dragNodeHighlight: false\n });\n _defineProperty(_assertThisInitialized(_this), \"selectHandle\", void 0);\n _defineProperty(_assertThisInitialized(_this), \"cacheIndent\", void 0);\n _defineProperty(_assertThisInitialized(_this), \"onSelectorClick\", function (e) {\n // Click trigger before select/check operation\n var onNodeClick = _this.props.context.onNodeClick;\n onNodeClick(e, convertNodePropsToEventData(_this.props));\n if (_this.isSelectable()) {\n _this.onSelect(e);\n } else {\n _this.onCheck(e);\n }\n });\n _defineProperty(_assertThisInitialized(_this), \"onSelectorDoubleClick\", function (e) {\n var onNodeDoubleClick = _this.props.context.onNodeDoubleClick;\n onNodeDoubleClick(e, convertNodePropsToEventData(_this.props));\n });\n _defineProperty(_assertThisInitialized(_this), \"onSelect\", function (e) {\n if (_this.isDisabled()) return;\n var onNodeSelect = _this.props.context.onNodeSelect;\n onNodeSelect(e, convertNodePropsToEventData(_this.props));\n });\n _defineProperty(_assertThisInitialized(_this), \"onCheck\", function (e) {\n if (_this.isDisabled()) return;\n var _this$props = _this.props,\n disableCheckbox = _this$props.disableCheckbox,\n checked = _this$props.checked;\n var onNodeCheck = _this.props.context.onNodeCheck;\n if (!_this.isCheckable() || disableCheckbox) return;\n var targetChecked = !checked;\n onNodeCheck(e, convertNodePropsToEventData(_this.props), targetChecked);\n });\n _defineProperty(_assertThisInitialized(_this), \"onMouseEnter\", function (e) {\n var onNodeMouseEnter = _this.props.context.onNodeMouseEnter;\n onNodeMouseEnter(e, convertNodePropsToEventData(_this.props));\n });\n _defineProperty(_assertThisInitialized(_this), \"onMouseLeave\", function (e) {\n var onNodeMouseLeave = _this.props.context.onNodeMouseLeave;\n onNodeMouseLeave(e, convertNodePropsToEventData(_this.props));\n });\n _defineProperty(_assertThisInitialized(_this), \"onContextMenu\", function (e) {\n var onNodeContextMenu = _this.props.context.onNodeContextMenu;\n onNodeContextMenu(e, convertNodePropsToEventData(_this.props));\n });\n _defineProperty(_assertThisInitialized(_this), \"onDragStart\", function (e) {\n var onNodeDragStart = _this.props.context.onNodeDragStart;\n e.stopPropagation();\n _this.setState({\n dragNodeHighlight: true\n });\n onNodeDragStart(e, _assertThisInitialized(_this));\n try {\n // ie throw error\n // firefox-need-it\n e.dataTransfer.setData('text/plain', '');\n } catch (error) {\n // empty\n }\n });\n _defineProperty(_assertThisInitialized(_this), \"onDragEnter\", function (e) {\n var onNodeDragEnter = _this.props.context.onNodeDragEnter;\n e.preventDefault();\n e.stopPropagation();\n onNodeDragEnter(e, _assertThisInitialized(_this));\n });\n _defineProperty(_assertThisInitialized(_this), \"onDragOver\", function (e) {\n var onNodeDragOver = _this.props.context.onNodeDragOver;\n e.preventDefault();\n e.stopPropagation();\n onNodeDragOver(e, _assertThisInitialized(_this));\n });\n _defineProperty(_assertThisInitialized(_this), \"onDragLeave\", function (e) {\n var onNodeDragLeave = _this.props.context.onNodeDragLeave;\n e.stopPropagation();\n onNodeDragLeave(e, _assertThisInitialized(_this));\n });\n _defineProperty(_assertThisInitialized(_this), \"onDragEnd\", function (e) {\n var onNodeDragEnd = _this.props.context.onNodeDragEnd;\n e.stopPropagation();\n _this.setState({\n dragNodeHighlight: false\n });\n onNodeDragEnd(e, _assertThisInitialized(_this));\n });\n _defineProperty(_assertThisInitialized(_this), \"onDrop\", function (e) {\n var onNodeDrop = _this.props.context.onNodeDrop;\n e.preventDefault();\n e.stopPropagation();\n _this.setState({\n dragNodeHighlight: false\n });\n onNodeDrop(e, _assertThisInitialized(_this));\n });\n // Disabled item still can be switch\n _defineProperty(_assertThisInitialized(_this), \"onExpand\", function (e) {\n var _this$props2 = _this.props,\n loading = _this$props2.loading,\n onNodeExpand = _this$props2.context.onNodeExpand;\n if (loading) return;\n onNodeExpand(e, convertNodePropsToEventData(_this.props));\n });\n // Drag usage\n _defineProperty(_assertThisInitialized(_this), \"setSelectHandle\", function (node) {\n _this.selectHandle = node;\n });\n _defineProperty(_assertThisInitialized(_this), \"getNodeState\", function () {\n var expanded = _this.props.expanded;\n if (_this.isLeaf()) {\n return null;\n }\n return expanded ? ICON_OPEN : ICON_CLOSE;\n });\n _defineProperty(_assertThisInitialized(_this), \"hasChildren\", function () {\n var eventKey = _this.props.eventKey;\n var keyEntities = _this.props.context.keyEntities;\n var _ref = getEntity(keyEntities, eventKey) || {},\n children = _ref.children;\n return !!(children || []).length;\n });\n _defineProperty(_assertThisInitialized(_this), \"isLeaf\", function () {\n var _this$props3 = _this.props,\n isLeaf = _this$props3.isLeaf,\n loaded = _this$props3.loaded;\n var loadData = _this.props.context.loadData;\n var hasChildren = _this.hasChildren();\n if (isLeaf === false) {\n return false;\n }\n return isLeaf || !loadData && !hasChildren || loadData && loaded && !hasChildren;\n });\n _defineProperty(_assertThisInitialized(_this), \"isDisabled\", function () {\n var disabled = _this.props.disabled;\n var treeDisabled = _this.props.context.disabled;\n return !!(treeDisabled || disabled);\n });\n _defineProperty(_assertThisInitialized(_this), \"isCheckable\", function () {\n var checkable = _this.props.checkable;\n var treeCheckable = _this.props.context.checkable;\n\n // Return false if tree or treeNode is not checkable\n if (!treeCheckable || checkable === false) return false;\n return treeCheckable;\n });\n // Load data to avoid default expanded tree without data\n _defineProperty(_assertThisInitialized(_this), \"syncLoadData\", function (props) {\n var expanded = props.expanded,\n loading = props.loading,\n loaded = props.loaded;\n var _this$props$context = _this.props.context,\n loadData = _this$props$context.loadData,\n onNodeLoad = _this$props$context.onNodeLoad;\n if (loading) {\n return;\n }\n\n // read from state to avoid loadData at same time\n if (loadData && expanded && !_this.isLeaf()) {\n // We needn't reload data when has children in sync logic\n // It's only needed in node expanded\n if (!_this.hasChildren() && !loaded) {\n onNodeLoad(convertNodePropsToEventData(_this.props));\n }\n }\n });\n _defineProperty(_assertThisInitialized(_this), \"isDraggable\", function () {\n var _this$props4 = _this.props,\n data = _this$props4.data,\n draggable = _this$props4.context.draggable;\n return !!(draggable && (!draggable.nodeDraggable || draggable.nodeDraggable(data)));\n });\n // ==================== Render: Drag Handler ====================\n _defineProperty(_assertThisInitialized(_this), \"renderDragHandler\", function () {\n var _this$props$context2 = _this.props.context,\n draggable = _this$props$context2.draggable,\n prefixCls = _this$props$context2.prefixCls;\n return draggable !== null && draggable !== void 0 && draggable.icon ? /*#__PURE__*/React.createElement(\"span\", {\n className: \"\".concat(prefixCls, \"-draggable-icon\")\n }, draggable.icon) : null;\n });\n // ====================== Render: Switcher ======================\n _defineProperty(_assertThisInitialized(_this), \"renderSwitcherIconDom\", function (isLeaf) {\n var switcherIconFromProps = _this.props.switcherIcon;\n var switcherIconFromCtx = _this.props.context.switcherIcon;\n var switcherIcon = switcherIconFromProps || switcherIconFromCtx;\n // if switcherIconDom is null, no render switcher span\n if (typeof switcherIcon === 'function') {\n return switcherIcon(_objectSpread(_objectSpread({}, _this.props), {}, {\n isLeaf: isLeaf\n }));\n }\n return switcherIcon;\n });\n // Switcher\n _defineProperty(_assertThisInitialized(_this), \"renderSwitcher\", function () {\n var expanded = _this.props.expanded;\n var prefixCls = _this.props.context.prefixCls;\n if (_this.isLeaf()) {\n // if switcherIconDom is null, no render switcher span\n var _switcherIconDom = _this.renderSwitcherIconDom(true);\n return _switcherIconDom !== false ? /*#__PURE__*/React.createElement(\"span\", {\n className: classNames(\"\".concat(prefixCls, \"-switcher\"), \"\".concat(prefixCls, \"-switcher-noop\"))\n }, _switcherIconDom) : null;\n }\n var switcherCls = classNames(\"\".concat(prefixCls, \"-switcher\"), \"\".concat(prefixCls, \"-switcher_\").concat(expanded ? ICON_OPEN : ICON_CLOSE));\n var switcherIconDom = _this.renderSwitcherIconDom(false);\n return switcherIconDom !== false ? /*#__PURE__*/React.createElement(\"span\", {\n onClick: _this.onExpand,\n className: switcherCls\n }, switcherIconDom) : null;\n });\n // ====================== Render: Checkbox ======================\n // Checkbox\n _defineProperty(_assertThisInitialized(_this), \"renderCheckbox\", function () {\n var _this$props5 = _this.props,\n checked = _this$props5.checked,\n halfChecked = _this$props5.halfChecked,\n disableCheckbox = _this$props5.disableCheckbox;\n var prefixCls = _this.props.context.prefixCls;\n var disabled = _this.isDisabled();\n var checkable = _this.isCheckable();\n if (!checkable) return null;\n\n // [Legacy] Custom element should be separate with `checkable` in future\n var $custom = typeof checkable !== 'boolean' ? checkable : null;\n return /*#__PURE__*/React.createElement(\"span\", {\n className: classNames(\"\".concat(prefixCls, \"-checkbox\"), checked && \"\".concat(prefixCls, \"-checkbox-checked\"), !checked && halfChecked && \"\".concat(prefixCls, \"-checkbox-indeterminate\"), (disabled || disableCheckbox) && \"\".concat(prefixCls, \"-checkbox-disabled\")),\n onClick: _this.onCheck\n }, $custom);\n });\n // ==================== Render: Title + Icon ====================\n _defineProperty(_assertThisInitialized(_this), \"renderIcon\", function () {\n var loading = _this.props.loading;\n var prefixCls = _this.props.context.prefixCls;\n return /*#__PURE__*/React.createElement(\"span\", {\n className: classNames(\"\".concat(prefixCls, \"-iconEle\"), \"\".concat(prefixCls, \"-icon__\").concat(_this.getNodeState() || 'docu'), loading && \"\".concat(prefixCls, \"-icon_loading\"))\n });\n });\n // Icon + Title\n _defineProperty(_assertThisInitialized(_this), \"renderSelector\", function () {\n var dragNodeHighlight = _this.state.dragNodeHighlight;\n var _this$props6 = _this.props,\n _this$props6$title = _this$props6.title,\n title = _this$props6$title === void 0 ? defaultTitle : _this$props6$title,\n selected = _this$props6.selected,\n icon = _this$props6.icon,\n loading = _this$props6.loading,\n data = _this$props6.data;\n var _this$props$context3 = _this.props.context,\n prefixCls = _this$props$context3.prefixCls,\n showIcon = _this$props$context3.showIcon,\n treeIcon = _this$props$context3.icon,\n loadData = _this$props$context3.loadData,\n titleRender = _this$props$context3.titleRender;\n var disabled = _this.isDisabled();\n var wrapClass = \"\".concat(prefixCls, \"-node-content-wrapper\");\n\n // Icon - Still show loading icon when loading without showIcon\n var $icon;\n if (showIcon) {\n var currentIcon = icon || treeIcon;\n $icon = currentIcon ? /*#__PURE__*/React.createElement(\"span\", {\n className: classNames(\"\".concat(prefixCls, \"-iconEle\"), \"\".concat(prefixCls, \"-icon__customize\"))\n }, typeof currentIcon === 'function' ? currentIcon(_this.props) : currentIcon) : _this.renderIcon();\n } else if (loadData && loading) {\n $icon = _this.renderIcon();\n }\n\n // Title\n var titleNode;\n if (typeof title === 'function') {\n titleNode = title(data);\n } else if (titleRender) {\n titleNode = titleRender(data);\n } else {\n titleNode = title;\n }\n var $title = /*#__PURE__*/React.createElement(\"span\", {\n className: \"\".concat(prefixCls, \"-title\")\n }, titleNode);\n return /*#__PURE__*/React.createElement(\"span\", {\n ref: _this.setSelectHandle,\n title: typeof title === 'string' ? title : '',\n className: classNames(\"\".concat(wrapClass), \"\".concat(wrapClass, \"-\").concat(_this.getNodeState() || 'normal'), !disabled && (selected || dragNodeHighlight) && \"\".concat(prefixCls, \"-node-selected\")),\n onMouseEnter: _this.onMouseEnter,\n onMouseLeave: _this.onMouseLeave,\n onContextMenu: _this.onContextMenu,\n onClick: _this.onSelectorClick,\n onDoubleClick: _this.onSelectorDoubleClick\n }, $icon, $title, _this.renderDropIndicator());\n });\n // =================== Render: Drop Indicator ===================\n _defineProperty(_assertThisInitialized(_this), \"renderDropIndicator\", function () {\n var _this$props7 = _this.props,\n disabled = _this$props7.disabled,\n eventKey = _this$props7.eventKey;\n var _this$props$context4 = _this.props.context,\n draggable = _this$props$context4.draggable,\n dropLevelOffset = _this$props$context4.dropLevelOffset,\n dropPosition = _this$props$context4.dropPosition,\n prefixCls = _this$props$context4.prefixCls,\n indent = _this$props$context4.indent,\n dropIndicatorRender = _this$props$context4.dropIndicatorRender,\n dragOverNodeKey = _this$props$context4.dragOverNodeKey,\n direction = _this$props$context4.direction;\n var rootDraggable = !!draggable;\n // allowDrop is calculated in Tree.tsx, there is no need for calc it here\n var showIndicator = !disabled && rootDraggable && dragOverNodeKey === eventKey;\n\n // This is a hot fix which is already fixed in\n // https://github.com/react-component/tree/pull/743/files\n // But some case need break point so we hack on this\n // ref https://github.com/ant-design/ant-design/issues/43493\n var mergedIndent = indent !== null && indent !== void 0 ? indent : _this.cacheIndent;\n _this.cacheIndent = indent;\n return showIndicator ? dropIndicatorRender({\n dropPosition: dropPosition,\n dropLevelOffset: dropLevelOffset,\n indent: mergedIndent,\n prefixCls: prefixCls,\n direction: direction\n }) : null;\n });\n return _this;\n }\n _createClass(InternalTreeNode, [{\n key: \"componentDidMount\",\n value:\n // Isomorphic needn't load data in server side\n function componentDidMount() {\n this.syncLoadData(this.props);\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate() {\n this.syncLoadData(this.props);\n }\n }, {\n key: \"isSelectable\",\n value: function isSelectable() {\n var selectable = this.props.selectable;\n var treeSelectable = this.props.context.selectable;\n\n // Ignore when selectable is undefined or null\n if (typeof selectable === 'boolean') {\n return selectable;\n }\n return treeSelectable;\n }\n }, {\n key: \"render\",\n value:\n // =========================== Render ===========================\n function render() {\n var _classNames;\n var _this$props8 = this.props,\n eventKey = _this$props8.eventKey,\n className = _this$props8.className,\n style = _this$props8.style,\n dragOver = _this$props8.dragOver,\n dragOverGapTop = _this$props8.dragOverGapTop,\n dragOverGapBottom = _this$props8.dragOverGapBottom,\n isLeaf = _this$props8.isLeaf,\n isStart = _this$props8.isStart,\n isEnd = _this$props8.isEnd,\n expanded = _this$props8.expanded,\n selected = _this$props8.selected,\n checked = _this$props8.checked,\n halfChecked = _this$props8.halfChecked,\n loading = _this$props8.loading,\n domRef = _this$props8.domRef,\n active = _this$props8.active,\n data = _this$props8.data,\n onMouseMove = _this$props8.onMouseMove,\n selectable = _this$props8.selectable,\n otherProps = _objectWithoutProperties(_this$props8, _excluded);\n var _this$props$context5 = this.props.context,\n prefixCls = _this$props$context5.prefixCls,\n filterTreeNode = _this$props$context5.filterTreeNode,\n keyEntities = _this$props$context5.keyEntities,\n dropContainerKey = _this$props$context5.dropContainerKey,\n dropTargetKey = _this$props$context5.dropTargetKey,\n draggingNodeKey = _this$props$context5.draggingNodeKey;\n var disabled = this.isDisabled();\n var dataOrAriaAttributeProps = pickAttrs(otherProps, {\n aria: true,\n data: true\n });\n var _ref2 = getEntity(keyEntities, eventKey) || {},\n level = _ref2.level;\n var isEndNode = isEnd[isEnd.length - 1];\n var mergedDraggable = this.isDraggable();\n var draggableWithoutDisabled = !disabled && mergedDraggable;\n var dragging = draggingNodeKey === eventKey;\n var ariaSelected = selectable !== undefined ? {\n 'aria-selected': !!selectable\n } : undefined;\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: domRef,\n className: classNames(className, \"\".concat(prefixCls, \"-treenode\"), (_classNames = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames, \"\".concat(prefixCls, \"-treenode-disabled\"), disabled), \"\".concat(prefixCls, \"-treenode-switcher-\").concat(expanded ? 'open' : 'close'), !isLeaf), \"\".concat(prefixCls, \"-treenode-checkbox-checked\"), checked), \"\".concat(prefixCls, \"-treenode-checkbox-indeterminate\"), halfChecked), \"\".concat(prefixCls, \"-treenode-selected\"), selected), \"\".concat(prefixCls, \"-treenode-loading\"), loading), \"\".concat(prefixCls, \"-treenode-active\"), active), \"\".concat(prefixCls, \"-treenode-leaf-last\"), isEndNode), \"\".concat(prefixCls, \"-treenode-draggable\"), mergedDraggable), \"dragging\", dragging), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames, 'drop-target', dropTargetKey === eventKey), 'drop-container', dropContainerKey === eventKey), 'drag-over', !disabled && dragOver), 'drag-over-gap-top', !disabled && dragOverGapTop), 'drag-over-gap-bottom', !disabled && dragOverGapBottom), 'filter-node', filterTreeNode && filterTreeNode(convertNodePropsToEventData(this.props))))),\n style: style\n // Draggable config\n ,\n draggable: draggableWithoutDisabled,\n \"aria-grabbed\": dragging,\n onDragStart: draggableWithoutDisabled ? this.onDragStart : undefined\n // Drop config\n ,\n onDragEnter: mergedDraggable ? this.onDragEnter : undefined,\n onDragOver: mergedDraggable ? this.onDragOver : undefined,\n onDragLeave: mergedDraggable ? this.onDragLeave : undefined,\n onDrop: mergedDraggable ? this.onDrop : undefined,\n onDragEnd: mergedDraggable ? this.onDragEnd : undefined,\n onMouseMove: onMouseMove\n }, ariaSelected, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement(Indent, {\n prefixCls: prefixCls,\n level: level,\n isStart: isStart,\n isEnd: isEnd\n }), this.renderDragHandler(), this.renderSwitcher(), this.renderCheckbox(), this.renderSelector());\n }\n }]);\n return InternalTreeNode;\n}(React.Component);\nvar ContextTreeNode = function ContextTreeNode(props) {\n return /*#__PURE__*/React.createElement(TreeContext.Consumer, null, function (context) {\n return /*#__PURE__*/React.createElement(InternalTreeNode, _extends({}, props, {\n context: context\n }));\n });\n};\nContextTreeNode.displayName = 'TreeNode';\nContextTreeNode.isTreeNode = 1;\nexport default ContextTreeNode;","import _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport * as React from 'react';\nimport useLayoutEffect from \"rc-util/es/hooks/useLayoutEffect\";\n\n/**\n * Trigger only when component unmount\n */\nexport default function useUnmount(triggerStart, triggerEnd) {\n var _React$useState = React.useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n firstMount = _React$useState2[0],\n setFirstMount = _React$useState2[1];\n useLayoutEffect(function () {\n if (firstMount) {\n triggerStart();\n return function () {\n triggerEnd();\n };\n }\n }, [firstMount]);\n useLayoutEffect(function () {\n setFirstMount(true);\n return function () {\n setFirstMount(false);\n };\n }, []);\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectDestructuringEmpty from \"@babel/runtime/helpers/esm/objectDestructuringEmpty\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nvar _excluded = [\"className\", \"style\", \"motion\", \"motionNodes\", \"motionType\", \"onMotionStart\", \"onMotionEnd\", \"active\", \"treeNodeRequiredProps\"];\nimport classNames from 'classnames';\nimport CSSMotion from 'rc-motion';\nimport useLayoutEffect from \"rc-util/es/hooks/useLayoutEffect\";\nimport * as React from 'react';\nimport { TreeContext } from \"./contextTypes\";\nimport TreeNode from \"./TreeNode\";\nimport useUnmount from \"./useUnmount\";\nimport { getTreeNodeProps } from \"./utils/treeUtil\";\nvar MotionTreeNode = function MotionTreeNode(_ref, ref) {\n var className = _ref.className,\n style = _ref.style,\n motion = _ref.motion,\n motionNodes = _ref.motionNodes,\n motionType = _ref.motionType,\n onOriginMotionStart = _ref.onMotionStart,\n onOriginMotionEnd = _ref.onMotionEnd,\n active = _ref.active,\n treeNodeRequiredProps = _ref.treeNodeRequiredProps,\n props = _objectWithoutProperties(_ref, _excluded);\n var _React$useState = React.useState(true),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n visible = _React$useState2[0],\n setVisible = _React$useState2[1];\n var _React$useContext = React.useContext(TreeContext),\n prefixCls = _React$useContext.prefixCls;\n\n // Calculate target visible here.\n // And apply in effect to make `leave` motion work.\n var targetVisible = motionNodes && motionType !== 'hide';\n useLayoutEffect(function () {\n if (motionNodes) {\n if (targetVisible !== visible) {\n setVisible(targetVisible);\n }\n }\n }, [motionNodes]);\n var triggerMotionStart = function triggerMotionStart() {\n if (motionNodes) {\n onOriginMotionStart();\n }\n };\n\n // Should only trigger once\n var triggerMotionEndRef = React.useRef(false);\n var triggerMotionEnd = function triggerMotionEnd() {\n if (motionNodes && !triggerMotionEndRef.current) {\n triggerMotionEndRef.current = true;\n onOriginMotionEnd();\n }\n };\n\n // Effect if unmount\n useUnmount(triggerMotionStart, triggerMotionEnd);\n\n // Motion end event\n var onVisibleChanged = function onVisibleChanged(nextVisible) {\n if (targetVisible === nextVisible) {\n triggerMotionEnd();\n }\n };\n if (motionNodes) {\n return /*#__PURE__*/React.createElement(CSSMotion, _extends({\n ref: ref,\n visible: visible\n }, motion, {\n motionAppear: motionType === 'show',\n onVisibleChanged: onVisibleChanged\n }), function (_ref2, motionRef) {\n var motionClassName = _ref2.className,\n motionStyle = _ref2.style;\n return /*#__PURE__*/React.createElement(\"div\", {\n ref: motionRef,\n className: classNames(\"\".concat(prefixCls, \"-treenode-motion\"), motionClassName),\n style: motionStyle\n }, motionNodes.map(function (treeNode) {\n var restProps = Object.assign({}, (_objectDestructuringEmpty(treeNode.data), treeNode.data)),\n title = treeNode.title,\n key = treeNode.key,\n isStart = treeNode.isStart,\n isEnd = treeNode.isEnd;\n delete restProps.children;\n var treeNodeProps = getTreeNodeProps(key, treeNodeRequiredProps);\n return /*#__PURE__*/React.createElement(TreeNode, _extends({}, restProps, treeNodeProps, {\n title: title,\n active: active,\n data: treeNode.data,\n key: key,\n isStart: isStart,\n isEnd: isEnd\n }));\n }));\n });\n }\n return /*#__PURE__*/React.createElement(TreeNode, _extends({\n domRef: ref,\n className: className,\n style: style\n }, props, {\n active: active\n }));\n};\nMotionTreeNode.displayName = 'MotionTreeNode';\nvar RefMotionTreeNode = /*#__PURE__*/React.forwardRef(MotionTreeNode);\nexport default RefMotionTreeNode;","export function findExpandedKeys() {\n var prev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];\n var next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n var prevLen = prev.length;\n var nextLen = next.length;\n if (Math.abs(prevLen - nextLen) !== 1) {\n return {\n add: false,\n key: null\n };\n }\n function find(shorter, longer) {\n var cache = new Map();\n shorter.forEach(function (key) {\n cache.set(key, true);\n });\n var keys = longer.filter(function (key) {\n return !cache.has(key);\n });\n return keys.length === 1 ? keys[0] : null;\n }\n if (prevLen < nextLen) {\n return {\n add: true,\n key: find(prev, next)\n };\n }\n return {\n add: false,\n key: find(next, prev)\n };\n}\nexport function getExpandRange(shorter, longer, key) {\n var shorterStartIndex = shorter.findIndex(function (data) {\n return data.key === key;\n });\n var shorterEndNode = shorter[shorterStartIndex + 1];\n var longerStartIndex = longer.findIndex(function (data) {\n return data.key === key;\n });\n if (shorterEndNode) {\n var longerEndIndex = longer.findIndex(function (data) {\n return data.key === shorterEndNode.key;\n });\n return longer.slice(longerStartIndex + 1, longerEndIndex);\n }\n return longer.slice(longerStartIndex + 1);\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectDestructuringEmpty from \"@babel/runtime/helpers/esm/objectDestructuringEmpty\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nvar _excluded = [\"prefixCls\", \"data\", \"selectable\", \"checkable\", \"expandedKeys\", \"selectedKeys\", \"checkedKeys\", \"loadedKeys\", \"loadingKeys\", \"halfCheckedKeys\", \"keyEntities\", \"disabled\", \"dragging\", \"dragOverNodeKey\", \"dropPosition\", \"motion\", \"height\", \"itemHeight\", \"virtual\", \"focusable\", \"activeItem\", \"focused\", \"tabIndex\", \"onKeyDown\", \"onFocus\", \"onBlur\", \"onActiveChange\", \"onListChangeStart\", \"onListChangeEnd\"];\n/**\n * Handle virtual list of the TreeNodes.\n */\n\nimport useLayoutEffect from \"rc-util/es/hooks/useLayoutEffect\";\nimport VirtualList from 'rc-virtual-list';\nimport * as React from 'react';\nimport MotionTreeNode from \"./MotionTreeNode\";\nimport { findExpandedKeys, getExpandRange } from \"./utils/diffUtil\";\nimport { getKey, getTreeNodeProps } from \"./utils/treeUtil\";\nvar HIDDEN_STYLE = {\n width: 0,\n height: 0,\n display: 'flex',\n overflow: 'hidden',\n opacity: 0,\n border: 0,\n padding: 0,\n margin: 0\n};\nvar noop = function noop() {};\nexport var MOTION_KEY = \"RC_TREE_MOTION_\".concat(Math.random());\nvar MotionNode = {\n key: MOTION_KEY\n};\nexport var MotionEntity = {\n key: MOTION_KEY,\n level: 0,\n index: 0,\n pos: '0',\n node: MotionNode,\n nodes: [MotionNode]\n};\nvar MotionFlattenData = {\n parent: null,\n children: [],\n pos: MotionEntity.pos,\n data: MotionNode,\n title: null,\n key: MOTION_KEY,\n /** Hold empty list here since we do not use it */\n isStart: [],\n isEnd: []\n};\n/**\n * We only need get visible content items to play the animation.\n */\nexport function getMinimumRangeTransitionRange(list, virtual, height, itemHeight) {\n if (virtual === false || !height) {\n return list;\n }\n return list.slice(0, Math.ceil(height / itemHeight) + 1);\n}\nfunction itemKey(item) {\n var key = item.key,\n pos = item.pos;\n return getKey(key, pos);\n}\nfunction getAccessibilityPath(item) {\n var path = String(item.data.key);\n var current = item;\n while (current.parent) {\n current = current.parent;\n path = \"\".concat(current.data.key, \" > \").concat(path);\n }\n return path;\n}\nvar NodeList = /*#__PURE__*/React.forwardRef(function (props, ref) {\n var prefixCls = props.prefixCls,\n data = props.data,\n selectable = props.selectable,\n checkable = props.checkable,\n expandedKeys = props.expandedKeys,\n selectedKeys = props.selectedKeys,\n checkedKeys = props.checkedKeys,\n loadedKeys = props.loadedKeys,\n loadingKeys = props.loadingKeys,\n halfCheckedKeys = props.halfCheckedKeys,\n keyEntities = props.keyEntities,\n disabled = props.disabled,\n dragging = props.dragging,\n dragOverNodeKey = props.dragOverNodeKey,\n dropPosition = props.dropPosition,\n motion = props.motion,\n height = props.height,\n itemHeight = props.itemHeight,\n virtual = props.virtual,\n focusable = props.focusable,\n activeItem = props.activeItem,\n focused = props.focused,\n tabIndex = props.tabIndex,\n onKeyDown = props.onKeyDown,\n onFocus = props.onFocus,\n onBlur = props.onBlur,\n onActiveChange = props.onActiveChange,\n onListChangeStart = props.onListChangeStart,\n onListChangeEnd = props.onListChangeEnd,\n domProps = _objectWithoutProperties(props, _excluded);\n\n // =============================== Ref ================================\n var listRef = React.useRef(null);\n var indentMeasurerRef = React.useRef(null);\n React.useImperativeHandle(ref, function () {\n return {\n scrollTo: function scrollTo(scroll) {\n listRef.current.scrollTo(scroll);\n },\n getIndentWidth: function getIndentWidth() {\n return indentMeasurerRef.current.offsetWidth;\n }\n };\n });\n\n // ============================== Motion ==============================\n var _React$useState = React.useState(expandedKeys),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n prevExpandedKeys = _React$useState2[0],\n setPrevExpandedKeys = _React$useState2[1];\n var _React$useState3 = React.useState(data),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n prevData = _React$useState4[0],\n setPrevData = _React$useState4[1];\n var _React$useState5 = React.useState(data),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n transitionData = _React$useState6[0],\n setTransitionData = _React$useState6[1];\n var _React$useState7 = React.useState([]),\n _React$useState8 = _slicedToArray(_React$useState7, 2),\n transitionRange = _React$useState8[0],\n setTransitionRange = _React$useState8[1];\n var _React$useState9 = React.useState(null),\n _React$useState10 = _slicedToArray(_React$useState9, 2),\n motionType = _React$useState10[0],\n setMotionType = _React$useState10[1];\n\n // When motion end but data change, this will makes data back to previous one\n var dataRef = React.useRef(data);\n dataRef.current = data;\n function onMotionEnd() {\n var latestData = dataRef.current;\n setPrevData(latestData);\n setTransitionData(latestData);\n setTransitionRange([]);\n setMotionType(null);\n onListChangeEnd();\n }\n\n // Do animation if expanded keys changed\n // layoutEffect here to avoid blink of node removing\n useLayoutEffect(function () {\n setPrevExpandedKeys(expandedKeys);\n var diffExpanded = findExpandedKeys(prevExpandedKeys, expandedKeys);\n if (diffExpanded.key !== null) {\n if (diffExpanded.add) {\n var keyIndex = prevData.findIndex(function (_ref) {\n var key = _ref.key;\n return key === diffExpanded.key;\n });\n var rangeNodes = getMinimumRangeTransitionRange(getExpandRange(prevData, data, diffExpanded.key), virtual, height, itemHeight);\n var newTransitionData = prevData.slice();\n newTransitionData.splice(keyIndex + 1, 0, MotionFlattenData);\n setTransitionData(newTransitionData);\n setTransitionRange(rangeNodes);\n setMotionType('show');\n } else {\n var _keyIndex = data.findIndex(function (_ref2) {\n var key = _ref2.key;\n return key === diffExpanded.key;\n });\n var _rangeNodes = getMinimumRangeTransitionRange(getExpandRange(data, prevData, diffExpanded.key), virtual, height, itemHeight);\n var _newTransitionData = data.slice();\n _newTransitionData.splice(_keyIndex + 1, 0, MotionFlattenData);\n setTransitionData(_newTransitionData);\n setTransitionRange(_rangeNodes);\n setMotionType('hide');\n }\n } else if (prevData !== data) {\n // If whole data changed, we just refresh the list\n setPrevData(data);\n setTransitionData(data);\n }\n }, [expandedKeys, data]);\n\n // We should clean up motion if is changed by dragging\n React.useEffect(function () {\n if (!dragging) {\n onMotionEnd();\n }\n }, [dragging]);\n var mergedData = motion ? transitionData : data;\n var treeNodeRequiredProps = {\n expandedKeys: expandedKeys,\n selectedKeys: selectedKeys,\n loadedKeys: loadedKeys,\n loadingKeys: loadingKeys,\n checkedKeys: checkedKeys,\n halfCheckedKeys: halfCheckedKeys,\n dragOverNodeKey: dragOverNodeKey,\n dropPosition: dropPosition,\n keyEntities: keyEntities\n };\n return /*#__PURE__*/React.createElement(React.Fragment, null, focused && activeItem && /*#__PURE__*/React.createElement(\"span\", {\n style: HIDDEN_STYLE,\n \"aria-live\": \"assertive\"\n }, getAccessibilityPath(activeItem)), /*#__PURE__*/React.createElement(\"div\", null, /*#__PURE__*/React.createElement(\"input\", {\n style: HIDDEN_STYLE,\n disabled: focusable === false || disabled,\n tabIndex: focusable !== false ? tabIndex : null,\n onKeyDown: onKeyDown,\n onFocus: onFocus,\n onBlur: onBlur,\n value: \"\",\n onChange: noop,\n \"aria-label\": \"for screen reader\"\n })), /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(prefixCls, \"-treenode\"),\n \"aria-hidden\": true,\n style: {\n position: 'absolute',\n pointerEvents: 'none',\n visibility: 'hidden',\n height: 0,\n overflow: 'hidden',\n border: 0,\n padding: 0\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(prefixCls, \"-indent\")\n }, /*#__PURE__*/React.createElement(\"div\", {\n ref: indentMeasurerRef,\n className: \"\".concat(prefixCls, \"-indent-unit\")\n }))), /*#__PURE__*/React.createElement(VirtualList, _extends({}, domProps, {\n data: mergedData,\n itemKey: itemKey,\n height: height,\n fullHeight: false,\n virtual: virtual,\n itemHeight: itemHeight,\n prefixCls: \"\".concat(prefixCls, \"-list\"),\n ref: listRef,\n onVisibleChange: function onVisibleChange(originList, fullList) {\n var originSet = new Set(originList);\n var restList = fullList.filter(function (item) {\n return !originSet.has(item);\n });\n\n // Motion node is not render. Skip motion\n if (restList.some(function (item) {\n return itemKey(item) === MOTION_KEY;\n })) {\n onMotionEnd();\n }\n }\n }), function (treeNode) {\n var pos = treeNode.pos,\n restProps = Object.assign({}, (_objectDestructuringEmpty(treeNode.data), treeNode.data)),\n title = treeNode.title,\n key = treeNode.key,\n isStart = treeNode.isStart,\n isEnd = treeNode.isEnd;\n var mergedKey = getKey(key, pos);\n delete restProps.key;\n delete restProps.children;\n var treeNodeProps = getTreeNodeProps(mergedKey, treeNodeRequiredProps);\n return /*#__PURE__*/React.createElement(MotionTreeNode, _extends({}, restProps, treeNodeProps, {\n title: title,\n active: !!activeItem && key === activeItem.key,\n pos: pos,\n data: treeNode.data,\n isStart: isStart,\n isEnd: isEnd,\n motion: motion,\n motionNodes: key === MOTION_KEY ? transitionRange : null,\n motionType: motionType,\n onMotionStart: onListChangeStart,\n onMotionEnd: onMotionEnd,\n treeNodeRequiredProps: treeNodeRequiredProps,\n onMouseMove: function onMouseMove() {\n onActiveChange(null);\n }\n }));\n }));\n});\nNodeList.displayName = 'NodeList';\nexport default NodeList;","import _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nvar _excluded = [\"children\"];\n/* eslint-disable no-lonely-if */\n/**\n * Legacy code. Should avoid to use if you are new to import these code.\n */\n\nimport warning from \"rc-util/es/warning\";\nimport React from 'react';\nimport TreeNode from \"./TreeNode\";\nimport getEntity from \"./utils/keyUtil\";\nexport { getPosition, isTreeNode } from \"./utils/treeUtil\";\nexport function arrDel(list, value) {\n if (!list) return [];\n var clone = list.slice();\n var index = clone.indexOf(value);\n if (index >= 0) {\n clone.splice(index, 1);\n }\n return clone;\n}\nexport function arrAdd(list, value) {\n var clone = (list || []).slice();\n if (clone.indexOf(value) === -1) {\n clone.push(value);\n }\n return clone;\n}\nexport function posToArr(pos) {\n return pos.split('-');\n}\nexport function getDragChildrenKeys(dragNodeKey, keyEntities) {\n // not contains self\n // self for left or right drag\n var dragChildrenKeys = [];\n var entity = getEntity(keyEntities, dragNodeKey);\n function dig() {\n var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];\n list.forEach(function (_ref) {\n var key = _ref.key,\n children = _ref.children;\n dragChildrenKeys.push(key);\n dig(children);\n });\n }\n dig(entity.children);\n return dragChildrenKeys;\n}\nexport function isLastChild(treeNodeEntity) {\n if (treeNodeEntity.parent) {\n var posArr = posToArr(treeNodeEntity.pos);\n return Number(posArr[posArr.length - 1]) === treeNodeEntity.parent.children.length - 1;\n }\n return false;\n}\nexport function isFirstChild(treeNodeEntity) {\n var posArr = posToArr(treeNodeEntity.pos);\n return Number(posArr[posArr.length - 1]) === 0;\n}\n\n// Only used when drag, not affect SSR.\nexport function calcDropPosition(event, dragNode, targetNode, indent, startMousePosition, allowDrop, flattenedNodes, keyEntities, expandKeys, direction) {\n var _abstractDropNodeEnti;\n var clientX = event.clientX,\n clientY = event.clientY;\n var _getBoundingClientRec = event.target.getBoundingClientRect(),\n top = _getBoundingClientRec.top,\n height = _getBoundingClientRec.height;\n // optional chain for testing\n var horizontalMouseOffset = (direction === 'rtl' ? -1 : 1) * (((startMousePosition === null || startMousePosition === void 0 ? void 0 : startMousePosition.x) || 0) - clientX);\n var rawDropLevelOffset = (horizontalMouseOffset - 12) / indent;\n\n // Filter the expanded keys to exclude the node that not has children currently (like async nodes).\n var filteredExpandKeys = expandKeys.filter(function (key) {\n var _keyEntities$key;\n return (_keyEntities$key = keyEntities[key]) === null || _keyEntities$key === void 0 || (_keyEntities$key = _keyEntities$key.children) === null || _keyEntities$key === void 0 ? void 0 : _keyEntities$key.length;\n });\n\n // find abstract drop node by horizontal offset\n var abstractDropNodeEntity = getEntity(keyEntities, targetNode.props.eventKey);\n if (clientY < top + height / 2) {\n // first half, set abstract drop node to previous node\n var nodeIndex = flattenedNodes.findIndex(function (flattenedNode) {\n return flattenedNode.key === abstractDropNodeEntity.key;\n });\n var prevNodeIndex = nodeIndex <= 0 ? 0 : nodeIndex - 1;\n var prevNodeKey = flattenedNodes[prevNodeIndex].key;\n abstractDropNodeEntity = getEntity(keyEntities, prevNodeKey);\n }\n var initialAbstractDropNodeKey = abstractDropNodeEntity.key;\n var abstractDragOverEntity = abstractDropNodeEntity;\n var dragOverNodeKey = abstractDropNodeEntity.key;\n var dropPosition = 0;\n var dropLevelOffset = 0;\n\n // Only allow cross level drop when dragging on a non-expanded node\n if (!filteredExpandKeys.includes(initialAbstractDropNodeKey)) {\n for (var i = 0; i < rawDropLevelOffset; i += 1) {\n if (isLastChild(abstractDropNodeEntity)) {\n abstractDropNodeEntity = abstractDropNodeEntity.parent;\n dropLevelOffset += 1;\n } else {\n break;\n }\n }\n }\n var abstractDragDataNode = dragNode.props.data;\n var abstractDropDataNode = abstractDropNodeEntity.node;\n var dropAllowed = true;\n if (isFirstChild(abstractDropNodeEntity) && abstractDropNodeEntity.level === 0 && clientY < top + height / 2 && allowDrop({\n dragNode: abstractDragDataNode,\n dropNode: abstractDropDataNode,\n dropPosition: -1\n }) && abstractDropNodeEntity.key === targetNode.props.eventKey) {\n // first half of first node in first level\n dropPosition = -1;\n } else if ((abstractDragOverEntity.children || []).length && filteredExpandKeys.includes(dragOverNodeKey)) {\n // drop on expanded node\n // only allow drop inside\n if (allowDrop({\n dragNode: abstractDragDataNode,\n dropNode: abstractDropDataNode,\n dropPosition: 0\n })) {\n dropPosition = 0;\n } else {\n dropAllowed = false;\n }\n } else if (dropLevelOffset === 0) {\n if (rawDropLevelOffset > -1.5) {\n // | Node | <- abstractDropNode\n // | -^-===== | <- mousePosition\n // 1. try drop after\n // 2. do not allow drop\n if (allowDrop({\n dragNode: abstractDragDataNode,\n dropNode: abstractDropDataNode,\n dropPosition: 1\n })) {\n dropPosition = 1;\n } else {\n dropAllowed = false;\n }\n } else {\n // | Node | <- abstractDropNode\n // | ---==^== | <- mousePosition\n // whether it has children or doesn't has children\n // always\n // 1. try drop inside\n // 2. try drop after\n // 3. do not allow drop\n if (allowDrop({\n dragNode: abstractDragDataNode,\n dropNode: abstractDropDataNode,\n dropPosition: 0\n })) {\n dropPosition = 0;\n } else if (allowDrop({\n dragNode: abstractDragDataNode,\n dropNode: abstractDropDataNode,\n dropPosition: 1\n })) {\n dropPosition = 1;\n } else {\n dropAllowed = false;\n }\n }\n } else {\n // | Node1 | <- abstractDropNode\n // | Node2 |\n // --^--|----=====| <- mousePosition\n // 1. try insert after Node1\n // 2. do not allow drop\n if (allowDrop({\n dragNode: abstractDragDataNode,\n dropNode: abstractDropDataNode,\n dropPosition: 1\n })) {\n dropPosition = 1;\n } else {\n dropAllowed = false;\n }\n }\n return {\n dropPosition: dropPosition,\n dropLevelOffset: dropLevelOffset,\n dropTargetKey: abstractDropNodeEntity.key,\n dropTargetPos: abstractDropNodeEntity.pos,\n dragOverNodeKey: dragOverNodeKey,\n dropContainerKey: dropPosition === 0 ? null : ((_abstractDropNodeEnti = abstractDropNodeEntity.parent) === null || _abstractDropNodeEnti === void 0 ? void 0 : _abstractDropNodeEnti.key) || null,\n dropAllowed: dropAllowed\n };\n}\n\n/**\n * Return selectedKeys according with multiple prop\n * @param selectedKeys\n * @param props\n * @returns [string]\n */\nexport function calcSelectedKeys(selectedKeys, props) {\n if (!selectedKeys) return undefined;\n var multiple = props.multiple;\n if (multiple) {\n return selectedKeys.slice();\n }\n if (selectedKeys.length) {\n return [selectedKeys[0]];\n }\n return selectedKeys;\n}\nvar internalProcessProps = function internalProcessProps(props) {\n return props;\n};\nexport function convertDataToTree(treeData, processor) {\n if (!treeData) return [];\n var _ref2 = processor || {},\n _ref2$processProps = _ref2.processProps,\n processProps = _ref2$processProps === void 0 ? internalProcessProps : _ref2$processProps;\n var list = Array.isArray(treeData) ? treeData : [treeData];\n return list.map(function (_ref3) {\n var children = _ref3.children,\n props = _objectWithoutProperties(_ref3, _excluded);\n var childrenNodes = convertDataToTree(children, processor);\n return /*#__PURE__*/React.createElement(TreeNode, _extends({\n key: props.key\n }, processProps(props)), childrenNodes);\n });\n}\n\n/**\n * Parse `checkedKeys` to { checkedKeys, halfCheckedKeys } style\n */\nexport function parseCheckedKeys(keys) {\n if (!keys) {\n return null;\n }\n\n // Convert keys to object format\n var keyProps;\n if (Array.isArray(keys)) {\n // [Legacy] Follow the api doc\n keyProps = {\n checkedKeys: keys,\n halfCheckedKeys: undefined\n };\n } else if (_typeof(keys) === 'object') {\n keyProps = {\n checkedKeys: keys.checked || undefined,\n halfCheckedKeys: keys.halfChecked || undefined\n };\n } else {\n warning(false, '`checkedKeys` is not an array or an object');\n return null;\n }\n return keyProps;\n}\n\n/**\n * If user use `autoExpandParent` we should get the list of parent node\n * @param keyList\n * @param keyEntities\n */\nexport function conductExpandParent(keyList, keyEntities) {\n var expandedKeys = new Set();\n function conductUp(key) {\n if (expandedKeys.has(key)) return;\n var entity = getEntity(keyEntities, key);\n if (!entity) return;\n expandedKeys.add(key);\n var parent = entity.parent,\n node = entity.node;\n if (node.disabled) return;\n if (parent) {\n conductUp(parent.key);\n }\n }\n (keyList || []).forEach(function (key) {\n conductUp(key);\n });\n return _toConsumableArray(expandedKeys);\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport _objectSpread from \"@babel/runtime/helpers/esm/objectSpread2\";\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _classCallCheck from \"@babel/runtime/helpers/esm/classCallCheck\";\nimport _createClass from \"@babel/runtime/helpers/esm/createClass\";\nimport _assertThisInitialized from \"@babel/runtime/helpers/esm/assertThisInitialized\";\nimport _inherits from \"@babel/runtime/helpers/esm/inherits\";\nimport _createSuper from \"@babel/runtime/helpers/esm/createSuper\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\n// TODO: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-2/treeview-2a.html\n// Fully accessibility support\n\nimport classNames from 'classnames';\nimport KeyCode from \"rc-util/es/KeyCode\";\nimport pickAttrs from \"rc-util/es/pickAttrs\";\nimport warning from \"rc-util/es/warning\";\nimport * as React from 'react';\nimport { TreeContext } from \"./contextTypes\";\nimport DropIndicator from \"./DropIndicator\";\nimport NodeList, { MotionEntity, MOTION_KEY } from \"./NodeList\";\nimport TreeNode from \"./TreeNode\";\nimport { arrAdd, arrDel, calcDropPosition, calcSelectedKeys, conductExpandParent, getDragChildrenKeys, parseCheckedKeys, posToArr } from \"./util\";\nimport { conductCheck } from \"./utils/conductUtil\";\nimport getEntity from \"./utils/keyUtil\";\nimport { convertDataToEntities, convertNodePropsToEventData, convertTreeToData, fillFieldNames, flattenTreeData, getTreeNodeProps, warningWithoutKey } from \"./utils/treeUtil\";\nvar MAX_RETRY_TIMES = 10;\nvar Tree = /*#__PURE__*/function (_React$Component) {\n _inherits(Tree, _React$Component);\n var _super = _createSuper(Tree);\n function Tree() {\n var _this;\n _classCallCheck(this, Tree);\n for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {\n _args[_key] = arguments[_key];\n }\n _this = _super.call.apply(_super, [this].concat(_args));\n _defineProperty(_assertThisInitialized(_this), \"destroyed\", false);\n _defineProperty(_assertThisInitialized(_this), \"delayedDragEnterLogic\", void 0);\n _defineProperty(_assertThisInitialized(_this), \"loadingRetryTimes\", {});\n _defineProperty(_assertThisInitialized(_this), \"state\", {\n keyEntities: {},\n indent: null,\n selectedKeys: [],\n checkedKeys: [],\n halfCheckedKeys: [],\n loadedKeys: [],\n loadingKeys: [],\n expandedKeys: [],\n draggingNodeKey: null,\n dragChildrenKeys: [],\n // dropTargetKey is the key of abstract-drop-node\n // the abstract-drop-node is the real drop node when drag and drop\n // not the DOM drag over node\n dropTargetKey: null,\n dropPosition: null,\n // the drop position of abstract-drop-node, inside 0, top -1, bottom 1\n dropContainerKey: null,\n // the container key of abstract-drop-node if dropPosition is -1 or 1\n dropLevelOffset: null,\n // the drop level offset of abstract-drag-over-node\n dropTargetPos: null,\n // the pos of abstract-drop-node\n dropAllowed: true,\n // if drop to abstract-drop-node is allowed\n // the abstract-drag-over-node\n // if mouse is on the bottom of top dom node or no the top of the bottom dom node\n // abstract-drag-over-node is the top node\n dragOverNodeKey: null,\n treeData: [],\n flattenNodes: [],\n focused: false,\n activeKey: null,\n listChanging: false,\n prevProps: null,\n fieldNames: fillFieldNames()\n });\n _defineProperty(_assertThisInitialized(_this), \"dragStartMousePosition\", null);\n _defineProperty(_assertThisInitialized(_this), \"dragNode\", void 0);\n _defineProperty(_assertThisInitialized(_this), \"currentMouseOverDroppableNodeKey\", null);\n _defineProperty(_assertThisInitialized(_this), \"listRef\", /*#__PURE__*/React.createRef());\n _defineProperty(_assertThisInitialized(_this), \"onNodeDragStart\", function (event, node) {\n var _this$state = _this.state,\n expandedKeys = _this$state.expandedKeys,\n keyEntities = _this$state.keyEntities;\n var onDragStart = _this.props.onDragStart;\n var eventKey = node.props.eventKey;\n _this.dragNode = node;\n _this.dragStartMousePosition = {\n x: event.clientX,\n y: event.clientY\n };\n var newExpandedKeys = arrDel(expandedKeys, eventKey);\n _this.setState({\n draggingNodeKey: eventKey,\n dragChildrenKeys: getDragChildrenKeys(eventKey, keyEntities),\n indent: _this.listRef.current.getIndentWidth()\n });\n _this.setExpandedKeys(newExpandedKeys);\n window.addEventListener('dragend', _this.onWindowDragEnd);\n onDragStart === null || onDragStart === void 0 || onDragStart({\n event: event,\n node: convertNodePropsToEventData(node.props)\n });\n });\n /**\n * [Legacy] Select handler is smaller than node,\n * so that this will trigger when drag enter node or select handler.\n * This is a little tricky if customize css without padding.\n * Better for use mouse move event to refresh drag state.\n * But let's just keep it to avoid event trigger logic change.\n */\n _defineProperty(_assertThisInitialized(_this), \"onNodeDragEnter\", function (event, node) {\n var _this$state2 = _this.state,\n expandedKeys = _this$state2.expandedKeys,\n keyEntities = _this$state2.keyEntities,\n dragChildrenKeys = _this$state2.dragChildrenKeys,\n flattenNodes = _this$state2.flattenNodes,\n indent = _this$state2.indent;\n var _this$props = _this.props,\n onDragEnter = _this$props.onDragEnter,\n onExpand = _this$props.onExpand,\n allowDrop = _this$props.allowDrop,\n direction = _this$props.direction;\n var _node$props = node.props,\n pos = _node$props.pos,\n eventKey = _node$props.eventKey;\n var _assertThisInitialize = _assertThisInitialized(_this),\n dragNode = _assertThisInitialize.dragNode;\n\n // record the key of node which is latest entered, used in dragleave event.\n if (_this.currentMouseOverDroppableNodeKey !== eventKey) {\n _this.currentMouseOverDroppableNodeKey = eventKey;\n }\n if (!dragNode) {\n _this.resetDragState();\n return;\n }\n var _calcDropPosition = calcDropPosition(event, dragNode, node, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),\n dropPosition = _calcDropPosition.dropPosition,\n dropLevelOffset = _calcDropPosition.dropLevelOffset,\n dropTargetKey = _calcDropPosition.dropTargetKey,\n dropContainerKey = _calcDropPosition.dropContainerKey,\n dropTargetPos = _calcDropPosition.dropTargetPos,\n dropAllowed = _calcDropPosition.dropAllowed,\n dragOverNodeKey = _calcDropPosition.dragOverNodeKey;\n if (\n // don't allow drop inside its children\n dragChildrenKeys.indexOf(dropTargetKey) !== -1 ||\n // don't allow drop when drop is not allowed caculated by calcDropPosition\n !dropAllowed) {\n _this.resetDragState();\n return;\n }\n\n // Side effect for delay drag\n if (!_this.delayedDragEnterLogic) {\n _this.delayedDragEnterLogic = {};\n }\n Object.keys(_this.delayedDragEnterLogic).forEach(function (key) {\n clearTimeout(_this.delayedDragEnterLogic[key]);\n });\n if (dragNode.props.eventKey !== node.props.eventKey) {\n // hoist expand logic here\n // since if logic is on the bottom\n // it will be blocked by abstract dragover node check\n // => if you dragenter from top, you mouse will still be consider as in the top node\n event.persist();\n _this.delayedDragEnterLogic[pos] = window.setTimeout(function () {\n if (_this.state.draggingNodeKey === null) return;\n var newExpandedKeys = _toConsumableArray(expandedKeys);\n var entity = getEntity(keyEntities, node.props.eventKey);\n if (entity && (entity.children || []).length) {\n newExpandedKeys = arrAdd(expandedKeys, node.props.eventKey);\n }\n if (!('expandedKeys' in _this.props)) {\n _this.setExpandedKeys(newExpandedKeys);\n }\n onExpand === null || onExpand === void 0 || onExpand(newExpandedKeys, {\n node: convertNodePropsToEventData(node.props),\n expanded: true,\n nativeEvent: event.nativeEvent\n });\n }, 800);\n }\n\n // Skip if drag node is self\n if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) {\n _this.resetDragState();\n return;\n }\n\n // Update drag over node and drag state\n _this.setState({\n dragOverNodeKey: dragOverNodeKey,\n dropPosition: dropPosition,\n dropLevelOffset: dropLevelOffset,\n dropTargetKey: dropTargetKey,\n dropContainerKey: dropContainerKey,\n dropTargetPos: dropTargetPos,\n dropAllowed: dropAllowed\n });\n onDragEnter === null || onDragEnter === void 0 || onDragEnter({\n event: event,\n node: convertNodePropsToEventData(node.props),\n expandedKeys: expandedKeys\n });\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeDragOver\", function (event, node) {\n var _this$state3 = _this.state,\n dragChildrenKeys = _this$state3.dragChildrenKeys,\n flattenNodes = _this$state3.flattenNodes,\n keyEntities = _this$state3.keyEntities,\n expandedKeys = _this$state3.expandedKeys,\n indent = _this$state3.indent;\n var _this$props2 = _this.props,\n onDragOver = _this$props2.onDragOver,\n allowDrop = _this$props2.allowDrop,\n direction = _this$props2.direction;\n var _assertThisInitialize2 = _assertThisInitialized(_this),\n dragNode = _assertThisInitialize2.dragNode;\n if (!dragNode) {\n return;\n }\n var _calcDropPosition2 = calcDropPosition(event, dragNode, node, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),\n dropPosition = _calcDropPosition2.dropPosition,\n dropLevelOffset = _calcDropPosition2.dropLevelOffset,\n dropTargetKey = _calcDropPosition2.dropTargetKey,\n dropContainerKey = _calcDropPosition2.dropContainerKey,\n dropAllowed = _calcDropPosition2.dropAllowed,\n dropTargetPos = _calcDropPosition2.dropTargetPos,\n dragOverNodeKey = _calcDropPosition2.dragOverNodeKey;\n if (dragChildrenKeys.indexOf(dropTargetKey) !== -1 || !dropAllowed) {\n // don't allow drop inside its children\n // don't allow drop when drop is not allowed calculated by calcDropPosition\n return;\n }\n\n // Update drag position\n\n if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) {\n if (!(_this.state.dropPosition === null && _this.state.dropLevelOffset === null && _this.state.dropTargetKey === null && _this.state.dropContainerKey === null && _this.state.dropTargetPos === null && _this.state.dropAllowed === false && _this.state.dragOverNodeKey === null)) {\n _this.resetDragState();\n }\n } else if (!(dropPosition === _this.state.dropPosition && dropLevelOffset === _this.state.dropLevelOffset && dropTargetKey === _this.state.dropTargetKey && dropContainerKey === _this.state.dropContainerKey && dropTargetPos === _this.state.dropTargetPos && dropAllowed === _this.state.dropAllowed && dragOverNodeKey === _this.state.dragOverNodeKey)) {\n _this.setState({\n dropPosition: dropPosition,\n dropLevelOffset: dropLevelOffset,\n dropTargetKey: dropTargetKey,\n dropContainerKey: dropContainerKey,\n dropTargetPos: dropTargetPos,\n dropAllowed: dropAllowed,\n dragOverNodeKey: dragOverNodeKey\n });\n }\n onDragOver === null || onDragOver === void 0 || onDragOver({\n event: event,\n node: convertNodePropsToEventData(node.props)\n });\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeDragLeave\", function (event, node) {\n // if it is outside the droppable area\n // currentMouseOverDroppableNodeKey will be updated in dragenter event when into another droppable receiver.\n if (_this.currentMouseOverDroppableNodeKey === node.props.eventKey && !event.currentTarget.contains(event.relatedTarget)) {\n _this.resetDragState();\n _this.currentMouseOverDroppableNodeKey = null;\n }\n var onDragLeave = _this.props.onDragLeave;\n onDragLeave === null || onDragLeave === void 0 || onDragLeave({\n event: event,\n node: convertNodePropsToEventData(node.props)\n });\n });\n // since stopPropagation() is called in treeNode\n // if onWindowDrag is called, whice means state is keeped, drag state should be cleared\n _defineProperty(_assertThisInitialized(_this), \"onWindowDragEnd\", function (event) {\n _this.onNodeDragEnd(event, null, true);\n window.removeEventListener('dragend', _this.onWindowDragEnd);\n });\n // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called\n _defineProperty(_assertThisInitialized(_this), \"onNodeDragEnd\", function (event, node) {\n var onDragEnd = _this.props.onDragEnd;\n _this.setState({\n dragOverNodeKey: null\n });\n _this.cleanDragState();\n onDragEnd === null || onDragEnd === void 0 || onDragEnd({\n event: event,\n node: convertNodePropsToEventData(node.props)\n });\n _this.dragNode = null;\n window.removeEventListener('dragend', _this.onWindowDragEnd);\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeDrop\", function (event, node) {\n var _this$getActiveItem;\n var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n var _this$state4 = _this.state,\n dragChildrenKeys = _this$state4.dragChildrenKeys,\n dropPosition = _this$state4.dropPosition,\n dropTargetKey = _this$state4.dropTargetKey,\n dropTargetPos = _this$state4.dropTargetPos,\n dropAllowed = _this$state4.dropAllowed;\n if (!dropAllowed) return;\n var onDrop = _this.props.onDrop;\n _this.setState({\n dragOverNodeKey: null\n });\n _this.cleanDragState();\n if (dropTargetKey === null) return;\n var abstractDropNodeProps = _objectSpread(_objectSpread({}, getTreeNodeProps(dropTargetKey, _this.getTreeNodeRequiredProps())), {}, {\n active: ((_this$getActiveItem = _this.getActiveItem()) === null || _this$getActiveItem === void 0 ? void 0 : _this$getActiveItem.key) === dropTargetKey,\n data: getEntity(_this.state.keyEntities, dropTargetKey).node\n });\n var dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1;\n warning(!dropToChild, \"Can not drop to dragNode's children node. This is a bug of rc-tree. Please report an issue.\");\n var posArr = posToArr(dropTargetPos);\n var dropResult = {\n event: event,\n node: convertNodePropsToEventData(abstractDropNodeProps),\n dragNode: _this.dragNode ? convertNodePropsToEventData(_this.dragNode.props) : null,\n dragNodesKeys: [_this.dragNode.props.eventKey].concat(dragChildrenKeys),\n dropToGap: dropPosition !== 0,\n dropPosition: dropPosition + Number(posArr[posArr.length - 1])\n };\n if (!outsideTree) {\n onDrop === null || onDrop === void 0 || onDrop(dropResult);\n }\n _this.dragNode = null;\n });\n _defineProperty(_assertThisInitialized(_this), \"cleanDragState\", function () {\n var draggingNodeKey = _this.state.draggingNodeKey;\n if (draggingNodeKey !== null) {\n _this.setState({\n draggingNodeKey: null,\n dropPosition: null,\n dropContainerKey: null,\n dropTargetKey: null,\n dropLevelOffset: null,\n dropAllowed: true,\n dragOverNodeKey: null\n });\n }\n _this.dragStartMousePosition = null;\n _this.currentMouseOverDroppableNodeKey = null;\n });\n _defineProperty(_assertThisInitialized(_this), \"triggerExpandActionExpand\", function (e, treeNode) {\n var _this$state5 = _this.state,\n expandedKeys = _this$state5.expandedKeys,\n flattenNodes = _this$state5.flattenNodes;\n var expanded = treeNode.expanded,\n key = treeNode.key,\n isLeaf = treeNode.isLeaf;\n if (isLeaf || e.shiftKey || e.metaKey || e.ctrlKey) {\n return;\n }\n var node = flattenNodes.filter(function (nodeItem) {\n return nodeItem.key === key;\n })[0];\n var eventNode = convertNodePropsToEventData(_objectSpread(_objectSpread({}, getTreeNodeProps(key, _this.getTreeNodeRequiredProps())), {}, {\n data: node.data\n }));\n _this.setExpandedKeys(expanded ? arrDel(expandedKeys, key) : arrAdd(expandedKeys, key));\n _this.onNodeExpand(e, eventNode);\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeClick\", function (e, treeNode) {\n var _this$props3 = _this.props,\n onClick = _this$props3.onClick,\n expandAction = _this$props3.expandAction;\n if (expandAction === 'click') {\n _this.triggerExpandActionExpand(e, treeNode);\n }\n onClick === null || onClick === void 0 || onClick(e, treeNode);\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeDoubleClick\", function (e, treeNode) {\n var _this$props4 = _this.props,\n onDoubleClick = _this$props4.onDoubleClick,\n expandAction = _this$props4.expandAction;\n if (expandAction === 'doubleClick') {\n _this.triggerExpandActionExpand(e, treeNode);\n }\n onDoubleClick === null || onDoubleClick === void 0 || onDoubleClick(e, treeNode);\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeSelect\", function (e, treeNode) {\n var selectedKeys = _this.state.selectedKeys;\n var _this$state6 = _this.state,\n keyEntities = _this$state6.keyEntities,\n fieldNames = _this$state6.fieldNames;\n var _this$props5 = _this.props,\n onSelect = _this$props5.onSelect,\n multiple = _this$props5.multiple;\n var selected = treeNode.selected;\n var key = treeNode[fieldNames.key];\n var targetSelected = !selected;\n\n // Update selected keys\n if (!targetSelected) {\n selectedKeys = arrDel(selectedKeys, key);\n } else if (!multiple) {\n selectedKeys = [key];\n } else {\n selectedKeys = arrAdd(selectedKeys, key);\n }\n\n // [Legacy] Not found related usage in doc or upper libs\n var selectedNodes = selectedKeys.map(function (selectedKey) {\n var entity = getEntity(keyEntities, selectedKey);\n if (!entity) return null;\n return entity.node;\n }).filter(function (node) {\n return node;\n });\n _this.setUncontrolledState({\n selectedKeys: selectedKeys\n });\n onSelect === null || onSelect === void 0 || onSelect(selectedKeys, {\n event: 'select',\n selected: targetSelected,\n node: treeNode,\n selectedNodes: selectedNodes,\n nativeEvent: e.nativeEvent\n });\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeCheck\", function (e, treeNode, checked) {\n var _this$state7 = _this.state,\n keyEntities = _this$state7.keyEntities,\n oriCheckedKeys = _this$state7.checkedKeys,\n oriHalfCheckedKeys = _this$state7.halfCheckedKeys;\n var _this$props6 = _this.props,\n checkStrictly = _this$props6.checkStrictly,\n onCheck = _this$props6.onCheck;\n var key = treeNode.key;\n\n // Prepare trigger arguments\n var checkedObj;\n var eventObj = {\n event: 'check',\n node: treeNode,\n checked: checked,\n nativeEvent: e.nativeEvent\n };\n if (checkStrictly) {\n var checkedKeys = checked ? arrAdd(oriCheckedKeys, key) : arrDel(oriCheckedKeys, key);\n var halfCheckedKeys = arrDel(oriHalfCheckedKeys, key);\n checkedObj = {\n checked: checkedKeys,\n halfChecked: halfCheckedKeys\n };\n eventObj.checkedNodes = checkedKeys.map(function (checkedKey) {\n return getEntity(keyEntities, checkedKey);\n }).filter(function (entity) {\n return entity;\n }).map(function (entity) {\n return entity.node;\n });\n _this.setUncontrolledState({\n checkedKeys: checkedKeys\n });\n } else {\n // Always fill first\n var _conductCheck = conductCheck([].concat(_toConsumableArray(oriCheckedKeys), [key]), true, keyEntities),\n _checkedKeys = _conductCheck.checkedKeys,\n _halfCheckedKeys = _conductCheck.halfCheckedKeys;\n\n // If remove, we do it again to correction\n if (!checked) {\n var keySet = new Set(_checkedKeys);\n keySet.delete(key);\n var _conductCheck2 = conductCheck(Array.from(keySet), {\n checked: false,\n halfCheckedKeys: _halfCheckedKeys\n }, keyEntities);\n _checkedKeys = _conductCheck2.checkedKeys;\n _halfCheckedKeys = _conductCheck2.halfCheckedKeys;\n }\n checkedObj = _checkedKeys;\n\n // [Legacy] This is used for `rc-tree-select`\n eventObj.checkedNodes = [];\n eventObj.checkedNodesPositions = [];\n eventObj.halfCheckedKeys = _halfCheckedKeys;\n _checkedKeys.forEach(function (checkedKey) {\n var entity = getEntity(keyEntities, checkedKey);\n if (!entity) return;\n var node = entity.node,\n pos = entity.pos;\n eventObj.checkedNodes.push(node);\n eventObj.checkedNodesPositions.push({\n node: node,\n pos: pos\n });\n });\n _this.setUncontrolledState({\n checkedKeys: _checkedKeys\n }, false, {\n halfCheckedKeys: _halfCheckedKeys\n });\n }\n onCheck === null || onCheck === void 0 || onCheck(checkedObj, eventObj);\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeLoad\", function (treeNode) {\n var key = treeNode.key;\n var loadPromise = new Promise(function (resolve, reject) {\n // We need to get the latest state of loading/loaded keys\n _this.setState(function (_ref) {\n var _ref$loadedKeys = _ref.loadedKeys,\n loadedKeys = _ref$loadedKeys === void 0 ? [] : _ref$loadedKeys,\n _ref$loadingKeys = _ref.loadingKeys,\n loadingKeys = _ref$loadingKeys === void 0 ? [] : _ref$loadingKeys;\n var _this$props7 = _this.props,\n loadData = _this$props7.loadData,\n onLoad = _this$props7.onLoad;\n if (!loadData || loadedKeys.indexOf(key) !== -1 || loadingKeys.indexOf(key) !== -1) {\n return null;\n }\n\n // Process load data\n var promise = loadData(treeNode);\n promise.then(function () {\n var currentLoadedKeys = _this.state.loadedKeys;\n var newLoadedKeys = arrAdd(currentLoadedKeys, key);\n\n // onLoad should trigger before internal setState to avoid `loadData` trigger twice.\n // https://github.com/ant-design/ant-design/issues/12464\n onLoad === null || onLoad === void 0 || onLoad(newLoadedKeys, {\n event: 'load',\n node: treeNode\n });\n _this.setUncontrolledState({\n loadedKeys: newLoadedKeys\n });\n _this.setState(function (prevState) {\n return {\n loadingKeys: arrDel(prevState.loadingKeys, key)\n };\n });\n resolve();\n }).catch(function (e) {\n _this.setState(function (prevState) {\n return {\n loadingKeys: arrDel(prevState.loadingKeys, key)\n };\n });\n\n // If exceed max retry times, we give up retry\n _this.loadingRetryTimes[key] = (_this.loadingRetryTimes[key] || 0) + 1;\n if (_this.loadingRetryTimes[key] >= MAX_RETRY_TIMES) {\n var currentLoadedKeys = _this.state.loadedKeys;\n warning(false, 'Retry for `loadData` many times but still failed. No more retry.');\n _this.setUncontrolledState({\n loadedKeys: arrAdd(currentLoadedKeys, key)\n });\n resolve();\n }\n reject(e);\n });\n return {\n loadingKeys: arrAdd(loadingKeys, key)\n };\n });\n });\n\n // Not care warning if we ignore this\n loadPromise.catch(function () {});\n return loadPromise;\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeMouseEnter\", function (event, node) {\n var onMouseEnter = _this.props.onMouseEnter;\n onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter({\n event: event,\n node: node\n });\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeMouseLeave\", function (event, node) {\n var onMouseLeave = _this.props.onMouseLeave;\n onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave({\n event: event,\n node: node\n });\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeContextMenu\", function (event, node) {\n var onRightClick = _this.props.onRightClick;\n if (onRightClick) {\n event.preventDefault();\n onRightClick({\n event: event,\n node: node\n });\n }\n });\n _defineProperty(_assertThisInitialized(_this), \"onFocus\", function () {\n var onFocus = _this.props.onFocus;\n _this.setState({\n focused: true\n });\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n onFocus === null || onFocus === void 0 || onFocus.apply(void 0, args);\n });\n _defineProperty(_assertThisInitialized(_this), \"onBlur\", function () {\n var onBlur = _this.props.onBlur;\n _this.setState({\n focused: false\n });\n _this.onActiveChange(null);\n for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n args[_key3] = arguments[_key3];\n }\n onBlur === null || onBlur === void 0 || onBlur.apply(void 0, args);\n });\n _defineProperty(_assertThisInitialized(_this), \"getTreeNodeRequiredProps\", function () {\n var _this$state8 = _this.state,\n expandedKeys = _this$state8.expandedKeys,\n selectedKeys = _this$state8.selectedKeys,\n loadedKeys = _this$state8.loadedKeys,\n loadingKeys = _this$state8.loadingKeys,\n checkedKeys = _this$state8.checkedKeys,\n halfCheckedKeys = _this$state8.halfCheckedKeys,\n dragOverNodeKey = _this$state8.dragOverNodeKey,\n dropPosition = _this$state8.dropPosition,\n keyEntities = _this$state8.keyEntities;\n return {\n expandedKeys: expandedKeys || [],\n selectedKeys: selectedKeys || [],\n loadedKeys: loadedKeys || [],\n loadingKeys: loadingKeys || [],\n checkedKeys: checkedKeys || [],\n halfCheckedKeys: halfCheckedKeys || [],\n dragOverNodeKey: dragOverNodeKey,\n dropPosition: dropPosition,\n keyEntities: keyEntities\n };\n });\n // =========================== Expanded ===========================\n /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */\n _defineProperty(_assertThisInitialized(_this), \"setExpandedKeys\", function (expandedKeys) {\n var _this$state9 = _this.state,\n treeData = _this$state9.treeData,\n fieldNames = _this$state9.fieldNames;\n var flattenNodes = flattenTreeData(treeData, expandedKeys, fieldNames);\n _this.setUncontrolledState({\n expandedKeys: expandedKeys,\n flattenNodes: flattenNodes\n }, true);\n });\n _defineProperty(_assertThisInitialized(_this), \"onNodeExpand\", function (e, treeNode) {\n var expandedKeys = _this.state.expandedKeys;\n var _this$state10 = _this.state,\n listChanging = _this$state10.listChanging,\n fieldNames = _this$state10.fieldNames;\n var _this$props8 = _this.props,\n onExpand = _this$props8.onExpand,\n loadData = _this$props8.loadData;\n var expanded = treeNode.expanded;\n var key = treeNode[fieldNames.key];\n\n // Do nothing when motion is in progress\n if (listChanging) {\n return;\n }\n\n // Update selected keys\n var index = expandedKeys.indexOf(key);\n var targetExpanded = !expanded;\n warning(expanded && index !== -1 || !expanded && index === -1, 'Expand state not sync with index check');\n if (targetExpanded) {\n expandedKeys = arrAdd(expandedKeys, key);\n } else {\n expandedKeys = arrDel(expandedKeys, key);\n }\n _this.setExpandedKeys(expandedKeys);\n onExpand === null || onExpand === void 0 || onExpand(expandedKeys, {\n node: treeNode,\n expanded: targetExpanded,\n nativeEvent: e.nativeEvent\n });\n\n // Async Load data\n if (targetExpanded && loadData) {\n var loadPromise = _this.onNodeLoad(treeNode);\n if (loadPromise) {\n loadPromise.then(function () {\n // [Legacy] Refresh logic\n var newFlattenTreeData = flattenTreeData(_this.state.treeData, expandedKeys, fieldNames);\n _this.setUncontrolledState({\n flattenNodes: newFlattenTreeData\n });\n }).catch(function () {\n var currentExpandedKeys = _this.state.expandedKeys;\n var expandedKeysToRestore = arrDel(currentExpandedKeys, key);\n _this.setExpandedKeys(expandedKeysToRestore);\n });\n }\n }\n });\n _defineProperty(_assertThisInitialized(_this), \"onListChangeStart\", function () {\n _this.setUncontrolledState({\n listChanging: true\n });\n });\n _defineProperty(_assertThisInitialized(_this), \"onListChangeEnd\", function () {\n setTimeout(function () {\n _this.setUncontrolledState({\n listChanging: false\n });\n });\n });\n // =========================== Keyboard ===========================\n _defineProperty(_assertThisInitialized(_this), \"onActiveChange\", function (newActiveKey) {\n var activeKey = _this.state.activeKey;\n var _this$props9 = _this.props,\n onActiveChange = _this$props9.onActiveChange,\n _this$props9$itemScro = _this$props9.itemScrollOffset,\n itemScrollOffset = _this$props9$itemScro === void 0 ? 0 : _this$props9$itemScro;\n if (activeKey === newActiveKey) {\n return;\n }\n _this.setState({\n activeKey: newActiveKey\n });\n if (newActiveKey !== null) {\n _this.scrollTo({\n key: newActiveKey,\n offset: itemScrollOffset\n });\n }\n onActiveChange === null || onActiveChange === void 0 || onActiveChange(newActiveKey);\n });\n _defineProperty(_assertThisInitialized(_this), \"getActiveItem\", function () {\n var _this$state11 = _this.state,\n activeKey = _this$state11.activeKey,\n flattenNodes = _this$state11.flattenNodes;\n if (activeKey === null) {\n return null;\n }\n return flattenNodes.find(function (_ref2) {\n var key = _ref2.key;\n return key === activeKey;\n }) || null;\n });\n _defineProperty(_assertThisInitialized(_this), \"offsetActiveKey\", function (offset) {\n var _this$state12 = _this.state,\n flattenNodes = _this$state12.flattenNodes,\n activeKey = _this$state12.activeKey;\n var index = flattenNodes.findIndex(function (_ref3) {\n var key = _ref3.key;\n return key === activeKey;\n });\n\n // Align with index\n if (index === -1 && offset < 0) {\n index = flattenNodes.length;\n }\n index = (index + offset + flattenNodes.length) % flattenNodes.length;\n var item = flattenNodes[index];\n if (item) {\n var _key4 = item.key;\n _this.onActiveChange(_key4);\n } else {\n _this.onActiveChange(null);\n }\n });\n _defineProperty(_assertThisInitialized(_this), \"onKeyDown\", function (event) {\n var _this$state13 = _this.state,\n activeKey = _this$state13.activeKey,\n expandedKeys = _this$state13.expandedKeys,\n checkedKeys = _this$state13.checkedKeys,\n fieldNames = _this$state13.fieldNames;\n var _this$props10 = _this.props,\n onKeyDown = _this$props10.onKeyDown,\n checkable = _this$props10.checkable,\n selectable = _this$props10.selectable;\n\n // >>>>>>>>>> Direction\n switch (event.which) {\n case KeyCode.UP:\n {\n _this.offsetActiveKey(-1);\n event.preventDefault();\n break;\n }\n case KeyCode.DOWN:\n {\n _this.offsetActiveKey(1);\n event.preventDefault();\n break;\n }\n }\n\n // >>>>>>>>>> Expand & Selection\n var activeItem = _this.getActiveItem();\n if (activeItem && activeItem.data) {\n var treeNodeRequiredProps = _this.getTreeNodeRequiredProps();\n var expandable = activeItem.data.isLeaf === false || !!(activeItem.data[fieldNames.children] || []).length;\n var eventNode = convertNodePropsToEventData(_objectSpread(_objectSpread({}, getTreeNodeProps(activeKey, treeNodeRequiredProps)), {}, {\n data: activeItem.data,\n active: true\n }));\n switch (event.which) {\n // >>> Expand\n case KeyCode.LEFT:\n {\n // Collapse if possible\n if (expandable && expandedKeys.includes(activeKey)) {\n _this.onNodeExpand({}, eventNode);\n } else if (activeItem.parent) {\n _this.onActiveChange(activeItem.parent.key);\n }\n event.preventDefault();\n break;\n }\n case KeyCode.RIGHT:\n {\n // Expand if possible\n if (expandable && !expandedKeys.includes(activeKey)) {\n _this.onNodeExpand({}, eventNode);\n } else if (activeItem.children && activeItem.children.length) {\n _this.onActiveChange(activeItem.children[0].key);\n }\n event.preventDefault();\n break;\n }\n\n // Selection\n case KeyCode.ENTER:\n case KeyCode.SPACE:\n {\n if (checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) {\n _this.onNodeCheck({}, eventNode, !checkedKeys.includes(activeKey));\n } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) {\n _this.onNodeSelect({}, eventNode);\n }\n break;\n }\n }\n }\n onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);\n });\n /**\n * Only update the value which is not in props\n */\n _defineProperty(_assertThisInitialized(_this), \"setUncontrolledState\", function (state) {\n var atomic = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n var forceState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;\n if (!_this.destroyed) {\n var needSync = false;\n var allPassed = true;\n var newState = {};\n Object.keys(state).forEach(function (name) {\n if (name in _this.props) {\n allPassed = false;\n return;\n }\n needSync = true;\n newState[name] = state[name];\n });\n if (needSync && (!atomic || allPassed)) {\n _this.setState(_objectSpread(_objectSpread({}, newState), forceState));\n }\n }\n });\n _defineProperty(_assertThisInitialized(_this), \"scrollTo\", function (scroll) {\n _this.listRef.current.scrollTo(scroll);\n });\n return _this;\n }\n _createClass(Tree, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.destroyed = false;\n this.onUpdated();\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate() {\n this.onUpdated();\n }\n }, {\n key: \"onUpdated\",\n value: function onUpdated() {\n var _this$props11 = this.props,\n activeKey = _this$props11.activeKey,\n _this$props11$itemScr = _this$props11.itemScrollOffset,\n itemScrollOffset = _this$props11$itemScr === void 0 ? 0 : _this$props11$itemScr;\n if (activeKey !== undefined && activeKey !== this.state.activeKey) {\n this.setState({\n activeKey: activeKey\n });\n if (activeKey !== null) {\n this.scrollTo({\n key: activeKey,\n offset: itemScrollOffset\n });\n }\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n window.removeEventListener('dragend', this.onWindowDragEnd);\n this.destroyed = true;\n }\n }, {\n key: \"resetDragState\",\n value: function resetDragState() {\n this.setState({\n dragOverNodeKey: null,\n dropPosition: null,\n dropLevelOffset: null,\n dropTargetKey: null,\n dropContainerKey: null,\n dropTargetPos: null,\n dropAllowed: false\n });\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this$state14 = this.state,\n focused = _this$state14.focused,\n flattenNodes = _this$state14.flattenNodes,\n keyEntities = _this$state14.keyEntities,\n draggingNodeKey = _this$state14.draggingNodeKey,\n activeKey = _this$state14.activeKey,\n dropLevelOffset = _this$state14.dropLevelOffset,\n dropContainerKey = _this$state14.dropContainerKey,\n dropTargetKey = _this$state14.dropTargetKey,\n dropPosition = _this$state14.dropPosition,\n dragOverNodeKey = _this$state14.dragOverNodeKey,\n indent = _this$state14.indent;\n var _this$props12 = this.props,\n prefixCls = _this$props12.prefixCls,\n className = _this$props12.className,\n style = _this$props12.style,\n showLine = _this$props12.showLine,\n focusable = _this$props12.focusable,\n _this$props12$tabInde = _this$props12.tabIndex,\n tabIndex = _this$props12$tabInde === void 0 ? 0 : _this$props12$tabInde,\n selectable = _this$props12.selectable,\n showIcon = _this$props12.showIcon,\n icon = _this$props12.icon,\n switcherIcon = _this$props12.switcherIcon,\n draggable = _this$props12.draggable,\n checkable = _this$props12.checkable,\n checkStrictly = _this$props12.checkStrictly,\n disabled = _this$props12.disabled,\n motion = _this$props12.motion,\n loadData = _this$props12.loadData,\n filterTreeNode = _this$props12.filterTreeNode,\n height = _this$props12.height,\n itemHeight = _this$props12.itemHeight,\n virtual = _this$props12.virtual,\n titleRender = _this$props12.titleRender,\n dropIndicatorRender = _this$props12.dropIndicatorRender,\n onContextMenu = _this$props12.onContextMenu,\n onScroll = _this$props12.onScroll,\n direction = _this$props12.direction,\n rootClassName = _this$props12.rootClassName,\n rootStyle = _this$props12.rootStyle;\n var domProps = pickAttrs(this.props, {\n aria: true,\n data: true\n });\n\n // It's better move to hooks but we just simply keep here\n var draggableConfig;\n if (draggable) {\n if (_typeof(draggable) === 'object') {\n draggableConfig = draggable;\n } else if (typeof draggable === 'function') {\n draggableConfig = {\n nodeDraggable: draggable\n };\n } else {\n draggableConfig = {};\n }\n }\n return /*#__PURE__*/React.createElement(TreeContext.Provider, {\n value: {\n prefixCls: prefixCls,\n selectable: selectable,\n showIcon: showIcon,\n icon: icon,\n switcherIcon: switcherIcon,\n draggable: draggableConfig,\n draggingNodeKey: draggingNodeKey,\n checkable: checkable,\n checkStrictly: checkStrictly,\n disabled: disabled,\n keyEntities: keyEntities,\n dropLevelOffset: dropLevelOffset,\n dropContainerKey: dropContainerKey,\n dropTargetKey: dropTargetKey,\n dropPosition: dropPosition,\n dragOverNodeKey: dragOverNodeKey,\n indent: indent,\n direction: direction,\n dropIndicatorRender: dropIndicatorRender,\n loadData: loadData,\n filterTreeNode: filterTreeNode,\n titleRender: titleRender,\n onNodeClick: this.onNodeClick,\n onNodeDoubleClick: this.onNodeDoubleClick,\n onNodeExpand: this.onNodeExpand,\n onNodeSelect: this.onNodeSelect,\n onNodeCheck: this.onNodeCheck,\n onNodeLoad: this.onNodeLoad,\n onNodeMouseEnter: this.onNodeMouseEnter,\n onNodeMouseLeave: this.onNodeMouseLeave,\n onNodeContextMenu: this.onNodeContextMenu,\n onNodeDragStart: this.onNodeDragStart,\n onNodeDragEnter: this.onNodeDragEnter,\n onNodeDragOver: this.onNodeDragOver,\n onNodeDragLeave: this.onNodeDragLeave,\n onNodeDragEnd: this.onNodeDragEnd,\n onNodeDrop: this.onNodeDrop\n }\n }, /*#__PURE__*/React.createElement(\"div\", {\n role: \"tree\",\n className: classNames(prefixCls, className, rootClassName, _defineProperty(_defineProperty(_defineProperty({}, \"\".concat(prefixCls, \"-show-line\"), showLine), \"\".concat(prefixCls, \"-focused\"), focused), \"\".concat(prefixCls, \"-active-focused\"), activeKey !== null)),\n style: rootStyle\n }, /*#__PURE__*/React.createElement(NodeList, _extends({\n ref: this.listRef,\n prefixCls: prefixCls,\n style: style,\n data: flattenNodes,\n disabled: disabled,\n selectable: selectable,\n checkable: !!checkable,\n motion: motion,\n dragging: draggingNodeKey !== null,\n height: height,\n itemHeight: itemHeight,\n virtual: virtual,\n focusable: focusable,\n focused: focused,\n tabIndex: tabIndex,\n activeItem: this.getActiveItem(),\n onFocus: this.onFocus,\n onBlur: this.onBlur,\n onKeyDown: this.onKeyDown,\n onActiveChange: this.onActiveChange,\n onListChangeStart: this.onListChangeStart,\n onListChangeEnd: this.onListChangeEnd,\n onContextMenu: onContextMenu,\n onScroll: onScroll\n }, this.getTreeNodeRequiredProps(), domProps))));\n }\n }], [{\n key: \"getDerivedStateFromProps\",\n value: function getDerivedStateFromProps(props, prevState) {\n var prevProps = prevState.prevProps;\n var newState = {\n prevProps: props\n };\n function needSync(name) {\n return !prevProps && name in props || prevProps && prevProps[name] !== props[name];\n }\n\n // ================== Tree Node ==================\n var treeData;\n\n // fieldNames\n var fieldNames = prevState.fieldNames;\n if (needSync('fieldNames')) {\n fieldNames = fillFieldNames(props.fieldNames);\n newState.fieldNames = fieldNames;\n }\n\n // Check if `treeData` or `children` changed and save into the state.\n if (needSync('treeData')) {\n treeData = props.treeData;\n } else if (needSync('children')) {\n warning(false, '`children` of Tree is deprecated. Please use `treeData` instead.');\n treeData = convertTreeToData(props.children);\n }\n\n // Save flatten nodes info and convert `treeData` into keyEntities\n if (treeData) {\n newState.treeData = treeData;\n var entitiesMap = convertDataToEntities(treeData, {\n fieldNames: fieldNames\n });\n newState.keyEntities = _objectSpread(_defineProperty({}, MOTION_KEY, MotionEntity), entitiesMap.keyEntities);\n\n // Warning if treeNode not provide key\n if (process.env.NODE_ENV !== 'production') {\n warningWithoutKey(treeData, fieldNames);\n }\n }\n var keyEntities = newState.keyEntities || prevState.keyEntities;\n\n // ================ expandedKeys =================\n if (needSync('expandedKeys') || prevProps && needSync('autoExpandParent')) {\n newState.expandedKeys = props.autoExpandParent || !prevProps && props.defaultExpandParent ? conductExpandParent(props.expandedKeys, keyEntities) : props.expandedKeys;\n } else if (!prevProps && props.defaultExpandAll) {\n var cloneKeyEntities = _objectSpread({}, keyEntities);\n delete cloneKeyEntities[MOTION_KEY];\n newState.expandedKeys = Object.keys(cloneKeyEntities).map(function (key) {\n return cloneKeyEntities[key].key;\n });\n } else if (!prevProps && props.defaultExpandedKeys) {\n newState.expandedKeys = props.autoExpandParent || props.defaultExpandParent ? conductExpandParent(props.defaultExpandedKeys, keyEntities) : props.defaultExpandedKeys;\n }\n if (!newState.expandedKeys) {\n delete newState.expandedKeys;\n }\n\n // ================ flattenNodes =================\n if (treeData || newState.expandedKeys) {\n var flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, fieldNames);\n newState.flattenNodes = flattenNodes;\n }\n\n // ================ selectedKeys =================\n if (props.selectable) {\n if (needSync('selectedKeys')) {\n newState.selectedKeys = calcSelectedKeys(props.selectedKeys, props);\n } else if (!prevProps && props.defaultSelectedKeys) {\n newState.selectedKeys = calcSelectedKeys(props.defaultSelectedKeys, props);\n }\n }\n\n // ================= checkedKeys =================\n if (props.checkable) {\n var checkedKeyEntity;\n if (needSync('checkedKeys')) {\n checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {};\n } else if (!prevProps && props.defaultCheckedKeys) {\n checkedKeyEntity = parseCheckedKeys(props.defaultCheckedKeys) || {};\n } else if (treeData) {\n // If `treeData` changed, we also need check it\n checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {\n checkedKeys: prevState.checkedKeys,\n halfCheckedKeys: prevState.halfCheckedKeys\n };\n }\n if (checkedKeyEntity) {\n var _checkedKeyEntity = checkedKeyEntity,\n _checkedKeyEntity$che = _checkedKeyEntity.checkedKeys,\n checkedKeys = _checkedKeyEntity$che === void 0 ? [] : _checkedKeyEntity$che,\n _checkedKeyEntity$hal = _checkedKeyEntity.halfCheckedKeys,\n halfCheckedKeys = _checkedKeyEntity$hal === void 0 ? [] : _checkedKeyEntity$hal;\n if (!props.checkStrictly) {\n var conductKeys = conductCheck(checkedKeys, true, keyEntities);\n checkedKeys = conductKeys.checkedKeys;\n halfCheckedKeys = conductKeys.halfCheckedKeys;\n }\n newState.checkedKeys = checkedKeys;\n newState.halfCheckedKeys = halfCheckedKeys;\n }\n }\n\n // ================= loadedKeys ==================\n if (needSync('loadedKeys')) {\n newState.loadedKeys = props.loadedKeys;\n }\n return newState;\n }\n }]);\n return Tree;\n}(React.Component);\n_defineProperty(Tree, \"defaultProps\", {\n prefixCls: 'rc-tree',\n showLine: false,\n showIcon: true,\n selectable: true,\n multiple: false,\n checkable: false,\n disabled: false,\n checkStrictly: false,\n draggable: false,\n defaultExpandParent: true,\n autoExpandParent: false,\n defaultExpandAll: false,\n defaultExpandedKeys: [],\n defaultCheckedKeys: [],\n defaultSelectedKeys: [],\n dropIndicatorRender: DropIndicator,\n allowDrop: function allowDrop() {\n return true;\n },\n expandAction: false\n});\n_defineProperty(Tree, \"TreeNode\", TreeNode);\nexport default Tree;","import Tree from \"./Tree\";\nimport TreeNode from \"./TreeNode\";\nexport { TreeNode };\nexport default Tree;","import { css } from '@emotion/react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport function getGlobalStyles(theme: GrafanaTheme2) {\n return css`\n .moveable-control-box {\n z-index: 999;\n }\n ,\n .rc-tree {\n margin: 0;\n margin-bottom: 15px;\n border: 1px solid transparent;\n\n &-focused:not(&-active-focused) {\n border-color: cyan;\n }\n\n .rc-tree-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n\n .rc-tree-treenode {\n margin: 0;\n padding: 1px;\n line-height: 24px;\n white-space: nowrap;\n list-style: none;\n outline: 0;\n\n display: flex;\n margin-bottom: 3px;\n cursor: pointer;\n\n .draggable {\n color: #333;\n -moz-user-select: none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n /* Required to make elements draggable in old WebKit */\n // -khtml-user-drag: element;\n // -webkit-user-drag: element;\n }\n\n &.drop-container {\n > .draggable::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n box-shadow: inset 0 0 0 2px blue;\n content: '';\n }\n & ~ .rc-tree-treenode {\n border-left: 2px solid ${theme.components.input.borderColor};\n }\n }\n &.drop-target {\n & ~ .rc-tree-treenode {\n border-left: none;\n }\n }\n &.filter-node {\n > .rc-tree-node-content-wrapper {\n color: #a60000 !important;\n font-weight: bold !important;\n }\n }\n ul {\n margin: 0;\n padding: 0 0 0 18px;\n }\n .rc-tree-node-content-wrapper {\n position: relative;\n display: inline-block;\n height: 24px;\n margin: 0;\n padding: 0;\n text-decoration: none;\n vertical-align: top;\n cursor: grab;\n flex-grow: 1;\n display: flex;\n\n border: 1px solid ${theme.components.input.borderColor};\n border-radius: ${theme.shape.radius.default};\n background: ${theme.colors.background.secondary};\n min-height: ${theme.spacing.gridSize * 4}px;\n\n &:hover {\n border: 1px solid ${theme.components.input.borderHover};\n }\n\n &.rc-tree-node-selected {\n border: 1px solid ${theme.colors.primary.border};\n opacity: 1;\n }\n }\n\n span {\n &.rc-tree-checkbox,\n &.rc-tree-iconEle {\n display: inline-block;\n width: 16px;\n height: 16px;\n margin-right: 2px;\n line-height: 16px;\n vertical-align: -0.125em;\n background-color: transparent;\n background-repeat: no-repeat;\n background-attachment: scroll;\n border: 0 none;\n outline: none;\n cursor: pointer;\n\n &.rc-tree-icon__customize {\n background-image: none;\n }\n }\n &.rc-tree-switcher {\n display: flex;\n align-items: center;\n width: 16px;\n background-color: transparent;\n background-repeat: no-repeat;\n background-attachment: scroll;\n border: 0 none;\n outline: none;\n cursor: pointer;\n\n &.rc-tree-icon__customize {\n background-image: none;\n }\n }\n &.rc-tree-icon_loading {\n margin-right: 2px;\n vertical-align: top;\n background: url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7')\n no-repeat scroll 0 0 transparent;\n }\n &.rc-tree-switcher {\n &.rc-tree-switcher-noop {\n cursor: auto;\n }\n &.rc-tree-switcher_open {\n background-position: -93px -56px;\n }\n &.rc-tree-switcher_close {\n background-position: -75px -56px;\n }\n }\n &.rc-tree-checkbox {\n width: 13px;\n height: 13px;\n margin: 0 3px;\n background-position: 0 0;\n &-checked {\n background-position: -14px 0;\n }\n &-indeterminate {\n background-position: -14px -28px;\n }\n &-disabled {\n background-position: 0 -56px;\n }\n &.rc-tree-checkbox-checked.rc-tree-checkbox-disabled {\n background-position: -14px -56px;\n }\n &.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled {\n position: relative;\n background: #ccc;\n border-radius: 3px;\n &::after {\n position: absolute;\n top: 5px;\n left: 3px;\n width: 5px;\n height: 0;\n border: 2px solid #fff;\n border-top: 0;\n border-left: 0;\n -webkit-transform: scale(1);\n transform: scale(1);\n content: ' ';\n }\n }\n }\n }\n }\n &:not(.rc-tree-show-line) {\n .rc-tree-treenode {\n .rc-tree-switcher-noop {\n background: none;\n }\n }\n }\n &.rc-tree-show-line {\n .rc-tree-treenode:not(:last-child) {\n > ul {\n background: url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0\n repeat-y;\n }\n > .rc-tree-switcher-noop {\n background-position: -56px -18px;\n }\n }\n .rc-tree-treenode:last-child {\n > .rc-tree-switcher-noop {\n background-position: -56px -36px;\n }\n }\n }\n &-child-tree {\n display: none;\n &-open {\n display: block;\n }\n }\n &-treenode-disabled {\n > span:not(.rc-tree-switcher),\n > a,\n > a span {\n color: #767676;\n cursor: not-allowed;\n }\n }\n &-treenode-active {\n background: rgba(0, 0, 0, 0.1);\n }\n &-node-selected {\n opacity: 0.8;\n }\n &-icon__open {\n margin-right: 2px;\n vertical-align: top;\n background-position: -110px -16px;\n }\n &-icon__close {\n margin-right: 2px;\n vertical-align: top;\n background-position: -110px 0;\n }\n &-icon__docu {\n margin-right: 2px;\n vertical-align: top;\n background-position: -110px -32px;\n }\n &-icon__customize {\n margin-right: 2px;\n vertical-align: top;\n }\n &-title {\n display: inline-block;\n }\n &-indent {\n display: inline-block;\n height: 0;\n vertical-align: bottom;\n }\n &-indent-unit {\n display: inline-block;\n width: 16px;\n }\n\n &-draggable-icon {\n display: inline-flex;\n justify-content: center;\n width: 16px;\n }\n }\n `;\n}\n","import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { IconButton, useStyles2 } from '@grafana/ui';\nimport { LayerName } from 'app/core/components/Layers/LayerName';\nimport { ElementState } from 'app/features/canvas/runtime/element';\n\nimport { LayerActionID } from '../../types';\nimport { TreeViewEditorProps } from '../element/elementEditor';\n\nimport { TreeElement } from './tree';\n\ninterface Props {\n settings: TreeViewEditorProps;\n nodeData: TreeElement;\n setAllowSelection: (allow: boolean) => void;\n}\n\nexport const TreeNodeTitle = ({ settings, nodeData, setAllowSelection }: Props) => {\n const element = nodeData.dataRef;\n const name = nodeData.dataRef.getName();\n\n const styles = useStyles2(getStyles);\n\n const layer = settings.layer;\n\n const getScene = () => {\n if (!settings?.layer) {\n return;\n }\n\n return settings.layer.scene;\n };\n\n const onDelete = (element: ElementState) => {\n const elLayer = element.parent ?? layer;\n elLayer.doAction(LayerActionID.Delete, element);\n setAllowSelection(false);\n };\n\n const onDuplicate = (element: ElementState) => {\n const elLayer = element.parent ?? layer;\n elLayer.doAction(LayerActionID.Duplicate, element);\n setAllowSelection(false);\n };\n\n const onNameChange = (element: ElementState, name: string) => {\n element.onChange({ ...element.options, name });\n };\n\n const verifyLayerNameUniqueness = (nameToVerify: string) => {\n const scene = getScene();\n\n return Boolean(scene?.canRename(nameToVerify));\n };\n\n const getLayerInfo = (element: ElementState) => {\n return element.options.type;\n };\n\n return (\n <>\n onNameChange(element, v)}\n verifyLayerNameUniqueness={verifyLayerNameUniqueness ?? undefined}\n />\n\n {getLayerInfo(element)}
\n\n {!nodeData.children && (\n \n onDuplicate(element)}\n tooltip=\"Duplicate\"\n />\n onDelete(element)}\n tooltip=\"Remove\"\n />\n
\n )}\n >\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n actionButtonsWrapper: css({\n display: 'flex',\n alignItems: 'flex-end',\n }),\n actionIcon: css({\n color: theme.colors.text.secondary,\n cursor: 'pointer',\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n textWrapper: css({\n display: 'flex',\n alignItems: 'center',\n flexGrow: 1,\n overflow: 'hidden',\n marginRight: theme.spacing(1),\n }),\n layerName: css({\n fontWeight: theme.typography.fontWeightMedium,\n color: theme.colors.primary.text,\n cursor: 'pointer',\n overflow: 'hidden',\n marginLeft: theme.spacing(0.5),\n }),\n});\n","import { CSSProperties } from 'react';\n\nimport { ElementState } from 'app/features/canvas/runtime/element';\nimport { FrameState } from 'app/features/canvas/runtime/frame';\nimport { RootElement } from 'app/features/canvas/runtime/root';\n\nimport { DragNode, DropNode } from '../../types';\n\nexport interface TreeElement {\n key: number;\n title: string;\n selectable?: boolean;\n children?: TreeElement[];\n dataRef: ElementState | FrameState;\n style?: CSSProperties;\n}\n\nexport function getTreeData(root?: RootElement | FrameState, selection?: string[], selectedColor?: string) {\n let elements: TreeElement[] = [];\n if (root) {\n for (let i = root.elements.length; i--; i >= 0) {\n const item = root.elements[i];\n const element: TreeElement = {\n key: item.UID,\n title: item.getName(),\n selectable: true,\n dataRef: item,\n };\n\n if (item instanceof FrameState) {\n element.children = getTreeData(item, selection, selectedColor);\n }\n elements.push(element);\n }\n }\n\n return elements;\n}\n\nexport function onNodeDrop(\n info: { node: DropNode; dragNode: DragNode; dropPosition: number; dropToGap: boolean },\n treeData: TreeElement[]\n) {\n const destKey = info.node.key;\n const srcKey = info.dragNode.key;\n const destPos = info.node.pos.split('-');\n const destPosition = info.dropPosition - Number(destPos[destPos.length - 1]);\n\n const loop = (\n data: TreeElement[],\n key: number,\n callback: { (item: TreeElement, index: number, arr: TreeElement[]): void }\n ) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n callback(item, index, arr);\n return;\n }\n if (item.children) {\n loop(item.children, key, callback);\n }\n });\n };\n const data = [...treeData];\n\n // Find dragObject\n let srcElement: TreeElement | undefined = undefined;\n loop(data, srcKey, (item: TreeElement, index: number, arr: TreeElement[]) => {\n arr.splice(index, 1);\n srcElement = item;\n });\n\n if (destPosition === 0) {\n // Drop on the content\n loop(data, destKey, (item: TreeElement) => {\n item.children = item.children || [];\n item.children.unshift(srcElement!);\n });\n } else {\n // Drop on the gap (insert before or insert after)\n let ar: TreeElement[] = [];\n let i = 0;\n loop(data, destKey, (item: TreeElement, index: number, arr: TreeElement[]) => {\n ar = arr;\n i = index;\n });\n\n if (destPosition === -1) {\n ar.splice(i, 0, srcElement!);\n } else {\n ar.splice(i + 1, 0, srcElement!);\n }\n }\n\n return data;\n}\n","import { css } from '@emotion/css';\nimport { Global } from '@emotion/react';\nimport Tree, { TreeNodeProps } from 'rc-tree';\nimport React, { Key, useEffect, useMemo, useState } from 'react';\n\nimport { GrafanaTheme2, StandardEditorProps } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Button, HorizontalGroup, Icon, useStyles2, useTheme2 } from '@grafana/ui';\nimport { AddLayerButton } from 'app/core/components/Layers/AddLayerButton';\nimport { ElementState } from 'app/features/canvas/runtime/element';\n\nimport { getGlobalStyles } from '../../globalStyles';\nimport { Options } from '../../panelcfg.gen';\nimport { DragNode, DropNode } from '../../types';\nimport { doSelect, getElementTypes, onAddItem } from '../../utils';\nimport { TreeViewEditorProps } from '../element/elementEditor';\n\nimport { TreeNodeTitle } from './TreeNodeTitle';\nimport { getTreeData, onNodeDrop, TreeElement } from './tree';\n\nlet allowSelection = true;\n\nexport const TreeNavigationEditor = ({ item }: StandardEditorProps) => {\n const [treeData, setTreeData] = useState(getTreeData(item?.settings?.scene.root));\n const [autoExpandParent, setAutoExpandParent] = useState(true);\n const [expandedKeys, setExpandedKeys] = useState([]);\n const [selectedKeys, setSelectedKeys] = useState([]);\n\n const theme = useTheme2();\n const globalCSS = getGlobalStyles(theme);\n const styles = useStyles2(getStyles);\n\n const selectedBgColor = theme.colors.primary.border;\n const { settings } = item;\n const selection = useMemo(\n () => (settings?.selected ? settings.selected.map((v) => v?.getName()) : []),\n [settings?.selected]\n );\n\n const selectionByUID = useMemo(\n () => (settings?.selected ? settings.selected.map((v) => v?.UID) : []),\n [settings?.selected]\n );\n\n useEffect(() => {\n setTreeData(getTreeData(item?.settings?.scene.root, selection, selectedBgColor));\n setSelectedKeys(selectionByUID);\n setAllowSelection();\n }, [item?.settings?.scene.root, selectedBgColor, selection, selectionByUID]);\n\n if (!settings) {\n return No settings
;\n }\n\n const layer = settings.layer;\n if (!layer) {\n return Missing layer?
;\n }\n\n const onSelect = (selectedKeys: Key[], info: { node: { dataRef: ElementState } }) => {\n if (allowSelection && item.settings?.scene) {\n doSelect(item.settings.scene, info.node.dataRef);\n }\n };\n\n const allowDrop = () => {\n return true;\n };\n\n const onDrop = (info: { node: DropNode; dragNode: DragNode; dropPosition: number; dropToGap: boolean }) => {\n const destPos = info.node.pos.split('-');\n const destPosition = info.dropPosition - Number(destPos[destPos.length - 1]);\n\n const srcEl = info.dragNode.dataRef;\n const destEl = info.node.dataRef;\n\n const data = onNodeDrop(info, treeData);\n\n setTreeData(data);\n destEl.parent?.scene.reorderElements(srcEl, destEl, info.dropToGap, destPosition);\n };\n\n const onExpand = (expandedKeys: Key[]) => {\n setExpandedKeys(expandedKeys);\n setAutoExpandParent(false);\n };\n\n const switcherIcon = (obj: TreeNodeProps) => {\n if (obj.isLeaf) {\n // TODO: Implement element specific icons\n return <>>;\n }\n\n return (\n \n );\n };\n\n const setAllowSelection = (allow = true) => {\n allowSelection = allow;\n };\n\n const onClearSelection = () => {\n layer.scene.clearCurrentSelection();\n };\n\n const onTitleRender = (nodeData: TreeElement) => {\n return ;\n };\n\n // TODO: This functionality is currently kinda broken / no way to decouple / delete created frames at this time\n const onFrameSelection = () => {\n if (layer.scene) {\n layer.scene.frameSelection();\n } else {\n console.warn('no scene!');\n }\n };\n\n const typeOptions = getElementTypes(settings.scene.shouldShowAdvancedTypes).options;\n\n return (\n <>\n \n \n\n \n \n
onAddItem(sel, layer)} options={typeOptions} label={'Add item'} />\n \n {selection.length > 0 && (\n \n )}\n {selection.length > 1 && config.featureToggles.canvasPanelNesting && (\n \n )}\n \n >\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n addLayerButton: css({\n marginLeft: '18px',\n minWidth: '150px',\n }),\n});\n","import { get as lodashGet } from 'lodash';\n\nimport { NestedPanelOptions, NestedValueAccess } from '@grafana/data/src/utils/OptionsUIBuilders';\nimport { ElementState } from 'app/features/canvas/runtime/element';\nimport { FrameState } from 'app/features/canvas/runtime/frame';\nimport { Scene } from 'app/features/canvas/runtime/scene';\nimport { setOptionImmutably } from 'app/features/dashboard/components/PanelEditor/utils';\n\nimport { InstanceState } from '../../CanvasPanel';\nimport { PlacementEditor } from '../element/PlacementEditor';\nimport { optionBuilder } from '../options';\n\nimport { TreeNavigationEditor } from './TreeNavigationEditor';\n\nexport interface LayerEditorProps {\n scene: Scene;\n layer: FrameState;\n selected: ElementState[];\n}\n\nexport function getLayerEditor(opts: InstanceState): NestedPanelOptions {\n const { selected, scene } = opts;\n\n if (!scene.currentLayer) {\n scene.currentLayer = scene.root;\n }\n\n if (selected) {\n for (const element of selected) {\n if (element instanceof FrameState) {\n scene.currentLayer = element;\n break;\n }\n\n if (element && element.parent) {\n scene.currentLayer = element.parent;\n break;\n }\n }\n }\n\n const options = scene.currentLayer.options || { elements: [] };\n\n return {\n category: ['Layer'],\n path: '--', // not used!\n\n // Note that canvas editor writes things to the scene!\n values: (parent: NestedValueAccess) => ({\n getValue: (path) => {\n return lodashGet(options, path);\n },\n onChange: (path, value) => {\n if (path === 'type' && value) {\n console.warn('unable to change layer type');\n return;\n }\n const c = setOptionImmutably(options, path, value);\n scene.currentLayer?.onChange(c);\n scene.currentLayer?.updateData(scene.context);\n },\n }),\n\n // Dynamically fill the selected element\n build: (builder, context) => {\n const currentLayer = scene.currentLayer;\n if (currentLayer && !currentLayer.isRoot()) {\n // TODO: the non-root nav option\n }\n\n builder.addCustomEditor({\n id: 'content',\n path: 'root',\n name: 'Elements',\n editor: TreeNavigationEditor,\n settings: { scene, layer: scene.currentLayer, selected },\n });\n\n const ctx = { ...context, options };\n optionBuilder.addBackground(builder as any, ctx);\n optionBuilder.addBorder(builder as any, ctx);\n\n if (currentLayer && !currentLayer.isRoot()) {\n builder.addCustomEditor({\n category: ['Layout'],\n id: 'content',\n path: '__', // not used\n name: 'Constraints',\n editor: PlacementEditor,\n settings: {\n scene: opts.scene,\n element: currentLayer,\n },\n });\n }\n },\n };\n}\n","import React, { useState } from 'react';\n\nimport { Tab, TabsBar } from '@grafana/ui/src';\n\nimport { InlineEditTabs } from '../../types';\n\ntype Props = {\n onTabChange: (v: string) => void;\n};\n\nexport const TabsEditor = ({ onTabChange }: Props) => {\n const [activeTab, setActiveTab] = useState(InlineEditTabs.SelectedElement);\n\n const tabs = [\n { label: 'Selected Element', value: InlineEditTabs.SelectedElement },\n { label: 'Element Management', value: InlineEditTabs.ElementManagement },\n ];\n\n const onCurrentTabChange = (value: string) => {\n onTabChange(value);\n setActiveTab(value);\n };\n\n return (\n <>\n \n {tabs.map((t, index) => (\n onCurrentTabChange(t.value!)}\n />\n ))}\n \n >\n );\n};\n","import { css } from '@emotion/css';\nimport { get as lodashGet } from 'lodash';\nimport React, { useMemo, useState } from 'react';\nimport { useObservable } from 'react-use';\n\nimport { DataFrame, GrafanaTheme2, PanelOptionsEditorBuilder, StandardEditorContext } from '@grafana/data';\nimport { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';\nimport { NestedValueAccess } from '@grafana/data/src/utils/OptionsUIBuilders';\nimport { useStyles2 } from '@grafana/ui/src';\nimport { AddLayerButton } from 'app/core/components/Layers/AddLayerButton';\nimport { FrameState } from 'app/features/canvas/runtime/frame';\nimport { OptionsPaneCategory } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategory';\nimport { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';\nimport { fillOptionsPaneItems } from 'app/features/dashboard/components/PanelEditor/getVisualizationOptions';\nimport { setOptionImmutably } from 'app/features/dashboard/components/PanelEditor/utils';\n\nimport { activePanelSubject, InstanceState } from '../../CanvasPanel';\nimport { addStandardCanvasEditorOptions } from '../../module';\nimport { InlineEditTabs } from '../../types';\nimport { getElementTypes, onAddItem } from '../../utils';\nimport { getElementEditor } from '../element/elementEditor';\nimport { getLayerEditor } from '../layer/layerEditor';\n\nimport { TabsEditor } from './TabsEditor';\n\nexport function InlineEditBody() {\n const activePanel = useObservable(activePanelSubject);\n const instanceState = activePanel?.panel.context?.instanceState;\n const styles = useStyles2(getStyles);\n\n const [activeTab, setActiveTab] = useState(InlineEditTabs.SelectedElement);\n\n const pane = useMemo(() => {\n const p = activePanel?.panel;\n const state: InstanceState = instanceState;\n if (!state || !p) {\n return new OptionsPaneCategoryDescriptor({ id: 'root', title: 'root' });\n }\n\n const supplier = (builder: PanelOptionsEditorBuilder) => {\n if (activeTab === InlineEditTabs.ElementManagement) {\n builder.addNestedOptions(getLayerEditor(instanceState));\n }\n\n const selection = state.selected;\n if (selection?.length === 1 && activeTab === InlineEditTabs.SelectedElement) {\n const element = selection[0];\n if (element && !(element instanceof FrameState)) {\n builder.addNestedOptions(\n getElementEditor({\n category: [`Selected element (${element.options.name})`],\n element,\n scene: state.scene,\n })\n );\n }\n }\n\n addStandardCanvasEditorOptions(builder);\n };\n\n return getOptionsPaneCategoryDescriptor(\n {\n options: p.props.options,\n onChange: p.props.onOptionsChange,\n data: p.props.data?.series,\n },\n supplier\n );\n }, [instanceState, activePanel, activeTab]);\n\n const topLevelItemsContainerStyle = {\n marginLeft: 15,\n marginTop: 10,\n };\n\n const onTabChange = (tab: string) => {\n setActiveTab(tab);\n };\n\n const typeOptions = getElementTypes(instanceState?.scene.shouldShowAdvancedTypes).options;\n const rootLayer: FrameState | undefined = instanceState?.layer;\n\n const noElementSelected =\n instanceState && activeTab === InlineEditTabs.SelectedElement && instanceState.selected.length === 0;\n\n return (\n <>\n {pane.items.map((item) => item.render())}
\n \n
onAddItem(sel, rootLayer)} options={typeOptions} label={'Add item'} />\n \n \n
\n {pane.categories.map((p) => renderOptionsPaneCategoryDescriptor(p))}\n {noElementSelected &&
Please select an element
}\n
\n >\n );\n}\n\n// Recursively render options\nfunction renderOptionsPaneCategoryDescriptor(pane: OptionsPaneCategoryDescriptor) {\n return (\n \n {pane.items.map((v) => v.render())}
\n {pane.categories.map((c) => renderOptionsPaneCategoryDescriptor(c))}\n \n );\n}\n\ninterface EditorProps {\n onChange: (v: T) => void;\n options: T;\n data?: DataFrame[];\n}\n\nfunction getOptionsPaneCategoryDescriptor(\n props: EditorProps,\n supplier: PanelOptionsSupplier\n): OptionsPaneCategoryDescriptor {\n const context: StandardEditorContext = {\n data: props.data ?? [],\n options: props.options,\n };\n\n const root = new OptionsPaneCategoryDescriptor({ id: 'root', title: 'root' });\n const getOptionsPaneCategory = (categoryNames?: string[]): OptionsPaneCategoryDescriptor => {\n if (categoryNames?.length) {\n const key = categoryNames[0];\n let sub = root.categories.find((v) => v.props.id === key);\n if (!sub) {\n sub = new OptionsPaneCategoryDescriptor({ id: key, title: key });\n root.categories.push(sub);\n }\n return sub;\n }\n return root;\n };\n\n const access: NestedValueAccess = {\n getValue: (path) => lodashGet(props.options, path),\n onChange: (path, value) => {\n props.onChange(setOptionImmutably(props.options as any, path, value));\n },\n };\n\n // Use the panel options loader\n fillOptionsPaneItems(supplier, access, getOptionsPaneCategory, context);\n return root;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n selectElement: css({\n color: theme.colors.text.secondary,\n padding: theme.spacing(2),\n }),\n});\n","import { css } from '@emotion/css';\nimport React, { SyntheticEvent, useEffect, useRef, useState } from 'react';\nimport Draggable, { DraggableEventHandler } from 'react-draggable';\nimport { Resizable, ResizeCallbackData } from 'react-resizable';\n\nimport { Dimensions2D, GrafanaTheme2 } from '@grafana/data';\nimport { IconButton, Portal, useStyles2 } from '@grafana/ui';\nimport store from 'app/core/store';\nimport { Scene } from 'app/features/canvas/runtime/scene';\n\nimport { InlineEditBody } from './InlineEditBody';\n\ntype Props = {\n onClose?: () => void;\n id: number;\n scene: Scene;\n};\n\nconst OFFSET_X = 10;\nconst OFFSET_Y = 32;\n\nexport function InlineEdit({ onClose, id, scene }: Props) {\n const root = scene.root.div?.getBoundingClientRect();\n const windowHeight = window.innerHeight;\n const windowWidth = window.innerWidth;\n const ref = useRef(null);\n const styles = useStyles2(getStyles);\n const inlineEditKey = 'inlineEditPanel' + id.toString();\n\n const defaultMeasurements = { width: 400, height: 400 };\n const widthOffset = root?.width ?? defaultMeasurements.width + OFFSET_X * 2;\n const defaultX = root?.x ?? 0 + widthOffset - defaultMeasurements.width - OFFSET_X;\n const defaultY = root?.y ?? 0 + OFFSET_Y;\n\n const savedPlacement = store.getObject(inlineEditKey, {\n x: defaultX,\n y: defaultY,\n w: defaultMeasurements.width,\n h: defaultMeasurements.height,\n });\n const [measurements, setMeasurements] = useState({ width: savedPlacement.w, height: savedPlacement.h });\n const [placement, setPlacement] = useState({ x: savedPlacement.x, y: savedPlacement.y });\n\n // Checks that placement is within browser window\n useEffect(() => {\n const minX = windowWidth - measurements.width - OFFSET_X;\n const minY = windowHeight - measurements.height - OFFSET_Y;\n if (minX < placement.x && minX > 0) {\n setPlacement({ ...placement, x: minX });\n }\n if (minY < placement.y && minY > 0) {\n setPlacement({ ...placement, y: minY });\n }\n }, [windowHeight, windowWidth, placement, measurements]);\n\n const onDragStop: DraggableEventHandler = (event, dragElement) => {\n let x = dragElement.x < 0 ? 0 : dragElement.x;\n let y = dragElement.y < 0 ? 0 : dragElement.y;\n\n setPlacement({ x: x, y: y });\n saveToStore(x, y, measurements.width, measurements.height);\n };\n\n const onResizeStop = (event: SyntheticEvent, data: ResizeCallbackData) => {\n const { size } = data;\n setMeasurements({ width: size.width, height: size.height });\n saveToStore(placement.x, placement.y, size.width, size.height);\n };\n\n const saveToStore = (x: number, y: number, width: number, height: number) => {\n store.setObject(inlineEditKey, { x: x, y: y, w: width, h: height });\n };\n\n return (\n \n \n
\n \n \n
\n \n Canvas Inline Editor
\n \n \n
\n
\n \n \n
\n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n inlineEditorContainer: css({\n display: 'flex',\n flexDirection: 'column',\n background: theme.components.panel.background,\n border: `1px solid ${theme.colors.border.weak}`,\n boxShadow: theme.shadows.z3,\n zIndex: 1000,\n opacity: 1,\n minWidth: '400px',\n }),\n draggableWrapper: css({\n width: 0,\n height: 0,\n }),\n inlineEditorHeader: css({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: theme.colors.background.canvas,\n borderBottom: `1px solid ${theme.colors.border.weak}`,\n height: '40px',\n cursor: 'move',\n }),\n inlineEditorContent: css({\n whiteSpace: 'pre-wrap',\n padding: '10px',\n }),\n inlineEditorClose: css({\n marginLeft: 'auto',\n }),\n placeholder: css({\n width: '24px',\n height: '24px',\n visibility: 'hidden',\n marginRight: 'auto',\n }),\n inlineEditorContentWrapper: css({\n overflow: 'scroll',\n }),\n});\n","import React, { Component } from 'react';\nimport { ReplaySubject, Subscription } from 'rxjs';\n\nimport { PanelProps } from '@grafana/data';\nimport { locationService } from '@grafana/runtime/src';\nimport { PanelContext, PanelContextRoot } from '@grafana/ui';\nimport { CanvasFrameOptions } from 'app/features/canvas';\nimport { ElementState } from 'app/features/canvas/runtime/element';\nimport { Scene } from 'app/features/canvas/runtime/scene';\nimport { PanelEditEnteredEvent, PanelEditExitedEvent } from 'app/types/events';\n\nimport { SetBackground } from './components/SetBackground';\nimport { InlineEdit } from './editor/inline/InlineEdit';\nimport { Options } from './panelcfg.gen';\nimport { AnchorPoint, CanvasTooltipPayload, ConnectionState } from './types';\n\ninterface Props extends PanelProps {}\n\ninterface State {\n refresh: number;\n openInlineEdit: boolean;\n openSetBackground: boolean;\n contextMenuAnchorPoint: AnchorPoint;\n moveableAction: boolean;\n}\n\nexport interface InstanceState {\n scene: Scene;\n selected: ElementState[];\n selectedConnection?: ConnectionState;\n}\n\nexport interface SelectionAction {\n panel: CanvasPanel;\n}\n\nlet canvasInstances: CanvasPanel[] = [];\nlet activeCanvasPanel: CanvasPanel | undefined = undefined;\nlet isInlineEditOpen = false;\nlet isSetBackgroundOpen = false;\n\nexport const activePanelSubject = new ReplaySubject(1);\n\nexport class CanvasPanel extends Component {\n declare context: React.ContextType;\n static contextType = PanelContextRoot;\n panelContext: PanelContext | undefined;\n\n readonly scene: Scene;\n private subs = new Subscription();\n needsReload = false;\n isEditing = locationService.getSearchObject().editPanel !== undefined;\n\n constructor(props: Props) {\n super(props);\n this.state = {\n refresh: 0,\n openInlineEdit: false,\n openSetBackground: false,\n contextMenuAnchorPoint: { x: 0, y: 0 },\n moveableAction: false,\n };\n\n // Only the initial options are ever used.\n // later changes are all controlled by the scene\n this.scene = new Scene(\n this.props.options.root,\n this.props.options.inlineEditing,\n this.props.options.showAdvancedTypes,\n this.props.options.panZoom,\n this.props.options.infinitePan,\n this.onUpdateScene,\n this\n );\n this.scene.updateSize(props.width, props.height);\n this.scene.updateData(props.data);\n this.scene.inlineEditingCallback = this.openInlineEdit;\n this.scene.setBackgroundCallback = this.openSetBackground;\n this.scene.tooltipCallback = this.tooltipCallback;\n this.scene.moveableActionCallback = this.moveableActionCallback;\n\n this.subs.add(\n this.props.eventBus.subscribe(PanelEditEnteredEvent, (evt: PanelEditEnteredEvent) => {\n // Remove current selection when entering edit mode for any panel in dashboard\n this.scene.clearCurrentSelection();\n this.closeInlineEdit();\n })\n );\n\n this.subs.add(\n this.props.eventBus.subscribe(PanelEditExitedEvent, (evt: PanelEditExitedEvent) => {\n if (this.props.id === evt.payload) {\n this.needsReload = true;\n this.scene.clearCurrentSelection();\n }\n })\n );\n }\n\n componentDidMount() {\n activeCanvasPanel = this;\n activePanelSubject.next({ panel: this });\n\n this.panelContext = this.context;\n if (this.panelContext.onInstanceStateChange) {\n this.panelContext.onInstanceStateChange({\n scene: this.scene,\n layer: this.scene.root,\n });\n\n this.subs.add(\n this.scene.selection.subscribe({\n next: (v) => {\n if (v.length) {\n activeCanvasPanel = this;\n activePanelSubject.next({ panel: this });\n }\n\n canvasInstances.forEach((canvasInstance) => {\n if (canvasInstance !== activeCanvasPanel) {\n canvasInstance.scene.clearCurrentSelection(true);\n canvasInstance.scene.connections.select(undefined);\n }\n });\n\n this.panelContext?.onInstanceStateChange!({\n scene: this.scene,\n selected: v,\n layer: this.scene.root,\n });\n },\n })\n );\n\n this.subs.add(\n this.scene.connections.selection.subscribe({\n next: (v) => {\n if (!this.context.instanceState) {\n return;\n }\n\n this.panelContext?.onInstanceStateChange!({\n scene: this.scene,\n selected: this.context.instanceState.selected,\n selectedConnection: v,\n layer: this.scene.root,\n });\n\n if (v) {\n activeCanvasPanel = this;\n activePanelSubject.next({ panel: this });\n }\n\n canvasInstances.forEach((canvasInstance) => {\n if (canvasInstance !== activeCanvasPanel) {\n canvasInstance.scene.clearCurrentSelection(true);\n canvasInstance.scene.connections.select(undefined);\n }\n });\n\n setTimeout(() => {\n this.forceUpdate();\n });\n },\n })\n );\n }\n\n canvasInstances.push(this);\n }\n\n componentWillUnmount() {\n this.scene.subscription.unsubscribe();\n this.subs.unsubscribe();\n isInlineEditOpen = false;\n isSetBackgroundOpen = false;\n canvasInstances = canvasInstances.filter((ci) => ci.props.id !== activeCanvasPanel?.props.id);\n }\n\n // NOTE, all changes to the scene flow through this function\n // even the editor gets current state from the same scene instance!\n onUpdateScene = (root: CanvasFrameOptions) => {\n const { onOptionsChange, options } = this.props;\n onOptionsChange({\n ...options,\n root,\n });\n\n this.setState({ refresh: this.state.refresh + 1 });\n activePanelSubject.next({ panel: this });\n };\n\n shouldComponentUpdate(nextProps: Props, nextState: State) {\n const { width, height, data, options } = this.props;\n let changed = false;\n\n if (width !== nextProps.width || height !== nextProps.height) {\n this.scene.updateSize(nextProps.width, nextProps.height);\n changed = true;\n }\n\n if (data !== nextProps.data && !this.scene.ignoreDataUpdate) {\n this.scene.updateData(nextProps.data);\n changed = true;\n }\n\n if (options !== nextProps.options && !this.scene.ignoreDataUpdate) {\n this.scene.updateData(nextProps.data);\n changed = true;\n }\n\n if (this.state.refresh !== nextState.refresh) {\n changed = true;\n }\n\n if (this.state.openInlineEdit !== nextState.openInlineEdit) {\n changed = true;\n }\n\n if (this.state.openSetBackground !== nextState.openSetBackground) {\n changed = true;\n }\n\n if (this.state.moveableAction !== nextState.moveableAction) {\n changed = true;\n }\n\n // After editing, the options are valid, but the scene was in a different panel or inline editing mode has changed\n const inlineEditingSwitched = this.props.options.inlineEditing !== nextProps.options.inlineEditing;\n const shouldShowAdvancedTypesSwitched =\n this.props.options.showAdvancedTypes !== nextProps.options.showAdvancedTypes;\n const panZoomSwitched = this.props.options.panZoom !== nextProps.options.panZoom;\n const infinitePanSwitched = this.props.options.infinitePan !== nextProps.options.infinitePan;\n if (\n this.needsReload ||\n inlineEditingSwitched ||\n shouldShowAdvancedTypesSwitched ||\n panZoomSwitched ||\n infinitePanSwitched\n ) {\n if (inlineEditingSwitched) {\n // Replace scene div to prevent selecto instance leaks\n this.scene.revId++;\n }\n\n this.needsReload = false;\n this.scene.load(\n nextProps.options.root,\n nextProps.options.inlineEditing,\n nextProps.options.showAdvancedTypes,\n nextProps.options.panZoom,\n nextProps.options.infinitePan\n );\n this.scene.updateSize(nextProps.width, nextProps.height);\n this.scene.updateData(nextProps.data);\n changed = true;\n }\n\n return changed;\n }\n\n openInlineEdit = () => {\n if (isInlineEditOpen) {\n this.forceUpdate();\n this.setActivePanel();\n return;\n }\n\n this.setActivePanel();\n this.setState({ openInlineEdit: true });\n isInlineEditOpen = true;\n };\n\n openSetBackground = (anchorPoint: AnchorPoint) => {\n if (isSetBackgroundOpen) {\n this.forceUpdate();\n this.setActivePanel();\n return;\n }\n\n this.setActivePanel();\n this.setState({ openSetBackground: true });\n this.setState({ contextMenuAnchorPoint: anchorPoint });\n\n isSetBackgroundOpen = true;\n };\n\n tooltipCallback = (tooltip: CanvasTooltipPayload | undefined) => {\n this.scene.tooltip = tooltip;\n this.forceUpdate();\n };\n\n moveableActionCallback = (updated: boolean) => {\n this.setState({ moveableAction: updated });\n this.forceUpdate();\n };\n\n closeInlineEdit = () => {\n this.setState({ openInlineEdit: false });\n isInlineEditOpen = false;\n };\n\n closeSetBackground = () => {\n this.setState({ openSetBackground: false });\n isSetBackgroundOpen = false;\n };\n\n setActivePanel = () => {\n activeCanvasPanel = this;\n activePanelSubject.next({ panel: this });\n };\n\n renderInlineEdit = () => {\n return this.closeInlineEdit()} id={this.props.id} scene={this.scene} />;\n };\n\n renderSetBackground = () => {\n return (\n this.closeSetBackground()}\n scene={this.scene}\n anchorPoint={this.state.contextMenuAnchorPoint}\n />\n );\n };\n\n render() {\n return (\n <>\n {this.scene.render()}\n {this.state.openInlineEdit && this.renderInlineEdit()}\n {this.state.openSetBackground && this.renderSetBackground()}\n >\n );\n }\n}\n","import { get as lodashGet } from 'lodash';\n\nimport { NestedPanelOptions, NestedValueAccess } from '@grafana/data/src/utils/OptionsUIBuilders';\nimport { CanvasConnection } from 'app/features/canvas';\nimport { Scene } from 'app/features/canvas/runtime/scene';\nimport { setOptionImmutably } from 'app/features/dashboard/components/PanelEditor/utils';\n\nimport { ConnectionState } from '../types';\n\nimport { optionBuilder } from './options';\n\nexport interface CanvasConnectionEditorOptions {\n connection: ConnectionState;\n scene: Scene;\n category?: string[];\n}\n\nexport function getConnectionEditor(opts: CanvasConnectionEditorOptions): NestedPanelOptions {\n return {\n category: opts.category,\n path: '--', // not used!\n\n values: (parent: NestedValueAccess) => ({\n getValue: (path: string) => {\n return lodashGet(opts.connection.info, path);\n },\n // TODO: Fix this unknown (maybe a dimension supplier?)\n onChange: (path: string, value: unknown) => {\n let options = opts.connection.info;\n options = setOptionImmutably(options, path, value);\n opts.scene.connections.onChange(opts.connection, options);\n },\n }),\n\n build: (builder, context) => {\n const ctx = { ...context, options: opts.connection.info };\n optionBuilder.addColor(builder, ctx);\n optionBuilder.addSize(builder, ctx);\n },\n };\n}\n","import { css } from '@emotion/css';\nimport React from 'react';\n\nimport { StandardEditorProps, GrafanaTheme2 } from '@grafana/data';\nimport { Alert, HorizontalGroup, Icon, VerticalGroup, useStyles2 } from '@grafana/ui';\n\nconst helpUrl = 'https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/canvas/';\n\nexport const PanZoomHelp = ({}: StandardEditorProps) => {\n const styles = useStyles2(getStyles);\n\n return (\n <>\n \n }\n className={styles.alert}\n onRemove={() => {\n const newWindow = window.open(helpUrl, '_blank', 'noopener,noreferrer');\n if (newWindow) {\n newWindow.opener = null;\n }\n }}\n >\n \n \n - \n Pan:\n
\n - Middle mouse
\n - CTRL + right mouse
\n
\n \n - Zoom: Scroll wheel
\n - Reset: Double click
\n
\n \n \n \n >\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n alert: css({\n '& div': { padding: '4px', alignItems: 'start' },\n marginBottom: '0px',\n marginTop: '5px',\n padding: '2px',\n 'ul > li': { marginLeft: '10px' },\n }),\n hGroup: css({\n '& div': { width: '100%' },\n }),\n});\n","import { PanelModel } from '@grafana/data';\n\nimport { Options } from './panelcfg.gen';\n\nexport const canvasMigrationHandler = (panel: PanelModel): Partial => {\n const pluginVersion = panel?.pluginVersion ?? '';\n\n // Rename text-box to rectangle\n // Initial plugin version is empty string for first migration\n if (pluginVersion === '') {\n const root = panel.options?.root;\n if (root?.elements) {\n for (const element of root.elements) {\n if (element.type === 'text-box') {\n element.type = 'rectangle';\n }\n }\n }\n }\n\n return panel.options;\n};\n","import { FieldConfigProperty, PanelOptionsEditorBuilder, PanelPlugin } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { FrameState } from 'app/features/canvas/runtime/frame';\n\nimport { CanvasPanel, InstanceState } from './CanvasPanel';\nimport { getConnectionEditor } from './editor/connectionEditor';\nimport { getElementEditor } from './editor/element/elementEditor';\nimport { getLayerEditor } from './editor/layer/layerEditor';\nimport { PanZoomHelp } from './editor/panZoomHelp';\nimport { canvasMigrationHandler } from './migrations';\nimport { Options } from './panelcfg.gen';\n\nexport const addStandardCanvasEditorOptions = (builder: PanelOptionsEditorBuilder) => {\n builder.addBooleanSwitch({\n path: 'inlineEditing',\n name: 'Inline editing',\n description: 'Enable editing the panel directly',\n defaultValue: true,\n });\n\n builder.addBooleanSwitch({\n path: 'showAdvancedTypes',\n name: 'Experimental element types',\n description: 'Enable selection of experimental element types',\n defaultValue: true,\n });\n\n builder.addBooleanSwitch({\n path: 'panZoom',\n name: 'Pan and zoom',\n description: 'Enable pan and zoom',\n defaultValue: false,\n showIf: (opts) => config.featureToggles.canvasPanelPanZoom,\n });\n builder.addCustomEditor({\n id: 'panZoomHelp',\n path: 'panZoomHelp',\n name: '',\n editor: PanZoomHelp,\n showIf: (opts) => config.featureToggles.canvasPanelPanZoom && opts.panZoom,\n });\n builder.addBooleanSwitch({\n path: 'infinitePan',\n name: 'Infinite panning',\n description:\n 'Enable infinite panning - useful for expansive canvases. Warning: this an experimental feature and currently only works well with elements that are top / left constrained',\n defaultValue: false,\n showIf: (opts) => config.featureToggles.canvasPanelPanZoom && opts.panZoom,\n });\n};\n\nexport const plugin = new PanelPlugin(CanvasPanel)\n .setNoPadding() // extend to panel edges\n .useFieldConfig({\n standardOptions: {\n [FieldConfigProperty.Mappings]: {\n settings: {\n icon: true,\n },\n },\n },\n })\n .setMigrationHandler(canvasMigrationHandler)\n .setPanelOptions((builder, context) => {\n const state: InstanceState = context.instanceState;\n\n addStandardCanvasEditorOptions(builder);\n\n if (state) {\n builder.addNestedOptions(getLayerEditor(state));\n\n const selection = state.selected;\n const connectionSelection = state.selectedConnection;\n\n if (selection?.length === 1) {\n const element = selection[0];\n if (!(element instanceof FrameState)) {\n builder.addNestedOptions(\n getElementEditor({\n category: [`Selected element (${element.options.name})`],\n element,\n scene: state.scene,\n })\n );\n }\n }\n\n if (connectionSelection) {\n builder.addNestedOptions(\n getConnectionEditor({\n category: ['Selected connection'],\n connection: connectionSelection,\n scene: state.scene,\n })\n );\n }\n }\n });\n"],"names":["AddLayerButton","onChange","options","label","HorizontalConstraint","VerticalConstraint","BackgroundImageSize","HttpRequestMethod","ConnectionPath","defaultCanvasElementOptions","defaultOptions","QuickPlacement","Align","VAlign","defaultBgColor","defaultTextColor","defaultLightTextColor","defaultThemeTextColor","ParamsEditor","value","paramName","setParamName","paramValue","setParamValue","changeParamValue","currentTarget","changeParamName","removeParam","key","updatedParams","param","addParam","newParams","e","a","b","isAddParamsDisabled","Input","IconButton","entry","callApi","api","updateLoadingStateCallback","requestMatchesGrafanaOrigin","request","getRequest","error","interpolateVariables","text","panel","requestHeaders","url","getData","data","requestEndpoint","requestURL","grafanaURL","dummyStringSettings","httpMethodOptions","contentTypeOptions","APIEditor","context","defaultApiConfig","onEndpointChange","endpoint","onDataChange","onMethodChange","method","onContentTypeChange","contentType","formatCreateLabel","input","onQueryParamsChange","queryParams","onHeaderParamsChange","headerParams","renderJSON","json","JSONFormatter","renderTestAPIButton","Button","InlineFieldRow","InlineField","RadioButtonGroup","Select","Field","variantOptions","ButtonStyleEditor","defaultStyleConfig","onVariantChange","variant","ButtonDisplay","styles","getStyles","isLoading","setIsLoading","loading","onClick","Spinner","theme","buttonItem","ctx","cfg","getCfgApi","builder","category","TextDimensionEditor","droneFrontItem","droneFrontTransformStyle","droneSideItem","droneSidePitchTransformStyle","droneTopItem","fRightRotorAnimation","fLeftRotorAnimation","bRightRotorAnimation","bLeftRotorAnimation","droneTopTransformStyle","EllipseDisplay","ellipseItem","ColorDimensionEditor","svgStrokePathClass","IconDisplay","props","svgStyle","SanitizedSVG","iconItem","path","NotFoundDisplay","config","notFoundItem","counter","ElementState","item","parent","target","event","hasHorizontalCenterConstraint","hasVerticalCenterConstraint","height","yOffset","transformScale","placement","style","deltaX","deltaY","dirLR","dirTB","isSelected","scene","rect","fallbackName","newName","trav","disablePointerEvents","constraint","vertical","horizontal","translate","elementContainer","parentContainer","parentBorderWidth","relativeTop","relativeBottom","relativeLeft","relativeRight","width","elementCenter","distanceFromCenter","background","border","css","color","image","v","visitor","canvasElementRegistry","oldName","isConnectionTarget","getConnectionsByTarget","connection","div","doSelect","element","selection","FrameState","targetElements","getElementTypes","shouldShowAdvancedTypes","current","getElementTypesOptions","defaultElementItems","advancedElementItems","items","selectables","alpha","option","onAddItem","sel","rootLayer","anchorPoint","newItem","newElementOptions","newElement","getDataLinks","textData","frames","links","linkLookup","frame","visibleFields","field","f","disp","link","isConnectionSource","sceneByName","getConnections","connections","c","index","updateConnectionsForSource","con","calculateCoordinates","sourceRect","parentRect","info","sourceHorizontalCenter","sourceVerticalCenter","x1","y1","x2","y2","targetRect","targetHorizontalCenter","targetVerticalCenter","parentHorizontalCenter","parentVerticalCenter","getRowIndex","fieldName","getConnectionStyles","defaultArrowSize","defaultArrowColor","lastRowIndex","strokeColor","strokeWidth","getParentBoundingClientRect","getTransformInstance","getParent","dummyFieldSettings","MetricValueDisplay","panelData","isEditMode","useObservable","of","getDisplayValue","fieldNotFound","fieldNames","MetricValueEdit","onFieldChange","selectedElement","FieldNamePicker","metricValueItem","RectangleDisplay","stylesFactory","rectangleItem","ServerDatabase","getServerStyles","ServerSingle","ServerStack","ServerTerminal","ServerType","outlineColor","serverItem","TextDisplay","TextEdit","textRef","saveText","onKeyDown","onKeyUp","textValue","textItem","windTurbineItem","windTurbineAnimation","DEFAULT_CANVAS_ELEMENT_CONFIG","Registry","LayerActionID","InlineEditTabs","DEFAULT_OFFSET","HORIZONTAL_OFFSET","frameItemDummy","action","updateName","shiftItemsOnDuplicate","opts","oldPlacement","copy","elements","elem","startIndex","endIndex","result","removed","src","dest","firstPosition","srcIndex","destIndex","child","vals","prefixNames","prefix","classNames","_i","className","name","prefixCSS","_","selector","refs","i","Properties","properties","component","prototype","property","withMethods","methods","duplicate","propertyName","methodName","_a","args","RGB","RGBA","HSL","HSLA","COLOR_MODELS","FUNCTION","PROPERTY","ARRAY","OBJECT","STRING","NUMBER","UNDEFINED","IS_WINDOW","doc","prefixes","getCrossBrowserProperty","length","TRANSFORM","FILTER","ANIMATION","KEYFRAMES","OPEN_CLOSED_CHARACTERS","TINY_NUM","REVERSE_TINY_NUM","DEFAULT_UNIT_PRESETS","pos","size","__spreadArrays","s","il","r","k","j","jl","dot","a1","a2","b1","b2","isUndefined","isObject","isArray","isEqualSeparator","character","separator","isCharacterSpace","isSeparatorSpace","findOpen","openCharacter","texts","openCloseCharacters","isIgnore","findIgnore","findClose","otherText","closeCharacter","_loop_1","nextIndex","open","out_i_1","state_1","splitText","splitOptions","_b","isSeparateFirst","isSeparateOnlyOpenClose","_c","isSeparateOpenClose","_d","openClosedText","close","regexText","regex","chr","values","tempValues","resetTemp","_loop_2","out_i_2","nextOpenCloseCharacters","state_2","splitSpace","splitComma","splitBracket","matches","splitUnit","unit","camelize","str","all","letter","letter2","toArray","now","findIndex","arr","callback","defaultIndex","findLastIndex","findLast","defalutValue","firstTime","raf","currTime","id","caf","handle","getKeys","obj","getValues","keys","sortOrders","orders","index1","index2","convertUnitSize","sizeFunction","between","min","max","checkBoundSize","targetSize","compareSize","isMax","ratio","throttle","defaultSize","throttledSize","calculateBoundSize","minSize","maxSize","keepRatio","minWidth","minHeight","maxWidth","maxHeight","sum","nums","total","getRad","pos1","pos2","distX","distY","rad","getCenterPoint","points","getShapeDirection","center","pos1Rad","pos2Rad","num","reverseUnit","throttleArray","replaceOnce","fromText","toText","isOnce","flat","prev","cur","deepFlat","cutHex","hex","hexToRGBA","h","g","toFullHex","hslToRGBA","hsl","l","x","m","rgb","stringToRGBA","colorArr","$","selectors","multi","hasClass","addClass","removeClass","reg","fromCSS","cssObject","getWindow","addEvent","el","type","listener","removeEvent","getDocument","getDocumentElement","getDocumentBody","isWindow","val","isNode","PolyMap","__proto","prevIndex","HashMap","SUPPORT_MAP","Link","prevLink","nextLink","orderChanged","changed","fixed","fromLinks","toLinks","from","to","fromLink","toLink","fromIndex","toIndex","Result","prevList","list","added","maintained","changedBeforeAdded","ordered","pureChanged","fromBefore","toBefore","diff","findKeyCallback","mapClass","prevKeys","prevKeyMap","keyMap","removedMap","addedCount","removedCount","prevListIndex","listIndex","ListDiffer","newData","extendStatics","d","p","__extends","__","__assign","t","n","__rest","__spreadArray","pack","ar","fillKeys","arr2","fillProps","defaultProps","name_1","isDiff","getAttributes","otherProps","splitProps","attributes","events","name_2","findContainerNode","provider","base","removeNode","node","parentNode","executeHooks","hooks","hook","renderFunctionComponent","hooksIndex","Provider","ref","ps","contexts","nextElement","nextState","isForceUpdate","self","currentDepth","scheduledContexts","scheduledSubs","isContextUpdate","nextChildSubs","childs","sub","depth","renderProviders","prevProps","setCurrentInstance","fr","getCurrentInstance","getHooksIndex","setHooksInex","nextHooksIndex","Component","state","prevState","isUpdate","PureComponent","_super","createRef","defaultValue","refCallback","forwardRef","func","createComponent","contextValue","ComponentProvider","container","_this","nextProps","isMount","contextType","template","nextContexts","ef","def","diffAttributes","attrs1","attrs2","diffObject","name_3","diffEvents","events1","events2","provier","name_4","name_5","keys1","keys2","diffStyle","style1","style2","beforeName","name_6","name_7","name_8","getNativeEventName","ElementProvider","isRemove","eventName","contextValues","containerNode","isSVG","prevAttributes","prevEvents","nextAttributes","nextEvents","name_9","findDOMNode","comp","providers","findNodeProvider","children","ContainerProvider","TextProvider","diffProviders","containerProvider","childrenKeys","childrenProvider","next","createProvider","childProvider","getNextSibiling","childProviders","providerClass","updatedHooks","hyd","updated","nodeProvider","renderProvider","isProvider","render","renderSelf","createContext","$_subs","Consumer","getContext","mainComponent","subs","Portal","createPortal","_renderToString","parentContexts","stringProps_1","styleName","styleValue","strings","renderToString","renderSelfToString","checkHookInfo","inst","prevHt","defaultFunction","deps","contextId","providerComponent","st","nextValue","effect","unshift","effects","useImperativeHandle","some","getUserAgent","agent","userAgent","execRegExp","pattern","hasUserAgentData","userAgentData","brands","findVersion","versionTest","convertVersion","findPreset","presets","userPreset","version","preset","findPresetBrand","brandInfo","findBrand","brand","BROWSER_PRESETS","CHROMIUM_PRESETS","WEBKIT_PRESETS","WEBVIEW_PRESETS","OS_PRESETS","parseUserAgentData","osData","isMobile","firstBrand","browser","os","chromiumBrand","webkitBrand","platform_1","browserBrand","parseUserAgent","nextAgent","browserPreset","browserVersion","osPreset","osVersion","chromiumPreset","webkitPreset","getAccurateAgent","agentInfo","add","matrix","inverseMatrix","fromX","swap","iv","divide","ignoreDimension","newMatrix","invert","createIdentityMatrix","identityIndex","targetStartIndex","targetIndex","transpose","getOrigin","originMatrix","w","fromTranslation","convertPositionMatrix","convertDimension","multiplies","matrixes","multiply","matrix2","plus","nextPos","minus","convertCSStoMatrix","is2d","convertMatrixtoCSS","calculate","rotateX3d","rotateY3d","rotateZ3d","createRotateMatrix","scale3d","sx","sy","sz","rotate","translate3d","tx","ty","tz","matrix3d","matrix1","cos","sin","createScaleMatrix","scale","createOriginMatrix","origin","createWarpMatrix","pos0","pos3","nextPos0","nextPos1","nextPos2","nextPos3","x0","y0","x3","y3","u0","v0","u1","v1","u2","v2","u3","v3","getCenter","createMatrix","parseMat","transform","toMat","parse","getElementMatrix","calculateMatrixDist","res","getDistElementMatrix","matrixInfos","matrixFunction","functionValue","transforms","functionName","nextSize_1","posX","posY","posZ","nextSize","_e","_f","_g","_h","unitValue","childrenCount","ChildrenDiffer","EventEmitter","resolve","isStop","listeners","getDefaultScrollPosition","checkDefaultScrollEvent","getContainerElement","DragScroll","inputEvent","top","left","clientX","clientY","threshold","_startRect","_startPos","direction","prevScrollPos","throttleTime","isDrag","nextScrollPos","offsetX","offsetY","nextDirection","getScrollPosition","useScroll","nowTime","distTime","checkScrollEvent","tinyThrottle","isSameConstants","linearConstants1","linearConstants2","isSamePoint","point1","point2","getAreaSize","point","nextPoint","fitPoints","getMinMaxs","minX","minY","maxX","maxY","ratioX","ratioY","xs","ys","isInside","excludeLine","y","xLine","xLinearConstants","getLinearConstants","lines","convertLines","intersectionPosInfos","line","linearConstants","standardPoint","xPoints","getPointsOnLines","getIntersectionPointsByConstants","linePoint","intersectionCount","xMap","prevValue","getDistanceFromPointToConstants","dx","dy","c1","c2","isZeroA","isZeroB","results","getIntersectionPoints","line1","line2","isLimit","isPointOnLine","minMaxs","order","minMax","right","bottom","pointX","pointY","getOverlapPointInfos","points1","points2","targetPoints1","targetPoints2","lines1","lines2","linearConstantsList1","linearConstantsList2","overlapInfos","linePointInfos","intersectionPoints","isNext","pointMap","getOverlapPoints","infos","isConnectedLine","prevIndex1","prevIndex2","nextIndex1","nextIndex2","getOverlapAreas","areas","area","findReversedAreas","isFirst","nextPoints1","nextArea","areaPoint","nextPoint2","point2Index","findConnectedAreas","getUnoverlapAreas","overlapAreas","unoverlapAreas","overlapArea","nextOverlapArea","connectedAreas","firstConnectedArea","lastPoint_1","firstPoint","firstIndex","getOverlapSize","getRotatiion","touches","isMultiTouch","getEventClients","getClients","getClient","isMouseEvent","getPosition","clients","prevClients","startClients","getAverageClient","originalClientX","originalClientY","prevX","prevY","startX","startY","sumClient","minLength","client","ClientStore","isAdd","position","positions","movement","currentClient","prevClient","INPUT_TAGNAMES","Gesto","targets","isTrusted","isDragAPI","pinchOutside","preventWheelClick","preventRightClick","preventDefault","checkInput","dragFocusedInput","preventClickEventOnDragStart","preventClickEventOnDrag","preventClickEventByCondition","useTouch","isDragStart","activeElement","tagName","hasInput","hasContentEditable","activeTagName","timer","isScroll","dragResult","clientsLength","currentTime","isDouble","firstTarget","checkWindowBlur","passive_1","isCallDrag","store","nextClients","currentData","pinchThreshold","isPinch","isPrevDrag","isFirstDrag","storePosition","win","passive","hash","stringHash","getHash","getShadowRoot","parentElement","rootNode","replaceStyle","trimmedSelector","subSelector","trimmedSubSelector","injectStyle","shadowRoot","styled","injectClassName","styleElement","count","injectCount","StyledElement","defaultStyled","tag","injector","Styled","Tag","cssId","cspNonce","targetRef","injectResult","__decorate","decorators","desc","__values","o","__read","makeAble","able","DIRECTIONS4","DIRECTIONS","getSVGCursor","degree","getCursorCSS","degree45","defaultCursor","IS_WEBKIT","IS_WEBKIT605","navi","browserName","IS_CHROME","IS_CHROMIUM","chromiumVersion","IS_CHROMIUM109","IS_FIREFOX","IS_SAFARI_ABOVE15","PREFIX","directionCSS","dir","originX","originY","offset","MOVEABLE_CSS","NEARBY_POS","FLOAT_POINT_NUM","MIN_SCALE","MAX_NUM","MIN_NUM","DIRECTION_REGION_TO_DIRECTION","DIRECTION_INDEXES","DIRECTION_ROTATIONS","MOVEABLE_METHODS","setCustomDrag","delta","isConvert","ableName","datas","ableDatas","convertDragDist","CustomGesto","originalDatas","calculateElementPosition","is3d","poses","calculatePoses","x4","y4","calculatePosition","sign","calculatePointerDist","moveable","moveableClientRect","rootMatrix","calculateInversePosition","getDragDist","setDragStart","allMatrix","beforeMatrix","offsetMatrix","targetMatrix","transformOrigin","getTransformDirection","resolveTransformEvent","nextTransforms","nextTransformAppendedIndexes","convertTransformInfo","targetFunction","matFunctionName","convertTransformFormat","dist","getTransformDist","getBeforeDragDist","bx","by","getTransfromMatrix","isAfter","beforeTransform","afterTransform","beforeTransform2","afterTransform2","targetAllTransform","nextTargetMatrix","res1","afterTargetMatrix","inverseBeforeMatrix","startDragBeforeDist","absoluteOrigin","isBefore","startDragDist","getInverseDragDist","calculateTransformOrigin","prevWidth","prevHeight","prevOrigin","prevSize","measureRatio","getPosIndexesByDirection","indexes","getPosesByDirection","getPosBySingleDirection","getPosByDirection","startPos","fixedDirection","fixedPos","getNextMatrix","getAbsoluteMatrix","getNextTransformMatrix","isAllTransform","targetTransform","scaleMatrix","fillTransformStartEvent","getBeforeRenderableDatas","setTransformIndex","setDefaultTransformIndex","startTransforms","fillOriginalTransform","getNextTransforms","getNextTransformText","getNextStyle","fillTransformEvent","nextTransform","drag","Draggable","fillCSSObject","getTranslateFixedPosition","fixedOffset","nextMatrix","nextFixedPosition","getDirectionOffset","getTranslateDist","fixedPosition","groupable","groupLeft","groupTop","getScaleDist","getDirectionByPos","fixedOffsetPosition","getRotateDist","rotateDist","getResizeDist","nextOrigin","getAbsolutePosition","getAbsolutePosesByState","getGestoData","targetGesto","controlGesto","getIndividualTransforms","getStyle","individualTransforms","getMatrixStackInfo","checkContainer","documentElement","requestEnd","isEnd","targetTransformOrigin","hasFixed","offsetContainer","getOffsetInfo","zoom","getCachedStyle","getElementTransform","isFixed","getTransformMatrix","offsetParent","isOffsetEnd","isStatic","parentClientLeft","parentClientTop","fixedClientLeft","fixedClientTop","fixedInfo","getPositionFixedInfo","length_1","convert3DMatrixes","getOffsetPosInfo","hasOffset","origin_1","targetOrigin","offsetPos","offsetLeft","offsetTop","getSVGMatrix","targetZoom","offsetInfo","offsetZoom","parentSlotElement","customOffsetParent","customOffsetLeft","customOffsetTop","margin","getBodyOffset","isElementTarget","scrollLeft","scrollTop","cacheStyleMap","clientRectStyleMap","matrixContainerInfos","setStoreCache","useCache","getCachedClientRect","clientRect","nextClientRect","getClientRect","getCachedMatrixContainerInfo","result_1","cache","nextStyle_1","cached","fillChildEvents","groupableDatas","childDatas","triggerChildGesto","isStart","moveables","childEvents","eventParams","ev","childMoveable","gestos","childEvent","triggerChildAbles","eachEvent","startChildDist","parentDatas","startPositions","originalX","originalY","renderDirectionControlsByInfos","renderDirections","React","renderPoses","rotationRad","getProps","degRotation","absDegree","directionMap","renderState","renderDirectionMap","directionSign","directionRotation","dataAttrs","getControlTransform","renderDirectionControls","defaultDirections","directions","displayAroundControls","renderAroundControls","renderLine","rotation","getLineStyle","renderEdgeLines","edge","getRenderDirections","renderDiagonalDirections","renderAllDirections","checkBoundPoses","bounds","verticalPoses","horizontalPoses","nextBounds","checkBounds","getBounds","externalBounds","containerHeight","containerWidth","clientLeft","clientTop","snapOffsetLeft","snapOffsetTop","snapOffsetRight","snapOffsetBottom","isCSS","checkBoundKeepRatio","endPos","endX","endY","abs","isBottom","isRight","verticalInfo","horizontalInfo","isBound","isVertical","startBoundPos","endBoundPos","minPos","maxPos","boundInfos","isBoundRotate$1","relativePoses","boundRect","nextPoses","boundRotate","vec","boundPos","getDistSize","checkRotateBounds","prevPoses","relativeRad1","relativeRad2","nextRad","VERTICAL_NAMES","HORIZONTAL_NAMES","SNAP_SKIP_NAMES_MAP","VERTICAL_NAMES_MAP","HORIZONTAL_NAMES_MAP","getInitialBounds","hasGuidelines","snappable","innerBounds","verticalGuidelines","horizontalGuidelines","snapGridWidth","snapGridHeight","guidelines","enableSnap","getSnapDirections","snapDirections","mapSnapDirectionPoses","snapPoses","nextSnapDirections","nextSnapPoses","splitSnapDirectionPoses","horizontalNames","verticalNames","calculateContainerPos","containerRect","clientPos","solveLineConstants","NAME_snapRotationThreshold","NAME_snapRotationDegrees","NAME_snapHorizontalThreshold","NAME_snapVerticalThreshold","checkMoveableSnapPoses","posesX","posesY","dirXs","dirYs","customSnapVerticalThreshold","customSnapHorizontalThreshold","snapThresholdMultiples","snapHorizontalThreshold","selectValue","snapVerticalThreshold","checkSnapPoses","multiples","checkSnap","checkSnapKeepRatio","getTinyDist","verticalSnapInfo","horizontalSnapInfo","getNearestSnapGuidelineInfo","isVerticalSnap","verticalGuideline","isHorizontalSnap","horizontalGuideline","horizontalPos","verticalPos","isSnap","getStringDirection","stringDirection","checkSnaps","horizontalDirection","verticalDirection","snapInfo","posInfo","guidelineInfo","guideline","targetType","targetPoses","snapThreshold","dirs","posType","snapPosInfos","targetPos","guidelineInfos","snapPosInfo","getSnapInfosByDirection","snapDirection","nextDir","checkSnapBoundPriority","aDist","bDist","getNearOffsetInfo","offsets","aSign","bSign","aOffset","bOffset","getCheckSnapDirections","endDirection_1","signX","signY","signs","isStartLine","cx","cy","hitTestLine","test1","test2","isSameStartLine","dots","centerSign","checkInnerBoundDot","start","end","checkInnerBound","verticalSign","horizontalSign","lineConstants","leftLine","topLine","rightLine","bottomLine","topBoundInfo","checkLineBoundCollision","bottomBoundInfo","leftBoundInfo","rightBoundInfo","isAllVerticalBound","isVerticalBound","isAllHorizontalBound","isHorizontalBound","verticalOffset","maxOffset","horizontalOffset","isAllBound","boundLine","isRender","dot1","boundDot1","boundDot2","dy2","dx2","hasDx","hasDy","slope","getInnerBoundInfo","lineInfos","multiple","sizeOffset","getInnerBoundDragInfo","getCheckInnerBoundLineInfos","innerBoundInfo","widthOffsetInfo","heightOffsetInfo","getCheckSnapLineDirections","lineDirections","virtualPoses","dir1","dir2","virtualLine","isBoundRotate","boundDots","getDistPointLine","solveReverseLine","checkRotateInnerBounds","dotInfos","lineRad","lineDist","dotDist","dotRad","distRad","nextRad1","nextRad2","checkInnerBoundPoses","boundMap","pos4","lineInfo","isHorizontalStart","isVerticalStart","solveEquation","snapOffset","solveNextOffset","dist1","dist2","isOutside","widthOffset","heightOffset","getSnapBound","boundInfo","checkThrottleDragRotate","throttleDragRotate","adjustPoses","adjustPos","prevDistY","checkSnapBoundsDrag","ignoreSnap","getAbsolutePoses","getRect","boundPoses","checkMoveableSnapBounds","verticalSnapBoundInfo","horizontalSnapBoundInfo","verticalInnerBoundInfo","horizontalInnerBoundInfo","horizontalBoundInfos","verticalBoundInfos","horizontalDist","verticalDist","checkSnapBounds","guideines","checkSnapRightLine","snapBoundInfo","rad180","isHorizontalLine","isVerticalLine","getSnapBoundInfo","isRequest","startDirection","endDirection","otherStartPos","otherEndPos","checkSnapBoundsKeepRatio","otherHorizontalOffset","isOtherHorizontalBound","isOtherHorizontalSnap","otherVerticalOffset","isOtherVerticalBound","isOtherVerticalSnap","snapLine","getSnapBoundOffset","horizontalBoundInfo","verticalBoundInfo","checkMaxBounds","left_1","top_1","right_1","bottom_1","otherDirection","isCheckVertical","isCheckHorizontal","otherPos","deg","nextOtherPos","isHeightOutside","isWidthOutside","hideThrottleDragRotateLine","dragInfo","beforeOrigin","parentEvent","parentGesto","startCheckSnapDrag","params","fillParams","triggerEvent","parentFlag","deltaOffset","useSnap","isGroup","parentThrottleDrag","prevDist","prevBeforeDist","startValue","parentMoveable","throttleDrag","dragRotateRad","startDragRotate","ry","rx","beforeTranslate","beforeDist","beforeDelta","fillEndParams","nextParams","passDelta","getFixedDirectionInfo","getOffsetFixedDirectionInfo","nextFixedOffset","getOffsetFixedPositionInfo","offsetFixedPosition","directionCondition$2","getDirectionCondition","Resizable","getDirectionViewClassName","parentDirection","parentFixedDirection","getTotalDirection","setRatio","setFixedDirection","setFixedPosition","setMin","setMax","nextMaxSize","startWidth","startHeight","parentKeepRatio","dragClient","parentDist","resolveMatrix","isResize","startOffsetWidth","startOffsetHeight","isWidth","startOffsetMatrix","startTransformOrigin","targetN","nextAllMatrix","resizeFormat","throttleResize","keepRatioFinally","sizeDirection","distWidth","distHeight","getNextBoundingSize","getOffsetSizeDist","nextWidth","nextHeight","boundingWidth","boundingHeight","nextFixedDirection","snapDist","checkSnapResize","computeSize","isNoSnap","inverseDelta","fillAfterTransform","errorWidth","errorHeight","isErrorWidth","isErrorHeight","originalEvents","parentStartOffsetWidth","parentStartOffsetHeight","updateGroupMin","originalMinSize","childMinSize","childStartOffsetWidth","childStartOffsetHeight","parentMinWidth","parentMinHeight","updateGroupMax","originalMaxSize","childMaxSize","parentMaxWidth","parentMaxHeight","catchEvent","parentScale","setRotateStartInfo","startAbsoluteOrigin","getAbsoluteDist","defaultDeg","prevDeg","normalizedPrevDeg","loop","getAbsoluteDistByClient","getRotateInfo","moveableRect","throttleRotate","prevSnapDeg","snapRotation","checkSnapRotate","snapDeg","getRotationPositions","rotationPosition","radPoses","getRotationRad","isReverse","dragControlCondition","rotationTarget","getRefTargets","Rotatable","rotatable","rotateAroundControls","resolveAblesWithRotatable","jsxs","ables","resolveMap_1","directionControlInfos","parentRotate","beforeDirection","resizeStart","startClientX","startClientY","externalRotate","inputTarget","regionDirection","controlDirection","clientPoses","calculateMoveableClientPositions","originalFixedPosition_1","fixedBeforeOrigin","fixedAfterOrigin","posDelta","dragStart","resolveAble","getTotalOrigin","rotatation","clientDistX","clientDistY","groupDelta","beforeInfo","afterInfo","absoluteInfo","isRotate","targetDirection","beforeRotation","absoluteDelta","absoluteDist","absoluteRotation","startRotation","absoluteStartRotation","nextClientX","nextClientY","nextRotation","inverseDist","dragEvent","transformEvent","parentDistance","resize","resizeEvent","parentLeft","parentTop","parentBeforeOrigin","childClient","startGroupClient","prevClientX","prevClientY","distRotate","renderGuideline","isHorizontal","scaleType","renderInnerGuideline","renderSnapPoses","renderPos","renderGuidelines","isDisplayInnerSnapDigit","mainNames","targetStart","targetEnd","hide","elementRect","renderDigitLine","lineType","gap","snapDigit","isDisplaySnapDigit","snapDistFormat","sizeName","absGap","snapSize","groupByElementGuidelines","otherIndex","names","groupBy","nextGuidelines","inner","elementRect1","elementRect2","renderDashedGuidelines","rendered","groups","sideNames","sidePos","prevRect","nextRect","size1","size2","renderPos1","renderPos2","renderGapGuidelines","targetSideStart","targetSideEnd","gapRects","sideStartPos","sideEndPos","sideCenterPos","getTotalGuidelines","containerClientRect","overflow","containerClientHeight","containerClientWidth","snapGap","maxSnapElementGuidelineDistance","isDisplayGridGuidelines","elementGuidelines","getElementGuidelines","totalGuidelines","getGapGuidelines","getGridGuidelines","getDefaultGuidelines","checkBetweenRects","snapThresholds","maxSnapElementGapDistance","elementRects","gapGuidelines","targetCenter","targetStart2","targetEnd2","snapThresholdMap","getDist","nextElementRects","snapRect1","snapRect2","rect1","rect2","rect1Start","rect1End","rect2Start","rect2End","isCenter","startGridGroupGuidelines","snapGridAll","snapRenderInfo","hasDirection","rect_1","children_1","posName","clientOffset","rectSize","rectPos","childSizes","firstChildSize","childSnapSizes","rectRatio","childSize","startOffset","snapThresholdInfo","defaultSnapGridWidth","defaultSnapGridHeight","pushGuideline","distance","prevValues","snapRect","nextElementGuidelines","getRefTarget","nextValues","getSnapElementRects","elementSnapDirections","topValue","leftValue","rightValue","bottomValue","centerValue","middleValue","rectTop","rectLeft","sizes","getObjectGuidelines","containerSize","posGuideline","snapWidth","snapHeight","offsetDelta","containerLeft","containerTop","elementLeft","elementTop","elementRight","elementBottom","checkSnapInfo","snapContainer","snapContainerTarget","snapContainerRect","offset1","getDragDistByState","offset2","getNextFixedPoses","nextFixedPos","normalized","getSizeOffsetInfo","innerBoundLineInfos","recheckSizeByTwoDirection","snapPos","nextWidthOffset","nextHeightOffset","checkSizeDist","getNextPoses","isWidthBound","isHeightBound","widthDist","heightDist","isGetWidthOffset","bumpDegree","baseDeg","deg1","deg2","getMinDegreeDistance","deg3","snapRotationThreshold","snapRotationDegrees","origin2_1","rad_1","sorted","firstDegree","checkSnapScale","sizeDist","getSnapGuidelines","posInfos","addBoundGuidelines","verticalSnapPoses","horizontalSnapPoses","innerBoundMap","verticalInnerBoundPoses","horizontalInnerBoundPoses","innerPos","directionCondition$1","Snappable","targetTop","targetLeft","snapRenderThreshold","watchValue","minLeft","minTop","externalPoses","snapInfos","hasExternalPoses","externalRect","verticalPosInfos","horizontalPosInfos","allGuidelines","nextBoundMap","nextInnerBoundMap","multiply2","defaultSync","fn","measureSVGSize","viewBox","getSVGViewBox","getBeforeTransformOrigin","relativeOrigin","getTransformOrigin","getTransformOriginArray","computedTransform","baseVal","lastParent","isParent","checkZoom","getTargetStyle","hasSlot","assignedSlotParentElement","isCustomElement","targetPosition","willChange","slotParentNode","targetParentNode","getSVGGraphicsOffset","getBodyStyle","bodyPosition","marginLeft","marginTop","fixedContainer","hasTransform","body","makeMatrixCSS","clientWidth","clientHeight","viewBoxWidth","viewBoxHeight","scaleX","scaleY","preserveAspectRatio","align","meetOrSlice","svgOrigin","xAlign","yAlign","scaleDimension","isGTarget","isFillBox","bbox","rectWidth","rectHeight","calculateRect","getSVGOffset","targetInfo","getSize","mat","prevLeft","prevTop","posOrigin","rectOrigin","mat2","nextLeft","nextTop","distLeft","distTop","rootClientRect","rootPoses","getDiagonalSize","offsetWidth","offsetHeight","cssWidth","cssHeight","contentWidth","contentHeight","minOffsetWidth","minOffsetHeight","maxOffsetWidth","maxOffsetHeight","inlineCSSWidth","inlineCSSHeight","svg","targetStyle","boxSizing","borderLeft","borderRight","borderTop","borderBottom","paddingLeft","paddingRight","paddingTop","paddingBottom","horizontalPadding","verticalPadding","horizontalBorder","verticalBorder","getParentStyle","resetClientRect","getExtendsRect","isRoot","extendsRect","getClientRectByPosition","isExtends","baseTop","baseLeft","convertTransformOriginArray","getDirection","direciton","unsetAbles","isControl","unsetGesto","gestoName","gesto","resolvedEvent","prevEvent","nextEvent","isBeforeEvent","isManager","pseudoElt","filterAbles","triggerAblesSimultaneously","enabledAbles","ableGroups","equals","groupKeys","groupKey","keyIndex","group","groupByMap","calculatePadding","xAdded","yAdded","nextAdded","convertCSSSize","isRelative","checkAbles","beforeFunctionTexts","beforeFunctionTexts2","targetFunctionText","afterFunctionTexts","afterFunctionTexts2","beforeFunctions","beforeFunctions2","afterFunctions","afterFunctions2","targetFunctions","beforeFunctionMatrix","beforeFunctionMatrix2","afterFunctionMatrix","afterFunctionMatrix2","allFunctionMatrix","isArrayFormat","isSelector","userTargets","getAbsoluteRotation","getSizeDistByDist","startSize","standardRad","signSize","startWidthSize","startHeightSize","secondRad","firstRad","distSize","pinchScale","startFixedDirection","directionsDists","directionRatios","ratioDistance","dist_1","convertTransformUnit","xy","leftOrigin","rightOrigin","originObject","nextOriginObject","rotatePosesInfo","isDeepArrayEquals","arr1","value1","value2","isArray1","isArray2","valueKey","countEach","getPaddingBox","padding","Pinchable","angle","pinchable","controlEventName","pinchAbles","ableEvent","directionCondition","Scalable","setMinScaleSize","setMaxScaleSize","isScale","throttleScale","tempScaleValue","getNextScale","stateDirection","nextScale","distSign","isSelfPinch","startOffsetSize","scaleSize","distText","scaleText","isZeroScale","scaleEndParam","moveableScale","getMiddleLinePos","getTriangleRad","rad1","rad2","isValidPos","poses1","poses2","pi","Warpable","resizable","scalable","warpable","linePosFrom1","linePosFrom2","linePosFrom3","linePosFrom4","linePosTo1","linePosTo2","linePosTo3","linePosTo4","targetInverseMatrix","prevMatrix","isWarp","posIndexes","absolutePoses","selectedPoses","nearByPoses","afterMatrix","totalMatrix","AREA_PIECES","AREA_PIECE","AVOID","VIEW_DRAGGING","restoreStyle","renderPieces","DragArea","dragArea","passDragArea","areaElement","rects","Origin","originStyle","scrollContainer","Scrollable","scrollOptions","dragScroll","scrollContainerElement","scrollThreshold","scrollThrottleTime","Default","Padding","paddingDirections","paddingPos1","paddingPos2","paddingPos3","paddingPos4","RADIUS_DIRECTIONS","calculateRatio","sumSize","sumRatio","HORIZONTAL_RADIUS_ORDER","VERTICAL_RADIUS_ORDER","HORIZONTAL_RADIUS_DIRECTIONS","VERTICAL_RADIUS_DIRECTIONS","getRadiusStyles","clipStyles","radiusPoses","raws","rawPos","getRadiusRange","controlPoses","horizontalRange","verticalRange","clipPose","getRadiusValues","minCounts","full","splitIndex","splitLength","horizontalValues","verticalValues","horizontalValuesLength","verticalValuesLength","hasVerticalValues","nwValue","neValue","seValue","_j","swValue","_k","_l","wnValue","_m","enValue","_o","esValue","_p","wsValue","horizontalRawPoses","verticalRawPoses","nextHorizontalPoses","nextVerticalPoses","removeRadiusPos","radiuslIndex","deleteCount","addRadiusPos","horizontalIndex","verticalIndex","radiusX","radiusY","startVerticalIndex","splitRadiusPoses","horizontals","verticals","CLIP_DIRECTIONS","CLIP_RECT_DIRECTIONS","getClipStyles","clipPath","clipRelative","clipType","clipPoses","isRect","isCircle","subWidth","subHeight","getRectPoses","dirx","diry","getControlSize","xRange","yRange","getClipPath","defaultClip","customClip","clipText","clipPrefix","splitter","xPos","yPos","radiusX_1","radiusY_1","radius","xRadius","yRadius","centerPos_1","roundIndex","rectLength","radiusValues","_q","_r","_s","top_2","_t","nextRight","nextBottom","_u","posValue","top_3","moveControlPos","dists","verticalDirections","horizontalDirections","verticalDirection_1","horizontalDirection_1","fixedIndex","nextDist","nextControlPoses_1","controlPose","controlDir","dirDir","dirHorizontal","dirVertical","addClipPath","clipIndex","clipStyle","removeClipPath","Clippable","customClipPath","defaultClipPath","clipArea","clipPathState","snapBoundInfos","calculatedPos","controls","isInset","isPolygon","linePoses_1","clipLeft","clipTop","ellipseClipPath","piece","areaPoses","allWidth","allHeight","allLeft_1","allTop_1","directionType","snapPos1","snapPos2","dragWithClip","isDragTarget","isLine","isArea","originalDraggable","originalDist","firstDist","isDragWithTarget","isAll","guidePoses","isEllipse","guideRect","guideXPoses","guideYPoses","rectPoses","rectDists_1","boundDelta","snapOffsetY","snapOffsetX","distSnapX","distSnapY","width_1","height_1","nextControlPoses_2","nextClipStyles","dragDist","isClipStart","OriginDraggable","originRelative","distOrigin","dragDelta","addBorderRadiusByLine","lineIndex","horizontalsLength","virtual","verticalsLength","controlIndex","controlPoseInfo","addBorderRadius","removeBorderRadius","getBorderRadius","borderRadius","triggerRoundEvent","getStyleBorderRadius","firstMoveable","Roundable","roundClickable","borderRadiusState","minRoundControls","maxRoundControls","roundPadding","isDisplayShadowRoundControls","verticalCount","horizontalCount","basePos","originalPos","isDisplayVerticalShadow","isDisplay","indexAttr","roundRelative","selectedControlPose","selectedVertical","selectedHorizontal","pose","poseDist","isIdentityMatrix","identityMatrix","BeforeRenderable","inlineTransform","cssMatrix","startTransform","Renderable","transformObject","matrixInfo","triggerAble","moveableAbles","eventOperations","eventAffix","eventType","requestInstant","requestAble_1","isDragStop","stop","isFirstStart","gestoType","prevGesto","trigger","conditionName","nextDatas","forceEndedCount","updatedCount","eventOperation","eventAbles","isForceEnd","flushSync","checkMoveableTarget","eventTarget","dragTargetElement","getTargetAbleGesto","moveableTarget","controlBox","dragTarget","checkTarget","getAbleGesto","getControlAbleGesto","checkControlTarget","ableType","conditionFunctions","isTargetAbles","preventClickDefault","dragContaienrOption","dragContainer","isPinchScheduled","EventManager","calculateMatrixStack","rootContainer","isAbsolute3d","prevTargetMatrix","containerZoom","rootMatrixes","isRoot3d","offsetRootContainer","rootZoom","isNext3d","isSVGGraphicElement","nextRootMatrixes","originalRootContainer","endContainer","rootMatrixBeforeOffset","nextInfo","isMatrix3d","originalRootMatrix","calculateElementInfo","allResult","getElementInfo","getMoveableTargetInfo","moveableElement","requestStyles","targetClientRect","rootContainerClientRect","getStyle_1","beforePosition","absoluteTargetPosition","absoluteContainerPosition","containerClientRectLeft","containerClientRectTop","containterClientLeft","containerClientTop","clientDelta","getPersistState","MoveableManager","parentPosition","propsTarget","translateZ","ControlBoxElement","linePadding","controlPadding","stateTarget","groupTargets","isDragging","ableAttributes","ableClassName","isVisible","viewContainer","manager","wrapperMoveable","totalSize","isTarget","isSetState","isSingle","persistState","statePos","isInstant","allAbles","requsetAble","ableRequester","requester","ableParam","originalBeforeOrigin","stateLeft","stateTop","isPersisted","renderPos3","renderPos4","zoomOffset","stateContainer","isTargetChanged","isChanged","moveableContainer","customStyleMap","hasControlBox","persistData","firstRenderState","pinchStart","dragControlStart","targetAbles","controlAbles","Renderer","styleNames","ableStyleNames","hasTargetAble","hasControlAble","isUnset","hideDefaultLines","hideChildMoveableDefaultLines","useDragArea","nextTarget","prevTarget","prevDragArea","isDragTargetChanged","isDragAreaChanged","eventKeys","hasAbles","viewContainerOption","nextClassNames","prevClassNames","classPrefix","targetGestoData","controlGestoData","observer","records","e_1","records_1","records_1_1","mutation","e_1_1","Groupable","renderGroupRects","persistDatChildren","Clickable","isMoveableElement","containsElement","containsTarget","parentTarget","getDraggableEvent","edgeDraggable","IndividualGroupable","MOVEABLE_ABLES","MOVEABLE_EVENTS","MOVEABLE_PROPS","solveConstantsDistance","solveC","getMaxPos","getMinPos","getGroupRect","parentPoses","fixedRotation","a1_1","a2_1","a1MinMax_1","a1MinMaxPos_1","a2MinMax_1","a2MinMaxPos_1","a1Dist","a2Dist","a1MinPos","a1MaxPos","a2MinPos","a2MaxPos","minHorizontalLine","maxHorizontalLine","minVerticalLine","maxVerticalLine","minX_1","minY_1","maxX_1","maxY_1","changedX","findMoveableGroups","childTargetGroups","targetGroup","childMoveableGroups","checked","MoveableGroup","checkeds","targetGroups","moveableGroups","useDefaultGroupRotate","finded","isReset","defaultGroupRotate","persistedRoatation","getMoveableGroupRect","parentRotation","posesRotations","rotations","groupRotation","firstRotation","isSameRotation","groupPoses","groupRect","rootGroupRect","posesInfo","rotateScale","isContainerChanged","MoveableIndividualGroup","canPersist","individualProps","controlBoxElement","dragElement","getElementTargets","refTargets","selectorMap","elementTargets","getTargetGroups","compareRefTargets","prevRefTargets","nextRefTargets","InitialMoveable","cssMap","moveableContructor","userAbles","userProps","nextSelectorMap","totalAbles","prevMoveable","target_1","prevTargetMoveable","mv","resolvePromise","isBrowser","updateSelectorMap","selectorTarget","Moveable","makeMoveable","InnerMoveable","PROPERTIES","METHODS","EVENTS","nextOptions","selfElement","innerMoveable","createCommonjsModule","module","keycode","exports","keyCode","searchInput","hasKeyCode","search","foundNamedKey","codes","aliases","nameOrCode","alias","keycode_1","keycode_2","keycode_3","keycode_4","keycode_5","codeData","keysSort","getKey","keyName","getCombi","getModifierCombi","getArrangeCombi","arrangeKeys","prevScore","nextScore","globalKeyController","KeyController","comb","isToggle","combi","touch","filterDuplicated","map","elementFromPoint","baseNode","jsx","elChildren","elStyle","attrs","diffValue","boundArea","getDefaultElementRect","passTargets","beforeTargets","afterTargets","continueSelectWithoutDeselect","getLineSize","CLASS_NAME","OPTIONS","OPTION_TYPES","Selecto","clickedTarget","selectFromInside","selectByClick","boundContainer","preventDragFromInside","clickBySelectEnd","dragCondition","boundElement","rectElement","hitRect","firstPassedTargets","allowClickBySelectEnd","hasInsideTargets","pointTarget","isPreventSelect","innerScrollOptions","isInnerScroll","inputEvent_1","innerScrollElement","hasScrollOptions","selectFlag","isKeyDown","isKeyUp","containers","portalContainer","selectedTargets","beforeSelected","selectedElements","startPoint","endPoint","mousedown","mousemove","mouseup","getElementRect","selectableElements","selectableTargets","selectablePoints","hasIndexesMap","parentMap_1","parents","paths","prevParentElement","keyContainer","toggleContinueSelect","toggleContinueSelectWithoutDeselect","nextClassName","continueSelect","selectRect","gestoEvent","hitRate","innerGroups","innerWidth","innerHeight","ignoreClick","rectPoints","isHit","hitRateValue","inArea","overlapPoints","overlapSize","rate","selectableInners","yGroups","isMoveInnerScroll","parentMap_2","parentInfo","containerInfo","isDragStartEnd","startResult","startSelectedTargets","startPassedTargets","afterAdded","afterRemoved","afterPrevList","afterList","containerX","containerY","offsetSize","passedTargets","isKeyup","nextKeys","toggleKeys","singleKey_1","innerScrollContainer_1","parentMap_3","innerScrollPathsList","innerScrollPaths","isAlwaysTrue","selectablePoints_1","groups_1","getter","setter","Selecto$1","CanvasContextMenu","onVisibilityChange","inlineEditorOpen","isMenuVisible","setIsMenuVisible","setAnchorPoint","handleContextMenu","closeContextMenu","renderMenuItems","openCloseEditorMenuItem","MenuItem","editElementMenuItem","onClickEditElementMenuItem","typeOptions","getTypeOptionsSubmenu","submenuItems","onClickItem","sceneContainerDimensions","addItemMenuItem","setBackgroundMenuItem","contextMenuAction","actionType","first","currentSelectedElements","currentLayer","currentSelectedElement","ContextMenu","CanvasTooltip","onClose","overlayProps","dialogProps","renderDataLinks","VizTooltipContainer","CloseButton","CONNECTION_ANCHOR_DIV_ID","CONNECTION_ANCHOR_ALT","CONNECTION_ANCHOR_HIGHLIGHT_OFFSET","ANCHOR_PADDING","ConnectionAnchors","setRef","handleMouseLeave","highlightEllipseRef","halfSize","halfSizeHighlightEllipse","anchorImage","onMouseEnterAnchor","onMouseLeaveHighlightElement","handleMouseLeaveAnchors","ANCHORS","generateAnchors","anchors","anchor","idCounter","htmlElementTypes","ConnectionSVG","setSVGRef","setLineRef","headId","CONNECTION_LINE_ID","EDITOR_HEAD_ID","selectedConnection","setSelectedConnection","selectedConnectionRef","clearSelectedConnection","selectConnection","renderConnections","idx","source","connectionCursorStyle","selectedStyles","CONNECTION_HEAD_ID","Connections","BehaviorSubject","anchorElement","connectionSVG","connectionLine","elementTarget","elementBoundingRect","parentBoundingRect","connectionLineX1","connectionLineY1","sourceX","sourceY","targetX","targetY","targetName","selectedTarget","connectionStartTargetBox","connectionAnchorOffsetX","connectionAnchorOffsetY","mouseX","mouseY","update","roundNumber","decimal","checkIsNumber","handleCallback","easeOut","linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","animations","handleCancelAnimationFrame","animation","handleCancelAnimation","contextInstance","handleSetupAnimation","animationName","animationTime","startTime","lastStep","frameTime","animationProgress","animationType","step","isValidTargetState","targetState","positionX","positionY","animate","isValid","setTransformState","scaleDiff","positionXDiff","positionYDiff","newScale","newPositionX","newPositionY","getComponentsSizes","wrapperComponent","contentComponent","wrapperWidth","wrapperHeight","newContentWidth","newContentHeight","newDiffWidth","newDiffHeight","diffWidth","diffHeight","centerZoomedOut","scaleWidthFactor","scaleHeightFactor","minPositionX","maxPositionX","minPositionY","maxPositionY","calculateBounds","boundLimiter","minBound","maxBound","isActive","handleCalculateBounds","getMouseBoundedPosition","limitToBounds","paddingValueX","paddingValueY","paddingX","paddingY","handleCalculateZoomPositions","scaleDifference","calculatedPositionX","calculatedPositionY","newPositions","checkZoomBounds","minScale","maxScale","zoomPadding","enablePadding","scalePadding","minScaleWithPadding","isPanningStartAllowed","excluded","isInitialized","targetIsShadowDom","isWrapperChild","isAllowed","isExcluded","isExcludedNode","isPanningAllowed","isPanning","setup","disabled","handlePanningSetup","handleTouchPanningSetup","oneFingerTouch","handlePanToBounds","xChanged","yChanged","mousePosX","mousePosY","handleNewPosition","getPanningClientPosition","startCoords","transformState","panning","lockAxisX","lockAxisY","getPaddingValue","disablePadding","isVelocityCalculationAllowed","mounted","velocityAnimation","disabledVelocity","isVelocityAllowed","velocity","getVelocityMoveTime","equalToMove","sensitivity","getVelocityPosition","newPosition","startPosition","currentPosition","isLocked","minPosition","maxPosition","minTarget","maxTarget","calculatedPosition","getSizeMultiplier","defaultMultiplier","handleCalculateVelocity","lastMousePosition","velocityTime","sizeMultiplier","distanceX","distanceY","velocityX","velocityY","interval","speed","handleVelocityPanning","alignmentAnimation","zoomAnimation","sizeX","sizeY","velocityAlignmentTime","alignAnimationTime","moveAnimationTime","finalAnimationTime","maxTargetX","minTargetX","maxTargetY","minTargetY","startState","alignAnimation","alignStep","customStep","currentPositionX","currentPositionY","handlePanningStart","handleAlignToBounds","isDisabled","handlePanning","handlePanningEnd","velocityDisabled","wrapperRect","contentRect","isZoomed","shouldAnimate","handleZoomToPoint","handleAlignToScaleBounds","mousePositionX","mousePositionY","initialState","initialSetup","createState","createSetup","newSetup","validValue","validParameter","dataType","handleCalculateButtonZoom","smooth","targetScale","handleZoomToViewCenter","resetTransformations","onResetTransformation","initialTransformation","newBounds","boundedPositions","newState","getOffset","wrapper","content","wrapperOffset","contentOffset","xOff","yOff","calculateZoomToNode","customZoom","nodeRect","nodeOffset","nodeLeft","nodeTop","nodeWidth","nodeHeight","zoomIn","zoomOut","setTransform","resetTransform","centerView","getCenterPosition","zoomToElement","getControls","getState","passiveSupported","makePassiveEventOption","exclude","cancelTimeout","timeout","getTransformStyles","getMatrixTransformStyles","centerPositionX","centerPositionY","mergeRefs","isWheelAllowed","wheelDisabled","touchPadDisabled","getDeltaY","getDelta","customDelta","getMousePosition","handleCalculateWheelZoom","disable","getTarget","paddingEnabled","handleWheelZoomStop","previousWheelEvent","isPinchStartAllowed","isPinchAllowed","pinchStartDistance","calculateTouchMidPoint","firstPointX","firstPointY","secondPointX","secondPointY","getTouchDistance","calculatePinchZoom","currentDistance","pinchStartScale","touchProportion","wheelStopEventTime","wheelAnimationTime","handleWheelStart","onWheelStart","onZoomStart","handleWheelZoom","onWheel","onZoom","wheel","smoothStep","zoomStep","mousePosition","isPaddingDisabled","isLimitedToBounds","handleWheelStop","onWheelStop","onZoomStop","hasStoppedZooming","handlePinchStart","handlePinchZoom","midPoint","handlePinchStop","pinchMidpoint","handleDoubleClickStop","handleDoubleClickResetMode","getDoubleClickScale","mode","handleDoubleClick","doubleClickStopEventTimer","isDoubleClickAllowed","ZoomPanPinch","newProps","currentDocument","currentWindow","centerOnInit","keysPressed","onPanningStart","onPanning","onPanningStop","onPinchingStart","onPinching","onPinchingStop","isDoubleTap","isPanningAction","isPinchAction","onTransformed","ctx_1","Context","getContent","TransformWrapper","instance","KeepScale","localRef","initialElementRect","useResize","onResize","dependencies","resizeObserverRef","rectRef","didUnmount","entries","newSize","previewStyles","MiniMap","borderColor","rest","initialized","setInitialized","useTransformContext","miniMapInstance","mainRef","wrapperRef","previewRef","getContentSize","computeMiniMapScale","contentSize","computeMiniMapSize","computeMiniMapStyle","transformMiniMap","miniSize","wrapSize","previewScale","initialize","useTransformEffect","useTransformInit","zpp","wrapperStyle","styleInject","insertAt","head","css_248z","TransformComponent","wrapperClass","contentClass","contentStyle","wrapperProps","contentProps","init","cleanupWindowEvents","contentRef","libraryContext","useControls","unmountCallback","unmount","SceneTransformWrapper","sceneDiv","zoomPanPinchRef","updateMoveable","onSceneContainerMouseDown","settingsViewable","openSettings","evt","onKeyPress","dimensionViewable","constraintViewable","targetElement","verticalConstraintVisualization","horizontalConstraintVisualization","borderStyle","centerIndicatorLineOne","centerIndicatorLineTwo","centerIndicator","verticalConstraintTop","verticalConstraintBottom","verticalConstraintTopBottom","verticalConstraintCenterLine","verticalConstraintCenter","horizontalConstraintLeft","horizontalConstraintRight","horizontalConstraintLeftRight","horizontalConstraintCenterLine","horizontalConstraintCenter","RootElement","changeCallback","Scene","enableEditing","showAdvancedTypes","panZoom","infinitePan","onSave","ReplaySubject","Subject","visible","transformInstance","isFrame","scalar","maxRight","maxBottom","stack","currentElement","nestedElements","nestedElement","sceneContainer","rootElements","destroySelecto","allowChanges","targetedElement","elementSupportsEditing","needsUpdate","isTargetMoveableElement","isTargetAlreadySelected","dragToGap","destPosition","newLayer","framePlacement","skipNextSelectionBroadcast","isTooltipValid","canShowElementTooltip","SetBackground","bgImage","setBgImage","ResourcePickerPopover","BackgroundSizeEditor","imageSize","onImageSizeChange","getCategoryName","optionBuilder","ConstraintSelectionBox","onVerticalConstraintChange","onHorizontalConstraintChange","currentConstraints","onClickTopConstraint","onClickBottomConstraint","onClickVerticalCenterConstraint","onClickLeftConstraint","onClickRightConstraint","onClickHorizontalCenterConstraint","HOVER_COLOR","HOVER_OPACITY","SELECTED_COLOR","selectionBoxColor","QuickPositioning","onPositionChange","settings","onQuickPositioningChange","defaultConstraint","originalConstraint","getRightBottomPosition","elementSize","places","horizontalOptions","verticalOptions","PlacementEditor","layout","reselectElementAfterChange","onHorizontalConstraintSelect","onVerticalConstraintSelect","Icon","NumberInput","getElementEditor","lodash","layer","layerTypes","isUnsupported","currentOptions","TreeContext","DropIndicator","_ref","dropPosition","dropLevelOffset","indent","_objectDestructuringEmpty","Indent","prefixCls","level","baseClassName","_excluded","ICON_OPEN","ICON_CLOSE","defaultTitle","InternalTreeNode","_React$Component","_len","_key","onNodeClick","onNodeDoubleClick","onNodeSelect","_this$props","disableCheckbox","onNodeCheck","targetChecked","onNodeMouseEnter","onNodeMouseLeave","onNodeContextMenu","onNodeDragStart","onNodeDragEnter","onNodeDragOver","onNodeDragLeave","onNodeDragEnd","onNodeDrop","_this$props2","onNodeExpand","expanded","eventKey","keyEntities","_this$props3","isLeaf","loaded","loadData","hasChildren","treeDisabled","checkable","treeCheckable","_this$props$context","onNodeLoad","_this$props4","draggable","_this$props$context2","switcherIconFromProps","switcherIconFromCtx","switcherIcon","_switcherIconDom","switcherCls","switcherIconDom","_this$props5","halfChecked","$custom","dragNodeHighlight","_this$props6","_this$props6$title","title","selected","icon","_this$props$context3","showIcon","treeIcon","titleRender","wrapClass","$icon","currentIcon","titleNode","$title","_this$props7","_this$props$context4","dropIndicatorRender","dragOverNodeKey","rootDraggable","showIndicator","mergedIndent","selectable","treeSelectable","_classNames","_this$props8","dragOver","dragOverGapTop","dragOverGapBottom","domRef","active","onMouseMove","_this$props$context5","filterTreeNode","dropContainerKey","dropTargetKey","draggingNodeKey","dataOrAriaAttributeProps","pickAttrs","_ref2","isEndNode","mergedDraggable","draggableWithoutDisabled","dragging","ariaSelected","ContextTreeNode","useUnmount","triggerStart","triggerEnd","_React$useState","_React$useState2","firstMount","setFirstMount","MotionTreeNode","motion","motionNodes","motionType","onOriginMotionStart","onOriginMotionEnd","treeNodeRequiredProps","setVisible","_React$useContext","targetVisible","triggerMotionStart","triggerMotionEndRef","triggerMotionEnd","onVisibleChanged","nextVisible","motionRef","motionClassName","motionStyle","treeNode","restProps","treeNodeProps","RefMotionTreeNode","findExpandedKeys","prevLen","nextLen","find","shorter","longer","getExpandRange","shorterStartIndex","shorterEndNode","longerStartIndex","longerEndIndex","HIDDEN_STYLE","noop","MOTION_KEY","MotionNode","MotionEntity","MotionFlattenData","getMinimumRangeTransitionRange","itemHeight","itemKey","getAccessibilityPath","NodeList","expandedKeys","selectedKeys","checkedKeys","loadedKeys","loadingKeys","halfCheckedKeys","focusable","activeItem","focused","tabIndex","onFocus","onBlur","onActiveChange","onListChangeStart","onListChangeEnd","domProps","listRef","indentMeasurerRef","scroll","prevExpandedKeys","setPrevExpandedKeys","_React$useState3","_React$useState4","prevData","setPrevData","_React$useState5","_React$useState6","transitionData","setTransitionData","_React$useState7","_React$useState8","transitionRange","setTransitionRange","_React$useState9","_React$useState10","setMotionType","dataRef","onMotionEnd","latestData","diffExpanded","rangeNodes","newTransitionData","_keyIndex","_rangeNodes","_newTransitionData","mergedData","originList","fullList","originSet","restList","mergedKey","arrDel","clone","arrAdd","posToArr","getDragChildrenKeys","dragNodeKey","dragChildrenKeys","entity","dig","isLastChild","treeNodeEntity","posArr","isFirstChild","calcDropPosition","dragNode","targetNode","startMousePosition","allowDrop","flattenedNodes","expandKeys","_abstractDropNodeEnti","_getBoundingClientRec","horizontalMouseOffset","rawDropLevelOffset","filteredExpandKeys","_keyEntities$key","abstractDropNodeEntity","nodeIndex","flattenedNode","prevNodeIndex","prevNodeKey","initialAbstractDropNodeKey","abstractDragOverEntity","abstractDragDataNode","abstractDropDataNode","dropAllowed","calcSelectedKeys","internalProcessProps","convertDataToTree","treeData","processor","_ref2$processProps","processProps","_ref3","childrenNodes","parseCheckedKeys","keyProps","warning","conductExpandParent","keyList","conductUp","MAX_RETRY_TIMES","Tree","_args","_this$state","onDragStart","newExpandedKeys","_this$state2","flattenNodes","onDragEnter","onExpand","_node$props","_assertThisInitialize","_calcDropPosition","dropTargetPos","_this$state3","onDragOver","_assertThisInitialize2","_calcDropPosition2","onDragLeave","onDragEnd","_this$getActiveItem","outsideTree","_this$state4","onDrop","abstractDropNodeProps","dropToChild","dropResult","_this$state5","nodeItem","eventNode","expandAction","onDoubleClick","_this$state6","onSelect","targetSelected","selectedNodes","selectedKey","_this$state7","oriCheckedKeys","oriHalfCheckedKeys","checkStrictly","onCheck","checkedObj","eventObj","checkedKey","_conductCheck","_checkedKeys","_halfCheckedKeys","keySet","_conductCheck2","loadPromise","reject","_ref$loadedKeys","_ref$loadingKeys","onLoad","promise","currentLoadedKeys","newLoadedKeys","onMouseEnter","onMouseLeave","onRightClick","_len2","_key2","_len3","_key3","_this$state8","_this$state9","_this$state10","listChanging","targetExpanded","newFlattenTreeData","currentExpandedKeys","expandedKeysToRestore","newActiveKey","activeKey","_this$props9","_this$props9$itemScro","itemScrollOffset","_this$state11","_this$state12","_key4","_this$state13","_this$props10","KeyCode","expandable","atomic","forceState","needSync","allPassed","_this$props11","_this$props11$itemScr","_this$state14","_this$props12","showLine","_this$props12$tabInde","onContextMenu","onScroll","rootClassName","rootStyle","draggableConfig","entitiesMap","cloneKeyEntities","checkedKeyEntity","_checkedKeyEntity","_checkedKeyEntity$che","_checkedKeyEntity$hal","conductKeys","getGlobalStyles","TreeNodeTitle","nodeData","setAllowSelection","getScene","onDelete","onDuplicate","onNameChange","verifyLayerNameUniqueness","nameToVerify","getLayerInfo","LayerName","getTreeData","root","selectedColor","destKey","srcKey","destPos","srcElement","allowSelection","TreeNavigationEditor","setTreeData","autoExpandParent","setAutoExpandParent","setExpandedKeys","setSelectedKeys","globalCSS","selectedBgColor","selectionByUID","srcEl","destEl","allow","onClearSelection","onTitleRender","onFrameSelection","getLayerEditor","TabsEditor","onTabChange","activeTab","setActiveTab","tabs","onCurrentTabChange","TabsBar","Tab","InlineEditBody","activePanel","activePanelSubject","instanceState","pane","OptionsPaneCategoryDescriptor","supplier","addStandardCanvasEditorOptions","getOptionsPaneCategoryDescriptor","topLevelItemsContainerStyle","tab","noElementSelected","renderOptionsPaneCategoryDescriptor","OptionsPaneCategory","getOptionsPaneCategory","categoryNames","access","OFFSET_X","OFFSET_Y","InlineEdit","windowHeight","windowWidth","inlineEditKey","defaultMeasurements","defaultX","defaultY","savedPlacement","measurements","setMeasurements","setPlacement","onDragStop","saveToStore","onResizeStop","canvasInstances","activeCanvasPanel","isInlineEditOpen","isSetBackgroundOpen","CanvasPanel","Subscription","onOptionsChange","tooltip","canvasInstance","ci","inlineEditingSwitched","shouldShowAdvancedTypesSwitched","panZoomSwitched","infinitePanSwitched","PanelContext","getConnectionEditor","helpUrl","PanZoomHelp","Alert","newWindow","canvasMigrationHandler","PanelPlugin","connectionSelection"],"sourceRoot":""}