{"version":3,"file":"polygonjs_editor_components.7f03343c7d17a5dbc2ff.css","mappings":";AA2SA,2GAA2G;AAC3G;CACC,UAAU;CACV,iBAAiB;AAClB;AACA;CACC,kBAAkB;CAClB,gBAAgB;AACjB;AACA;CACC,kBAAkB;CAClB,mCAAmC;CACnC,0BAA0B;AAC3B;AACA;CACC,0BAA0B;AAC3B","sources":["webpack:///../src/editor/components/panels/paramsStack/ParamsStack.vue"],"sourcesContent":["<template>\n\t<div\n\t\tclass=\"Panel ParamsStack h-full max-h-full overflow-y-scroll grid-y bg-bg-medium text-text styled-scroll-bar\"\n\t\t@pointermove=\"on_pointer_move\"\n\t>\n\t\t<div class=\"text-center no_node_selected bg-bg-medium select-none\" v-if=\"validStackItems.length == 0\">\n\t\t\t<EmptyState\n\t\t\t\t:displayEmoji=\"false\"\n\t\t\t\ttitle=\"Parameters Stack\"\n\t\t\t\tsubtitle=\"Display multiple node parameters at the same time\"\n\t\t\t></EmptyState>\n\t\t</div>\n\n\t\t<div class=\"cell auto panels_container\">\n\t\t\t<div\n\t\t\t\tv-for=\"(validStackItem, i) of validStackItems\"\n\t\t\t\tref=\"paramsStackItem\"\n\t\t\t\t:class=\"['border-l-4', selectedStates[i] ? 'border-green-500' : 'border-transparent']\"\n\t\t\t>\n\t\t\t\t<Params\n\t\t\t\t\t:nodeId=\"validStackItem.nodeId\"\n\t\t\t\t\t:key=\"validStackItem.nodeId\"\n\t\t\t\t\t:expanded=\"validStackItem.expanded\"\n\t\t\t\t\t:overflowYAuto=\"false\"\n\t\t\t\t\t:displayCloseButton=\"true\"\n\t\t\t\t\t:displayGoToNodeButton=\"true\"\n\t\t\t\t\t:expandable=\"true\"\n\t\t\t\t\t:moveableUp=\"moveableStates[i].up\"\n\t\t\t\t\t:moveableDown=\"moveableStates[i].down\"\n\t\t\t\t\t@close=\"removeCurrentNodeIdFromIndex(i)\"\n\t\t\t\t\t@goToNode=\"goToNode(i)\"\n\t\t\t\t\t@toggleExpanded=\"toggleExpanded(i)\"\n\t\t\t\t\t@moveUp=\"moveUp(i)\"\n\t\t\t\t\t@moveDown=\"moveDown(i)\"\n\t\t\t\t></Params>\n\t\t\t\t<div class=\"h-2 bg-black\"></div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\">\n// import lodash_values from 'lodash/values';\n\n// mixins\nimport {SetupLayoutData, ParamsStackPanelProps} from './mixins/LayoutData';\nimport {ParamsStackPanelInitLayoutData, ParamsStackItemData} from '../../../types';\nimport {SetupLinkIndex} from '../common/LinkIndex';\nimport {SetupEventMouse} from './mixins/EventMouse';\n// components\n\nimport {SetupSelectedNode} from '../../mixins/SelectedNode';\nimport EmptyState from '../../widgets/EmptyState.vue';\nimport {defineComponent, computed, Ref, ref, watch} from 'vue';\n// import {docsNode} from '../../../../routes';\nimport {StoreController} from '../../../store/controllers/StoreController';\nimport {BaseNodeType} from '../../../../../@polygonjs/polygonjs/src/engine/nodes/_Base';\nimport {ArrowUpRightIcon, XCircleIcon} from '@heroicons/vue/24/outline';\n// import {NodeContext} from './../../../../../@polygonjs/polygonjs/src/engine/poly/NodeContext';\nimport {NodeSelectCommand} from '../../../history/commands/NodeSelect';\nimport {SelectionMethod} from '../../../core/Selection';\nimport {Editor} from '../../../Editor';\nimport Params from '../params/Params.vue';\nexport default defineComponent({\n\tname: 'param-panel',\n\tcomponents: {\n\t\tEmptyState,\n\t\tParams,\n\t\tArrowUpRightIcon,\n\t\tXCircleIcon,\n\t},\n\n\tprops: {\n\t\tpanelId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t// nodeId: {\n\t\t// \ttype: Number as () => CoreGraphNodeId,\n\t\t// \tdefault: null,\n\t\t// },\n\t\tinit_layout_data: {\n\t\t\ttype: Object as () => ParamsStackPanelInitLayoutData,\n\t\t\tdefault() {\n\t\t\t\treturn {};\n\t\t\t},\n\t\t},\n\t},\n\tsetup(props: ParamsStackPanelProps, {emit}) {\n\t\tconst stack: Ref<ParamsStackItemData[]> = ref([]);\n\t\tconst paramsStackItem: Ref<HTMLElement[]> = ref([]);\n\t\t// const stackScrollContainer: Ref<HTMLElement | null> = ref(null);\n\n\t\tconst setupLinkIndex = SetupLinkIndex(props.init_layout_data.linkIndex);\n\t\tconst selection_options = SetupSelectedNode(setupLinkIndex);\n\n\t\tconst JSONNodeId = computed(() => {\n\t\t\treturn selection_options.first_selected_node_id.value;\n\t\t});\n\t\twatch(JSONNodeId, addCurrentNodeId);\n\n\t\tconst validStackItems = computed(() =>\n\t\t\tstack.value.filter((item) => StoreController.engine.json_node(item.nodeId) != null)\n\t\t);\n\t\tconst nodeIds = computed(() => validStackItems.value.map((item) => item.nodeId));\n\t\tconst moveableStates = computed(() =>\n\t\t\tvalidStackItems.value.map((item, i) => ({\n\t\t\t\tup: i > 0,\n\t\t\t\tdown: i < validStackItems.value.length - 1,\n\t\t\t}))\n\t\t);\n\t\t// const expandedStates = computed(() => validStackItems.value.map((item) => item.expanded));\n\n\t\tconst selectedStates = computed(() =>\n\t\t\tnodeIds.value.map((nodeId) => {\n\t\t\t\t// const jsonNode = StoreController.engine.json_node(nodeId)\n\t\t\t\t// if(!jsonNode){\n\t\t\t\t// \treturn false\n\t\t\t\t// }\n\t\t\t\tconst node = StoreController.engine.node(nodeId);\n\t\t\t\tif (!node) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\tconst parent = node.parent();\n\t\t\t\tif (!parent) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\tconst jsonParent = StoreController.engine.json_node(parent.graphNodeId());\n\n\t\t\t\treturn jsonParent?.selection?.includes(nodeId) || false;\n\t\t\t})\n\t\t);\n\n\t\tfunction addCurrentNodeId() {\n\t\t\t// do not add if not was selected why doing undo\n\t\t\tif (Editor.instance().historyStack()?.undoInProgress()) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t//\n\t\t\tif (JSONNodeId.value == null) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (nodeIds.value.includes(JSONNodeId.value)) {\n\t\t\t\tconst index = nodeIds.value.indexOf(JSONNodeId.value);\n\t\t\t\t_scrollToIndex(index);\n\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t_scrollToIndex(0);\n\t\t\tstack.value.unshift({nodeId: JSONNodeId.value, expanded: true});\n\t\t}\n\t\tfunction removeCurrentNodeIdFromIndex(index: number) {\n\t\t\tstack.value.splice(index, 1);\n\t\t}\n\t\tfunction toggleExpanded(index: number) {\n\t\t\tconst item = stack.value[index];\n\t\t\tif (!item) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\titem.expanded = !item.expanded;\n\t\t}\n\t\tfunction moveUp(index: number) {\n\t\t\t_swapItems(index, index - 1);\n\t\t}\n\t\tfunction moveDown(index: number) {\n\t\t\t_swapItems(index, index + 1);\n\t\t}\n\t\tfunction _swapItems(index1: number, index2: number) {\n\t\t\tconst item1 = stack.value[index1];\n\t\t\tconst item2 = stack.value[index2];\n\t\t\tstack.value[index1] = item2;\n\t\t\tstack.value[index2] = item1;\n\t\t}\n\t\tfunction _scrollToIndex(index: number) {\n\t\t\tconst scrollTarget = paramsStackItem.value[index];\n\t\t\tif (!scrollTarget) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// if (!stackScrollContainer.value) {\n\t\t\t// \treturn;\n\t\t\t// }\n\t\t\tconst alignToTop = true;\n\t\t\tscrollTarget.scrollIntoView(alignToTop);\n\t\t}\n\n\t\tfunction goToNode(index: number) {\n\t\t\t// nodeIds.value.splice(index, 1);\n\t\t\tconst nodeId = nodeIds.value[index];\n\t\t\tif (nodeId == null) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst node = StoreController.engine.node(nodeId);\n\t\t\tif (!node) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst parent = node.parent();\n\t\t\tif (!parent) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t_goToNode(parent, node);\n\t\t}\n\t\tasync function _goToNode(parent: BaseNodeType, childToSelect?: BaseNodeType) {\n\t\t\tStoreController.editor.setCurrentNode(setupLinkIndex.linkIndex.value, parent);\n\n\t\t\tif (parent.childrenAllowed() && parent.childrenController) {\n\t\t\t\tif (childToSelect) {\n\t\t\t\t\tconst cmd = new NodeSelectCommand(parent, [childToSelect], SelectionMethod.OVERRIDE);\n\t\t\t\t\tawait Editor.instance().pushCommand(cmd);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t_goToNode(parent);\n\t\t\t}\n\t\t}\n\n\t\t// const JSONNode = computed(() => {\n\t\t// \tif (props.nodeId != null) {\n\t\t// \t\treturn StoreController.engine.json_node(props.nodeId);\n\t\t// \t} // else {\n\t\t// \t//\tconsole.warn('Params.vue: nodeId is null', props.nodeId);\n\t\t// \t//}\n\t\t// \treturn selection_options.first_or_previous_selected_json_node.value;\n\t\t// });\n\t\t// const nodeIdJSON = computed(() => {\n\t\t// \treturn JSONNode.value?.graph_node_id;\n\t\t// });\n\n\t\t// // const displayContent = computed(() => {\n\t\t// // \treturn JSONNode.value != null;\n\t\t// // });\n\n\t\t// const nodeName = computed(() => {\n\t\t// \treturn JSONNode.value?.name || '';\n\t\t// });\n\t\t// const nodeContext = computed(() => {\n\t\t// \tconst nodeId = JSONNode.value?.graph_node_id;\n\t\t// \tif (nodeId == null) {\n\t\t// \t\treturn;\n\t\t// \t}\n\t\t// \tconst node = StoreController.engine.node(nodeId);\n\t\t// \tif (!node) {\n\t\t// \t\treturn;\n\t\t// \t}\n\t\t// \tconst parent = node.parent();\n\t\t// \tif (!parent) {\n\t\t// \t\treturn;\n\t\t// \t}\n\t\t// \t// const parentJSON = StoreController.engine.json_node(parent.graphNodeId())\n\t\t// \t// if(!parentJSON){\n\t\t// \t// \treturn\n\t\t// \t// }\n\t\t// \treturn parent.childrenController?.context;\n\t\t// });\n\t\t// const nodeType = computed(() => {\n\t\t// \treturn JSONNode.value?.type;\n\t\t// });\n\t\t// const displayDoc = computed(() => {\n\t\t// \treturn nodeContext.value != null && nodeType.value != null;\n\t\t// });\n\n\t\t// const nodeDocUrl = computed(() => {\n\t\t// \tif (nodeContext.value != null && nodeType.value != null) {\n\t\t// \t\treturn docsNode(nodeContext.value, nodeType.value);\n\t\t// \t}\n\t\t// \t// if (display_node_doc_help.value) {\n\t\t// \t// \tif (JSONNode.value) {\n\t\t// \t// \t\tconst selected_node = StoreController.engine.node(JSONNode.value.graph_node_id);\n\t\t// \t// \t\tif (selected_node) {\n\t\t// \t// \t\t\tconst context = selected_node.context();\n\t\t// \t// \t\t\tconst type = selected_node.type();\n\t\t// \t// \t\t\treturn docsNode(context, type); //`https://polygonjs.com/docs/nodes/${context}/${type}`;\n\t\t// \t// \t\t}\n\t\t// \t// \t}\n\t\t// \t// }\n\t\t// });\n\n\t\tconst LayoutDataMixin = SetupLayoutData({props, setupLinkIndex, stack});\n\t\tconst eventMouse = SetupEventMouse(props.panelId, emit);\n\n\t\treturn {\n\t\t\tparamsStackItem,\n\t\t\t// stackScrollContainer,\n\t\t\tvalidStackItems,\n\t\t\tselectedStates,\n\t\t\tmoveableStates,\n\t\t\tremoveCurrentNodeIdFromIndex,\n\t\t\ttoggleExpanded,\n\t\t\tgoToNode,\n\t\t\tmoveUp,\n\t\t\tmoveDown,\n\t\t\t...setupLinkIndex,\n\t\t\t...LayoutDataMixin,\n\t\t\t...eventMouse,\n\t\t};\n\t},\n});\n</script>\n\n<style>\n/* https://stackoverflow.com/questions/69400560/how-to-change-scrollbar-when-using-tailwind-next-js-react */\n.Panel.ParamsStack.styled-scroll-bar::-webkit-scrollbar {\n\twidth: 8px;\n\t/* height: 0px; */\n}\n.Panel.ParamsStack.styled-scroll-bar::-webkit-scrollbar-track {\n\tborder-radius: 4px;\n\tbackground: #999;\n}\n.Panel.ParamsStack.styled-scroll-bar::-webkit-scrollbar-thumb {\n\tborder-radius: 4px;\n\t/* border: 1px solid transparent; */\n\tbackground: rgb(37 99 235);\n}\n.Panel.ParamsStack.styled-scroll-bar::-webkit-scrollbar-thumb:hover {\n\tbackground: rgb(29 78 216);\n}\n</style>\n"],"names":[],"sourceRoot":""}