404 lines
14 KiB
JavaScript
404 lines
14 KiB
JavaScript
|
"use strict";
|
||
|
|
var __async = (__this, __arguments, generator) => {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
var fulfilled = (value) => {
|
||
|
|
try {
|
||
|
|
step(generator.next(value));
|
||
|
|
} catch (e) {
|
||
|
|
reject(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var rejected = (value) => {
|
||
|
|
try {
|
||
|
|
step(generator.throw(value));
|
||
|
|
} catch (e) {
|
||
|
|
reject(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
||
|
|
step((generator = generator.apply(__this, __arguments)).next());
|
||
|
|
});
|
||
|
|
};
|
||
|
|
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: false,
|
||
|
|
canvasHeight: 150,
|
||
|
|
canvasWidth: null,
|
||
|
|
parentWidth: 0,
|
||
|
|
inited: false,
|
||
|
|
progress: 0,
|
||
|
|
firstRender: 0,
|
||
|
|
done: false,
|
||
|
|
tasks: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
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));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.use2dCanvas = this.type === "2d" && uni_modules_limePainter_components_lPainter_utils.canIUseCanvas2d() && !uni_modules_limePainter_components_lPainter_utils.isPC;
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
return __async(this, null, function* () {
|
||
|
|
yield uni_modules_limePainter_components_lPainter_utils.sleep(30);
|
||
|
|
yield 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: {
|
||
|
|
watchRender(val, old) {
|
||
|
|
return __async(this, null, function* () {
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
setFilePath(path, param) {
|
||
|
|
return __async(this, null, function* () {
|
||
|
|
let filePath = path;
|
||
|
|
const { pathType = this.pathType } = param || this;
|
||
|
|
if (pathType == "base64" && !uni_modules_limePainter_components_lPainter_utils.isBase64(path)) {
|
||
|
|
filePath = yield uni_modules_limePainter_components_lPainter_utils.pathToBase64(path);
|
||
|
|
} else if (pathType == "url" && uni_modules_limePainter_components_lPainter_utils.isBase64(path)) {
|
||
|
|
filePath = yield uni_modules_limePainter_components_lPainter_utils.base64ToPath(path);
|
||
|
|
}
|
||
|
|
if (param && param.isEmit) {
|
||
|
|
this.$emit("success", filePath);
|
||
|
|
}
|
||
|
|
return filePath;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getSize(args) {
|
||
|
|
return __async(this, null, function* () {
|
||
|
|
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;
|
||
|
|
yield uni_modules_limePainter_components_lPainter_utils.sleep(30);
|
||
|
|
} else {
|
||
|
|
yield this.getParentWeith();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
canvasToTempFilePathSync(args) {
|
||
|
|
this.tasks.push(args);
|
||
|
|
if (this.done) {
|
||
|
|
this.runTask();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
runTask() {
|
||
|
|
while (this.tasks.length) {
|
||
|
|
const task = this.tasks.shift();
|
||
|
|
this.canvasToTempFilePath(task);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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]);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
render() {
|
||
|
|
return __async(this, arguments, function* (args = {}) {
|
||
|
|
if (!Object.keys(args).length) {
|
||
|
|
return console.error("空对象");
|
||
|
|
}
|
||
|
|
this.progress = 0;
|
||
|
|
this.done = false;
|
||
|
|
yield this.getSize(args);
|
||
|
|
const ctx = yield this.getContext();
|
||
|
|
let { use2dCanvas, boardWidth, boardHeight, canvas, afterDelay } = this;
|
||
|
|
if (use2dCanvas && !canvas) {
|
||
|
|
return Promise.reject(new Error("canvas 没创建"));
|
||
|
|
}
|
||
|
|
this.boundary = {
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
width: boardWidth,
|
||
|
|
height: boardHeight
|
||
|
|
};
|
||
|
|
this.painter = null;
|
||
|
|
if (!this.painter) {
|
||
|
|
const { width } = args.css || args;
|
||
|
|
args.css || args;
|
||
|
|
if (!width && 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),
|
||
|
|
performance: this.performance,
|
||
|
|
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.kt(param);
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
const { width, height } = yield this.painter.source(JSON.parse(JSON.stringify(args)));
|
||
|
|
this.boundary.height = this.canvasHeight = height;
|
||
|
|
this.boundary.width = this.canvasWidth = width;
|
||
|
|
yield uni_modules_limePainter_components_lPainter_utils.sleep(this.sleep);
|
||
|
|
yield this.painter.render();
|
||
|
|
yield new Promise((resolve) => this.$nextTick(resolve));
|
||
|
|
if (!use2dCanvas) {
|
||
|
|
yield this.canvasDraw();
|
||
|
|
}
|
||
|
|
if (afterDelay && use2dCanvas) {
|
||
|
|
yield 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)));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.runTask();
|
||
|
|
return Promise.resolve({
|
||
|
|
ctx,
|
||
|
|
draw: this.painter,
|
||
|
|
node: this.node
|
||
|
|
});
|
||
|
|
} catch (e) {
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
canvasDraw(flag = false) {
|
||
|
|
return new Promise(
|
||
|
|
(resolve, reject) => this.ctx.draw(flag, () => setTimeout(() => resolve(), this.afterDelay))
|
||
|
|
);
|
||
|
|
},
|
||
|
|
getContext() {
|
||
|
|
return __async(this, null, function* () {
|
||
|
|
if (!this.canvasWidth) {
|
||
|
|
this.$emit("fail", "painter no size");
|
||
|
|
console.error("[lime-painter]: 给画板或父级设置尺寸");
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
if (!ctx.measureText) {
|
||
|
|
let strLen = function(str) {
|
||
|
|
let len = 0;
|
||
|
|
for (let i = 0; i < str.length; i++) {
|
||
|
|
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
||
|
|
len++;
|
||
|
|
} else {
|
||
|
|
len += 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return len;
|
||
|
|
};
|
||
|
|
ctx.measureText = (text) => {
|
||
|
|
let fontSize = ctx.state && ctx.state.fontSize || 12;
|
||
|
|
const font = ctx.__font;
|
||
|
|
if (font && fontSize == 12) {
|
||
|
|
fontSize = parseInt(font.split(" ")[3], 10);
|
||
|
|
}
|
||
|
|
fontSize /= 2;
|
||
|
|
return {
|
||
|
|
width: strLen(text) * fontSize
|
||
|
|
};
|
||
|
|
};
|
||
|
|
}
|
||
|
|
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((resolve, reject) => __async(this, null, function* () {
|
||
|
|
const { use2dCanvas, canvasId, dpr, fileType, quality } = this;
|
||
|
|
const success = (res) => __async(this, null, function* () {
|
||
|
|
try {
|
||
|
|
const tempFilePath = yield 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);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.boundary || this;
|
||
|
|
const copyArgs = Object.assign(
|
||
|
|
{
|
||
|
|
// x,
|
||
|
|
// y,
|
||
|
|
// width,
|
||
|
|
// height,
|
||
|
|
// destWidth,
|
||
|
|
// destHeight,
|
||
|
|
canvasId,
|
||
|
|
id: canvasId,
|
||
|
|
fileType,
|
||
|
|
quality
|
||
|
|
},
|
||
|
|
args,
|
||
|
|
{ success }
|
||
|
|
);
|
||
|
|
if (use2dCanvas) {
|
||
|
|
copyArgs.canvas = this.canvas;
|
||
|
|
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 = yield 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: $options.canvasId,
|
||
|
|
g: common_vendor.s($options.size),
|
||
|
|
h: $options.boardWidth * $options.dpr,
|
||
|
|
i: $options.boardHeight * $options.dpr,
|
||
|
|
j: _ctx.hidpi
|
||
|
|
}, {
|
||
|
|
k: common_vendor.s($options.styles)
|
||
|
|
}) : {});
|
||
|
|
}
|
||
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||
|
|
wx.createComponent(Component);
|
||
|
|
//# sourceMappingURL=l-painter.js.map
|