myprint-design/es/components/content/panel/my-panel.vue2.mjs.map

操作简单，组件丰富的一站式打印解决方案打印设计器

{"version":3,"file":"my-panel.vue2.mjs","sources":["../../../../../../src/components/content/panel/my-panel.vue"],"sourcesContent":["<template>\n    <div class=\"design-panel user-select-none\">\n        <div class=\"display-flex\">\n            <my-icon style=\"min-width: 20px; height: 20px\" @click=\"clickAuxiliaryLineVisible\"\n                 class=\"cursor-pointer iconfont \"\n                 :class=\"[auxiliaryLineVisible? 'icon-yanjing_xianshi_o' :'icon-yanjing_yincang_o']\" />\n            <rule :direction=\"highlightRule.horizontal.direction\"\n                  :length=\"panel.width\"\n                  :auxiliaryLineVisible=\"auxiliaryLineVisible\"\n                  :highlight=\"highlightRule.horizontal.highlight\"\n                  :scroll=\"highlightRule.horizontal.scroll\" />\n        </div>\n        <div class=\"display-flex design-content_inner\"\n             tabindex=\"0\">\n            <rule :direction=\"highlightRule.vertical.direction\"\n                  :length=\"panel.height\"\n                  :auxiliaryLineVisible=\"auxiliaryLineVisible\"\n                  :highlight=\"highlightRule.vertical.highlight\"\n                  :scroll=\"highlightRule.vertical.scroll\" />\n            <div class=\"affix-container design-content-scroll \" @scroll=\"scroll\" @wheel=\"wheel\"\n                 ref=\"designScrollRef\">\n                <div class=\"design-content design-content-bg\"\n                     ref=\"designContentRef\"\n                     :style=\"{transformOrigin: 'left top',\n                          transform: 'scale('+scaleUtil.miniMap.scale+')',\n                            minWidth: valueUnit(panel.width),\n                            width: valueUnit(panel.width),\n                            height: valueUnit(panel.height),\n                           }\"\n                     :class=\"{'dropInIs': panel.runtimeOption.dragInIs}\">\n                    <design v-if=\"panel.pageHeader != undefined\" :element=\"panel.pageHeader\" />\n                    <design v-if=\"panel.pageFooter != undefined\" :element=\"panel.pageFooter\" />\n                    <element-list :elementList=\"panel.elementList\" />\n                </div>\n            </div>\n            \n            <auxiliary-line :element=\"item\" :key=\"item.id\"\n                            :scroll-x=\"highlightRule.horizontal.scroll\"\n                            :scroll-y=\"highlightRule.vertical.scroll\"\n                            v-for=\"(item) in panel.auxiliaryLineList\" />\n            \n            <template v-if=\"auxiliaryLineVisible\">\n                <auxiliary-line tmp :element=\"appStore.auxiliaryLineTmp\" v-if=\"appStore.auxiliaryLineTmp.x != null\" />\n            </template>\n        </div>\n    </div>\n\n</template>\n\n<script setup lang=\"ts\">\nimport Rule from '@myprint/design/components/my/rule/rule.vue';\nimport { scaleUtil } from '@myprint/design/utils/scaleUtil';\nimport { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue-demi';\nimport { Container, ContentScaleVo, MyElement } from '@myprint/design/types/entity';\nimport { record, Snapshot } from '@myprint/design/utils/historyUtil';\nimport { getCurrentPanel, handle, none, valueUnit } from '@myprint/design/utils/elementUtil';\nimport { useAppStoreHook as useAppStore } from '@myprint/design/stores/app';\nimport ElementList from '@myprint/design/components/design/element-list.vue';\nimport { mountedKeyboardEvent, unMountedKeyboardEvent } from '@myprint/design/utils/keyboardUtil';\nimport { changeDragSnapIs, initMoveable, updatePanel } from '@myprint/design/plugins/moveable/moveable';\nimport Design from '@myprint/design/components/design/design.vue';\nimport { initSelecto, selecto } from '@myprint/design/plugins/moveable/selecto';\nimport AuxiliaryLine from '@myprint/design/components/design/auxiliary/auxiliary-line.vue';\nimport MyIcon from '@myprint/design/components/my/icon/my-icon.vue';\nimport { mitt } from '@myprint/design/utils/utils';\n\nconst panel = getCurrentPanel();\nconst designContentRef = ref<InstanceType<any>>();\nconst appStore = useAppStore();\nconst contentScale = reactive({\n    openIs: false\n} as ContentScaleVo);\nconst auxiliaryLineVisible = ref(true);\nlet resizeObserver: ResizeObserver;\nconst highlightRule = reactive({\n    horizontal: {\n        direction: 'horizontal',\n        highlight: { x: undefined! as number, width: 0 } as Container,\n        scroll: 0\n    },\n    vertical: {\n        direction: 'vertical',\n        highlight: { x: undefined! as number, width: 0 } as Container,\n        scroll: 0\n    }\n});\n\nconst designScrollRef = ref<HTMLElement>()!;\n// 事件绑定\nmitt.on('elementClick', elementClick);\nmitt.on('scaleEvent', scaleEvent);\nmitt.on('panelSnapshot', panelSnapshot);\nmitt.on('updatePanel', updatePanel);\nmitt.on('triggerScroll', updatePanel);\nmitt.on('scaleMove', scaleMove);\n\nonMounted(() => {\n    // 挂载键盘事件\n    mountedKeyboardEvent();\n    nextTick(() => {\n        initSelecto();\n        initMoveable(selecto.value, highlightRule);\n    });\n    mitt.emit('minimapViewportSize', {\n        width: designScrollRef.value!.clientWidth,\n        height: designScrollRef.value!.clientHeight\n    } as Container);\n    // console.log(designScrollRef.value!.clientWidth)\n    // 创建 ResizeObserver 实例\n    resizeObserver = new ResizeObserver((_entries) => {\n        // entries 是 ResizeObserverEntry 对象的数组\n        mitt.emit('minimapViewportSize', {\n            width: designScrollRef.value!.clientWidth,\n            height: designScrollRef.value!.clientHeight\n        } as Container);\n    });\n    resizeObserver.observe(designScrollRef.value!);\n    \n    const rect = designScrollRef.value!.getBoundingClientRect();\n    panel.runtimeOption.target = designContentRef.value\n    appStore.panelPosition = { x: rect.x, y: rect.y, scrollX: 0, scrollY: 0 };\n});\nonUnmounted(() => {\n    resizeObserver.disconnect();\n    unMountedKeyboardEvent();\n});\n\nfunction clickAuxiliaryLineVisible() {\n    auxiliaryLineVisible.value = !auxiliaryLineVisible.value;\n    for (let myAuxiliaryLine of panel.auxiliaryLineList) {\n        myAuxiliaryLine.runtimeOption.auxiliaryLineStatus = auxiliaryLineVisible.value ? 'SHOW' : 'HIDDEN';\n    }\n    changeDragSnapIs();\n}\n\n/**\n * 滑动事件\n */\nfunction scroll(_scrollData: any) {\n    highlightRule.horizontal.scroll = designScrollRef.value!.scrollLeft;\n    highlightRule.vertical.scroll = designScrollRef.value!.scrollTop;\n    mitt.emit('minimapViewportScroll', {\n        x: designScrollRef.value!.scrollLeft,\n        y: designScrollRef.value!.scrollTop\n    } as Container);\n    \n    appStore.panelPosition.scrollX = designScrollRef.value!.scrollLeft;\n    appStore.panelPosition.scrollY = designScrollRef.value!.scrollTop;\n}\n\nfunction wheel(event: any) {\n    event.preventDefault(); // 阻止默认滚动行为\n    \n    // 更新滚动位置\n    designScrollRef.value!.scrollTop += event.deltaY;\n    designScrollRef.value!.scrollLeft += event.deltaX;\n    \n    mitt.emit('minimapViewportScroll', {\n        x: designScrollRef.value!.scrollLeft,\n        y: designScrollRef.value!.scrollTop\n    } as Container);\n    \n    appStore.panelPosition.scrollX = designScrollRef.value!.scrollLeft;\n    appStore.panelPosition.scrollY = designScrollRef.value!.scrollTop;\n}\n\n/**\n * minimap 的 移动事件\n */\nfunction scaleMove(data: any) {\n    // console.log('move', data.x, data.y)\n    designScrollRef.value!.scrollTo(data.x, data.y);\n}\n\nfunction panelSnapshot(snapshot: Snapshot) {\n    // console.log(123)\n    // console.log(action)\n    if (!snapshot.type) {\n        snapshot.type = 'PANEL';\n    }\n    record(snapshot);\n}\n\nfunction elementClick(element: MyElement) {\n    // console.log('elementClick')\n    // console.log('鼠标点击', element)\n    contentScale.openIs = true;\n    none(panel.pageHeader);\n    none(panel.pageFooter);\n    elementListNone();\n    handle(element);\n}\n\n\nfunction scaleEvent() {\n    let mmDiv = document.createElement('div');\n    designContentRef.value.appendChild(mmDiv);\n    nextTick(() => {\n        designContentRef.value.removeChild(mmDiv);\n        // scrollbarRef.value.update()\n    });\n}\n\nfunction elementListNone() {\n    for (let valueElement of panel.elementList!) {\n        none(valueElement);\n    }\n}\n</script>\n"],"names":["useAppStore"],"mappings":"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"}