pathfinder/js/app/map/magnetizing.js

/**
 * Map "magnetizing" feature
 * jsPlumb extension used: http://morrisonpitt.com/farahey/
 */

define([
    'jquery',
    'app/map/util',
    'farahey'
], function($, MapUtil) {

    'use strict';

    /**
     * Cached current "Magnetizer" object
     * @type {Magnetizer}
     */
    let m8 = null;

    /**
     * init a jsPlumb (map) Element for "magnetised" function.
     * this is optional and prevents systems from being overlapped
     */
    $.fn.initMagnetizer = function(){
        let mapContainer = this;
        let systems = mapContainer.getSystems();

        /**
         * helper function
         * get current system offset
         * @param system
         * @returns {{left, top}}
         * @private
         */
        let _offset = function(system) {

            let _ = function(p) {
                let v = system.style[p];
                return parseInt(v.substring(0, v.length - 2));
            };

            return {
                left:_('left'),
                top:_('top')
            };
        };

        /**
         * helper function
         * set new system offset
         * @param system
         * @param o
         * @private
         */
        let _setOffset = function(system, o) {
            let markAsUpdated = false;

            // new position must be within parent container
            // no negative offset!
            if(
                o.left >= 0 &&
                o.left <= 2300
            ){
                markAsUpdated = true;
                system.style.left = o.left + 'px';
            }

            if(
                o.top >= 0 &&
                o.top <= 498
            ){
                markAsUpdated = true;
                system.style.top = o.top + 'px';
            }

            if(markAsUpdated === true){
                $(system).markAsChanged();
            }
        };

        /**
         * helper function
         * exclude current dragged element(s) from position update
         * @param id
         * @returns {boolean}
         * @private
         */
        let _dragFilter = function(id) {
            return !$('#' + id).is('.jsPlumb_dragged, .pf-system-locked');
        };

        let gridConstrain = function(gridX, gridY) {
            return function(id, current, delta) {
                if( mapContainer.hasClass(MapUtil.config.mapGridClass) ){
                    // active grid
                    return {
                        left:(gridX * Math.floor( (current[0] + delta.left) / gridX )) - current[0],
                        top:(gridY * Math.floor( (current[1] + delta.top) / gridY )) - current[1]
                    };
                }else{
                    // no grid
                    return delta;
                }
            };
        };

        // main init for "magnetize" feature ------------------------------------------------------
        m8 = new Magnetizer({
            container: mapContainer,
            getContainerPosition: function(c) {
                return c.offset();
            },
            getPosition:_offset,
            getSize: function(system) {
                return [ $(system).outerWidth(), $(system).outerHeight() ];
            },
            getId : function(system) {
                return $(system).attr('id');
            },
            setPosition:_setOffset,
            elements: systems,
            filter: _dragFilter,
            padding: [6, 6],
            constrain: gridConstrain(MapUtil.config.mapSnapToGridDimension, MapUtil.config.mapSnapToGridDimension)
        });
    };

    $.fn.destroyMagnetizer = function(){
        let mapContainer = this;

        // remove cached "magnetizer" instance
        m8 = null;
    };

    /**
     * update system positions for "all" systems that are effected by drag&drop
     * @param map
     * @param e
     */
    let executeAtEvent = function(map, e){
        if(m8 !== null && e ){
            m8.executeAtEvent(e);
            map.repaintEverything();
        }
    };

    /**
     * rearrange all systems of a map
     * needs "magnetization" to be active
     * @param map
     */
    let executeAtCenter = function(map){
        if(m8 !== null){
            m8.executeAtCenter();
            map.repaintEverything();
        }
    };

    /**
     * set/update elements for "magnetization"
     * -> (e.g. new systems was added)
     * @param map
     */
    let setElements = function(map){
        if(m8 !== null){
            let mapContainer = $(map.getContainer());
            let systems = mapContainer.getSystems();
            m8.setElements(systems);

            // re-arrange systems
            executeAtCenter(map);
        }
    };

    return {
        executeAtCenter: executeAtCenter,
        executeAtEvent: executeAtEvent,
        setElements: setElements
    };
});