| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345 |
- import {
- setSnapped,
- isSnapped
- } from '../snapping/SnapUtil';
- import { isCmd } from '../keyboard/KeyboardUtil';
- import {
- assign,
- isNumber
- } from 'min-dash';
- import {
- SPACING,
- quantize
- } from './GridUtil';
- var LOWER_PRIORITY = 1200;
- var LOW_PRIORITY = 800;
- /**
- * Basic grid snapping that covers connecting, creating, moving, resizing shapes, moving bendpoints
- * and connection segments.
- */
- export default function GridSnapping(elementRegistry, eventBus, config) {
- var active = !config || config.active !== false;
- this._eventBus = eventBus;
- var self = this;
- eventBus.on('diagram.init', LOW_PRIORITY, function() {
- self.setActive(active);
- });
- eventBus.on([
- 'create.move',
- 'create.end',
- 'bendpoint.move.move',
- 'bendpoint.move.end',
- 'connect.move',
- 'connect.end',
- 'connectionSegment.move.move',
- 'connectionSegment.move.end',
- 'resize.move',
- 'resize.end',
- 'shape.move.move',
- 'shape.move.end'
- ], LOWER_PRIORITY, function(event) {
- var originalEvent = event.originalEvent;
- if (!self.active || (originalEvent && isCmd(originalEvent))) {
- return;
- }
- var context = event.context,
- gridSnappingContext = context.gridSnappingContext;
- if (!gridSnappingContext) {
- gridSnappingContext = context.gridSnappingContext = {};
- }
- [ 'x', 'y' ].forEach(function(axis) {
- var options = {};
- // allow snapping with offset
- var snapOffset = getSnapOffset(event, axis, elementRegistry);
- if (snapOffset) {
- options.offset = snapOffset;
- }
- // allow snapping with min and max
- var snapConstraints = getSnapConstraints(event, axis);
- if (snapConstraints) {
- assign(options, snapConstraints);
- }
- if (!isSnapped(event, axis)) {
- self.snapEvent(event, axis, options);
- }
- });
- });
- }
- /**
- * Snap an events x or y with optional min, max and offset.
- *
- * @param {Object} event
- * @param {string} axis
- * @param {number} [options.min]
- * @param {number} [options.max]
- * @param {number} [options.offset]
- */
- GridSnapping.prototype.snapEvent = function(event, axis, options) {
- var snappedValue = this.snapValue(event[ axis ], options);
- setSnapped(event, axis, snappedValue);
- };
- /**
- * Expose grid spacing for third parties (i.e. extensions).
- *
- * @return {number} spacing of grid dots
- */
- GridSnapping.prototype.getGridSpacing = function() {
- return SPACING;
- };
- /**
- * Snap value with optional min, max and offset.
- *
- * @param {number} value
- * @param {Object} options
- * @param {number} [options.min]
- * @param {number} [options.max]
- * @param {number} [options.offset]
- */
- GridSnapping.prototype.snapValue = function(value, options) {
- var offset = 0;
- if (options && options.offset) {
- offset = options.offset;
- }
- value += offset;
- value = quantize(value, SPACING);
- var min, max;
- if (options && options.min) {
- min = options.min;
- if (isNumber(min)) {
- min = quantize(min + offset, SPACING, 'ceil');
- value = Math.max(value, min);
- }
- }
- if (options && options.max) {
- max = options.max;
- if (isNumber(max)) {
- max = quantize(max + offset, SPACING, 'floor');
- value = Math.min(value, max);
- }
- }
- value -= offset;
- return value;
- };
- GridSnapping.prototype.isActive = function() {
- return this.active;
- };
- GridSnapping.prototype.setActive = function(active) {
- this.active = active;
- this._eventBus.fire('gridSnapping.toggle', { active: active });
- };
- GridSnapping.prototype.toggleActive = function() {
- this.setActive(!this.active);
- };
- GridSnapping.$inject = [
- 'elementRegistry',
- 'eventBus',
- 'config.gridSnapping'
- ];
- // helpers //////////
- /**
- * Get minimum and maximum snap constraints.
- * Constraints are cached.
- *
- * @param {Object} event
- * @param {Object} event.context
- * @param {string} axis
- *
- * @returns {boolean|Object}
- */
- function getSnapConstraints(event, axis) {
- var context = event.context,
- createConstraints = context.createConstraints,
- resizeConstraints = context.resizeConstraints || {},
- gridSnappingContext = context.gridSnappingContext,
- snapConstraints = gridSnappingContext.snapConstraints;
- // cache snap constraints
- if (snapConstraints && snapConstraints[ axis ]) {
- return snapConstraints[ axis ];
- }
- if (!snapConstraints) {
- snapConstraints = gridSnappingContext.snapConstraints = {};
- }
- if (!snapConstraints[ axis ]) {
- snapConstraints[ axis ] = {};
- }
- var direction = context.direction;
- // create
- if (createConstraints) {
- if (isHorizontal(axis)) {
- snapConstraints.x.min = createConstraints.left;
- snapConstraints.x.max = createConstraints.right;
- } else {
- snapConstraints.y.min = createConstraints.top;
- snapConstraints.y.max = createConstraints.bottom;
- }
- }
- // resize
- var minResizeConstraints = resizeConstraints.min,
- maxResizeConstraints = resizeConstraints.max;
- if (minResizeConstraints) {
- if (isHorizontal(axis)) {
- if (isWest(direction)) {
- snapConstraints.x.max = minResizeConstraints.left;
- } else {
- snapConstraints.x.min = minResizeConstraints.right;
- }
- } else {
- if (isNorth(direction)) {
- snapConstraints.y.max = minResizeConstraints.top;
- } else {
- snapConstraints.y.min = minResizeConstraints.bottom;
- }
- }
- }
- if (maxResizeConstraints) {
- if (isHorizontal(axis)) {
- if (isWest(direction)) {
- snapConstraints.x.min = maxResizeConstraints.left;
- } else {
- snapConstraints.x.max = maxResizeConstraints.right;
- }
- } else {
- if (isNorth(direction)) {
- snapConstraints.y.min = maxResizeConstraints.top;
- } else {
- snapConstraints.y.max = maxResizeConstraints.bottom;
- }
- }
- }
- return snapConstraints[ axis ];
- }
- /**
- * Get snap offset.
- * Offset is cached.
- *
- * @param {Object} event
- * @param {string} axis
- * @param {ElementRegistry} elementRegistry
- *
- * @returns {number}
- */
- function getSnapOffset(event, axis, elementRegistry) {
- var context = event.context,
- shape = event.shape,
- gridSnappingContext = context.gridSnappingContext,
- snapLocation = gridSnappingContext.snapLocation,
- snapOffset = gridSnappingContext.snapOffset;
- // cache snap offset
- if (snapOffset && isNumber(snapOffset[ axis ])) {
- return snapOffset[ axis ];
- }
- if (!snapOffset) {
- snapOffset = gridSnappingContext.snapOffset = {};
- }
- if (!isNumber(snapOffset[ axis ])) {
- snapOffset[ axis ] = 0;
- }
- if (!shape) {
- return snapOffset[ axis ];
- }
- if (!elementRegistry.get(shape.id)) {
- if (isHorizontal(axis)) {
- snapOffset[ axis ] += shape[ axis ] + shape.width / 2;
- } else {
- snapOffset[ axis ] += shape[ axis ] + shape.height / 2;
- }
- }
- if (!snapLocation) {
- return snapOffset[ axis ];
- }
- if (axis === 'x') {
- if (/left/.test(snapLocation)) {
- snapOffset[ axis ] -= shape.width / 2;
- } else if (/right/.test(snapLocation)) {
- snapOffset[ axis ] += shape.width / 2;
- }
- } else {
- if (/top/.test(snapLocation)) {
- snapOffset[ axis ] -= shape.height / 2;
- } else if (/bottom/.test(snapLocation)) {
- snapOffset[ axis ] += shape.height / 2;
- }
- }
- return snapOffset[ axis ];
- }
- function isHorizontal(axis) {
- return axis === 'x';
- }
- function isNorth(direction) {
- return direction.indexOf('n') !== -1;
- }
- function isWest(direction) {
- return direction.indexOf('w') !== -1;
- }
|