myprint-design
Version:
操作简单，组件丰富的一站式打印解决方案打印设计器
146 lines (143 loc) • 6.35 kB
JavaScript
import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createVNode, createBlock, createCommentVNode, withCtx, createElementVNode } from 'vue';
import ElementView from './element.vue.mjs';
import { ref, onMounted, computed } from 'vue-demi';
import './container/index.mjs';
import ElementList from './element-list.vue.mjs';
import { elementHandleStatusList, elementTypeLineList, elementHandleHandleStatusList, elementTypeContainerList } from '../../constants/common.mjs';
import TableDesign from './table/data-table/table-design.vue.mjs';
import { setSelectedTargets, moveableDragTarget, moveableClearDragTarget } from '../../plugins/moveable/moveable.mjs';
import { unit2px } from '../../utils/devicePixelRatio.mjs';
import { getRecursionParentPanel } from '../../utils/elementUtil.mjs';
import MyContainer from './container/container/containerView.vue.mjs';
const _hoisted_1 = /* @__PURE__ */ createElementVNode("i", { class: "icon-design-edit iconfont" }, null, -1);
const _hoisted_2 = [
_hoisted_1
];
const _hoisted_3 = /* @__PURE__ */ createElementVNode("i", { class: "icon-design-move iconfont" }, null, -1);
const _hoisted_4 = [
_hoisted_3
];
var _sfc_main = /* @__PURE__ */ defineComponent({
__name: "design",
props: {
element: { default: () => ({}) }
},
setup(__props) {
const designRef = ref();
const containerMoveIconRef = ref();
const props = __props;
onMounted(() => {
props.element.runtimeOption.target = designRef.value;
designRef.value.element = props.element;
});
const style = computed(() => {
props.element.runtimeOption.target = designRef.value;
let width = props.element.runtimeOption.init.width;
let height = props.element.runtimeOption.init.height;
if (props.element.type == "DottedVerticalLine" || props.element.type == "VerticalLine") {
const lineWidth = unit2px(props.element.option.lineWidth, getRecursionParentPanel(props.element));
if (width < lineWidth) {
width = lineWidth;
}
}
if (props.element.type == "DottedHorizontalLine" || props.element.type == "HorizontalLine") {
const lineWidth = unit2px(props.element.option.lineWidth, getRecursionParentPanel(props.element));
if (height < lineWidth) {
height = lineWidth;
}
}
return {
left: props.element.runtimeOption.init.x + "px",
top: props.element.runtimeOption.init.y + "px",
transform: `translate(0px, 0px) rotate(${props.element.runtimeOption.init.runtimeOption.rotate}deg)`,
width: width + "px",
height: height + "px"
};
});
function elementEditClick() {
setSelectedTargets([props.element.runtimeOption.target]);
}
function elementMoveMouseDown(event) {
let isHandle = true;
if (props.element.runtimeOption.status != "HANDLE") {
isHandle = false;
setSelectedTargets([props.element.runtimeOption.target]);
}
moveableDragTarget(containerMoveIconRef.value, event);
function mouseup(_ev) {
if (!isHandle) {
props.element.runtimeOption.status = "NONE";
setSelectedTargets([]);
}
moveableClearDragTarget();
document.removeEventListener("mouseup", mouseup);
}
document.addEventListener("mouseup", mouseup);
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["my-element-wrapper", {
"dropInIs": _ctx.element.runtimeOption.dragInIs,
"design-activate-cut-ing": _ctx.element.runtimeOption.cutIngIs,
"design-inactive": !unref(elementHandleStatusList).includes(_ctx.element.runtimeOption.status) && !unref(elementTypeLineList).includes(_ctx.element.type),
"design-activate": unref(elementHandleHandleStatusList).includes(_ctx.element.runtimeOption.status),
"design-activate-edit": _ctx.element.runtimeOption.status == "HANDLE_EDIT_ING"
}]),
style: normalizeStyle(unref(style)),
ref_key: "designRef",
ref: designRef
}, [
createVNode(ElementView, { element: _ctx.element }, null, 8, ["element"]),
_ctx.element.type === "DataTable" ? (openBlock(), createBlock(TableDesign, {
key: 0,
element: _ctx.element
}, null, 8, ["element"])) : createCommentVNode("v-if", true),
_ctx.element.type === "PageHeader" ? (openBlock(), createBlock(unref(MyContainer), {
key: 1,
element: _ctx.element
}, {
default: withCtx(() => [
createVNode(ElementList, {
"element-list": _ctx.element.elementList
}, null, 8, ["element-list"])
]),
_: 1
}, 8, ["element"])) : _ctx.element.type === "PageFooter" ? (openBlock(), createBlock(unref(MyContainer), {
key: 2,
element: _ctx.element
}, {
default: withCtx(() => [
createVNode(ElementList, {
"element-list": _ctx.element.elementList
}, null, 8, ["element-list"])
]),
_: 1
}, 8, ["element"])) : _ctx.element.type === "Container" ? (openBlock(), createBlock(unref(MyContainer), {
key: 3,
element: _ctx.element
}, {
default: withCtx(() => [
createVNode(ElementList, {
"element-list": _ctx.element.elementList
}, null, 8, ["element-list"])
]),
_: 1
}, 8, ["element"])) : createCommentVNode("v-if", true),
unref(elementTypeContainerList).includes(_ctx.element.type) ? (openBlock(), createElementBlock("div", {
key: 4,
class: "container-edit-icon",
onClick: elementEditClick
}, _hoisted_2)) : createCommentVNode("v-if", true),
_ctx.element.type == "Container" ? (openBlock(), createElementBlock("div", {
key: 5,
class: "container-move-icon",
ref_key: "containerMoveIconRef",
ref: containerMoveIconRef,
onMousedown: _cache[0] || (_cache[0] = ($event) => elementMoveMouseDown($event))
}, _hoisted_4, 544)) : createCommentVNode("v-if", true)
], 6);
};
}
});
export { _sfc_main as default };
//# sourceMappingURL=design.vue2.mjs.map