fix: 兼容不设置高度时,窗口变化后更新画布尺寸

examples/feature-examples/src/pages/graph/index.tsx

@@ -309,7 +309,29 @@ export default function BasicNode() {
       })
     }
   }
-
+  const handleChangeSize = () => {
+    const lf = lfRef.current
+    if (lf) {
+      if (lf.graphModel.isContainerHeight || lf.graphModel.isContainerWidth) {
+        console.log('resize by width,height')
+        lf.resize(300, 100)
+      } else {
+        console.log('resize by container')
+        lf.resize()
+      }
+      console.log(
+        'current is container',
+        lf.graphModel.isContainerHeight,
+        lf.graphModel.isContainerWidth,
+      )
+      console.log('current option size', lf.options.width, lf.options.height)
+      console.log(
+        'current griphModel size',
+        lf.graphModel.width,
+        lf.graphModel.height,
+      )
+    }
+  }
   const handleChangeEditConfig = () => {
     const isSilentMode = lfRef.current?.options.isSilentMode
     lfRef?.current?.updateEditConfig({
@@ -446,6 +468,7 @@ export default function BasicNode() {
         <Button key="changeType" type="primary" onClick={handleChangeNodeType}>
           切换节点为五角星
         </Button>
+
         <Button
           key="changeConfig"
           type="primary"
@@ -565,6 +588,9 @@ export default function BasicNode() {
         >
           切换allowResize
         </Button>
+        <Button key="changeSize" type="primary" onClick={handleChangeSize}>
+          修改尺寸
+        </Button>
       </Flex>
       <Divider orientation="left" orientationMargin="5" plain>
         节点面板

packages/core/src/model/GraphModel.ts

@@ -95,6 +95,15 @@ export class GraphModel {
    */
   customTrajectory: LFOptions.Definition['customTrajectory']
 
+  /**
+   * 判断是否使用的是容器的宽度
+   */
+  isContainerWidth: boolean
+  /**
+   * 判断是否使用的是容器的高度
+   */
+  isContainerHeight: boolean
+
   // 在图上操作创建边时，默认使用的边类型.
   @observable edgeType: string
   // 当前图上所有节点的model
@@ -145,9 +154,20 @@ export class GraphModel {
     this.edgeType = options.edgeType || 'polyline'
     this.animation = setupAnimation(animation)
     this.overlapMode = options.overlapMode || OverlapMode.DEFAULT
-
-    this.width = options.width || this.rootEl.getBoundingClientRect().width
-    this.height = options.height || this.rootEl.getBoundingClientRect().height
+    if (options.width) {
+      this.width = options.width
+      this.isContainerWidth = false
+    } else {
+      this.width = this.rootEl.getBoundingClientRect().width
+      this.isContainerWidth = true
+    }
+    if (options.height) {
+      this.height = options.height
+      this.isContainerHeight = false
+    } else {
+      this.height = this.rootEl.getBoundingClientRect().height
+      this.isContainerHeight = true
+    }
 
     this.eventCenter = new EventEmitter()
     this.editConfigModel = new EditConfigModel(options)
@@ -410,9 +430,10 @@ export class GraphModel {
    * @param { object } graphData 图数据
    */
   graphDataToModel(graphData: Partial<LogicFlow.GraphConfigData>) {
-    if (!this.width || !this.height) {
-      this.resize()
-    }
+    // 宽度必然存在，取消重新计算
+    // if (!this.width || !this.height) {
+    //   this.resize()
+    // }
     if (!graphData) {
       this.nodes = []
       this.edges = []
@@ -1411,8 +1432,20 @@ export class GraphModel {
    * 重新设置画布的宽高
    */
   @action resize(width?: number, height?: number): void {
-    this.width = width || this.rootEl.getBoundingClientRect().width
-    this.height = height || this.rootEl.getBoundingClientRect().height
+    if (width) {
+      this.width = width
+      this.isContainerWidth = false
+    } else {
+      this.width = this.rootEl.getBoundingClientRect().width
+      this.isContainerWidth = true
+    }
+    if (height) {
+      this.height = height
+      this.isContainerHeight = false
+    } else {
+      this.height = this.rootEl.getBoundingClientRect().height
+      this.isContainerHeight = true
+    }
     if (!this.width || !this.height) {
       console.warn(
         '渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675',

packages/core/src/view/Graph.tsx

@@ -39,9 +39,24 @@ type ContainerStyle = {
 @observer
 class Graph extends Component<IGraphProps> {
   private handleResize = () => {
-    this.props.graphModel.resize()
+    let resizeWidth: number | undefined = this.props.graphModel.width
+    let resizeHeight: number | undefined = this.props.graphModel.height
+    let needUpdate = false
+    if (this.props.graphModel.isContainerWidth) {
+      resizeWidth = undefined
+      needUpdate = true
+    }
+    if (this.props.graphModel.isContainerHeight) {
+      resizeHeight = undefined
+      needUpdate = true
+    }
+    if (needUpdate) {
+      this.props.graphModel.resize(resizeWidth, resizeHeight)
+    }
+    this.props.options.width = this.props.graphModel.width
+    this.props.options.height = this.props.graphModel.height
   }
-  private throttleResize = () => throttle(this.handleResize, 200)
+  private throttleResize = throttle(this.handleResize, 200)
 
   componentDidMount() {
     window.addEventListener('resize', this.throttleResize)
@@ -91,7 +106,7 @@ class Graph extends Component<IGraphProps> {
     const { fakeNode, editConfigModel } = graphModel
     const { adjustEdge } = editConfigModel
     return (
-      <div className="lf-graph" flow-id={graphModel.flowId}>
+      <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
         {/* 元素层 */}
         <CanvasOverlay graphModel={graphModel} dnd={dnd}>
           <g className="lf-base">