Merge pull request #34 from evolus/development

Beta 2 - Development

.travis.yml

@@ -6,7 +6,7 @@ dist: trusty
 
 env:
   global:
-    - NODE_VERSION=5
+    - NODE_VERSION=6
     - USE_SYSTEM_FPM=true
     - secure: E0ghqUHn8cFewr+wYJgnLSpn/e+3RPhnoLNAYMuhpGhPtpVgmlTqb7oqHHLVOjQtfDEp495tMolYeaJZaqGAC4RnEPtn664wrgoEI+FLegNV3SJx+oFF53LmT3zZnwVhbF6J3ZwF8QLYPKad5PcCqVo8SMvMMyWD5m6TzJFJ+1caNi6wJrKkQBqHtCkKOkazp0ZXwpl1SVQl24bofCZfGn7zbmRJ0+VXvfeg1GqkF1GFqkDKc2SkGQn9VUH1d2ejahWxV3dH+VPuyqUuTlPIrv7TjUU4OH9hr3mjQPtWMOnvK0BzOQKu2B9tpAUHbuT5z74TSc7TYQjDA0zQG02h1ALll0Fm+9UOYJQZMidNNiawCDXx1a0Fu+SLWNK9KX/R3FD2ip4wVKKjl/DyTy5Nnw/BsWX4UkYijW3IuegV7a0UokISD6OJqLeo+gmmNon2ngxum+Av1veB/z9c/zZanQwx+CumeqAD7eHCbxZv+bwMAFfsoC6Bv6CtTlU+uBeu7wSUyMxVzaW8qF+MbeMboG3ht12+K6Xxdp+C26eGbkQr7YlITumy5glhd4jlCAxI+DT1uZAWPnIfdOtRWUPd78ABy9G3y98ppnlqCNPbxShI3Tgtp8mTDEpM0znVnZOXcQFzrEX7r2IsGmnIuoUf77lmdpuDTYPq6KAbAOtkjCE=
 
@@ -15,8 +15,8 @@ language: c
 matrix:
   include:
     - os: linux
-      env: CC=clang CXX=clang++ npm_config_clang=1
-      compiler: clang
+      #env: CC=clang CXX=clang++ npm_config_clang=1
+      #compiler: clang
     - os: osx
 
 cache:
@@ -31,11 +31,11 @@ addons:
   apt:
     sources:
       - ubuntu-toolchain-r-test
-      - llvm-toolchain-precise-3.7
+      #- llvm-toolchain-precise-3.7
     packages:
       - libgnome-keyring-dev
       - icnsutils
-      - clang-3.7
+      #- clang-3.7
       - graphicsmagick
       - xz-utils
       - rpm
@@ -48,14 +48,12 @@ before_install:
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then git-lfs-1.2.0/git-lfs pull; fi
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install -y ruby-dev gcc make; fi
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then gem install --no-ri --no-rdoc fpm; fi
-  # https://github.com/electron-userland/electron-builder/issues/398
-  - if [[ "$TRAVIS_OS_NAME" == "osx" ]]; then security import "certs/sca.code2.crt" -k ~/Library/Keychains/login.keychain -T /usr/bin/codesign; fi
 
 install:
   - nvm install $NODE_VERSION
   - npm install npm -g
   - npm install
-  - npm install git+https://github.com/mbrainiac/electron-builder.git#v3.26.1.2
+  - npm install electron-builder@4.2.6
   - npm prune
 
 script:

ISSUE_TEMPLATE.md

@@ -0,0 +1,3 @@
+
+* Operating system:
+* Pencil version:

app/app.js

@@ -1,26 +1,24 @@
-const clipboard     = require("electron").clipboard;
+const {clipboard, remote, nativeImage, shell, ipcRenderer, webFrame} = require("electron");
+
+const _             = require("lodash");
+const rimraf        = require("rimraf");
+const QP            = require("q");
+
 const tmp           = require("tmp");
 const path          = require("path");
 const moment        = require("moment");
 const fs            = require("fs");
 const os            = require("os");
 const unzip         = require("unzip2");
