1 /** 2 * The canvas container is the area in between the toolbar and the statusbar. 3 * Inside the mind map will be drawn and the floating panels are contained 4 * within this area. 5 * 6 * @constructor 7 */ 8 mindmaps.CanvasContainer = function() { 9 var self = this; 10 var $content = $("#canvas-container"); 11 12 /** 13 * @returns {jQuery} 14 */ 15 this.getContent = function() { 16 return $content; 17 }; 18 19 /** 20 * Sets the height of the canvas to fit between header and footer. 21 */ 22 this.setSize = function() { 23 var windowHeight = $(window).height(); 24 var headerHeight = $("#topbar").outerHeight(true); 25 var footerHeight = $("#bottombar").outerHeight(true); 26 var height = windowHeight - headerHeight - footerHeight; 27 $content.height(height); 28 29 var size = new mindmaps.Point($content.width(), height); 30 self.publish(mindmaps.CanvasContainer.Event.RESIZED, size); 31 }; 32 33 /** 34 * Set up the container to accept drag and drop of files from the desktop. 35 */ 36 this.acceptFileDrop = function() { 37 38 function ignore(e) { 39 e.originalEvent.stopPropagation(); 40 e.originalEvent.preventDefault(); 41 } 42 43 function handleDragOver(e) { 44 ignore(e); 45 } 46 47 function handleDrop(e) { 48 ignore(e); 49 50 var files = e.originalEvent.dataTransfer.files; 51 var file = files[0]; 52 53 var reader = new FileReader(); 54 reader.onload = function() { 55 self.receivedFileDrop(reader.result); 56 }; 57 reader.readAsText(file); 58 } 59 60 $content.bind('dragover', handleDragOver); 61 $content.bind('drop', handleDrop); 62 }; 63 64 this.init = function() { 65 // recalculate size when window is resized. 66 $(window).resize(function() { 67 self.setSize(); 68 }); 69 70 this.setSize(); 71 this.acceptFileDrop(); 72 }; 73 74 /** 75 * Callback for when a file was dropped onto the container. 76 * 77 * @event 78 * @param {String} result 79 */ 80 this.receivedFileDrop = function(result) { 81 }; 82 83 }; 84 EventEmitter.mixin(mindmaps.CanvasContainer); 85 86 /** 87 * Events fired by the container. 88 * 89 * @namespace 90 */ 91 mindmaps.CanvasContainer.Event = { 92 /** 93 * Fired when the container has been resized. 94 * 95 * @event 96 * @param {mindmaps.Point} point the new size 97 */ 98 RESIZED : "ResizedEvent" 99 }; 100 101 /** 102 * Creates a new MainViewController. The controller is responsible for creating 103 * all main ui elements. 104 * 105 * @constructor 106 * @param {mindmaps.EventBus} eventBus 107 * @param {mindmaps.MindMapModel} mindmapModel 108 * @param {mindmaps.InspectorView} view 109 */ 110 mindmaps.MainViewController = function(eventBus, mindmapModel, commandRegistry) { 111 var zoomController = new mindmaps.ZoomController(eventBus, commandRegistry); 112 var canvasContainer = new mindmaps.CanvasContainer(); 113 114 /** 115 * When a file was dropped on the canvas container try to open it. 116 */ 117 canvasContainer.receivedFileDrop = function(result) { 118 try { 119 var doc = mindmaps.Document.fromJSON(result); 120 mindmapModel.setDocument(doc); 121 } catch (e) { 122 eventBus.publish(mindmaps.Event.NOTIFICATION_ERROR, "Could not read the file."); 123 console.warn("Could not open the mind map via drag and drop."); 124 } 125 }; 126 127 this.go = function() { 128 canvasContainer.init(); 129 130 // init all presenters 131 132 // toolbar 133 var toolbar = new mindmaps.ToolBarView(); 134 var toolbarPresenter = new mindmaps.ToolBarPresenter(eventBus, 135 commandRegistry, toolbar, mindmapModel); 136 toolbarPresenter.go(); 137 138 // canvas 139 var canvas = new mindmaps.DefaultCanvasView(); 140 var canvasPresenter = new mindmaps.CanvasPresenter(eventBus, 141 commandRegistry, mindmapModel, canvas, zoomController); 142 canvasPresenter.go(); 143 144 // statusbar 145 var statusbar = new mindmaps.StatusBarView(); 146 var statusbarPresenter = new mindmaps.StatusBarPresenter(eventBus, 147 statusbar); 148 statusbarPresenter.go(); 149 150 // floating Panels 151 var fpf = new mindmaps.FloatPanelFactory(canvasContainer); 152 153 // inspector 154 var inspectorView = new mindmaps.InspectorView(); 155 var inspectorPresenter = new mindmaps.InspectorPresenter(eventBus, 156 mindmapModel, inspectorView); 157 inspectorPresenter.go(); 158 159 var inspectorPanel = fpf 160 .create("Inspector", inspectorView.getContent()); 161 inspectorPanel.show(); 162 statusbarPresenter.addEntry(inspectorPanel); 163 164 // navigator 165 var naviView = new mindmaps.NavigatorView(); 166 var naviPresenter = new mindmaps.NavigatorPresenter(eventBus, naviView, 167 canvasContainer, zoomController); 168 naviPresenter.go(); 169 170 var navigatorPanel = fpf.create("Navigator", naviView.getContent()); 171 navigatorPanel.show(); 172 statusbarPresenter.addEntry(navigatorPanel); 173 }; 174 }; 175