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