{"version":3,"file":"polygonjs_editor_components.8a973b9b13889378c0cd.css","mappings":";AAylBA;CACC,gBAAgB;CAChB,iBAAiB;CACjB,yBAAyB;CACzB,sBAAsB;CACtB,sBAAsB;AACvB","sources":["webpack:///../src/editor/components/panels/animation/AnimationCore.vue"],"sourcesContent":["<template>\n\t<div class=\"extra-keyframes-actor-node w-full h-full flex flex-col\" @mousemove=\"onMousemove\">\n\t\t<div class=\"text-right mb-1 leading-none text-white\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t:class=\"[\n\t\t\t\t\t'mr-1 inline-flex items-center px-3 py-1 shadow-sm text-xs leading-4 rounded-sm',\n\t\t\t\t\taddKeyframesButtonActive\n\t\t\t\t\t\t? 'opacity-100 cursor-pointer bg-green-700 hover:bg-green-600'\n\t\t\t\t\t\t: 'cursor-not-allowed opacity-30',\n\t\t\t\t]\"\n\t\t\t\t@click=\"addKeys\"\n\t\t\t\t:disabled=\"!addKeyframesButtonActive\"\n\t\t\t\ttitle=\"Add Keyframes ( Alt + Click )\"\n\t\t\t>\n\t\t\t\t<PlusIcon class=\"h-4 w-4\" aria-hidden=\"true\" />\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t:class=\"[\n\t\t\t\t\t'mr-1 inline-flex items-center px-3 py-1 shadow-sm text-xs leading-4 rounded-sm',\n\t\t\t\t\tkeyframeButtonsActive\n\t\t\t\t\t\t? 'opacity-100 cursor-pointer bg-red-700 hover:bg-red-600'\n\t\t\t\t\t\t: 'cursor-not-allowed opacity-30 bg-black',\n\t\t\t\t]\"\n\t\t\t\t@click=\"deleteSelectedKeyframes\"\n\t\t\t\t:disabled=\"!keyframeButtonsActive\"\n\t\t\t\ttitle=\"Delete Keyframes ( Del )\"\n\t\t\t>\n\t\t\t\t<TrashIcon class=\"h-4 w-4\" aria-hidden=\"true\" />\n\t\t\t</button>\n\t\t\t<span class=\"mx-1\"></span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t:class=\"[\n\t\t\t\t\t'mr-1 inline-flex items-center px-3 py-1 shadow-sm text-xs leading-4 rounded-sm',\n\t\t\t\t\tkeyframeButtonsActive\n\t\t\t\t\t\t? 'opacity-100 cursor-pointer bg-teal-700 hover:bg-teal-600 '\n\t\t\t\t\t\t: 'cursor-not-allowed opacity-30 bg-black',\n\t\t\t\t]\"\n\t\t\t\t@click=\"mergeTangents\"\n\t\t\t\t:disabled=\"!keyframeButtonsActive\"\n\t\t\t\ttitle=\"Merge tangents\"\n\t\t\t>\n\t\t\t\t<MinusIcon class=\"-ml-0.5 mr-2 h-4 w-4\" aria-hidden=\"true\" />\n\t\t\t\tMerge Tangents\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t:class=\"[\n\t\t\t\t\t'mr-1 inline-flex items-center px-3 py-1 shadow-sm text-xs leading-4 rounded-sm',\n\t\t\t\t\tkeyframeButtonsActive\n\t\t\t\t\t\t? 'opacity-100 cursor-pointer bg-teal-700 hover:bg-teal-600'\n\t\t\t\t\t\t: 'cursor-not-allowed opacity-30 bg-black',\n\t\t\t\t]\"\n\t\t\t\t@click=\"splitTangents\"\n\t\t\t\t:disabled=\"!keyframeButtonsActive\"\n\t\t\t\ttitle=\"Split tangents\"\n\t\t\t>\n\t\t\t\t<ChevronUpIcon class=\"-ml-0.5 mr-2 h-4 w-4\" aria-hidden=\"true\" />\n\t\t\t\tSplit Tangents\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"mr-1 inline-flex items-center px-3 py-1 shadow-sm text-xs leading-4 rounded-sm opacity-100 cursor-pointer bg-sky-700 hover:bg-sky-600\"\n\t\t\t\t@click=\"toggleTangentsDisplay\"\n\t\t\t\ttitle=\"Toggle Tangents\"\n\t\t\t>\n\t\t\t\t<EyeSlashIcon v-if=\"tangentsDisplayed\" class=\"-ml-0.5 mr-2 h-4 w-4\" aria-hidden=\"true\" />\n\t\t\t\t<EyeIcon v-else class=\"-ml-0.5 mr-2 h-4 w-4\" aria-hidden=\"true\" />\n\t\t\t\t<span v-if=\"tangentsDisplayed\">Hide Tangents</span>\n\t\t\t\t<span v-else>Show Tangents</span>\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"inline-flex items-center px-3 py-1 shadow-sm text-xs leading-4 rounded-sm bg-sky-600 hover:bg-sky-700 cursor-pointer\"\n\t\t\t\t@click=\"frameSelection\"\n\t\t\t\ttitle=\"Frame Selected ( F )\"\n\t\t\t>\n\t\t\t\t<MagnifyingGlassIcon class=\"-ml-0.5 mr-2 h-4 w-4\" aria-hidden=\"true\" />\n\t\t\t\tFrame Selected\n\t\t\t</button>\n\t\t</div>\n\t\t<div class=\"grow flex w-full max-w-full\">\n\t\t\t<ul>\n\t\t\t\t<li v-for=\"(nodeName, nodeIndex) of nodeNames\" class=\"mb-1\">\n\t\t\t\t\t<div class=\"text-xs disable-select text-text-faded whitespace-nowrap\">\n\t\t\t\t\t\t<span title=\"Pin node\" @click=\"toggleNodeCollpasedState(nodeIds[nodeIndex])\">\n\t\t\t\t\t\t\t<PlusIcon\n\t\t\t\t\t\t\t\tv-if=\"collapsedStates[nodeIndex]\"\n\t\t\t\t\t\t\t\tclass=\"pl-1 inline-block cursor-pointer w-4 h-4 opacity-50 hover:opacity-100\"\n\t\t\t\t\t\t\t></PlusIcon>\n\t\t\t\t\t\t\t<MinusIcon\n\t\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\t\tclass=\"pl-1 inline-block cursor-pointer w-4 h-4 opacity-50 hover:opacity-100\"\n\t\t\t\t\t\t\t></MinusIcon> </span\n\t\t\t\t\t\t><span class=\"px-1\" :title=\"nodePaths[nodeIndex]\">{{ nodeName }}</span>\n\t\t\t\t\t\t<XMarkIcon\n\t\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t\t'inline-block cursor-pointer w-4 h-4 text-gray-500 hover:text-red-500 opacity-50 hover:opacity-100',\n\t\t\t\t\t\t\t\tnodeNames.length > 1 ? 'ml-1' : 'mx-1',\n\t\t\t\t\t\t\t]\"\n\t\t\t\t\t\t\t@click=\"removeNode(nodeIds[nodeIndex])\"\n\t\t\t\t\t\t></XMarkIcon>\n\t\t\t\t\t\t<ChevronDownIcon\n\t\t\t\t\t\t\tv-if=\"nodeNames.length > 1\"\n\t\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t\t'inline-block w-4 h-4',\n\t\t\t\t\t\t\t\tnodeIndex < nodeNames.length - 1\n\t\t\t\t\t\t\t\t\t? 'cursor-pointer hover:opacity-100 opacity-50'\n\t\t\t\t\t\t\t\t\t: 'opacity-0',\n\t\t\t\t\t\t\t]\"\n\t\t\t\t\t\t\t@click=\"moveNodeIdDown(nodeIds[nodeIndex])\"\n\t\t\t\t\t\t></ChevronDownIcon>\n\t\t\t\t\t\t<ChevronUpIcon\n\t\t\t\t\t\t\tv-if=\"nodeNames.length > 1\"\n\t\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t\t'inline-block w-4 h-4',\n\t\t\t\t\t\t\t\tnodeIndex > 0 ? 'cursor-pointer opacity-50 hover:opacity-100' : ' opacity-0',\n\t\t\t\t\t\t\t]\"\n\t\t\t\t\t\t\t@click=\"moveNodeIdUp(nodeIds[nodeIndex])\"\n\t\t\t\t\t\t></ChevronUpIcon>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ul v-if=\"!collapsedStates[nodeIndex]\" class=\"mt-1 disable-select\">\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tv-for=\"channelDataItem of channelDataItems[nodeIndex]\"\n\t\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t\t'flex whitespace-nowrap cursor-pointer hover:text-white px-2 py-1 rounded-l mb-px text-xs',\n\t\t\t\t\t\t\t\tchannelDataItem.displayedState ? 'text-white bg-black' : 'text-text-faded',\n\t\t\t\t\t\t\t]\"\n\t\t\t\t\t\t\t@click=\"toggleChannelDisplayState(channelDataItem)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"flex-1\">{{ channelDataItem.channelName }}</span>\n\t\t\t\t\t\t\t<span :class=\"['flex-0 m-1 rounded-full w-2 h-2 ', channelDataItem.color]\"></span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</ul>\n\n\t\t\t<div class=\"grow flex flex-col\">\n\t\t\t\t<div ref=\"currentTimeBarElement\" class=\"h-3 bg-neutral-900 cursor-pointer hover:opacity-80\"></div>\n\t\t\t\t<div ref=\"canvasElementParent\" class=\"grow max-w-full relative bg-black rounded\">\n\t\t\t\t\t<canvas ref=\"canvasGPURaycastElement\" class=\"block absolute inset-0\"></canvas>\n\t\t\t\t\t<canvas ref=\"canvasElement\" class=\"block absolute inset-0\"></canvas>\n\t\t\t\t\t<div ref=\"css2DElement\" class=\"block absolute inset-0 pointer-events-none\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"my-1 flex text-xs space-x-4\">\n\t\t\t\t\t<div class=\"flex space-x-1 items-center\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tfor=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t\t'items-center text-text-faded whitespace-nowrap',\n\t\t\t\t\t\t\t\tkeyframePosActive ? '' : 'opacity-50',\n\t\t\t\t\t\t\t]\"\n\t\t\t\t\t\t\t>Time</label\n\t\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"animation-editor-keyframe-time\"\n\t\t\t\t\t\t\tid=\"animation-editor-keyframe-time\"\n\t\t\t\t\t\t\tstep=\"1\"\n\t\t\t\t\t\t\tclass=\"inline-block shadow appearance-none border-0 rounded w-full py-1 px-1 bg-black text-gray-100 text-xs leading-none\"\n\t\t\t\t\t\t\tv-model=\"keyframePos\"\n\t\t\t\t\t\t\t@change=\"onKeyframePosChange\"\n\t\t\t\t\t\t\t:disabled=\"!keyframePosActive\"\n\t\t\t\t\t\t\t@keypress.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keyup.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keydown.stop=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"flex space-x-1 items-center\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tfor=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t\t'items-center text-text-faded whitespace-nowrap',\n\t\t\t\t\t\t\t\tkeyframeValueActive ? '' : 'opacity-50',\n\t\t\t\t\t\t\t]\"\n\t\t\t\t\t\t\t>Value</label\n\t\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\tid=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\tstep=\"0.001\"\n\t\t\t\t\t\t\tclass=\"inline-block shadow appearance-none border-0 rounded w-full py-1 px-1 bg-black text-gray-100 text-xs leading-none\"\n\t\t\t\t\t\t\tv-model=\"keyframeValue\"\n\t\t\t\t\t\t\t@change=\"onKeyframeValueChange\"\n\t\t\t\t\t\t\t:disabled=\"!keyframeValueActive\"\n\t\t\t\t\t\t\t@keypress.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keyup.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keydown.stop=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"flex space-x-1 items-center\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tfor=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t\t'items-center text-text-faded whitespace-nowrap',\n\t\t\t\t\t\t\t\tkeyframeInActive ? '' : 'opacity-50',\n\t\t\t\t\t\t\t]\"\n\t\t\t\t\t\t\t>Tangent In</label\n\t\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\tid=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\tstep=\"0.001\"\n\t\t\t\t\t\t\tclass=\"inline-block shadow appearance-none border-0 rounded w-full py-1 px-1 bg-black text-gray-100 text-xs leading-none\"\n\t\t\t\t\t\t\tv-model=\"keyframeInSlope\"\n\t\t\t\t\t\t\t@change=\"onKeyframeTangentInSlopeChange\"\n\t\t\t\t\t\t\t:disabled=\"!keyframeInActive\"\n\t\t\t\t\t\t\t@keypress.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keyup.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keydown.stop=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\tid=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\tstep=\"0.001\"\n\t\t\t\t\t\t\tclass=\"inline-block shadow appearance-none border-0 rounded w-full py-1 px-1 bg-black text-gray-100 text-xs leading-none\"\n\t\t\t\t\t\t\tv-model=\"keyframeInAccel\"\n\t\t\t\t\t\t\t@change=\"onKeyframeTangentInAccelChange\"\n\t\t\t\t\t\t\t:disabled=\"!keyframeInActive\"\n\t\t\t\t\t\t\t@keypress.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keyup.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keydown.stop=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"flex space-x-1 items-center\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tfor=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t\t'items-center text-text-faded whitespace-nowrap',\n\t\t\t\t\t\t\t\tkeyframeOutSlope ? '' : 'opacity-50',\n\t\t\t\t\t\t\t]\"\n\t\t\t\t\t\t\t>Tangent Out</label\n\t\t\t\t\t\t>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\tid=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\tstep=\"0.001\"\n\t\t\t\t\t\t\tclass=\"inline-block shadow appearance-none border-0 rounded w-full py-1 px-1 bg-black text-gray-100 text-xs leading-none\"\n\t\t\t\t\t\t\tv-model=\"keyframeOutSlope\"\n\t\t\t\t\t\t\t@change=\"onKeyframeTangentOutSlopeChange\"\n\t\t\t\t\t\t\t:disabled=\"!keyframeOutActive\"\n\t\t\t\t\t\t\t@keypress.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keyup.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keydown.stop=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\tid=\"animation-editor-keyframe-value\"\n\t\t\t\t\t\t\tstep=\"0.001\"\n\t\t\t\t\t\t\tclass=\"inline-block shadow appearance-none border-0 rounded w-full py-1 px-1 bg-black text-gray-100 text-xs leading-none\"\n\t\t\t\t\t\t\tv-model=\"keyframeOutAccel\"\n\t\t\t\t\t\t\t@change=\"onKeyframeTangentOutAccelChange\"\n\t\t\t\t\t\t\t:disabled=\"!keyframeOutActive\"\n\t\t\t\t\t\t\t@keypress.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keyup.stop=\"\"\n\t\t\t\t\t\t\t\t\t@keydown.stop=\"\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div :class=\"['flex', interpolationDropdownActive ? '' : 'cursor-not-allowed opacity-50']\">\n\t\t\t\t\t\t<DropDownMenu\n\t\t\t\t\t\t\t:label=\"currentInterpolation\"\n\t\t\t\t\t\t\t:entries=\"interpolationMenuEntries\"\n\t\t\t\t\t\t\t@select=\"onInterpolationsMenuEntrySelect\"\n\t\t\t\t\t\t\t:label_padding=\"[0, 5]\"\n\t\t\t\t\t\t\t><div\n\t\t\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t\t\t'rounded bg-bg-dark px-2 py-1 inline-flex text-gray-100',\n\t\t\t\t\t\t\t\t\tinterpolationDropdownActive ? '' : 'cursor-not-allowed',\n\t\t\t\t\t\t\t\t]\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span class=\"text-xs hidden lg:inline\">interpolation</span\n\t\t\t\t\t\t\t\t><ChevronDownIcon class=\"w-4 h-4\"></ChevronDownIcon></div\n\t\t\t\t\t\t></DropDownMenu>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\">\nimport {defineComponent, Ref, ref, onUnmounted, watch, computed, ComputedRef} from 'vue';\nimport {StoreController} from '../../../store/controllers/StoreController';\nimport {\n\tjsKeyframeChannelsCount,\n\tjsKeyframeSubChannelsCount,\n\tsubChannelNamesForNodeId,\n\tCOLOR_VALUES_BY_SUBCHANNEL_INDEX,\n} from '../../../store/controllers/editor/KeyframeEditor';\nimport {SetupEventKey} from './mixins/EventKey';\nimport {SetupEventMouse, SetupEventMouseOptions} from './mixins/EventMouse';\nimport {SetupLinkIndex} from '../common/LinkIndex';\nimport {AnimationPanelInitLayoutData} from '../../../types';\nimport {KeyframeEditorSceneController} from './keyframeEditorSceneController/KeyframeEditorSceneController';\nimport {SetupLayoutDataCore} from './mixins/LayoutData';\nimport {SetupForm} from './mixins/SetupForm';\nimport {SetupFormInterpolation} from './mixins/SetupFormInterpolation';\nimport {SetupButtons} from './mixins/SetupButtons';\nimport {CoreGraphNodeId} from '../../../../../@polygonjs/polygonjs/src/core/graph/CoreGraph';\nimport {\n\tChevronUpIcon,\n\tChevronDownIcon,\n\tChevronRightIcon,\n\tMagnifyingGlassIcon,\n\tMinusIcon,\n\tPlusIcon,\n\tTrashIcon,\n\tXMarkIcon,\n\tEyeIcon,\n\tEyeSlashIcon,\n} from '@heroicons/vue/24/outline';\nimport {KeyframesJsNode} from '../../../../../@polygonjs/polygonjs/src/engine/nodes/js/Keyframes';\n\ninterface ChannelDataItem {\n\tnodeId: CoreGraphNodeId;\n\tnodeIndex: number;\n\tchannelIndex: number;\n\tsubChannelIndex: number;\n\tchannelName: string;\n\tcolor: string;\n\tdisplayedState: boolean;\n}\n\nexport default defineComponent({\n\tname: 'animation-core',\n\tcomponents: {\n\t\tChevronUpIcon,\n\t\tChevronRightIcon,\n\t\tChevronDownIcon,\n\t\tMinusIcon,\n\t\tTrashIcon,\n\t\tPlusIcon,\n\t\tMagnifyingGlassIcon,\n\t\tXMarkIcon,\n\t\tEyeIcon,\n\t\tEyeSlashIcon,\n\t},\n\tprops: {\n\t\tnodeIds: {\n\t\t\ttype: Array as () => CoreGraphNodeId[],\n\t\t\trequired: true as true,\n\t\t},\n\t\tpanelId: {\n\t\t\ttype: String,\n\t\t\trequired: true as true,\n\t\t\tdefault: null,\n\t\t},\n\t\tinit_layout_data: {\n\t\t\ttype: Object as () => AnimationPanelInitLayoutData,\n\t\t\tdefault() {\n\t\t\t\treturn {};\n\t\t\t},\n\t\t},\n\t},\n\n\tsetup(props, {emit}) {\n\t\tconst setupLinkIndex = SetupLinkIndex(props.init_layout_data.linkIndex);\n\t\tconst canvasElementParent: Ref<HTMLElement | null> = ref(null);\n\t\tconst canvasElement: Ref<HTMLCanvasElement | null> = ref(null);\n\t\tconst css2DElement: Ref<HTMLElement | null> = ref(null);\n\t\tconst canvasGPURaycastElement: Ref<HTMLCanvasElement | null> = ref(null);\n\t\tconst currentTimeBarElement: Ref<HTMLElement | null> = ref(null);\n\n\t\tconst keyframeEditor = StoreController.editor.keyframeEditor;\n\t\t// const cameraPanOffset: Ref<Vector2> = ref(new Vector2(0, 0));\n\t\t// const cameraZoom: Ref<Vector2> = ref(new Vector2(1, 1));\n\n\t\t// const {svgHeight, svgWidth} = setupResizeEvent;\n\t\t// const node = StoreController.engine.node(props.nodeId)! as KeyframesJsNode;\n\t\t// const setupSelectedChannels = SetupSelectedChannels({node});\n\t\t// const {JSONParamData} = setupSelectedChannels;\n\t\tconst nodeIds = computed(() => props.nodeIds);\n\n\t\twatch(\n\t\t\tnodeIds,\n\t\t\t() => {\n\t\t\t\tfor (const nodeId of props.nodeIds) {\n\t\t\t\t\tStoreController.engine.updateParams(nodeId);\n\t\t\t\t}\n\t\t\t},\n\t\t\t{deep: true}\n\t\t);\n\n\t\tconst sceneController = new KeyframeEditorSceneController({\n\t\t\tnodeIds,\n\t\t\tcanvasElement,\n\t\t\tcss2DElement,\n\t\t\tcanvasGPURaycastElement,\n\t\t\tcanvasElementParent,\n\t\t\tcurrentTimeBarElement,\n\t\t\t// JSONParamData,\n\t\t});\n\t\tonUnmounted(() => sceneController.dispose());\n\t\t// const setupDataRange = SetupDataRange({\n\t\t// \tnode,\n\t\t// \tactiveKeyframes,\n\t\t// \tselectedChannelNames,\n\t\t// \tJSONParamData,\n\t\t// \tcameraPanOffset,\n\t\t// \tcameraZoom,\n\t\t// });\n\t\t// const {keyframeRangeWidth, keyframeRangeX, yPos} = setupDataRange;\n\t\t// const setupSelectedKeyframes = SetupSelectedKeyframes(setupSelectedChannels);\n\n\t\tconst setupEventKey = SetupEventKey({\n\t\t\tsceneController,\n\t\t});\n\t\tconst setupEventMouseOptions: SetupEventMouseOptions = {\n\t\t\teventKeyOptions: {\n\t\t\t\t...setupEventKey,\n\t\t\t\tpanelId: props.panelId,\n\t\t\t\temit,\n\t\t\t},\n\t\t\tsceneController,\n\t\t};\n\t\tconst setupEventMouse = SetupEventMouse(setupEventMouseOptions, setupLinkIndex);\n\t\tconst setupForm = SetupForm({sceneController});\n\t\tconst setupFormInterpolation = SetupFormInterpolation({sceneController});\n\t\tconst setupButtons = SetupButtons({sceneController});\n\n\t\t// const setupChannelsPointData = SetupChannelsPointData({\n\t\t// \tselectedChannelNames,\n\t\t// \tJSONParamData,\n\t\t// \tkeyframeRangeWidth,\n\t\t// \tkeyframeRangeX,\n\t\t// \tyPos,\n\t\t// });\n\t\t// const setupInteractions = SetupInteractions({\n\t\t// \tcameraPanOffset,\n\t\t// \tcameraZoom,\n\t\t// \tcanvasElement,\n\t\t// \tnode,\n\t\t// \tJSONParamData,\n\t\t// });\n\t\t// const setupResizeEvent = SetupResizeEvent({sceneController, canvasElementParent});\n\t\t// const setupStyle = SetupStyle({\n\t\t// \t...setupResizeEvent,\n\t\t// \t...setupDataRange,\n\t\t// });\n\n\t\tfunction _channelColor(colorName: string, subChannelIndex: number) {\n\t\t\tconst value = COLOR_VALUES_BY_SUBCHANNEL_INDEX[subChannelIndex];\n\t\t\treturn `bg-${colorName}-${value}`;\n\t\t}\n\n\t\tconst channelDataItems = computed(() => {\n\t\t\tconst data: ChannelDataItem[][] = [];\n\t\t\tlet nodeIndex = 0;\n\t\t\tfor (const nodeId of nodeIds.value) {\n\t\t\t\tconst node = StoreController.engine.node(nodeId) as KeyframesJsNode | undefined;\n\n\t\t\t\tif (node) {\n\t\t\t\t\tdata[nodeIndex] = data[nodeIndex] || [];\n\t\t\t\t\tconst channelsCount = jsKeyframeChannelsCount(nodeId);\n\t\t\t\t\tconst dataParams = node.channelDataParams();\n\t\t\t\t\tconst channelColors = keyframeEditor.channelColorsByNodeId.value[nodeId];\n\t\t\t\t\tconst channelNames = subChannelNamesForNodeId(nodeId) || [];\n\t\t\t\t\tdataParams.forEach((dataParam, channelIndex) => {\n\t\t\t\t\t\tif (channelIndex < channelsCount) {\n\t\t\t\t\t\t\tconst channelColorName = channelColors[channelIndex];\n\t\t\t\t\t\t\tconst subChannelsCount = jsKeyframeSubChannelsCount({node, channelIndex});\n\t\t\t\t\t\t\tfor (let subChannelIndex = 0; subChannelIndex < subChannelsCount; subChannelIndex++) {\n\t\t\t\t\t\t\t\tconst color = _channelColor(channelColorName, subChannelIndex);\n\t\t\t\t\t\t\t\tconst channelName = channelNames[channelIndex][subChannelIndex];\n\t\t\t\t\t\t\t\tconst displayedState =\n\t\t\t\t\t\t\t\t\tkeyframeEditor.channelDisplayedStateBySubChannelIndexByChannelIndexByNodeId.value[\n\t\t\t\t\t\t\t\t\t\tnodeId\n\t\t\t\t\t\t\t\t\t][channelIndex][subChannelIndex];\n\t\t\t\t\t\t\t\tconst channelDataItem: ChannelDataItem = {\n\t\t\t\t\t\t\t\t\tnodeId,\n\t\t\t\t\t\t\t\t\tnodeIndex,\n\t\t\t\t\t\t\t\t\tchannelIndex,\n\t\t\t\t\t\t\t\t\tchannelName,\n\t\t\t\t\t\t\t\t\tsubChannelIndex,\n\t\t\t\t\t\t\t\t\tcolor: color,\n\t\t\t\t\t\t\t\t\tdisplayedState: displayedState,\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tdata[nodeIndex].push(channelDataItem);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tnodeIndex++;\n\t\t\t}\n\t\t\treturn data;\n\t\t});\n\n\t\t// const channelNamesList: ComputedRef<string[][]> = computed(() => {\n\t\t// \tconst data: string[][] = [];\n\t\t// \tfor (const nodeId of nodeIds.value) {\n\t\t// \t\tconst node = StoreController.engine.node(nodeId);\n\n\t\t// \t\tif (node) {\n\t\t// \t\t\tconst channelNames = keyframeEditor.channelNamesByNodeId.value[nodeId];\n\t\t// \t\t\tdata.push(channelNames);\n\t\t// \t\t}\n\t\t// \t}\n\t\t// \treturn data;\n\t\t// });\n\t\tconst channelColorsList: ComputedRef<string[][]> = computed(() => {\n\t\t\tconst data: string[][] = [];\n\t\t\tfor (const nodeId of nodeIds.value) {\n\t\t\t\tconst node = StoreController.engine.node(nodeId);\n\n\t\t\t\tif (node) {\n\t\t\t\t\tconst channelColors = keyframeEditor.channelColorsByNodeId.value[nodeId];\n\t\t\t\t\tconst bgColors = channelColors.map((c) => `bg-${c}-500`);\n\t\t\t\t\tdata.push(bgColors);\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn data;\n\t\t});\n\t\tconst nodePaths: ComputedRef<string[]> = computed(() => {\n\t\t\tconst data: string[] = [];\n\t\t\tfor (const nodeId of nodeIds.value) {\n\t\t\t\tconst node = StoreController.engine.node(nodeId);\n\n\t\t\t\tif (node) {\n\t\t\t\t\tdata.push(node.path());\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn data;\n\t\t});\n\t\tconst nodeNames: ComputedRef<string[]> = computed(() => {\n\t\t\tconst data: string[] = [];\n\t\t\tfor (const nodeId of nodeIds.value) {\n\t\t\t\tconst node = StoreController.engine.node(nodeId);\n\n\t\t\t\tif (node) {\n\t\t\t\t\tdata.push(node.name());\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn data;\n\t\t});\n\t\tconst collapsedStates = computed(() => {\n\t\t\treturn nodeIds.value.map((nodeId) => keyframeEditor.collapsedNodeIds.value.includes(nodeId));\n\t\t});\n\t\tconst channelDisplayedStateByChannelIndexByNodeId = computed(\n\t\t\t() => keyframeEditor.channelDisplayedStateBySubChannelIndexByChannelIndexByNodeId.value\n\t\t);\n\n\t\tfunction toggleNodeCollpasedState(nodeId: CoreGraphNodeId) {\n\t\t\tkeyframeEditor.toggleNodeCollpasedState(nodeId);\n\t\t}\n\t\tfunction toggleChannelDisplayState(data: ChannelDataItem) {\n\t\t\tkeyframeEditor.toggleChannelDisplayState({...data});\n\t\t}\n\t\tfunction removeNode(nodeId: CoreGraphNodeId) {\n\t\t\tkeyframeEditor.removeNode(nodeId);\n\t\t}\n\t\tfunction moveNodeIdDown(nodeId: CoreGraphNodeId) {\n\t\t\tkeyframeEditor.moveNodeIdDown(nodeId);\n\t\t}\n\t\tfunction moveNodeIdUp(nodeId: CoreGraphNodeId) {\n\t\t\tkeyframeEditor.moveNodeIdUp(nodeId);\n\t\t}\n\t\tfunction toggleTangentsDisplay() {\n\t\t\tkeyframeEditor.tangentsDisplayed.value = !keyframeEditor.tangentsDisplayed.value;\n\t\t}\n\t\tconst tangentsDisplayed = computed(() => keyframeEditor.tangentsDisplayed.value);\n\n\t\treturn {\n\t\t\tcanvasElement,\n\t\t\tcss2DElement,\n\t\t\tcanvasGPURaycastElement,\n\t\t\tcanvasElementParent,\n\t\t\tcurrentTimeBarElement,\n\t\t\tcollapsedStates,\n\t\t\ttoggleNodeCollpasedState,\n\t\t\ttoggleChannelDisplayState,\n\t\t\tmoveNodeIdDown,\n\t\t\tmoveNodeIdUp,\n\t\t\tremoveNode,\n\t\t\tnodeNames,\n\t\t\tnodePaths,\n\t\t\tchannelDataItems,\n\t\t\tchannelColorsList,\n\t\t\tchannelDisplayedStateByChannelIndexByNodeId,\n\t\t\ttoggleTangentsDisplay,\n\t\t\ttangentsDisplayed,\n\t\t\t// ...setupSelectedChannels,\n\t\t\t// ...setupSelectedKeyframes,\n\t\t\t...setupEventMouse,\n\t\t\t...setupEventKey,\n\t\t\t...SetupLayoutDataCore({props, setupLinkIndex}),\n\t\t\t...setupForm,\n\t\t\t...setupFormInterpolation,\n\t\t\t...setupButtons,\n\t\t};\n\t},\n});\n</script>\n\n<style>\n.animation-editor-css2d-object-axis {\n\tpadding: 1px 2px;\n\tbackground: black;\n\tcolor: rgb(133, 132, 132);\n\tfont-family: monospace;\n\twill-change: transform;\n}\n</style>\n"],"names":[],"sourceRoot":""}