wisemapping-frontend/packages/mindplot/lib/components/IconGroup.js

/*
 *    Copyright [2015] [wisemapping]
 *
 *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
 *   It is basically the Apache License, Version 2.0 (the "License") plus the
 *   "powered by wisemapping" text requirement on every single page;
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the license at
 *
 *       http://www.wisemapping.org/license
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 */
const web2D = require('@wismapping/web2d')
const web2d = web2D();
const Icon = require('./Icon');

const IconGroup = new Class(/**@lends IconGroup */{
    /**
     * @constructs
     * @param topicId
     * @param iconSize
     * @throws will throw an error if topicId is null or undefined
     * @throws will throw an error if iconSize is null or undefined
     */
    initialize: function (topicId, iconSize) {
        $assert($defined(topicId), "topicId can not be null");
        $assert($defined(iconSize), "iconSize can not be null");

        this._icons = [];
        this._group = new web2d.Group({
            width: 0,
            height: iconSize,
            x: 0,
            y: 0,
            coordSizeWidth: 0,
            coordSizeHeight: 100
        });
        this._removeTip = new IconGroup.RemoveTip(this._group, topicId);
        this.seIconSize(iconSize, iconSize);

        this._registerListeners();

    },

    /** */
    setPosition: function (x, y) {
        this._group.setPosition(x, y);
    },

    /** */
    getPosition: function () {
        return this._group.getPosition();
    },

    /** */
    getNativeElement: function () {
        return this._group;
    },

    /** */
    getSize: function () {
        return this._group.getSize();
    },

    /** */
    seIconSize: function (width, height) {
        this._iconSize = {width: width, height: height};
        this._resize(this._icons.length);
    },

    /**
     * @param icon the icon to be added to the icon group
     * @param {Boolean} remove
     * @throws will throw an error if icon is not defined
     */
    addIcon: function (icon, remove) {
        $defined(icon, "icon is not defined");

        icon.setGroup(this);
        this._icons.push(icon);

        // Adjust group and position ...
        this._resize(this._icons.length);
        this._positionIcon(icon, this._icons.length - 1);

        var imageShape = icon.getImage();
        this._group.append(imageShape);

        // Register event for the group ..
        if (remove) {
            this._removeTip.decorate(this._topicId, icon);
        }
    },

    _findIconFromModel: function (iconModel) {
        var result = null;
        _.each(this._icons, function (icon) {
            var elModel = icon.getModel();
            if (elModel.getId() == iconModel.getId()) {
                result = icon;
            }
        }, this);

        if (result == null) {
            throw new Error("Icon can no be found:" + iconModel.getId() + ", Icons:" + this._icons);
        }

        return result;
    },

    /** */
    removeIconByModel: function (featureModel) {
        $assert(featureModel, "featureModel can not be null");

        var icon = this._findIconFromModel(featureModel);
        this._removeIcon(icon);
    },

    _removeIcon: function (icon) {
        $assert(icon, "icon can not be null");

        this._removeTip.close(0);
        this._group.removeChild(icon.getImage());

        this._icons.erase(icon);
        this._resize(this._icons.length);
        var me = this;
        // Add all again ...
        _.each(this._icons, function (elem, i) {
            me._positionIcon(elem, i);
        });
    },

    /** */
    moveToFront: function () {
        this._group.moveToFront();
    },

    _registerListeners: function () {
        this._group.addEvent('click', function (event) {
            // Avoid node creation ...
            event.stopPropagation();

        });

        this._group.addEvent('dblclick', function (event) {
            event.stopPropagation();

        });
    },

    _resize: function (iconsLength) {
        this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height);

        var iconSize = Icon.SIZE + (IconGroup.ICON_PADDING * 2);
        this._group.setCoordSize(iconsLength * iconSize, iconSize);
    },

    _positionIcon: function (icon, order) {

        var iconSize = Icon.SIZE + (IconGroup.ICON_PADDING * 2);
        icon.getImage().setPosition(iconSize * order + IconGroup.ICON_PADDING, IconGroup.ICON_PADDING);
    }
});

/**
 * @constant
 * @type {Number}
 * @default
 */
IconGroup.ICON_PADDING = 5;

IconGroup.RemoveTip = new Class(/** @lends IconGroup.RemoveTip */{
    /**
     * @classdesc inner class of IconGroup
     * @constructs
     * @param container
     */
    initialize: function (container) {
        $assert(container, "group can not be null");
        this._fadeElem = container;
    },


    /**
     * @param topicId
     * @param icon
     * @throws will throw an error if icon is null or undefined
     */
    show: function (topicId, icon) {
        $assert(icon, 'icon can not be null');

        // Nothing to do ...
        if (this._activeIcon != icon) {
            // If there is an active icon, close it first ...
            if (this._activeIcon) {
                this.close(0);
            }

            // Now, let move the position the icon...
            var pos = icon.getPosition();

            // Register events ...
            var widget = this._buildWeb2d();
            widget.addEvent('click', function () {
                icon.remove();
            });

            var me = this;

            widget.addEvent('mouseover', function () {
                me.show(topicId, icon);
            });

            widget.addEvent('mouseout', function () {
                me.hide();
            });

            widget.setPosition(pos.x + 80, pos.y - 50);
            this._fadeElem.append(widget);

            // Setup current element ...
            this._activeIcon = icon;
            this._widget = widget;

        } else {
            clearTimeout(this._closeTimeoutId);
        }
    },

    /** */
    hide: function () {
        this.close(200);
    },

    /**
     * @param delay
     */
    close: function (delay) {

        // This is not ok, trying to close the same dialog twice ?
        if (this._closeTimeoutId) {
            clearTimeout(this._closeTimeoutId)
        }

        var me = this;
        if (this._activeIcon) {
            var widget = this._widget;
            var close = function () {
                me._activeIcon = null;
                me._fadeElem.removeChild(widget);
                me._widget = null;
                me._closeTimeoutId = null;
            };

            if (!$defined(delay) || delay == 0) {
                close();
            }
            else {
                this._closeTimeoutId = close.delay(delay);
            }
        }
    },

    _buildWeb2d: function () {
        var result = new web2d.Group({
            width: 10,
            height: 10,
            x: 0,
            y: 0,
            coordSizeWidth: 10,
            coordSizeHeight: 10
        });

        var outerRect = new web2d.Rect(0, {
            x: 0,
            y: 0,
            width: 10,
            height: 10,
            stroke: '0',
            fillColor: 'black'
        });
        result.append(outerRect);
        outerRect.setCursor('pointer');

        var innerRect = new web2d.Rect(0, {
            x: 1,
            y: 1,
            width: 8,
            height: 8,
            stroke: '1 solid white',
            fillColor: 'gray'
        });
        result.append(innerRect);

        var line = new web2d.Line({stroke: '1 solid white'});
        line.setFrom(1, 1);
        line.setTo(9, 9);
        result.append(line);

        var line2 = new web2d.Line({stroke: '1 solid white'});
        line2.setFrom(1, 9);
        line2.setTo(9, 1);
        result.append(line2);

        // Some events ...
        result.addEvent('mouseover', function () {
            innerRect.setFill('#CC0033');
        });
        result.addEvent('mouseout', function () {
            innerRect.setFill('gray');
        });

        result.setSize(50, 50);
        return result;
    },

    /**
     * @param topicId
     * @param icon
     */
    decorate: function (topicId, icon) {

        var me = this;

        if (!icon.__remove) {
            icon.addEvent('mouseover', function () {
                me.show(topicId, icon);
            });

            icon.addEvent('mouseout', function () {
                me.hide();
            });
            icon.__remove = true;
        }
    }

});

export default IconGroup;