Release/v1.2.0

ipc.js

@@ -4,12 +4,12 @@ const fs = require('fs');
 module.exports = function(win) {
 
     ipcMain.on('toggle_fullscreen', function(event, arg) {
-        console.log('toggle_fullscreen');
+        console.log('Event received: toggle_fullscreen');
         win.setFullScreen(!win.isFullScreen());
     });
 
     ipcMain.on('toggle_devtools', function(event, arg) {
-        console.log('toggle_devtools');
+        console.log('Event received: toggle_devtools');
         win.toggleDevTools();
     });
 

main.js

@@ -8,5 +8,18 @@ let win;
 
 app.on('ready', function() {
     win = window('index.html');
+    win.on('closed', function() {
+        console.log('Window closed');
+        win = null;
+    });
     ipc_setup(win);
+    console.log('Application started');
+});
+
+app.on('window-all-closed', function() {
+    console.log('Application windows closed');
+    if(process.platform !== 'darwin') {
+        console.log('Application exited');    
+        app.quit();
+    }
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "corkboard",
   "productName": "Corkboard",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Sticky Notes & Pictures",
   "main": "main.js",
   "scripts": {

state/action_types.js

@@ -4,6 +4,9 @@ export const A_LOAD_STATE = 'load_state';
 // App
 export const A_APP_OBSERVE_Z = 'app_observe_z';
 export const A_APP_TOGGLE_GODMODE = 'app_toggle_godmode';
+export const A_APP_ZOOM_RESET = 'app_zoom_reset';
+export const A_APP_ZOOM_IN = 'app_zoom_in';
+export const A_APP_ZOOM_OUT = 'app_zoom_out';
 
 // Sticky Store
 export const A_STICKY_EDIT_CONTENT = 'sticky_edit_content';

state/app/actions.js

@@ -1,11 +1,15 @@
 import { 
     A_APP_OBSERVE_Z,
-    A_APP_TOGGLE_GODMODE
+    A_APP_TOGGLE_GODMODE,
+    A_APP_ZOOM_IN,
+    A_APP_ZOOM_OUT,
+    A_APP_ZOOM_RESET
 } from '../action_types';
 
 import { 
     M_APP_OBSERVE_Z,
-    M_APP_TOGGLE_GODMODE
+    M_APP_TOGGLE_GODMODE,
+    M_APP_ZOOM_SET
 } from '../mutation_types';
 
 export default {
@@ -14,5 +18,14 @@ export default {
     },
     [A_APP_OBSERVE_Z]: function(context, z) {
         context.commit(M_APP_OBSERVE_Z, z);
+    },
+    [A_APP_ZOOM_IN]: function(context) {
+        context.commit(M_APP_ZOOM_SET, context.getters.zoom_factor + 0.1);
+    },
+    [A_APP_ZOOM_OUT]: function(context) {
+        context.commit(M_APP_ZOOM_SET, context.getters.zoom_factor - 0.1);
+    },
+    [A_APP_ZOOM_RESET]: function(context) {
+        context.commit(M_APP_ZOOM_SET, 1);
     }
 }

state/app/getters.js

@@ -1,5 +1,8 @@
 export default {
     maxZ: function(state) {
         return state.maxZ;
+    },
+    zoom_factor: function(state) {
+        return state.zoom_factor;
     }
 }

state/app/mutations.js

@@ -1,6 +1,9 @@
+var { webFrame } = require('electron');
+
 import { 
     M_APP_OBSERVE_Z,
-    M_APP_TOGGLE_GODMODE
+    M_APP_TOGGLE_GODMODE,
+    M_APP_ZOOM_SET
 } from '../mutation_types';
 
 export default {
@@ -9,5 +12,12 @@ export default {
     },
     [M_APP_OBSERVE_Z]: function(state, z) {
         state.maxZ = Math.max(state.maxZ, z);
+    },
+    [M_APP_ZOOM_SET]: function(state, f) {
+        f = Math.min(f, 2);
+        f = Math.max(f, 0.5);
+        state.zoom_factor = f;
+        webFrame.setZoomFactor(f);
+        localStorage.setItem('zoom_factor', f);
     }
 }

state/app/state.js

@@ -1,4 +1,10 @@
+const { webFrame } = require('electron');
+
+var f = +localStorage.getItem('zoom_factor') || 1;
+webFrame.setZoomFactor(f);
+
 export default {
     godmode: false,
-    maxZ: 0
+    maxZ: 0,
+    zoom_factor: f
 }

state/mutation_types.js

@@ -1,6 +1,7 @@
 // App
 export const M_APP_OBSERVE_Z = 'app_observe_z';
 export const M_APP_TOGGLE_GODMODE = 'app_toggle_godmode';
+export const M_APP_ZOOM_SET = 'app_zoom_set';
 
 // Sticky Store
 export const M_STICKY_LOAD = 'sticky_load';

view/corkboard.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="corkboard">
+<div class="corkboard" @mousedown="corkboard_mousedown">
     <corkboard-toolbar />
     <sticky v-for="(sticky, index) in stickies" :key=index :item-id="index" />
     <polaroid v-for="(polaroid, index) in polaroids" :key=index :item-id="index" />
@@ -19,6 +19,37 @@ export default {
         'sticky': sticky,
         'polaroid': polaroid
     },
+    methods: {
+        corkboard_mousedown: function (e) {
+            e = e || window.event;
+            if(e.target == this.$el) {
+                e.preventDefault();
+
+                var startX = e.clientX;
+                var startY = e.clientY;
+
+                document.onmouseup = function() {
+                    document.onmouseup = null;
+                    document.onmousemove = null;
+                }
+
+                document.onmousemove = function(e) {
+                    e = e || window.event;
+                    e.preventDefault();
+
+                    var x = e.clientX - startX
+                    var y = e.clientY - startY
+
+                    // console.log('moved ' + xx + ' ' + yy)
+
+                    startX = e.clientX;
+                    startY = e.clientY;
+
+                    window.scrollTo(document.body.scrollLeft - x, document.body.scrollTop-y)
+                }
+            }
+        }
+    },
     computed: {
         stickies: function() {
             return this.$store.state.stickies.items;

view/corkboard_toolbar.vue

@@ -1,15 +1,12 @@
 <template>
-<div class="toolbar-container">
-    <div class="pad"></div>
-    <div class="toolbar" :style="{ zIndex: this.z }">
-        <icon-wrapper v-if="this.godmode" icon="wrench" @click="devtools_click" />
-        <icon-wrapper icon="search_plus" @click="zoom_click($event, 0.1)" />
-        <icon-wrapper icon="search" @click="zoom_click($event, 0)" />
-        <icon-wrapper icon="search_minus" @click="zoom_click($event, -0.1)" />
-        <icon-wrapper icon="sticky_note" @click="sticky_click" />
-        <icon-wrapper icon="expand" @click="fullscreen_click" />
-        <icon-wrapper v-if="this.godmode" icon="sync" @click="refresh_click" />
-    </div>
+<div class="toolbar" :style="{ zIndex: this.z }">
+    <icon-wrapper icon="sticky_note" @click="sticky_click" />
+    <icon-wrapper icon="search_plus" @click="zoom_click($event, 'in')" />
+    <icon-wrapper icon="search" @click="zoom_click($event, 'reset')" />
+    <icon-wrapper icon="search_minus" @click="zoom_click($event, 'out')" />
+    <icon-wrapper icon="expand" @click="fullscreen_click" />
+    <icon-wrapper v-if="this.godmode" icon="wrench" @click="devtools_click" />
+    <icon-wrapper v-if="this.godmode" icon="sync" @click="refresh_click" />
 </div>
 </template>
 
@@ -18,10 +15,13 @@
 import rem_to_px from '../utils/rem_to_px';
 import icon_wrapper from './icon_wrapper.vue';
 import {
-    A_STICKY_NEW
+    A_STICKY_NEW,
+    A_APP_ZOOM_RESET,
+    A_APP_ZOOM_IN,
+    A_APP_ZOOM_OUT
 } from '../state/action_types';
 
-var { ipcRenderer, webFrame } = require('electron');
+var { ipcRenderer } = require('electron');
 
 export default {
     name: 'corkboard_toolbar',
@@ -47,13 +47,21 @@ export default {
             e.stopPropagation();
             location.reload();
         },
-        zoom_click: function(e, zoom_factor) {
+        zoom_click: function(e, mode) {
             e.preventDefault();
             e.stopPropagation();
-            if(zoom_factor == 0) {
-                webFrame.setZoomFactor(1);
-            } else {
-                webFrame.setZoomFactor(webFrame.getZoomFactor() + zoom_factor);
+            switch (mode) {
+                case 'in':
+                    this.$store.dispatch(A_APP_ZOOM_IN);
+                    break;
+                case 'out':
+                    this.$store.dispatch(A_APP_ZOOM_OUT);
+                    break;
+                case 'reset':
+                    this.$store.dispatch(A_APP_ZOOM_RESET);
+                    break;
+                default:
+                    break;
             }
         },
         fullscreen_click: function(e) {
@@ -85,6 +93,8 @@ export default {
 }
 
 .toolbar {
+    position: fixed;
+    right: 8;
     flex: 0 0 auto;
     padding: 0rem 0.33rem;
     background: rgba(33, 33, 33, 0.25);

view/polaroid.vue

@@ -11,9 +11,7 @@
     >
 
     <polaroid-toolbar :itemId="this.itemId" />
-    <div class="spacer top"></div>
     <img :src="polaroid.url">
-    <div class="spacer bottom"></div>
     <polaroid-caption :itemId="this.itemId" />
 </div>
 </template>
@@ -96,12 +94,10 @@ export default {
 
 img {
     background: #eeeeee;
-    border-bottom: 0px;
-    border-top: 0px;
     border: 1px solid #dddddd;
     flex: 0 0 auto;
     margin: 0rem 1.5rem;
-    max-height: 14rem;
+    height: 14rem;
     max-width: 14rem;
     object-fit: contain;
 }