feat(image viewer): add image viewer

src/kityminder.css

@@ -15,6 +15,79 @@
     margin: 0;
 }
 
-.km-view image{
+.km-view image {
     cursor: zoom-in;
 }
+
+.km-image-viewer {
+    position: fixed;
+    z-index: 99999;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .75);
+}
+
+.km-image-viewer .km-image-viewer-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+    white-space: nowrap;
+    overflow: auto;
+}
+
+.km-image-viewer .km-image-viewer-container::before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    width: 0;
+    font-size: 0;
+    vertical-align: middle;
+}
+
+.km-image-viewer .km-image-viewer-container img {
+    cursor: zoom-out;
+    vertical-align: middle;
+}
+
+.km-image-viewer .km-image-viewer-container img.limited {
+    cursor: zoom-in;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.km-image-viewer .km-image-viewer-toolbar {
+    z-index: 1;
+    background: rgba(0, 0, 0, .75);
+    text-align: right;
+    transition: all .25s;
+}
+
+.km-image-viewer .km-image-viewer-toolbar.hidden {
+    transform: translate(0, -100%);
+    opacity: 0;
+}
+
+.km-image-viewer .km-image-viewer-btn {
+    cursor: pointer;
+    outline: 0;
+    border: 0;
+    width: 44px;
+    height: 44px;
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjY0IiBoZWlnaHQ9Ijg4IiB2aWV3Qm94PSIwIDAgMjY0IDg4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5kZWZhdWx0LXNraW4gMjwvdGl0bGU+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Zz48cGF0aCBkPSJNNjcuMDAyIDU5LjV2My43NjhjLTYuMzA3Ljg0LTkuMTg0IDUuNzUtMTAuMDAyIDkuNzMyIDIuMjItMi44MyA1LjU2NC01LjA5OCAxMC4wMDItNS4wOThWNzEuNUw3MyA2NS41ODUgNjcuMDAyIDU5LjV6IiBpZD0iU2hhcGUiIGZpbGw9IiNmZmYiLz48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTMgMjl2LTVoMnYzaDN2MmgtNXpNMTMgMTVoNXYyaC0zdjNoLTJ2LTV6TTMxIDE1djVoLTJ2LTNoLTN2LTJoNXpNMzEgMjloLTV2LTJoM3YtM2gydjV6IiBpZD0iU2hhcGUiLz48L2c+PGcgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTYyIDI0djVoLTJ2LTNoLTN2LTJoNXpNNjIgMjBoLTV2LTJoM3YtM2gydjV6TTcwIDIwdi01aDJ2M2gzdjJoLTV6TTcwIDI0aDV2MmgtM3YzaC0ydi01eiIvPjwvZz48cGF0aCBkPSJNMjAuNTg2IDY2bC01LjY1Ni01LjY1NiAxLjQxNC0xLjQxNEwyMiA2NC41ODZsNS42NTYtNS42NTYgMS40MTQgMS40MTRMMjMuNDE0IDY2bDUuNjU2IDUuNjU2LTEuNDE0IDEuNDE0TDIyIDY3LjQxNGwtNS42NTYgNS42NTYtMS40MTQtMS40MTRMMjAuNTg2IDY2eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMTEuNzg1IDY1LjAzTDExMCA2My41bDMtMy41aC0xMHYtMmgxMGwtMy0zLjUgMS43ODUtMS40NjhMMTE3IDU5bC01LjIxNSA2LjAzeiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xNTIuMjE1IDY1LjAzTDE1NCA2My41bC0zLTMuNWgxMHYtMmgtMTBsMy0zLjUtMS43ODUtMS40NjhMMTQ3IDU5bDUuMjE1IDYuMDN6IiBmaWxsPSIjZmZmIi8+PGc+PHBhdGggaWQ9IlJlY3RhbmdsZS0xMSIgZmlsbD0iI2ZmZiIgZD0iTTE2MC45NTcgMjguNTQzbC0zLjI1LTMuMjUtMS40MTMgMS40MTQgMy4yNSAzLjI1eiIvPjxwYXRoIGQ9Ik0xNTIuNSAyN2MzLjAzOCAwIDUuNS0yLjQ2MiA1LjUtNS41cy0yLjQ2Mi01LjUtNS41LTUuNS01LjUgMi40NjItNS41IDUuNSAyLjQ2MiA1LjUgNS41IDUuNXoiIGlkPSJPdmFsLTEiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTUwIDIxaDV2MWgtNXoiLz48L2c+PGc+PHBhdGggZD0iTTExNi45NTcgMjguNTQzbC0xLjQxNCAxLjQxNC0zLjI1LTMuMjUgMS40MTQtMS40MTQgMy4yNSAzLjI1eiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMDguNSAyN2MzLjAzOCAwIDUuNS0yLjQ2MiA1LjUtNS41cy0yLjQ2Mi01LjUtNS41LTUuNS01LjUgMi40NjItNS41IDUuNSAyLjQ2MiA1LjUgNS41IDUuNXoiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTA2IDIxaDV2MWgtNXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTA5LjA0MyAxOS4wMDhsLS4wODUgNS0xLS4wMTcuMDg1LTV6Ii8+PC9nPjwvZz48L2c+PC9zdmc+);
+}
+
+.km-image-viewer .km-image-viewer-toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.km-image-viewer .km-image-viewer-close {
+    background-position: 0 -44px;
+}
\ No newline at end of file

