utils

DOM Resize Listener Tool

mxdraw.js by default listens to window size changes to redraw the CAD drawing, but often we need to redraw the CAD drawing based on changes in the size of the DOM.

Mx.useCanvasResizeListener uses a canvas size adjustment listener (only effective when called in the callback of Mx.MxFun.createMxObject). Without calling this method, it defaults to using a window listener to automatically adjust the canvas size. Changes in the size of the canvas or its parent element will not be automatically adjusted.

• The calling method loads the dependency package element-resize-event-polyfill (opens new window), which can listen to changes in the size of DOM elements through the dom.addEventListener('resize', callback) method.
• After calling the Mx.MxFun.createMxObject method, the parent element of canvas will be used as the reference size for automatic adjustment by default. Therefore, the canvas and canvasParent should be treated as a whole when adapting the size.

How to Implement on-demand Importing

• Exported by file location:

Directly import files with import MxFun from "mxdraw/dist/lib/MxModule/MxFun" to achieve on-demand importing.

• Use babel to automatically import on demand:

Use the babel plugin babel-plugin-import to achieve on-demand importing.

Install npm i babel-plugin-import -D, then find or create the .babelrc file at the root of the project and add the following content:

{
  "plugins": [
    [
      "import", {
        "libraryName": "mxdraw",
        "libraryDirectory": "dist/lib/MxModule",
        "camel2UnderlineComponentName": false,
        "camel2DashComponentName": false
      }
    ]
  ]
}

import { MxFun } from "mxdraw"