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

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

{"version":3,"file":"minimap-panel.vue2.mjs","sources":["../../../../../../src/components/content/handle-panel/minimap-panel.vue"],"sourcesContent":["<script lang=\"ts\">\nconst scaleContainerWidth = 260\nconst scaleContainerHeight = 160\n</script>\n<template>\n    <div class=\"content-scale\"\n         :class=\"{run: appStore.currentElement.id == null}\">\n        \n        <div class=\"scale-preview\" ref=\"scalePreviewRef\"\n             v-if=\"configStore.settingPanel.miniMap.visible\"\n             @mousedown=\"mousedown($event)\">\n            <div class=\"scale-design-content\"\n                 ref=\"designContentRef\"\n                 :style=\"{\n                            left : data.miniMap.x+'px',\n                            top :data.miniMap.y+'px',\n                            transformOrigin: '0% 0%',\n                            width: scaleUtil.scale(data.width)+ 'px',\n                            height: scaleUtil.scale(data.height)+'px',\n                            scale: data.scale\n                           }\">\n                \n                <div style=\"position: absolute;\"\n                     v-for=\"(element, index) in getCurrentPanel().elementList\"\n                     :key=\"index\"\n                     class=\"pointer-events\"\n                     :style=\"{left : valueUnit(element.x), top: valueUnit(element.y), width: valueUnit(element.width), height: valueUnit(element.height)}\">\n                    <MyText v-if=\"element.type == 'Text'\" :element=\"element\" />\n                    <MyImage v-if=\"element.type === 'Image'\" :element=\"element\" />\n                    <data-table v-if=\"element.type === 'DataTable'\" :element=\"element\" />\n                    <MyRect v-if=\"element.type === 'Rect'\" :element=\"element\" />\n                    <my-horizontal-line v-if=\"element.type === 'HorizontalLine'\" :element=\"element\" />\n                    <my-vertical-line v-if=\"element.type === 'VerticalLine'\" :element=\"element\" />\n                    <my-dotted-horizontal-line v-if=\"element.type === 'DottedHorizontalLine'\" :element=\"element\" />\n                    <my-dotted-vertical-line v-if=\"element.type === 'DottedVerticalLine'\" :element=\"element\" />\n                </div>\n            \n            </div>\n            \n            <div class=\"viewport\" :style=\"viewportStyle\" />\n        </div>\n        \n        <div class=\"mini-map-toolbar display-flex\">\n            <div class=\"mini-map-toolbar_redo-undo display-flex\">\n                <div @mousedown=\"clearEventBubble($event)\" @click=\"undoPanel\"\n                     :class=\"[{'my-icon-disabled': !canUndo}]\"\n                     class=\"my-icon iconfont icon-undo mini-map-toolbar-icon\" />\n                <div @mousedown=\"clearEventBubble($event)\" @click=\"redoPanel\"\n                     :class=\"[{'my-icon-disabled': !canRedo}]\"\n                     class=\"my-icon iconfont icon-redo mini-map-toolbar-icon\" />\n            </div>\n            \n            <div class=\"mini-map-toolbar_control display-flex\">\n                <!--        <div>手势</div>-->\n                <div class=\"display-flex space-between width-100-p mini-map-toolbar_control_scale\">\n                    <tip-icon :tips=\"i18n('common.panel.minimap.zoom.out')\" @click=\"startScale(-0.1)\"\n                              placement=\"top\"\n                              class=\"icon-suoxiao iconfont mini-map-toolbar-icon\" />\n                    <div class=\"mini-map-toolbar_control_ratio\">\n                        {{ MathCalc.mul(scaleUtil.miniMap.scale, 100) }}%\n                    </div>\n                    <tip-icon :tips=\"i18n('common.panel.minimap.zoom.in')\" @click=\"startScale(0.1)\"\n                              placement=\"top\"\n                              class=\"icon-fangda iconfont mini-map-toolbar-icon\" />\n<!--                    <tip-icon :tips=\"i18n('common.panel.minimap.navigation')\"-->\n<!--                              :modelValue=\"configStore.settingPanel.miniMap.visible\"-->\n<!--                              @update:model-value=\"flag => configStore.settingPanel.miniMap.visible = flag\"-->\n<!--                              class=\"icon-map iconfont mini-map-toolbar-icon\" />-->\n                </div>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, reactive, ref } from 'vue-demi';\nimport MyHorizontalLine from '@myprint/design/components/design/shape/line/horizontalLine';\nimport MyRect from '@myprint/design/components/design/shape/rect/rect';\nimport MyDottedHorizontalLine from '@myprint/design/components/design/shape/line/dottedHorizontalLine';\nimport MyVerticalLine from '@myprint/design/components/design/shape/line/verticalLine';\nimport MyDottedVerticalLine from '@myprint/design/components/design/shape/line/dottedVerticalLine';\nimport MyImage from '@myprint/design/components/design/image';\nimport MyText from '@myprint/design/components/design/text';\nimport DataTable from '@myprint/design/components/design/table/data-table/data-table.vue';\nimport { Container, ContentScaleVo } from '@myprint/design/types/entity';\nimport { clearEventBubble } from '@myprint/design/utils/event';\nimport MathCalc from '@myprint/design/utils/numberUtil';\nimport { scaleUtil } from '@myprint/design/utils/scaleUtil';\nimport { useAppStoreHook } from '@myprint/design/stores/app';\nimport { getCurrentPanel, valueUnit } from '@myprint/design/utils/elementUtil';\nimport { unit2px } from '@myprint/design/utils/devicePixelRatio';\nimport { useConfigStore } from '@myprint/design/stores/config';\nimport { canRedo, canUndo, redoPanel, undoPanel } from '@myprint/design/utils/historyUtil';\nimport TipIcon from '@myprint/design/components/my/icon/tip-icon.vue';\nimport { i18n } from '@myprint/design/locales';\nimport { mitt } from '@myprint/design/utils/utils';\n\nconst appStore = useAppStoreHook();\nconst configStore = useConfigStore();\nconst designContentRef = ref<HTMLDivElement>();\n// const panel = inject(panelKey)!;\n// const mitt = inject(mittKey)!;\nconst data = reactive({\n    viewport: {\n        x: 0,\n        y: 0\n    },\n    width: 0,\n    height: 0,\n    miniMap: {\n        x: 0,\n        y: 0\n    },\n    scale: 0,\n    openIs: true\n} as ContentScaleVo);\nmitt.on('minimapViewportSize', minimapViewportSize);\nmitt.on('minimapViewportScroll', minimapViewportScroll);\n\nfunction minimapViewportSize(size: Container) {\n    data.viewport.width = size.width;\n    data.viewport.height = size.height;\n}\n\nfunction minimapViewportScroll(size: Container) {\n    data.viewport.x = size.x;\n    data.viewport.y = size.y;\n}\n\nmitt.on('changePageSize', changePageSize);\n\nfunction changePageSize() {\n    data.width = unit2px(getCurrentPanel().width);\n    data.height = unit2px(getCurrentPanel().height);\n    let widthCalc = (scaleContainerWidth) / (data.width);\n    let heightCalc = (scaleContainerHeight) / data.height;\n    let min = Math.min(widthCalc, heightCalc);\n    min = min / scaleUtil.miniMap.scale;\n    data.scale = min;\n    \n    data.miniMap.width = data.width * min;\n    data.miniMap.height = data.height * min;\n    data.miniMap.x = (scaleContainerWidth - data.miniMap.width) / 2;\n    data.miniMap.y = (scaleContainerHeight - data.miniMap.height) / 2;\n}\n\n\n\n\nconst viewportStyle = computed(() => {\n    \n    const style = {} as any;\n    const viewport = data.viewport;\n    \n    let w = viewport.width - 10;\n    let h = viewport.height;\n    let x = viewport.x;\n    let y = viewport.y;\n    \n    let viewportWidth = Math.min((w * data.scale), data.miniMap.width);\n    let t = x * data.scale + data.miniMap.x + viewportWidth;\n    // console.log(x * data.scale, data.miniMap.x, viewportWidth)\n    if (t > 260) {\n        t = 260 - viewportWidth;\n    } else {\n        t = t - viewportWidth;\n    }\n    // console.log(t)\n    style['left'] = t + 'px';\n    style['top'] = data.miniMap.y + y * data.scale + 'px';\n    style['width'] = viewportWidth + 'px';\n    style['height'] = Math.min((h - 1) * data.scale, data.miniMap.height) + 'px';\n    return style;\n});\n\nfunction mousedown(ev: MouseEvent) {\n    const tmpX = ev.clientX;\n    const tmpY = ev.clientY;\n    document.addEventListener('mousemove', mousemove);\n    document.addEventListener('mouseup', mouseup);\n    appStore.dataRotation = 'move';\n    \n    let offsetScrollX = ev.offsetX - data.viewport.width / 2;\n    let offsetScrollY = ev.offsetY - data.viewport.height / 2;\n    \n    mitt.emit('scaleMove', { x: offsetScrollX, y: offsetScrollY });\n    \n    function mousemove(ev: MouseEvent) {\n        let offsetX = (ev.clientX - tmpX) / data.scale + offsetScrollX;\n        let offsetY = (ev.clientY - tmpY) / data.scale + offsetScrollY;\n        \n        mitt.emit('scaleMove', { x: offsetX, y: offsetY });\n        clearEventBubble(ev);\n        return true;\n    }\n    \n    function mouseup(ev: MouseEvent) {\n        clearEventBubble(ev);\n        \n        document.removeEventListener('mousemove', mousemove);\n        document.removeEventListener('mouseup', mouseup);\n        // // 鼠标按下，计算当前元素距离可视区的距离\n        // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效\n        appStore.dataRotation = 'none';\n        return false;\n    }\n    \n    clearEventBubble(ev);\n    return true;\n}\n\nfunction startScale(scale: number) {\n    scaleUtil.miniMap.scale = MathCalc.sum(scaleUtil.miniMap.scale, scale);\n    changePageSize();\n}\n</script>\n"],"names":["ev"],"mappings":"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"}