Analysis of Key Technical Principles for a Visual Drag-and-Drop Component Library - 3

This article is the third in the visual drag-and-drop series. The previous two articles analyzed the technical principles of 17 features: Editor Custom components Drag and drop Delete components, adjust layer hierarchy Zoom in and out Undo, redo Component property settings Snap Preview, save code Bind events Bind animations Import PSD Mobile mode Drag rotation Copy, paste, and cut Data interaction Publish Building on this foundation, this article will analyze the technical principles of the following features: Combining and splitting multiple components Text component Rectangle component Lock component Shortcuts Grid lines Another implementation method for editor snapshots If you're not familiar with my previous two articles, I recommend reading them first before continuing with this one: Technical Analysis of Key Points for Visual Drag-and-Drop Component Library Technical Analysis of Key Points for Visual Drag-and-Drop Component Library (Part 2) Although my visual drag-and-drop component library is just a DEMO, compared to some existing products on the market (such as processon, Modao), it implements most of the basic functions. If you're interested in low-code platforms but aren't familiar with them, I strongly recommend reading my three articles along with the project source code. I'm sure you'll gain a lot. Here are the project and online DEMO links: Project repository Online DEMO 18. Combining and splitting multiple components There are relatively more technical points for combining and splitting, with the following 4 aspects: Selection area Movement and rotation after combination Scaling after combination Restoring child component styles after splitting Selection area Before combining multiple components, we need to select them first. Using mouse events, we can easily display the selection area: mousedown records the starting coordinates mousemove calculates the movement area using the current coordinates and starting coordinates If the mouse is pressed and moved toward the upper left, we need to set the current coordinates as the starting coordinates and then calculate the movement area // Get the editor's displacement information const rectInfo = this.editor.getBoundingClientRect() this.editorX = rectInfo.x this.editorY = rectInfo.y const startX = e.clientX const startY = e.clientY this.start.x = startX - this.editorX this.start.y = startY - this.editorY // Show selection area this.isShowArea = true const move = (moveEvent) => { this.width = Math.abs(moveEvent.clientX - startX) this.height = Math.abs(moveEvent.clientY - startY) if (moveEvent.clientX { const rectInfo = $(`#component${item.id}`).getBoundingClientRect() style.left = rectInfo.left - this.editorX style.top = rectInfo.top - this.editorY style.right = rectInfo.right - this.editorX style.bottom = rectInfo.bottom - this.editorY if (style.left bottom) bottom = style.bottom }) } else { style = getComponentRotatedStyle(component.style) } if (style.left bottom) bottom = style.bottom }) this.start.x = left this.start.y = top this.width = right - left this.height = bottom - top // Set displacement and size information for the selected area and the component data within the area this.$store.commit('setAreaData', { style: { left, top, width: this.width, height: this.height, }, components: areaData, }) }, getSelectArea() { const result = [] // Area starting coordinates const { x, y } = this.start // Calculate all component data, determine if they are in the selected area this.componentData.forEach(component => { if (component.isLock) return const { left, top, width, height } = component.style if (x [], }, element: { type: Object, }, }, created() { const parentStyle = this.element.style this.propValue.forEach(component => { // component.groupStyle's top left are positions relative to the group component // If component.groupStyle already exists, it means it has been calculated once. No need to calculate again if (!Object.keys(component.groupStyle).length) { const style = { ...component.style } component.groupStyle = getStyle(style) component.groupStyle.left = this.toPercent((style.left - parentStyle.left) / parentStyle.width) component.groupStyle.top = this.toPercent((style.top - parentStyle.top) / parentStyle.height) component.groupStyle.width = this.toPercent(style.width / parentStyle.width) component.groupStyle.height = this.toPercent(style.height / parentStyle.height) } }) }, methods: { toPercent(val) {

Apr 13, 2025 - 16:35

Analysis of Key Technical Principles for a Visual Drag-and-Drop Component Library - 3

This article is the third in the visual drag-and-drop series. The previous two articles analyzed the technical principles of 17 features:

Editor
Custom components
Drag and drop
Delete components, adjust layer hierarchy
Zoom in and out
Undo, redo
Component property settings
Snap
Preview, save code
Bind events
Bind animations
Import PSD
Mobile mode
Drag rotation
Copy, paste, and cut
Data interaction
Publish

Building on this foundation, this article will analyze the technical principles of the following features:

Combining and splitting multiple components
Text component
Rectangle component
Lock component
Shortcuts
Grid lines
Another implementation method for editor snapshots

If you're not familiar with my previous two articles, I recommend reading them first before continuing with this one:

Although my visual drag-and-drop component library is just a DEMO, compared to some existing products on the market (such as processon, Modao), it implements most of the basic functions.

If you're interested in low-code platforms but aren't familiar with them, I strongly recommend reading my three articles along with the project source code. I'm sure you'll gain a lot. Here are the project and online DEMO links:

