@7polo/kityminder-core/src/module/image.js

KityMinder Core Implement

define(function(require, exports, module) {
    var kity = require('../core/kity');
    var utils = require('../core/utils');

    var Minder = require('../core/minder');
    var MinderNode = require('../core/node');
    var Command = require('../core/command');
    var Module = require('../core/module');
    var Renderer = require('../core/render');

    Module.register('image', function() {
        function loadImageSize(url, callback) {
            var img = document.createElement('img');
            img.onload = function() {
                callback(img.width, img.height);
            };
            img.onerror = function() {
                callback(null);
            };
            img.src = url;
        }

        function fitImageSize(width, height, maxWidth, maxHeight) {
            var ratio = width / height,
                fitRatio = maxWidth / maxHeight;

            // 宽高比大于最大尺寸的宽高比，以宽度为标准适应
            if (width > maxWidth && ratio > fitRatio) {
                width = maxWidth;
                height = width / ratio;
            } else if (height > maxHeight) {
                height = maxHeight;
                width = height * ratio;
            }

            return {
                width: width | 0,
                height: height | 0
            };
        }

        /**
         * @command Image
         * @description 为选中的节点添加图片
         * @param {string} url 图片的 URL，设置为 null 移除
         * @param {string} title 图片的说明
         * @state
         *   0: 当前有选中的节点
         *  -1: 当前没有选中的节点
         * @return 返回首个选中节点的图片信息，JSON 对象： `{url: url, title: title}`
         */
        var ImageCommand = kity.createClass('ImageCommand', {
            base: Command,

            execute: function(km, url, title) {
                var nodes = km.getSelectedNodes();

                loadImageSize(url, function(width, height) {
                    nodes.forEach(function(n) {
                        var size = fitImageSize(
                            width, height,
                            km.getOption('maxImageWidth'),
                            km.getOption('maxImageHeight'));
                        n.setData('image', url);
                        n.setData('imageTitle', url && title);
                        n.setData('imageSize', url && size);
                        n.render();
                    });
                    km.fire('saveScene');
                    km.layout(300);
                });

            },
            queryState: function(km) {
                var nodes = km.getSelectedNodes(),
                    result = 0;
                if (nodes.length === 0) {
                    return -1;
                }
                nodes.forEach(function(n) {
                    if (n && n.getData('image')) {
                        result = 0;
                        return false;
                    }
                });
                return result;
            },
            queryValue: function(km) {
                var node = km.getSelectedNode();
                return {
                    url: node.getData('image'),
                    title: node.getData('imageTitle')
                };
            }
        });

        var ImageRenderer = kity.createClass('ImageRenderer', {
            base: Renderer,

            create: function(node) {
                return new kity.Image(node.getData('image'));
            },

            shouldRender: function(node) {
                return node.getData('image');
            },

            update: function(image, node, box) {
                var url = node.getData('image');
                var title = node.getData('imageTitle');
                var size = node.getData('imageSize');
                var spaceTop = node.getStyle('space-top');

                if (!size) return;

                if (title) {
                    image.node.setAttributeNS('http://www.w3.org/1999/xlink', 'title', title);
                }

                var x = box.cx - size.width / 2;
                var y = box.y - size.height - spaceTop;

                image
                    .setUrl(url)
                    .setX(x | 0)
                    .setY(y | 0)
                    .setWidth(size.width | 0)
                    .setHeight(size.height | 0);

                return new kity.Box(x | 0, y | 0, size.width | 0, size.height | 0);
            }
        });

        return {
            'defaultOptions': {
                'maxImageWidth': 200,
                'maxImageHeight': 200
            },
            'commands': {
                'image': ImageCommand
            },
            'renderers': {
                'top': ImageRenderer
            }
        };
    });
});