Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/le5le-com/meta2d.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@ananzhusen
ananzhusen committed Dec 20, 2024
2 parents 69ec16e + fe9eb33 commit cbf7e75
Show file tree
Hide file tree
Showing 16 changed files with 1,143 additions and 709 deletions.
10 changes: 9 additions & 1 deletion packages/chart-diagram/src/echarts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export interface ChartPen extends Pen {
geoJson?: any;
geoUrl?: string;
diabled?: boolean; //通过脚本setOption后，禁止默认拿到echarts.option去设置图元
replaceMerge?: string; // 替换合并
};
calculative?: {
partialOption?: any; // 部分更新的 option
Expand Down Expand Up @@ -280,7 +281,14 @@ function value(pen: ChartPen) {
if (pen.calculative.partialOption) {
//部分更新
const option = pen.calculative.partialOption.echarts.option;
pen.calculative.singleton.echart.setOption(deepClone(option));
let isReplaceMerge = Array.isArray(pen.echarts?.replaceMerge)?pen.echarts?.replaceMerge.some((key)=>option[key]):false;
if (isReplaceMerge) {
pen.calculative.singleton.echart.setOption(deepClone(option), {
replaceMerge: pen.echarts.replaceMerge,
});
} else {
pen.calculative.singleton.echart.setOption(deepClone(option));
}
} else {
pen.calculative.singleton.echart.setOption(
updateOption(
Expand Down
114 changes: 87 additions & 27 deletions packages/core/src/canvas/canvas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,7 @@ export class Canvas {
altKey?: boolean;
ctrlKey?:boolean;
metaKey?:boolean;
F?:boolean;
}
/**
* @deprecated 改用 beforeAddPens
Expand Down Expand Up @@ -716,6 +717,10 @@ export class Canvas {
this.keyOptions.shiftKey = e.shiftKey;
this.keyOptions.ctrlKey = e.ctrlKey;
this.keyOptions.metaKey = e.metaKey;
this.keyOptions.F = false;
if(e.key === 'F' || e.key === 'f'){
this.keyOptions.F = true;
}
let x = 10;
let y = 10;
let vRect: Rect = null;
Expand Down Expand Up @@ -1142,6 +1147,10 @@ export class Canvas {
break;
case 'F':
case 'f':
if(!this.store.data.locked && (e.ctrlKey || e.metaKey) && !this.store.options.disableClipboard){
//粘贴到被复制图元上一层
this.paste();
}
this.setFollowers();
break;
}
Expand Down Expand Up @@ -4108,7 +4117,12 @@ export class Canvas {
this.updatePenRect(pen);
return;
}
this.store.data.pens.push(pen);
if(pen.copyIndex){
this.store.data.pens.splice(pen.copyIndex + 1, 0, pen);
delete pen.copyIndex;
}else{
this.store.data.pens.push(pen);
}
this.store.pens[pen.id] = pen;
// 集中存储path，避免数据冗余过大
if (pen.path) {
Expand Down Expand Up @@ -4757,7 +4771,11 @@ export class Canvas {
};

private renderPenContainChild = (ctx: CanvasRenderingContext2D, pen: Pen) => {
pen.calculative.inView && renderPen(ctx, pen); // 可见才绘制，组合为状态只显示其中一个
if(pen.calculative.inView){
if (!(pen.name === 'combine' && !pen.draw)){
renderPen(ctx, pen); // 可见才绘制，组合为状态只显示其中一个
}
}
pen.children?.forEach((id) => {
const child = this.store.pens[id];
child && this.renderPenContainChild(ctx, child);
Expand Down Expand Up @@ -5035,6 +5053,7 @@ export class Canvas {
ctx.restore();
};

transTimeout: any;
translate(x: number = 0, y: number = 0) {
this.store.data.x += x * this.store.data.scale;
this.store.data.y += y * this.store.data.scale;
Expand Down Expand Up @@ -5088,10 +5107,20 @@ export class Canvas {
}
//TODO 当初为什么加异步
// setTimeout(() => {
if(this.store.data.asyncTranslate){
clearTimeout(this.transTimeout);
this.transTimeout = setTimeout( ()=> {
this.canvasTemplate.init();
this.canvasImage.init();
this.canvasImageBottom.init();
this.render();
}, 300);
}else{
this.canvasTemplate.init();
this.canvasImage.init();
this.canvasImageBottom.init();
this.render();
}
// });
this.store.emitter.emit('translate', {
x: this.store.data.x,
Expand Down Expand Up @@ -6557,9 +6586,9 @@ export class Canvas {
copyPens.sort((a: any, b: any) => {
return a.copyIndex - b.copyIndex;
});
copyPens.forEach((activePen: any) => {
delete activePen.copyIndex;
});
// copyPens.forEach((activePen: any) => {
// delete activePen.copyIndex;
// });
const clipboard = {
meta2d: true,
pens: copyPens,
Expand All @@ -6568,6 +6597,7 @@ export class Canvas {
page,
initRect: deepClone(this.activeRect),
offset: 10,
mousePos: deepClone(this.mousePos),
};

if (
Expand Down Expand Up @@ -6641,7 +6671,13 @@ export class Canvas {
this.store.clipboard = deepClone(clipboard);

const curPage = sessionStorage.getItem('page');
if (curPage !== clipboard.page) {
const scale = this.store.data.scale;
if(this.store.clipboard.mousePos&&(Math.abs(this.store.clipboard.mousePos.x-this.mousePos.x)>100*scale||Math.abs(this.store.clipboard.mousePos.y-this.mousePos.y)>100*scale)){
const offsetX = (scale-this.store.clipboard.scale)*this.store.clipboard.initRect.width/2;
const offsetY = (scale-this.store.clipboard.scale)*this.store.clipboard.initRect.height/2;
this.store.clipboard.pos = { x: this.mousePos.x-offsetX, y: this.mousePos.y-offsetY };
this.store.clipboard.offset = 0;
}else if (curPage !== clipboard.page) {
this.store.clipboard.pos = { x: this.mousePos.x, y: this.mousePos.y };
this.store.clipboard.offset = 0;
} else if (!this.pasteOffset) {
Expand All @@ -6651,7 +6687,11 @@ export class Canvas {
offset && (this.store.clipboard.offset = offset);
pos && (this.store.clipboard.pos = pos);
}

if(!this.keyOptions.F){
this.store.clipboard.pens.forEach((pen: Pen) => {
delete pen.copyIndex;
});
}
const rootPens = this.store.clipboard.pens.filter((pen) => !pen.parentId);
for (const pen of rootPens) {
this.pastePen(pen, undefined);
Expand Down Expand Up @@ -6764,7 +6804,7 @@ export class Canvas {
if(this.keyOptions && this.keyOptions.altKey && (this.keyOptions.ctrlKey || this.keyOptions.metaKey)){
pen.x =-this.store.data.x+ this.width / 2 - pen.width / 2;
pen.y =-this.store.data.y+ this.height / 2 - pen.height / 2;
}else if(this.keyOptions && this.keyOptions.shiftKey && (this.keyOptions.ctrlKey || this.keyOptions.metaKey)){
}else if(this.keyOptions && this.keyOptions.shiftKey && (this.keyOptions.ctrlKey || this.keyOptions.metaKey || this.keyOptions.F)){

}else{
pen.x += this.store.clipboard.offset * this.store.data.scale;
Expand Down Expand Up @@ -6917,7 +6957,9 @@ export class Canvas {
const i = this.store.data.pens.findIndex((item) => item.id === pen.id);
if (i > -1) {
const delPen = this.store.pens[pen.id];
delPen.calculative.active = undefined;
if(delPen && delPen.calculative){
delPen.calculative.active = undefined;
}
delPens.push(delPen);
}
if (pen.children) {
Expand Down Expand Up @@ -7330,7 +7372,7 @@ export class Canvas {
pen.text = this.inputDiv.dataset.value;
pen.calculative.text = pen.text;
this.inputDiv.dataset.penId = undefined;
if (pen.text && pen.textAutoAdjust) {
if (pen.text && pen.textAutoAdjust && !pen.parentId) {
calcTextAutoWidth(pen);
}
calcTextRect(pen);
Expand Down Expand Up @@ -7922,7 +7964,7 @@ export class Canvas {
const storeData = this.store.data;
// TODO: 目前背景颜色优先级更高
const isDrawBkImg =
containBkImg && !storeData.background && this.store.bkImg;
containBkImg && this.store.bkImg;
// 主体在背景的右侧，下侧
let isRight = false,
isBottom = false;
Expand Down Expand Up @@ -8005,25 +8047,16 @@ export class Canvas {

const background =
this.store.data.background || this.store.options.background;
if (background) {
if (background && isV) {
// 绘制背景颜色
ctx.save();
ctx.fillStyle = background;
if (isV) {
ctx.fillRect(
0,
0,
vRect.width + (p[1] + p[3]) * _scale,
vRect.height + (p[0] + p[2]) * _scale
);
} else {
ctx.fillRect(
0,
0,
oldRect.width + (p[3] + p[1]) * _scale,
oldRect.height + (p[0] + p[2]) * _scale
);
}
ctx.fillRect(
0,
0,
vRect.width + (p[1] + p[3]) * _scale,
vRect.height + (p[0] + p[2]) * _scale
);
ctx.restore();
}

Expand All @@ -8048,6 +8081,33 @@ export class Canvas {
);
}
}
if (background && !isV) {
// 绘制背景颜色
if (isDrawBkImg) {
const x = rect.x < 0 ? -rect.x : 0;
const y = rect.y < 0 ? -rect.y : 0;
ctx.save();
ctx.fillStyle = background;
ctx.fillRect(
x,
y,
this.canvasRect.width,
this.canvasRect.height
);
ctx.restore();
}else{
ctx.save();
ctx.fillStyle = background;
ctx.fillRect(
0,
0,
oldRect.width + (p[3] + p[1]) * _scale,
oldRect.height + (p[0] + p[2]) * _scale
);
ctx.restore();
}
}

if (!isDrawBkImg) {
ctx.translate(-rect.x, -rect.y);
} else {
Expand Down
7 changes: 7 additions & 0 deletions packages/core/src/canvas/canvasImage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,10 @@ export class CanvasImage {
if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
continue;
}
if(pen.visible === false || pen.calculative.visible === false){
//动画控制显示隐藏
continue;
}
pen.calculative.imageDrawed = true;
ctx.save();
ctxFlip(ctx, pen);
Expand All @@ -274,6 +278,9 @@ export class CanvasImage {
if (pen.canvasLayer === CanvasLayer.CanvasTemplate) {
continue;
}
if(pen.visible === false || pen.calculative.visible === false){
continue;
}
if (this.store.animates.has(getParent(pen, true))) {
pen.calculative.imageDrawed = true;
ctx.save();
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/canvas/magnifierCanvas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export class MagnifierCanvas {
this.canvas.style.position = 'absolute';
this.canvas.style.top = '0';
this.canvas.style.left = '0';
this.canvas.style.pointerEvents = 'none';
}

resize(w?: number, h?: number) {
Expand Down
Loading

0 comments on commit cbf7e75

Please sign in to comment.