-const dialog        = require("electron").remote.dialog;
-const nativeImage   = require('electron').nativeImage;
 const pkgInfo       = require("./package.json");
 const fontManager   = require("./lib/loader").fontManager;
-const ipcRenderer   = require('electron').ipcRenderer;
 const QueueHandler  = require("./pencil-core/common/QueueHandler");
-const shell         = require('electron').shell;
 const sharedUtil    = require("./pencil-core/common/shared-util");
-const _             = require("lodash");
-const rimraf        = require("rimraf");
-const QP            = require("q");
 
+const dialog        = remote.dialog;
 
 tmp.setGracefulCleanup();
 
-var webFrame = require("electron").webFrame;
 webFrame.registerURLSchemeAsPrivileged("file");
 webFrame.registerURLSchemeAsSecure("file");
 webFrame.registerURLSchemeAsBypassingCSP("file");

app/css/theme.css

@@ -30,6 +30,10 @@ button {
     display: inline-flex;
     align-items: center;
 }
+button:focus {
+    outline: dotted 1px rgba(0, 0, 0, 0.3);
+    outline-offset: -0.3em;
+}
 button[disabled] {
     background: rgba(255, 255, 255, 0.2);
     cursor: default;
@@ -54,9 +58,16 @@ button > i {
     -webkit-font-smoothing: subpixel-antialiased;
     opacity: 0.7;
 }
-button > i[rotated="true"] {
+button > i[rotated="true"],
+button > i[rotated="right"] {
     transform: rotate(90deg);
 }
+button > i[rotated="left"] {
+    transform: rotate(-90deg);
+}
+button > i[flipped="true"] {
+    transform: rotate(180deg);
+}
 button > * {
     vertical-align: middle;
 }
@@ -73,43 +84,48 @@ button[mode='icon'] {
 hbox.ButtonGroup > button {
     box-shadow: none !important;
 }
-hbox.ButtonGroup > button:first-child,
-hbox.ButtonGroup > button + button {
+hbox.ButtonGroup > *:first-child:not(:last-child),
+hbox.ButtonGroup > * + input[type]:not(:last-child),
+hbox.ButtonGroup > * + *:not(:last-child) {
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
     border-right-width: 0px;
 }
-hbox.ButtonGroup > button:first-child > i,
-hbox.ButtonGroup > button + button > i {
+hbox.ButtonGroup > *:first-child > i,
+hbox.ButtonGroup > * + * > i {
     padding-right: 1px;
 }
-hbox.ButtonGroup > button + button {
+hbox.ButtonGroup > * + input[type],
+hbox.ButtonGroup > * + button {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
     border-left-width: 0px;
 }
-hbox.ButtonGroup > button + button > i {
+hbox.ButtonGroup > * + * > i {
     padding-left: 1px;
 }
-hbox.ButtonGroup > button:last-child {
-    border-top-right-radius: 0.3ex;
-    border-bottom-right-radius: 0.3ex;
-    border-right-width: 1px;
-}
-hbox.ButtonGroup > button:last-child > i {
+hbox.ButtonGroup > *:last-child > i {
     padding-right: 0px;
 }
-hbox.ButtonGroup > button[disabled] + button:not([disabled]),
-hbox.ButtonGroup > button:not([disabled]) + button[disabled] {
+hbox.ButtonGroup > *[disabled] + *:not([disabled]),
+hbox.ButtonGroup > *:not([disabled]) + *[disabled] {
     border-left-width: 1px;
 }
-hbox.ButtonGroup > button[disabled] + button:not([disabled]) > i,
-hbox.ButtonGroup > button:not([disabled]) + button[disabled] > i {
+hbox.ButtonGroup > *[disabled] + *:not([disabled]) > i,
+hbox.ButtonGroup > *:not([disabled]) + *[disabled] > i {
     padding-left: 0px;
 }
+hbox.ButtonGroup > input[type]:not(:last-child) {
+    border-right: solid 1px rgba(0, 0, 0, 0.1); !important;
+}
+hbox.ButtonGroup > button + input[type],
+hbox.ButtonGroup > .AdoptedOrphan + * {
+    border-left: solid 1px rgba(0, 0, 0, 0.1); !important;
+}
 hbox.ButtonGroup {
     display: inline-flex;
 }
+
 button[selected='true'],
 button[checked='true'] {
     background: #C8C8C8;

app/css/variables.less

@@ -8,7 +8,7 @@
 @popup_border: darken(@app_bg, 5%);
 @toolbar_spacing: 0.4em;
 @selected_button_bg: #C8C8C8;
-
+@toolbar_gap: 0.4em;
 @iconify: {
     display: inline-block;
     line-height: 1em;

app/desktop.js

@@ -8,6 +8,7 @@ module.exports = function () {
                                 "cinamon": [{command: "dconf", params: ["read", "/org/cinnamon/desktop/interface/font-name"]},
                                             {command: "gsettings", params: ["get", "org.cinnamon.desktop.interface", "font-name"]}],
                                 "gnome": [{command: "gsettings", params: ["get", "org.gnome.desktop.interface", "font-name"]}],
+                                "ubuntu": [{command: "gsettings", params: ["get", "org.gnome.desktop.interface", "font-name"]}]
                             }
     var fontNameReader = function(registry, callback, index) {
         var child = spawn(registry.command, registry.params);
@@ -62,6 +63,9 @@ module.exports = function () {
     var platformHandlers = {
         linux: function (callback) {
             var d = process.env.DESKTOP_SESSION;
+            if (/ubuntu/ig.exec(d)) {
+                d = "ubuntu";
+            }
             var fontRegistry = fontCommandRegistry[d];
             if (!fontRegistry) {
                 console.error("Coud not found font command registry for ", d);
@@ -138,6 +142,9 @@ module.exports = function () {
                     style = RegExp.$1;
                 }
 
+                // TODO: use default fontsize
+                size = 11;
+
                 callback({
                    family: family,
                    weight: weight,

app/index.js

@@ -4,27 +4,25 @@ if (require('electron-squirrel-startup')) {
   return;
 }
 
-const electron = require("electron");
-const app      = electron.app;
-const Console  = require("console").Console;
+const {app, protocol, shell, BrowserWindow} = require("electron");
 const pkg      = require("./package.json");
 const fs       = require("fs");
 const path     = require("path");
 
 app.commandLine.appendSwitch("allow-file-access-from-files");
 app.commandLine.appendSwitch("allow-file-access");
 
-const BrowserWindow = electron.BrowserWindow;
-
+// Disable hardware acceleration by default for Linux
+// TODO: implement a setting for this one and requires a restart after changing that value
+if (process.platform.trim().toLowerCase() == "linux" && app.disableHardwareAcceleration) {
+    console.log("Hardware acceleration disabled for Linux.");
+    app.disableHardwareAcceleration();
+}
 
-// logs
-const output = fs.createWriteStream(app.getPath("userData") + "/user.log");
-const errorOutput = fs.createWriteStream(app.getPath("userData") + "/error.log");
-const logger = new Console(output, errorOutput);
 
 var handleRedirect = (e, url) => {
     e.preventDefault();
-    electron.shell.openExternal(url);
+    shell.openExternal(url);
 }
 
 var mainWindow = null;
@@ -89,9 +87,6 @@ app.on("window-all-closed", function() {
 });
 
 app.on('ready', function() {
-    var protocol = require('protocol');
-    var fs = require('fs');
-
     protocol.registerBufferProtocol("ref", function(request, callback) {
         var path = request.url.substr(6);
         console.log("PATH", path);
@@ -128,7 +123,7 @@ app.on("activate", function() {
 });
 
 process.on('uncaughtException', function (error) {
-    logger.error(error);
+    console.error(error);
 });
 
 console.log("Platform: " + process.platform.trim());

app/lib/widget/Common.js

@@ -107,7 +107,7 @@ widget.Util = function() {
                         selectors = selectors.replace(/@([a-z])/gi, ".AnonId_" + (templateName + "_") + "$1");
                     }
                     selectors = selectors.replace(/[ \r\n\t]\,[ \r\n\t]+/g, ",");
-                    if (!selectors.match(/^[ \t]*body /) && !selectors.match(/^[ \t]*@media /)) {
+                    if (!selectors.match(/^[ \t]*body[ \.\[:]/) && !selectors.match(/^[ \t]*@media /)) {
                         selectors = prefix + " " + selectors.replace(/\,/g, ",\n" + prefix + " ");
                     }
 
@@ -767,19 +767,23 @@ BaseWidget.handleGlobalMouseDown = function (event) {
 };
 
 BaseWidget.tryCloseClosableOnBlur = function (closable, event) {
-    var container = closable.getClosableContainer ? closable.getClosableContainer() : closable;
-    var found = Dom.findUpward(event.target, function (node) {
-        return node == container;
-    });
-    if (found) return;
+    if (event) {
+        var container = closable.getClosableContainer ? closable.getClosableContainer() : closable;
+        var found = Dom.findUpward(event.target, function (node) {
+            return node == container;
+        });
+        if (found) return;
+    }
 
-    var shouldClose = closable.shouldCloseOnBlur ? closable.shouldCloseOnBlur(event) : false;
+    var shouldClose = closable.shouldCloseOnBlur ? (!event || closable.shouldCloseOnBlur(event)) : false;
     if (!shouldClose) return;
 
     BaseWidget.unregisterClosable(closable);
     closable.close("onBlur", event);
-    event.preventDefault();
-    Dom.cancelEvent(event);
+    if (event) {
+        event.preventDefault();
+        Dom.cancelEvent(event);
+    }
 
 };
 

app/package.json

@@ -1,8 +1,8 @@
 {
   "name": "Pencil",
   "productName": "Pencil",
-  "description": "An open-source GUI prototyping tool that's available for ALL platforms.",
-  "version": "3.0.0-beta.1",
+  "description": "An open-source GUI prototyping tool that is available for ALL platforms.",
+  "version": "3.0.0-beta.2",
   "author": {
     "name": "Evolus",
     "url": "http://evolus.vn",
@@ -40,9 +40,9 @@
     "drawing"
   ],
   "dependencies": {
-    "archiver": "^0.21.0",
-    "electron-squirrel-startup": "^0.1.4",
-    "less": "~2.5.3",
+    "archiver": "^1.0.0",
+    "electron-squirrel-startup": "^1.0.0",
+    "less": "~2.7.1",
     "lodash": "^4.13.1",
     "moment": "^2.13.0",
     "nugget": "^2.0.0",

app/pencil-core/behavior/commonBehaviors.js

@@ -19,7 +19,7 @@ Pencil.behaviors.Bound = function (bound) {
 };
 Pencil.behaviors.Radius = function (rx, ry) {
     this.setAttribute("rx", rx);
-    this.setAttribute("ry", ry);
+    this.setAttribute("ry", typeof(ry) != "undefined" ? ry : rx);
 };
 Pencil.behaviors.StopColor = function (color) {
     Svg.setStyle(this, "stop-color", color.toRGBString());
@@ -409,7 +409,7 @@ Pencil.behaviors.RichTextFit = function (width) {
     Svg.setHeight(this, Math.ceil(this.firstChild.scrollHeight));
 };
 Pencil.behaviors.Image = function (imageData) {
-    var url = ImageData.refStringToUrl(imageData.data) || imageData.data;
+    var url = imageData.w > 0 ? (ImageData.refStringToUrl(imageData.data) || imageData.data) : "";
     this.setAttributeNS(PencilNamespaces.xlink, "xlink:href", url);
     Svg.setWidth(this, imageData.w);
     Svg.setHeight(this, imageData.h);