2021SC@SDUSC

overview

Last time we discussed lines in the geometric sense, we will discuss the files under the graphic package. There are several folders, such as drag, gradient, line, link, shape and transform, which represent different image operations. Next, we will mainly learn the js content in these packages.

graphic package

drag package

There are two main files in this package, DragDropMgr js and draggable js file, where DragDropMgr is the global drag manager, which supports dragging multiple elements at the same time. You can select multiple elements by pressing and holding the Ctrl key; Another js file specifically implements the drag function. All elements requiring the drag function can be implemented by mixin. This implementation depends on the event processing mechanism we talked about earlier. The implemented class of mixin needs to pre implement the default implementation of mixin eventful interface to provide event support. Let's discuss these two classes in detail separately.

DragDropMgr.js

This is a tool class. As a global drag manager, this class mainly has the functions of constructor, set listening, stop listening, start dragging, in the process of dragging, drag end, clear selection, and obtain all currently selected elements. Below, we mainly analyze the key information.

startListen

The main purpose of starting listening is to bind the mouse to listen and trigger events by pressing the mouse. Specifically, the following code is used: bind the mousedown event.

  startListen() {
    this.dispatcher.on('mousedown', this.dragStart, this);
    return this;
  }

stopListen

This function is mainly used to stop listening. This function is mainly used to delete all listening and return all to 0, as shown below

  stopListen() {
    this.clearSelectionMap();
    this._draggingItem = null;
    this._dropTarget = null;
    this._x = 0;
    this._y = 0;

    this.dispatcher.off('mousedown', this.dragStart, this);
    this.dispatcher.off('pagemousemove', this.dragging, this);
    this.dispatcher.off('pagemouseup', this.dragEnd, this);
    return this;
  }

The main purpose of this function is to release mousedown monitoring, pagemousemove monitoring and pagemouseup monitoring, and then return the released object.

dragStart,draging,dragEnd

These three functions occur in a cycle, respectively at the beginning, during and at the end of drag. At the beginning of dragging, first bind the event to the object, first judge whether the event is dispatched, then judge the event, judge whether to press Ctrl and select elements, then select them to determine their coordinates respectively, then bind pagemousemove and pagemouseup, and then traverse all dispatcher s through a loop, Dispatch to the corresponding task event.

dragStart(e) {
    let el = e.target;
    let event = e.event;
    this._draggingItem = el;

    if (!el) {
      this.clearSelectionMap();
      return;
    }

    if (!el.draggable) {
      return;
    }

    if (!event.ctrlKey && !this.selectionMap.get(el.id)) {
      this.clearSelectionMap();
    }
    el.dragging = true;
    this.selectionMap.set(el.id, el);

    this._x = e.offsetX;
    this._y = e.offsetY;
    this.dispatcher.on('pagemousemove', this.dragging, this);
    this.dispatcher.on('pagemouseup', this.dragEnd, this);

    this.selectionMap.forEach(el => {
      this.dispatcher.dispatchToElement(this.normalizeParam(el, e), 'dragstart', e.event);
    });
  }

Then, there is nothing in the dragging process. It is mainly to determine the current location information, bind the mouse position and reassign it to the current dragged object. Pay attention to always judge whether the draggingTtem Book fragrance of the current object is the same as the current dispatcher, and then conduct the event distribution agent of the dispatcher of the current object, Distribute events to elements drawn in canvas. In this way, real-time drag and drop operation is realized.

The last step is to finish dragging. This process is simpler. It is mainly to release pagemousemove and pagemouseup, and then judge that the current dispatcher binds an event distribution agent to distribute the events to the elements drawn in canvas.

  dragEnd(e) {
    this.selectionMap.forEach(el => {
      el.dragging = false;
      this.dispatcher.dispatchToElement(this.normalizeParam(el, e), 'dragend', e.event);
    });
    this.dispatcher.off('pagemousemove', this.dragging, this);
    this.dispatcher.off('pagemouseup', this.dragEnd, this);

    if (this._dropTarget) {
      this.dispatcher.dispatchToElement(this.normalizeParam(this._dropTarget, e), 'drop', e.event);
    }

    this._dropTarget = null;
  }

dragDropMgr summary

This js is mainly a global drag manager, which handles drag in general, including the processing of events such as start listening, stop listening, start dragging, dragging in progress and end dragging, so as to roughly realize global drag.

Draggable.js

This file mainly provides drag and drop function. All that need to be dragged can be mixed into the implementation of this class, which implements the dependent event mechanism. The most important one is the move method.

In this method, the main purpose is to move the element, obtain the x, y coordinates and events of the element, then match whether it is horizontal or vertical, then assign values to x and y, and then this trigger('moving', this); The move event is triggered when the position attribute is animated. this.dirty(); Mark the element as dirty, then update the data, trigger the afterMove event, and call the afterMove function. This function is equivalent to a hook function, which is mainly executed after the element is moved. Similar to Vue Hooks in the vm lifecycle in JS.

summary

Above, we mainly analyze the two js files in Drag, which are mainly designed to realize the Drag function. We analyze and process them from their key methods, and then these contents are related to the event part. After understanding the event processing, our understanding of this part of the content is clearer and the analysis is easier.