chatai/dist/dev/mp-weixin/uni_modules/lime-painter/components/l-painter/l-painter.js

"use strict";
const common_vendor = require("../../../../common/vendor.js");
const uni_modules_limePainter_components_common_relation = require("../common/relation.js");
const uni_modules_limePainter_components_lPainter_props = require("./props.js");
const uni_modules_limePainter_components_lPainter_utils = require("./utils.js");
const uni_modules_limePainter_components_lPainter_painter = require("./painter.js");
const nvue = {};
const _sfc_main = {
  name: "lime-painter",
  mixins: [uni_modules_limePainter_components_lPainter_props.props, uni_modules_limePainter_components_common_relation.parent("painter"), nvue],
  data() {
    return {
      use2dCanvas: true,
      canvasHeight: 150,
      canvasWidth: null,
      parentWidth: 0,
      inited: false,
      progress: 0,
      firstRender: 0,
      done: false,
      isPc: false
    };
  },
  computed: {
    styles() {
      return `${this.size}${this.customStyle || ""};` + (this.hidden && "position: fixed; left: 1500rpx;");
    },
    canvasId() {
      return `l-painter${this._ && this._.uid || this._uid}`;
    },
    size() {
      if (this.boardWidth && this.boardHeight) {
        return `width:${this.boardWidth}px; height: ${this.boardHeight}px;`;
      }
    },
    dpr() {
      return this.pixelRatio || common_vendor.index.getSystemInfoSync().pixelRatio;
    },
    boardWidth() {
      const { width = 0 } = this.elements && this.elements.css || this.elements || this;
      const w = uni_modules_limePainter_components_lPainter_utils.toPx(width || this.width);
      return w || Math.max(w, uni_modules_limePainter_components_lPainter_utils.toPx(this.canvasWidth));
    },
    boardHeight() {
      const { height = 0 } = this.elements && this.elements.css || this.elements || this;
      const h = uni_modules_limePainter_components_lPainter_utils.toPx(height || this.height);
      return h || Math.max(h, uni_modules_limePainter_components_lPainter_utils.toPx(this.canvasHeight));
    },
    hasBoard() {
      return this.board && Object.keys(this.board).length;
    },
    elements() {
      return this.hasBoard ? this.board : JSON.parse(JSON.stringify(this.el));
    }
  },
  watch: {
    size(v) {
      if (this.use2dCanvas) {
        this.inited = false;
      }
    }
  },
  created() {
    this.show = true;
    const { SDKVersion, version, platform } = common_vendor.index.getSystemInfoSync();
    this.isPc = /windows|mac/.test(platform);
    this.use2dCanvas = this.type === "2d" && uni_modules_limePainter_components_lPainter_utils.compareVersion(SDKVersion, "2.9.2") >= 0;
  },
  async mounted() {
    await uni_modules_limePainter_components_lPainter_utils.sleep(30);
    await this.getParentWeith();
    this.$nextTick(() => {
      setTimeout(() => {
        this.$watch("elements", this.watchRender, {
          deep: true,
          immediate: true
        });
      }, 30);
    });
  },
  unmounted() {
    this.done = false;
    this.inited = false;
    this.firstRender = 0;
    this.progress = 0;
    this.painter = null;
    clearTimeout(this.rendertimer);
  },
  methods: {
    async watchRender(val, old) {
      if (!val || !val.views || (!this.firstRender ? !val.views.length : !this.firstRender) || !Object.keys(val).length || JSON.stringify(val) == JSON.stringify(old))
        return;
      this.firstRender = 1;
      this.progress = 0;
      this.done = false;
      clearTimeout(this.rendertimer);
      this.rendertimer = setTimeout(() => {
        this.render(val);
      }, this.beforeDelay);
    },
    async setFilePath(path, param) {
      let filePath = path;
      const { pathType = this.pathType } = param || this;
      if (pathType == "base64" && !uni_modules_limePainter_components_lPainter_utils.isBase64(path)) {
        filePath = await uni_modules_limePainter_components_lPainter_utils.pathToBase64(path);
      } else if (pathType == "url" && uni_modules_limePainter_components_lPainter_utils.isBase64(path)) {
        filePath = await uni_modules_limePainter_components_lPainter_utils.base64ToPath(path);
      }
      if (param && param.isEmit) {
        this.$emit("success", filePath);
      }
      return filePath;
    },
    async getSize(args) {
      const { width } = args.css || args;
      const { height } = args.css || args;
      if (!this.size) {
        if (width || height) {
          this.canvasWidth = width || this.canvasWidth;
          this.canvasHeight = height || this.canvasHeight;
          await uni_modules_limePainter_components_lPainter_utils.sleep(30);
        } else {
          await this.getParentWeith();
        }
      }
    },
    canvasToTempFilePathSync(args) {
      this.stopWatch = this.$watch("done", (v) => {
        if (v) {
          this.canvasToTempFilePath(args);
          this.stopWatch && this.stopWatch();
        }
      }, {
        immediate: true
      });
    },
    getParentWeith() {
      return new Promise((resolve) => {
        common_vendor.index.createSelectorQuery().in(this).select(`.lime-painter`).boundingClientRect().exec((res) => {
          const { width, height } = res[0] || {};
          this.parentWidth = Math.ceil(width || 0);
          this.canvasWidth = this.parentWidth || 300;
          this.canvasHeight = height || this.canvasHeight || 150;
          resolve(res[0]);
        });
      });
    },
    async render(args = {}) {
      if (!Object.keys(args).length) {
        return console.error("空对象");
      }
      this.progress = 0;
      this.done = false;
      await this.getSize(args);
      const ctx = await this.getContext();
      let {
        use2dCanvas,
        boardWidth,
        boardHeight,
        canvas,
        afterDelay
      } = this;
      if (use2dCanvas && !canvas) {
        return Promise.reject(new Error("render: fail canvas has not been created"));
      }
      this.boundary = {
        top: 0,
        left: 0,
        width: boardWidth,
        height: boardHeight
      };
      this.painter = null;
      if (!this.painter) {
        const { width: width2 } = args.css || args;
        args.css || args;
        if (!width2 && this.parentWidth) {
          Object.assign(args, { width: this.parentWidth });
        }
        const param = {
          context: ctx,
          canvas,
          width: boardWidth,
          height: boardHeight,
          pixelRatio: this.dpr,
          useCORS: this.useCORS,
          createImage: uni_modules_limePainter_components_lPainter_utils.getImageInfo.bind(this),
          listen: {
            onProgress: (v) => {
              this.progress = v;
              this.$emit("progress", v);
            },
            onEffectFail: (err) => {
              this.$emit("faill", err);
            }
          }
        };
        this.painter = new uni_modules_limePainter_components_lPainter_painter.zt(param);
      }
      const { width, height } = await this.painter.source(JSON.parse(JSON.stringify(args)));
      this.boundary.height = this.canvasHeight = height;
      this.boundary.width = this.canvasWidth = width;
      await uni_modules_limePainter_components_lPainter_utils.sleep(this.sleep);
      this.painter.setContext(this.ctx);
      await this.painter.render();
      await new Promise((resolve) => this.$nextTick(resolve));
      if (!use2dCanvas) {
        await this.canvasDraw();
      }
      if (afterDelay && use2dCanvas) {
        await uni_modules_limePainter_components_lPainter_utils.sleep(afterDelay);
      }
      this.$emit("done");
      this.done = true;
      if (this.isCanvasToTempFilePath) {
        this.canvasToTempFilePath().then((res) => {
          this.$emit("success", res.tempFilePath);
        }).catch((err) => {
          this.$emit("fail", new Error(JSON.stringify(err)));
        });
      }
      return Promise.resolve({
        ctx,
        draw: this.painter,
        node: this.node
      });
    },
    canvasDraw(flag = false) {
      return new Promise((resolve, reject) => this.ctx.draw(flag, () => setTimeout(() => resolve(), this.afterDelay)));
    },
    async getContext() {
      if (!this.canvasWidth) {
        this.$emit("fail", "painter no size");
        console.error("[lime-painter] no size: 请给画板或父级设置尺寸");
        return Promise.reject();
      }
      if (this.ctx && this.inited) {
        return Promise.resolve(this.ctx);
      }
      const { type, use2dCanvas, dpr, boardWidth, boardHeight } = this;
      const _getContext = () => {
        return new Promise((resolve) => {
          common_vendor.index.createSelectorQuery().in(this).select(`#${this.canvasId}`).boundingClientRect().exec((res) => {
            if (res) {
              const ctx = common_vendor.index.createCanvasContext(this.canvasId, this);
              if (!this.inited) {
                this.inited = true;
                this.use2dCanvas = false;
                this.canvas = res;
              }
              this.ctx = ctx;
              resolve(this.ctx);
            } else {
              console.error("[lime-painter] no node");
            }
          });
        });
      };
      if (!use2dCanvas) {
        return _getContext();
      }
      return new Promise((resolve) => {
        common_vendor.index.createSelectorQuery().in(this).select(`#${this.canvasId}`).node().exec((res) => {
          let { node: canvas } = res && res[0] || {};
          if (canvas) {
            const ctx = canvas.getContext(type);
            if (!this.inited) {
              this.inited = true;
              this.use2dCanvas = true;
              this.canvas = canvas;
            }
            this.ctx = ctx;
            resolve(this.ctx);
          } else {
            console.error("[lime-painter]: no size");
          }
        });
      });
    },
    canvasToTempFilePath(args = {}) {
      return new Promise(async (resolve, reject) => {
        const { use2dCanvas, canvasId, dpr, fileType, quality } = this;
        const success = async (res) => {
          try {
            const tempFilePath = await this.setFilePath(res.tempFilePath || res, args);
            const result = Object.assign(res, { tempFilePath });
            args.success && args.success(result);
            resolve(result);
          } catch (e) {
            this.$emit("fail", e);
          }
        };
        let { top: y = 0, left: x = 0, width, height } = this.boundary || this;
        let destWidth = width * dpr;
        let destHeight = height * dpr;
        const copyArgs = Object.assign({
          x,
          y,
          width,
          height,
          destWidth,
          destHeight,
          canvasId,
          fileType,
          quality
          // success,
          // fail: reject
        }, args, { success });
        if (this.isPc || use2dCanvas) {
          copyArgs.canvas = this.canvas;
        }
        if (use2dCanvas && !this.isPc) {
          try {
            const oFilePath = this.canvas.toDataURL(`image/${args.fileType || fileType}`.replace(/pg/, "peg"), args.quality || quality);
            if (/data:,/.test(oFilePath)) {
              common_vendor.index.canvasToTempFilePath(copyArgs, this);
            } else {
              const tempFilePath = await this.setFilePath(oFilePath, args);
              args.success && args.success({ tempFilePath });
              resolve({ tempFilePath });
            }
          } catch (e) {
            args.fail && args.fail(e);
            reject(e);
          }
        } else {
          common_vendor.index.canvasToTempFilePath(copyArgs, this);
        }
      });
    }
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return common_vendor.e({
    a: $options.canvasId && $options.size
  }, $options.canvasId && $options.size ? common_vendor.e({
    b: $data.use2dCanvas
  }, $data.use2dCanvas ? {
    c: $options.canvasId,
    d: common_vendor.s($options.size)
  } : {
    e: $options.canvasId,
    f: common_vendor.s($options.size),
    g: $options.canvasId,
    h: $options.boardWidth * $options.dpr,
    i: $options.boardHeight * $options.dpr
  }, {
    j: common_vendor.s($options.styles)
  }) : {});
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:/uniapp/uniapp/src/uni_modules/lime-painter/components/l-painter/l-painter.vue"]]);
wx.createComponent(Component);