"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);