myprint-design/lib/components/design/design.vue2.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var element = require('./element.vue.js');
var vueDemi = require('vue-demi');
require('./container/index.js');
var elementList = require('./element-list.vue.js');
var common = require('../../constants/common.js');
var tableDesign = require('./table/data-table/table-design.vue.js');
var moveable = require('../../plugins/moveable/moveable.js');
var devicePixelRatio = require('../../utils/devicePixelRatio.js');
var elementUtil = require('../../utils/elementUtil.js');
var containerView = require('./container/container/containerView.vue.js');

const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("i", { class: "icon-design-edit iconfont" }, null, -1);
const _hoisted_2 = [
  _hoisted_1
];
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("i", { class: "icon-design-move iconfont" }, null, -1);
const _hoisted_4 = [
  _hoisted_3
];
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "design",
  props: {
    element: { default: () => ({}) }
  },
  setup(__props) {
    const designRef = vueDemi.ref();
    const containerMoveIconRef = vueDemi.ref();
    const props = __props;
    vueDemi.onMounted(() => {
      props.element.runtimeOption.target = designRef.value;
      designRef.value.element = props.element;
    });
    const style = vueDemi.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 = devicePixelRatio.unit2px(props.element.option.lineWidth, elementUtil.getRecursionParentPanel(props.element));
        if (width < lineWidth) {
          width = lineWidth;
        }
      }
      if (props.element.type == "DottedHorizontalLine" || props.element.type == "HorizontalLine") {
        const lineWidth = devicePixelRatio.unit2px(props.element.option.lineWidth, elementUtil.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() {
      moveable.setSelectedTargets([props.element.runtimeOption.target]);
    }
    function elementMoveMouseDown(event) {
      let isHandle = true;
      if (props.element.runtimeOption.status != "HANDLE") {
        isHandle = false;
        moveable.setSelectedTargets([props.element.runtimeOption.target]);
      }
      moveable.moveableDragTarget(containerMoveIconRef.value, event);
      function mouseup(_ev) {
        if (!isHandle) {
          props.element.runtimeOption.status = "NONE";
          moveable.setSelectedTargets([]);
        }
        moveable.moveableClearDragTarget();
        document.removeEventListener("mouseup", mouseup);
      }
      document.addEventListener("mouseup", mouseup);
    }
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(["my-element-wrapper", {
          "dropInIs": _ctx.element.runtimeOption.dragInIs,
          "design-activate-cut-ing": _ctx.element.runtimeOption.cutIngIs,
          "design-inactive": !vue.unref(common.elementHandleStatusList).includes(_ctx.element.runtimeOption.status) && !vue.unref(common.elementTypeLineList).includes(_ctx.element.type),
          "design-activate": vue.unref(common.elementHandleHandleStatusList).includes(_ctx.element.runtimeOption.status),
          "design-activate-edit": _ctx.element.runtimeOption.status == "HANDLE_EDIT_ING"
        }]),
        style: vue.normalizeStyle(vue.unref(style)),
        ref_key: "designRef",
        ref: designRef
      }, [
        vue.createVNode(element.default, { element: _ctx.element }, null, 8, ["element"]),
        _ctx.element.type === "DataTable" ? (vue.openBlock(), vue.createBlock(tableDesign.default, {
          key: 0,
          element: _ctx.element
        }, null, 8, ["element"])) : vue.createCommentVNode("v-if", true),
        _ctx.element.type === "PageHeader" ? (vue.openBlock(), vue.createBlock(vue.unref(containerView.default), {
          key: 1,
          element: _ctx.element
        }, {
          default: vue.withCtx(() => [
            vue.createVNode(elementList.default, {
              "element-list": _ctx.element.elementList
            }, null, 8, ["element-list"])
          ]),
          _: 1
        }, 8, ["element"])) : _ctx.element.type === "PageFooter" ? (vue.openBlock(), vue.createBlock(vue.unref(containerView.default), {
          key: 2,
          element: _ctx.element
        }, {
          default: vue.withCtx(() => [
            vue.createVNode(elementList.default, {
              "element-list": _ctx.element.elementList
            }, null, 8, ["element-list"])
          ]),
          _: 1
        }, 8, ["element"])) : _ctx.element.type === "Container" ? (vue.openBlock(), vue.createBlock(vue.unref(containerView.default), {
          key: 3,
          element: _ctx.element
        }, {
          default: vue.withCtx(() => [
            vue.createVNode(elementList.default, {
              "element-list": _ctx.element.elementList
            }, null, 8, ["element-list"])
          ]),
          _: 1
        }, 8, ["element"])) : vue.createCommentVNode("v-if", true),
        vue.unref(common.elementTypeContainerList).includes(_ctx.element.type) ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 4,
          class: "container-edit-icon",
          onClick: elementEditClick
        }, _hoisted_2)) : vue.createCommentVNode("v-if", true),
        _ctx.element.type == "Container" ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 5,
          class: "container-move-icon",
          ref_key: "containerMoveIconRef",
          ref: containerMoveIconRef,
          onMousedown: _cache[0] || (_cache[0] = ($event) => elementMoveMouseDown($event))
        }, _hoisted_4, 544)) : vue.createCommentVNode("v-if", true)
      ], 6);
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=design.vue2.js.map