18. Combining and splitting multiple components

There are relatively more technical points for combining and splitting, with the following 4 aspects:

Selection area
Movement and rotation after combination
Scaling after combination
Restoring child component styles after splitting

Selection area

Before combining multiple components, we need to select them first. Using mouse events, we can easily display the selection area:

mousedown records the starting coordinates
mousemove calculates the movement area using the current coordinates and starting coordinates
If the mouse is pressed and moved toward the upper left, we need to set the current coordinates as the starting coordinates and then calculate the movement area

// Get the editor's displacement information
const rectInfo = this.editor.getBoundingClientRect()
this.editorX = rectInfo.x
this.editorY = rectInfo.y

const startX = e.clientX
const startY = e.clientY
this.start.x = startX - this.editorX
this.start.y = startY - this.editorY
// Show selection area
this.isShowArea = true

const move = (moveEvent) => {
    this.width = Math.abs(moveEvent.clientX - startX)
    this.height = Math.abs(moveEvent.clientY - startY)
    if (moveEvent.clientX < startX) {
        this.start.x = moveEvent.clientX - this.editorX
    }

    if (moveEvent.clientY < startY) {
        this.start.y = moveEvent.clientY - this.editorY
    }
}

When the mouseup event is triggered, we need to calculate the displacement and size information of all components in the selected area to obtain a minimum area that can contain all components in the region. The effect is shown in the following figure:

The code for this calculation process:

createGroup() {
  // Get component data in the selected area
  const areaData = this.getSelectArea()
  if (areaData.length <= 1) {
      this.hideArea()
      return
  }

  // Create a Group component based on the selected area and the displacement information of each component in the area
  // Need to traverse each component in the selected area, get their left top right bottom information for comparison
  let top = Infinity, left = Infinity
  let right = -Infinity, bottom = -Infinity
  areaData.forEach(component => {
      let style = {}
      if (component.component == 'Group') {
          component.propValue.forEach(item => {
              const rectInfo = $(`#component${item.id}`).getBoundingClientRect()
              style.left = rectInfo.left - this.editorX
              style.top = rectInfo.top - this.editorY
              style.right = rectInfo.right - this.editorX
              style.bottom = rectInfo.bottom - this.editorY

              if (style.left < left) left = style.left
              if (style.top < top) top = style.top
              if (style.right > right) right = style.right
              if (style.bottom > bottom) bottom = style.bottom
          })
      } else {
          style = getComponentRotatedStyle(component.style)
      }

      if (style.left < left) left = style.left
      if (style.top < top) top = style.top
      if (style.right > right) right = style.right
      if (style.bottom > bottom) bottom = style.bottom
  })

  this.start.x = left
  this.start.y = top
  this.width = right - left
  this.height = bottom - top

  // Set displacement and size information for the selected area and the component data within the area
  this.$store.commit('setAreaData', {
      style: {
          left,
          top,
          width: this.width,
          height: this.height,
      },
      components: areaData,
  })
},

getSelectArea() {
    const result = []
    // Area starting coordinates
    const { x, y } = this.start
    // Calculate all component data, determine if they are in the selected area
    this.componentData.forEach(component => {
        if (component.isLock) return
        const { left, top, width, height } = component.style
        if (x <= left && y <= top && (left + width <= x + this.width) && (top + height <= y + this.height)) {
            result.push(component)
        }
    })

    // Return all components in the selected area
    return result
}

Let me briefly describe the processing logic of this code:

Use the getBoundingClientRect() browser API to get information about each component in four directions relative to the browser viewport, which are left top right bottom.
Compare these four pieces of information for each component to obtain the leftmost, topmost, rightmost, and bottommost values, thereby deriving a minimum area that can contain all components in the region.
If there is already a Group component in the selected area, we need to calculate its child components rather than calculating the combined component.

Movement and rotation after combination

To facilitate moving, rotating, scaling, and other operations on multiple components together, I created a new Group combined component:

The purpose of the Group component is to put the components in the area under it, making them child components. And when creating a Group component, get the relative displacement and relative size of each child component within the Group component:

This is converting the child component's left top width height properties into relative values ending with %.

If we use absolute values, then when moving the Group component, in addition to calculating the properties of the Group component, we would also need to calculate each of its child components. And if the Group contains too many child components, the calculation load would be very large when moving or scaling, possibly causing page lag. If we change to relative values, we only need to calculate once when the Group is created. Then when the Group component is moved or rotated, we don't need to worry about the child components of the Group, we just calculate it itself.

Scaling after combination

Scaling after combination is a big problem, mainly due to the presence of rotation angles. First, let's look at scaling when the child components are not rotated:

From the animation, we can see that the effect is perfect. The size of each child component changes with the size of the Group component.

Now let's try adding rotation angles to the child components and see the effect:

