nwm

<!DOCTYPE html> <html> <head> <title>nwm.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> nwm.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <pre><code>nwm.js (c) 2011 Mikito Takada nwm is freely distributable under the MIT license. Portions of nwm are inspired or borrowed from dwm. </code></pre> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>Modules</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> Native extension </td> <td class="code"> <div class="highlight"><pre>var X11wm = require('./build/default/nwm.node').NodeWM; var Collection = require('./lib/collection.js'); var Monitor = require('./lib/monitor.js'); var Window = require('./lib/window.js');</pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <h2>Node Window Manager</h2> </td> <td class="code"> <div class="highlight"><pre>var NWM = function(binding) {</pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> A reference to the nwm C++ X11 binding </td> <td class="code"> <div class="highlight"><pre> this.wm = (binding ? binding : new X11wm());</pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> Known layous </td> <td class="code"> <div class="highlight"><pre> this.layouts = {};</pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> Keyboard shortcut lookup </td> <td class="code"> <div class="highlight"><pre> this.shortcuts = [];</pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> monitors </td> <td class="code"> <div class="highlight"><pre> this.monitors = new Collection(this, 'monitor', 0);</pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> windows -- this is the global storage for windows, any other objects just store ids referring to this hash. </td> <td class="code"> <div class="highlight"><pre> this.windows = new Collection(this, 'window', 1); this.floaters = []; } require('util').inherits(NWM, require('events').EventEmitter);</pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <h2>Events</h2> </td> <td class="code"> <div class="highlight"><pre>NWM.prototype.events = {</pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <h2>Monitor events</h2> A new monitor is added </td> <td class="code"> <div class="highlight"><pre> addMonitor: function(monitor) { this.monitors.add(new Monitor(this, monitor)); this.monitors.current = monitor.id;</pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> TODO: When a monitor is added, check that the x coordinates represent a continuous space. Virtualbox incorrectly reports the starting x position even when it correctly detects the w/h of the monitor </td> <td class="code"> <div class="highlight"><pre> },</pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> A monitor is updated </td> <td class="code"> <div class="highlight"><pre> updateMonitor: function(monitor) { this.monitors.update(monitor.id, monitor); },</pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> A monitor is removed </td> <td class="code"> <div class="highlight"><pre> removeMonitor: function(id) { console.log('Remove monitor', id); this.monitors.remove(function(monitor){ return (monitor.id != id); }); },</pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <h2>Window events</h2> A new window is added </td> <td class="code"> <div class="highlight"><pre> addWindow: function(window) { if(window.id) { var monitor = this.monitors.get(this.monitors.current); window.workspace = monitor.workspaces.current;</pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> ignore monitor number from binding as windows should open on the focused monitor </td> <td class="code"> <div class="highlight"><pre> window.monitor = this.monitors.current; var current_monitor = this.monitors.get(this.monitors.current); if(current_monitor.focused_window == null) { current_monitor.focused_window = window.id; }</pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> do not add floating windows </td> <td class="code"> <div class="highlight"><pre> if(window.isfloating) { console.log('Ignoring floating window: ', window); this.floaters.push(window.id); return; } var window = new Window(this, window);</pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> windows might be placed outside the screen if the wm was terminated </td> <td class="code"> <div class="highlight"><pre> if(window.x > monitor.width || window.y > monitor.height) { window.move(1, 1); } console.log('Add window', window); this.windows.add(window); } },</pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> When a window is removed </td> <td class="code"> <div class="highlight"><pre> removeWindow: function(id) { this.windows.remove(function(window) { return (window.id != id); }); var pos = this.floaters.indexOf(id); if(pos > -1) { this.floaters = this.floaters.splice(pos, 1); } },</pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> When a window is updated This is only triggered for title and class updates, never coordinates or monitors. </td> <td class="code"> <div class="highlight"><pre> updateWindow: function(window) { if(this.windows.exists(window.id)) { var old = this.windows.get(window.id); this.windows.update(window.id, { title: window.title || old.title || '', class: window.class || old.class || '' }); } },</pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> When a window requests full screen mode </td> <td class="code"> <div class="highlight"><pre> fullscreen: function(id, status) { if(this.windows.exists(id)) { var window = this.windows.get(id); if(!this.monitors.exists(window.monitor)) {</pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> TODO handle this error, which occurs when a win was in fullscren and then the monitor was removed, then fullscreen is toggled back </td> <td class="code"> <div class="highlight"><pre> return; }</pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> use the monitor dimensions associated with the window </td> <td class="code"> <div class="highlight"><pre> var monitor = this.monitors.get(window.monitor); var workspace = monitor.workspaces.get(monitor.workspaces.current); if(status) { this.wm.moveWindow(id, monitor.x, monitor.y); this.wm.resizeWindow(id, monitor.width, monitor.height); } else { workspace.rearrange(); } } },</pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> ConfigureRequest is generated when a client window wants to change its size, stacking order or border width </td> <td class="code"> <div class="highlight"><pre> configureRequest: function(ev){ console.log('configureRequest', ev); this.wm.configureWindow(ev.id, ev.x, ev.y, ev.width, ev.height, ev.border_width, ev.above, ev.detail, ev.value_mask); return; if(ev.id && this.windows.exists(ev.id)) {</pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> Check whether the window is known (e.g. managed and not floating) Known windows should not be allowed to reconfigure themselves. They should just be send back a ConfigureNotify() with the current info </td> <td class="code"> <div class="highlight"><pre> console.log('denying configureRequest'); var window = this.windows.get(id); this.wm.notifyWindow(ev.id, window.x, window.y, window.width, window.height, ev.border_width, ev.above, ev.detail, ev.value_mask); } else { console.log('allowing configureRequest'); if(ev.id && this.floaters.indexOf(ev.id)) {</pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> If the window is floating, it should be moved and resized The size should be modifiable, but the floating window should be centered on the current monitor (or the monitor the floater is on, but we don't track that now) </td> <td class="code"> <div class="highlight"><pre> var monitor = this.currentMonitor(); ev.x = monitor.x + ev.x; ev.y = monitor.y + ev.y; if ( (ev.x + ev.width) > monitor.x + monitor.width) { ev.x = monitor.x + Math.floor(monitor.width / 2 - ev.width / 2); } if ( (ev.y + ev.heigth) > monitor.y + monitor.height) { ev.y = monitor.y + Math.floor(monitor.height / 2 - ev.height / 2); } }</pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> Unknown windows should be passed through with a XConfigureWindow() </td> <td class="code"> <div class="highlight"><pre> this.wm.configureWindow(ev.id, ev.x, ev.y, ev.width, ev.height, ev.border_width, ev.above, ev.detail, ev.value_mask); } },</pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <h2>Mouse events</h2> A mouse button has been clicked </td> <td class="code"> <div class="highlight"><pre> mouseDown: function(event) { this.wm.focusWindow(event.id); },</pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> A mouse drag is in progress </td> <td class="code"> <div class="highlight"><pre> mouseDrag: function(event) {</pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> move when drag is triggered </td> <td class="code"> <div class="highlight"><pre> var change_x = event.move_x - event.x; var change_y = event.move_y - event.y; var window = this.windows.exists(event.id) && this.windows.get(event.id); if(window) { this.wm.moveWindow(event.id, window.x+change_x, window.y+change_y); } },</pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> Mouse enters a window </td> <td class="code"> <div class="highlight"><pre> enterNotify: function(event){ if(this.windows.exists(event.id)) { var window = this.windows.get(event.id); console.log('focused monitor is ', this.monitors.current, 'focusing to', window.monitor, window.title); if(this.monitors.exists(window.monitor)) { this.monitors.get(window.monitor).focused_window = event.id; } this.wm.focusWindow(event.id); } else { console.log('WARNING got focus event for nonexistent (transient) window', event);</pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">¶</a> </div> transients need this to happen to get keyboard focus </td> <td class="code"> <div class="highlight"><pre> this.wm.focusWindow(event.id); }</pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">¶</a> </div> This event is also emitted for the root window so in any case, we want to set the current monitor based on the event coordinates </td> <td class="code"> <div class="highlight"><pre> var x = event.x_root || event.x; var y = event.y_root || event.y; console.log('Focus monitor by coordinates', x, y);</pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">¶</a> </div> go through the monitors and find a matching monitor </td> <td class="code"> <div class="highlight"><pre> var monitor_ids = Object.keys(this.monitors.items); var self = this; monitor_ids.some(function(monid) { var monitor = self.monitors.get(monid); if(monitor.inside(x, y)) { console.log('Change focused monitor: ', monid); self.monitors.current = monid; return true; // end iteration <span class="