src/kityminder.js

@@ -51,6 +51,7 @@ define(function(require, exports, module) {
     require('./module/font');
     require('./module/hyperlink');
     require('./module/image');
+    require('./module/image-viewer');
     require('./module/keynav');
     require('./module/layout');
     require('./module/node');

src/module/image-viewer.js

+define(function(require, exports, module) {
+
+    var kity = require('../core/kity');
+    var keymap = require('../core/keymap');
+
+    var Module = require('../core/module');
+    var Command = require('../core/command');
+
+    Module.register('ImageViewer', function() {
+
+        function createEl(name, classNames, children) {
+            var el = document.createElement(name);
+            addClass(el, classNames);
+            children && children.length && children.forEach(function (child) {
+                el.appendChild(child);
+            });
+            return el;
+        }
+
+        function on(el, event, handler) {
+            el.addEventListener(event, handler);
+        }
+
+        function addClass(el, classNames) {
+            classNames && classNames.split(' ').forEach(function (className) {
+                el.classList.add(className);
+            });
+        }
+
+        function removeClass(el, classNames) {
+            classNames && classNames.split(' ').forEach(function (className) {
+                el.classList.remove(className);
+            });
+        }
+
+        var ImageViewer = kity.createClass('ImageViewer', {
+            constructor: function () {
+                var btnClose = createEl('button', 'km-image-viewer-btn km-image-viewer-close');
+                var btnSource = createEl('button', 'km-image-viewer-btn km-image-viewer-source');
+                var image = this.image = createEl('img');
+                var toolbar = this.toolbar = createEl('div', 'km-image-viewer-toolbar', [btnSource, btnClose]);
+                var container = createEl('div', 'km-image-viewer-container', [image]);
+                var viewer = this.viewer = createEl('div', 'km-image-viewer', [toolbar, container]);
+                this.hotkeyHandler = this.hotkeyHandler.bind(this)
+                on(btnClose, 'click', this.close.bind(this));
+                on(btnSource, 'click', this.viewSource.bind(this));
+                on(image, 'click', this.zoomImage.bind(this));
+                on(viewer, 'contextmenu', this.toggleToolbar.bind(this));
+                on(document, 'keydown', this.hotkeyHandler);
+            },
+            dispose: function () {
+                this.close();
+                document.removeEventListener('remove', this.hotkeyHandler);
+            },
+            hotkeyHandler: function (e) {
+                if (!this.actived) {
+                    return;
+                }
+                if (e.keyCode === keymap['esc']) {
+                    this.close();
+                }
+            },
+            toggleToolbar: function (e) {
+                e && e.preventDefault();
+                this.toolbar.classList.toggle('hidden');
+            },
+            zoomImage: function (restore) {
+                var image = this.image;
+                if (typeof restore === 'boolean') {
+                    restore && addClass(image, 'limited');
+                }
+                else {
+                    image.classList.toggle('limited');
+                }
+            },
+            viewSource: function (src) {
+                window.open(this.image.src);
+            },
+            open: function (src) {
+                var input = document.querySelector('input');
+                if (input) {
+                    input.focus();
+                    input.blur();
+                }
+                this.image.src = src;
+                this.zoomImage(true);
+                document.body.appendChild(this.viewer);
+                this.actived = true;
+            },
+            close: function () {
+                this.image.src = '';
+                document.body.removeChild(this.viewer);
+                this.actived = false;
+            }
+        });
+
+        return {
+            init: function() {
+                this.viewer = new ImageViewer();
+            },
+            events: {
+                'normal.dblclick': function(e) {
+                    var shape = e.kityEvent.targetShape
+                    if (shape.__KityClassName === 'Image' && shape.url) {
+                        this.viewer.open(shape.url);
+                    }
+                }
+            }
+        };
+    });
+});
\ No newline at end of file

src/module/image.js

@@ -117,10 +117,6 @@ define(function(require, exports, module) {
                     image.node.setAttributeNS('http://www.w3.org/1999/xlink', 'title', title);
                 }
 
-                image.node.ondblclick = function () {
-                    window.open(image.url);
-                }
-
                 var x = box.cx - size.width / 2;
                 var y = box.y - size.height - spaceTop;