The main reason is that regardless of whether a component is rotated or not, its top left properties remain unchanged. This creates a problem: although the component's top left width height properties haven't changed, they appear to have changed in appearance. Below are two identical components: one is not rotated, and the other is rotated 45 degrees.

As you can see, the top left width height properties of the rotated button are different from what we see in appearance.

Above is a Group component, and the properties of its child component on the left are:

We can see that the value of width is 51.2267%, but from appearance, this child component takes up at most one-third of the width of the Group component. So this is the problem with abnormal scaling.

An unworkable solution (feel free to skip)

Initially, I thought of first calculating its top left width height properties relative to the browser viewport, then calculating the relative values of these properties on the Group component. This can be done using the getBoundingClientRect() API. As long as the proportion of each property in appearance remains unchanged, when the Group component is scaled, the rotation angle can be used, along with knowledge of rotation matrices (this is described in detail in the second article), to obtain its top left width height properties before rotation. This way, dynamic adjustment of child components can be achieved.

But there's a problem: the getBoundingClientRect() API can only get the appearance-based top left right bottom width height properties of a component. Adding an angle still leaves us with insufficient parameters, so we can't calculate the actual top left width height properties of a component.

As shown in the image above, knowing only the origin O(x,y), w, h, and the rotation angle, we cannot calculate the width and height of the button.

A workable solution

I discovered this by chance. When scaling the Group component, I found that as long as the width-to-height ratio of the Group component is maintained, the child components can be scaled proportionally. So now the problem becomes how to maintain the width-to-height ratio when scaling the Group component. I found this article online, which describes in detail how to maintain the width-to-height ratio when scaling a rotated component, complete with source code examples.

Now I'll try to briefly describe how to maintain the width-to-height ratio when scaling a rotated component (I recommend reading the original article). Below is a rectangle that has been rotated by a certain angle. Suppose we are now dragging its top-left point to stretch it.

First step, calculate the component's width-to-height ratio, and calculate the component's center point when the mouse is pressed based on the component's coordinates (regardless of how many degrees it rotates, the component's top left properties remain unchanged) and size:

Second step, use the current click coordinates and the component's center point to calculate the symmetric point coordinates of the current click coordinates:

Third step, when holding the top-left corner of the component to stretch it, calculate the new component center point using the current mouse real-time coordinates and symmetric point:

Since the component is in a rotated state, even if you know the xy distance moved during stretching, you cannot directly calculate the component. Otherwise, bugs will occur, such as misalignment or incorrect scaling direction. Therefore, we need to calculate it in the case where the component is not rotated.

Fourth step, based on the known rotation angle, new component center point, and current mouse real-time coordinates, we can calculate the coordinates newTopLeftPoint of the current mouse real-time coordinates currentPosition when not rotated. At the same time, we can also calculate the coordinates newBottomRightPoint of the component symmetric point sPoint when not rotated based on the known rotation angle, new component center point, and symmetric point.

The above formula involves knowledge of rotation matrices in linear algebra, which is really difficult for someone who hasn't gone to university. Fortunately, I found the reasoning process for this formula from an answer on Zhihu. Here is the original text of the answer:

Through the above calculated values, we can get the component's new displacement values top left and new component size. The corresponding complete code is as follows:

Fifth step, since we now need to scale with a locked width-to-height ratio, we need to recalculate the coordinates of the top-left corner of the stretched figure.

After calculating the component's newTopLeftPoint newBottomRightPoint newWidth newHeight before rotation in the fourth step, we need to calculate the new width or height based on the width-to-height ratio proportion.

The above image is an example of needing to change the height, with the calculation process as follows:

Since we are now calculating the coordinates before rotation based on the coordinates before reducing width and height according to proportion, after reducing width and height, we need to rotate back according to the original center point to get the coordinates corresponding to reducing width and height and rotating back. Then use this coordinate and the symmetric point to get a new center point, and recalculate the coordinates before rotation.

The effect of scaling while maintaining the width-to-height ratio is as follows:

When the Group component has rotated child components, it needs to maintain the width-to-height ratio when scaling. So when creating a Group component, you can check if the child components have rotation angles. If not, you don't need to maintain the width-to-height ratio when scaling.

Restoring child component styles after splitting

Combining multiple components together is just the first step. The second step is to split the Group component and restore the styles of each child component. This ensures that the child components' appearance attributes remain unchanged after splitting.

19. Text component

The VText text component was implemented before, but it wasn't perfect. For example, it couldn't select text. Now I've rewritten it to support the selection function.

20. Rectangle component

The rectangle component is actually a DIV with an embedded VText text component.

It has all the functionality of the VText text component and can be resized arbitrarily.

21. Lock component

I implemented the lock component feature mainly because I saw that processon and Modao have this feature. The specific requirements for locking a component are: it cannot be moved, scaled, rotated, copied, pasted, etc., only unlocking operations can be performed.