Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: fix item size while zooming #5097

Merged
merged 2 commits into from
Dec 8, 2023
Merged

feat: fix item size while zooming #5097

merged 2 commits into from
Dec 8, 2023

Conversation

yvonneyx
Copy link
Contributor

画布缩放时固定元素大小

zoom-canvas 交互新增配置项 fixSelectedItems 支持在画布缩放过程中固定元素大小

const ExtGraph = extend(Graph, {
  behaviors: {
    'zoom-canvas': Extensions.ZoomCanvas,
  },
});

const graph = new ExtGraph({
  ......,
  modes: {
    default: [
      {
        type: 'zoom-canvas',
        fixSelectedItems,
      },
      ......
    ],
  },

fixSelectedItems 可选:

  1. fixAll: 固定元素的整体大小,优先级高于 fixSelectedItems.fixLineWidth和 fixSelectedItems.fixLabel;
  2. fixLineWidth: 固定 keyShape 的描边粗细;
  3. fixLabel: 固定 labelShape 和 labelBackgroundShape 的文本大小;(如果 fixLabel 为 true,则忽略信息分层,始终显示)
  4. fixState: 要固定的元素状态。默认为 selected;

效果图:

fixAll: true

Kapture 2023-10-30 at 20 09 12

fixLabel: true; fixLineWidth: true

Kapture 2023-10-30 at 20 12 58

@yvonneyx yvonneyx requested a review from Yanyan-Wang October 30, 2023 12:13
@@ -215,8 +218,20 @@ export default class Node extends Item {
const { graph, group, labelGroup, displayModel, shapeMap, renderExt } =
this;
const [x, y, z] = group.getPosition();
const renderBounds = group.getRenderBounds();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这块是为什么,我记得 renderBoundsCache 都删掉了。为什么需要一个 dy 偏移


const balanceLabelShape = () => {
item.updateLabelPosition();
item.displayModel.labelShapeVisible = true;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里为什么需要有这个标记位,直接去改 displayModel 不太好,displayModel 是每次渲染会被重新生成的,这样改可能会被覆盖

}
const balanceRatioCache = this.zoomCache.balanceRatio.get(id);
const newBalanceRatio = balanceRatioCache * balanceRatio;
group.style.transform = `scale(${newBalanceRatio}, ${newBalanceRatio})`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

边上的文本自动旋转的情况下,labelShape 图形上会有 transform: 'rotate(xx)',看看会不会产生冲突

@lvren
Copy link

lvren commented Nov 23, 2023

这个 Feature 有进度嘛?后边会合入不

@Aarebecca Aarebecca merged commit 7d3f191 into v5 Dec 8, 2023
2 checks passed
@Aarebecca Aarebecca deleted the v5-fix-elements branch December 8, 2023 12:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants