@meta2d/core
Version:
@meta2d/core: Powerful, Beautiful, Simple, Open - Web-Based 2D At Its Best .
215 lines • 7.67 kB
JavaScript
import { movingSuffix } from '../canvas';
import { rectInRect } from '../rect';
import { deepClone } from '../utils';
export function form(pen, ctx) {
const path = !ctx ? new Path2D() : ctx;
if (!pen.onDestroy) {
pen.onDestroy = destory;
// pen.onMove = move;
// pen.onRotate = move;
// pen.onMouseEnter = mouseEnter;
pen.onMouseLeave = mouseLeave;
// pen.onMouseMove = mouseMove;
pen.onMouseUp = mouseUp;
// pen.onInput = input;
}
pen.formId = pen.id;
let wr = pen.calculative.borderRadius || 0, hr = wr;
const { x, y, width, height, ex, ey } = pen.calculative.worldRect;
const { x: textX } = pen.calculative.worldTextRect;
if (wr < 1) {
wr = width * wr;
hr = height * hr;
}
let r = wr < hr ? wr : hr;
if (width < 2 * r) {
r = width / 2;
}
if (height < 2 * r) {
r = height / 2;
}
// let textWidth = -5;
// if(pen.text){
// textWidth = getTextWidth(pen.text, pen.calculative.fontSize);
// }
path.moveTo(x + r, y);
// path.lineTo(textX - 5, y);
// path.moveTo(textX + textWidth + 5, y);
// path.lineTo(textX + textWidth + 5, y);
path.arcTo(ex, y, ex, ey, r);
path.arcTo(ex, ey, x, ey, r);
path.arcTo(x, ey, x, y, r);
path.arcTo(x, y, ex, y, r);
if (path instanceof Path2D) {
return path;
}
}
function getTextWidth(text, fontSize) {
// 近似计算
const chinese = text.match(/[^\x00-\xff]/g) || '';
const chineseWidth = chinese.length * fontSize; // 中文占用的宽度
const spaces = text.match(/\s/g) || '';
const spaceWidth = spaces.length * fontSize * 0.3; // 空格占用的宽度
const otherWidth = (text.length - chinese.length - spaces.length) * fontSize * 0.6; // 其他字符占用的宽度
const currentWidth = chineseWidth + spaceWidth + otherWidth;
return currentWidth;
}
function input(pen, text) {
pen.text = text;
pen.calculative.text = pen.text;
// this.inputDiv.dataset.penId = undefined;
pen.calculative.canvas.updatePenRect(pen);
// this.patchFlags = true;
// this.store.emitter.emit('valueUpdate', pen);
}
function destory(pen) {
pen.followers.forEach((id) => {
let fpen = pen.calculative.canvas.store.pens[id];
fpen.formKey = undefined;
fpen.formValue = undefined;
fpen.formType = undefined;
fpen.formId = undefined;
});
}
function move(pen) { }
function mouseEnter(pen) {
// const activePens = pen.calculative.canvas.store.active;
// if(activePens&&activePens.length){
// activePens.forEach((activePen:Pen)=>{
// if(rectInRect(activePen.calculative.worldRect,pen.calculative.worldRect,true)){
// if(!pen.followers){
// pen.followers =[];
// }
// if(!pen.followers.includes(activePen.id)){
// pen.followers.push(activePen.id);
// }
// }
// })
// }
}
function mouseLeave(pen) {
const activePens = pen.calculative.canvas.store.active;
if (activePens && activePens.length) {
activePens.forEach((activePen) => {
// if(!rectInRect(activePen.calculative.worldRect,pen.calculative.worldRect,true)){
// if(!pen.followers){
// pen.followers =[];
// }
// if(!pen.followers.includes(activePen.id)){
// pen.followers.push(activePen.id);
// }
// }
if (pen.followers) {
let idx = pen.followers.findIndex((id) => id === activePen.id);
if (idx !== -1) {
const movingPen = pen.calculative.canvas.store.pens[activePen.id + movingSuffix];
if (movingPen && movingPen.calculative) {
let isIn = rectInRect(movingPen.calculative.worldRect, pen.calculative.worldRect, true);
if (!isIn) {
pen.followers.splice(idx, 1);
delete activePen.formKey;
delete activePen.formValue;
delete activePen.formType;
delete activePen.formId;
}
}
}
}
});
}
}
function mouseUp(pen) {
const activePens = pen.calculative.canvas.store.active;
if (activePens && activePens.length) {
activePens.forEach((activePen) => {
let movingPen = pen.calculative.canvas.store.pens[activePen.id + movingSuffix];
if (!movingPen) {
movingPen = pen.calculative.canvas.store.pens[activePen.id];
}
if (movingPen && movingPen.calculative) {
let inRect = deepClone(pen.calculative.worldRect);
inRect.x -= 1;
inRect.y -= 1;
inRect.width += 2;
inRect.height += 2;
if (rectInRect(movingPen.calculative.worldRect, inRect, true)) {
if (!pen.followers) {
pen.followers = [];
}
if (!pen.followers.includes(activePen.id)) {
pen.followers.push(activePen.id);
}
activePen.formId = pen.id;
predictFormValue(activePen);
}
}
});
}
}
function mouseMove(pen, e) {
// console.log(e,pen.calculative.canvas.store.active);
}
//更新表单数据
export function updateFormData(pen, key) {
if (pen.formId && pen.formKey && pen.formValue) {
//表单图元更新值
const leaderPen = pen.calculative.canvas.store.pens[pen.formId];
if (leaderPen) {
if (!leaderPen.formData) {
leaderPen.formData = {};
}
leaderPen.formData[pen.formKey] = pen[pen.formValue];
}
}
}
//提交表单
export function submit(pen) { }
//重置表单
export function reset(pen) {
const formPen = pen.calculative.canvas.store.pens[pen.formId];
// formPen.followers.forEach((id:string,index:number)=>{
for (let i = formPen.followers.length - 1; i >= 0; i--) {
let id = formPen.followers[i];
const follower = pen.calculative.canvas.store.pens[id];
if (follower &&
follower.formId &&
follower.formKey &&
formPen.formData[follower.formKey]) {
const value = follower[follower.formValue];
let data = '';
if (Array.isArray(value)) {
data = [];
}
// follower[follower.formValue] = data;
// follower.calculative[follower.formValue] = data;
pen.calculative.canvas.parent.setValue({ id: follower.id, [follower.formValue]: data }, { render: false, doEvent: false, history: false });
}
if (!follower) {
formPen.followers.splice(i, 1);
}
}
formPen.formData = {};
pen.calculative.canvas.parent.render();
}
const formValueMap = {
progress: 'progress',
cascadeFilterDom: 'checked',
treeFilterDom: 'checked',
dateRangePickerDom: 'pickerTimes',
datePickerDom: 'pickerTimes',
slider: 'value',
switch: 'checked',
inputDom: 'text',
checkbox: 'selectedKeys',
radio: 'selectKey',
rectangle: 'text',
};
function predictFormValue(pen) {
if (pen.name === 'rectangle') {
if (!pen.input && !pen.dropdownList) {
return;
}
}
pen.formValue = formValueMap[pen.name];
}
//# sourceMappingURL=form.js.map