Merge pull request #319 from evolus/development

PR for 3.0.2 release
evolus · May 10, 2017 · ac0d2c6 · ac0d2c6
2 parents 21cc44e + 5b8ae88
commit ac0d2c6
Show file tree

Hide file tree

Showing 52 changed files with 3,005 additions and 152 deletions.
diff --git a/app/app.xhtml b/app/app.xhtml
@@ -211,6 +211,8 @@
         <script type="text/javascript" src="views/tools/SizingPolicyDialog.js"></script>
         <script type="text/javascript" src="views/tools/StencilGeneratorDialog.js"></script>
         <script type="text/javascript" src="views/tools/TemplateManagementDialog.js"></script>
+        <script type="text/javascript" src="views/tools/StencilCollectionBuilder.js"></script>
+        <script type="text/javascript" src="views/tools/StencilCollectionDetailDialog.js"></script>
         <script type="text/javascript" src="pencil-core/common/EpzHandler.js"></script>
         <script type="text/javascript" src="pencil-core/common/EpgzHandler.js"></script>
         <script type="text/javascript" src="pencil-core/common/EpHandler.js"></script>

diff --git a/app/index.js b/app/index.js
@@ -96,11 +96,13 @@ app.on("window-all-closed", function() {
 app.on('ready', function() {
     protocol.registerBufferProtocol("ref", function(request, callback) {
         var path = request.url.substr(6);
-        console.log("PATH", path);
 
         fs.readFile(path, function (err, data) {
-            console.log("Got data: ", data.length);
-            callback({mimeType: "image/jpeg", data: new Buffer(data)});
+            if (err) {
+                callback({mimeType: "text/html", data: new Buffer("Not found")});
+            } else {
+                callback({mimeType: "image/jpeg", data: new Buffer(data)});
+            }
         });
 
     }, function (error, scheme) {

diff --git a/app/package.json b/app/package.json
@@ -2,7 +2,7 @@
   "name": "Pencil",
   "productName": "Pencil",
   "description": "An open-source GUI prototyping tool that is available for ALL platforms.",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "author": {
     "name": "Evolus",
     "url": "http://evolus.vn",
@@ -43,20 +43,22 @@
     "adm-zip": "^0.4.7",
     "archive-type": "^3.2.0",
     "archiver": "^1.3.0",
+    "decompress": "^4.0.0",
+    "decompress-targz": "^4.0.0",
     "easy-zip2": "^1.0.0",
     "electron-log": "^1.3.0",
     "electron-updater": "^1.4.1",
     "less": "~2.7.1",
     "lodash": "^4.13.1",
+    "md5": "^2.2.1",
     "moment": "^2.13.0",
     "nugget": "^2.0.0",
     "q": "^1.4.1",
     "rimraf": "^2.5.4",
+    "tar": "https://github.com/dgthanhan/node-tar/archive/6086b1ea82137c61eea4efe882dd514590e5b7a8.tar.gz",
     "tar.gz": "^1.0.5",
     "tmp": "0.0.31",
-    "unzip2": "^0.2.5",
-    "decompress": "^4.0.0",
-    "decompress-targz": "^4.0.0"
+    "unzip2": "^0.2.5"
   },
   "private": true
 }
diff --git a/app/pencil-core/behavior/SVGTextLayout.js b/app/pencil-core/behavior/SVGTextLayout.js
@@ -260,10 +260,13 @@ SVGHTMLRenderer.HANDLERS = {
     }
 };
 
+SVGHTMLRenderer.STYLE_NAME_MAP = {
+    fill: "color"
+}
 SVGHTMLRenderer.prototype.importDefaultStyleFromNode = function (node) {
     for (var name in this.defaultStyle) {
         var value = node.style[name];
-        if (value) this.defaultStyle[name] = value;
+        if (value) this.defaultStyle[SVGHTMLRenderer.STYLE_NAME_MAP[name] || name] = value;
     }
 };
 SVGHTMLRenderer.prototype.renderHTML = function (html, container, view) {
@@ -272,6 +275,7 @@ SVGHTMLRenderer.prototype.renderHTML = function (html, container, view) {
     var div = doc.createElementNS(PencilNamespaces.html, "div");
     div.style.position = "absolute";
     div.style.display = "none";
+    div.style.textAlign = ["left", "center", "right"][this.hAlign || 0];
     doc.body.appendChild(div);
 
     for (var styleName in this.defaultStyle) {
@@ -296,7 +300,7 @@ SVGHTMLRenderer.prototype.render = function (nodes, container, view) {
     var target = container;
     if (vAlign > 0) {
         var last = layouts[layouts.length - 1];
-        var height = last.y + last.height;
+        var height = last.y + last.height - (view.y || 0);
         dy = Math.round((this.height - height) * vAlign / 2);
         var target = container.ownerDocument.createElementNS(PencilNamespaces.svg, "g");
         target.setAttribute("transform", "translate(0," + dy + ")");

diff --git a/app/pencil-core/behavior/commonBehaviors.js b/app/pencil-core/behavior/commonBehaviors.js
@@ -37,8 +37,7 @@ Pencil.behaviors.Color = function (color) {
 	    Svg.setStyle(this, "fill", color.toRGBString());
 	    Svg.setStyle(this, "fill-opacity", color.a);
 	} else {
-	    Svg.setStyle(this, "color", color ? color.toRGBString() : null);
-	    Svg.setStyle(this, "opacity", color ? color.a : null);
+	    Svg.setStyle(this, "color", color ? color.toRGBAString() : null);
 	}
 };
 Pencil.behaviors.StrokeColor = function (color) {
@@ -646,8 +645,25 @@ Pencil.behaviors.NPatchDomContent = function (nPatch, dim) {
 Pencil.behaviors.NPatchDomContentFromImage = function (imageData, dim, xAnchorMaps, yAnchorMaps) {
     //sorting
     var xCells = imageData.xCells;
-    if (!xCells || xCells.length == 0) xCells = [{from: 0, to: imageData.w}];
     var yCells = imageData.yCells;
+
+    if ((!xCells || xCells.length == 0) && (!yCells || yCells.length == 0)) {
+        Dom.empty(this);
+
+        this.setAttribute("width", dim.w)
+        this.setAttribute("height", dim.h)
+        this.setAttribute("style", "line-height: 1px;");
+
+        this.appendChild(Dom.newDOMElement({
+            _name: "img",
+            _uri: PencilNamespaces.html,
+            style: new CSS().set("width", dim.w + "px").set("height", dim.h + "px").toString(),
+            src: ImageData.refStringToUrl(imageData.data) || imageData.data
+        }));
+        return;
+    }
+
+    if (!xCells || xCells.length == 0) xCells = [{from: 0, to: imageData.w}];
     if (!yCells || yCells.length == 0) yCells = [{from: 0, to: imageData.h}];
 
     xCells = [].concat(xCells);

diff --git a/app/pencil-core/canvasHelper/canvasImpl.js b/app/pencil-core/canvasHelper/canvasImpl.js
@@ -1,6 +1,8 @@
 var CanvasImpl = {};
 
 CanvasImpl.setupGrid = function () {
+    CanvasImpl.drawMargin.call(this);
+
     if (this.gridContainer) {
         Dom.empty(this.gridContainer);
     } else {
@@ -42,3 +44,37 @@ CanvasImpl.setupGrid = function () {
         }
     }
 };
+CanvasImpl.drawMargin = function () {
+    var unzommedMargin = Pencil.controller.getDocumentPageMargin();
+    if (!unzommedMargin) {
+        if (this.marginPath) this.marginPath.parentNode.removeChild(this.marginPath);
+        this.marginPath = null;
+        return;
+    }
+
+    var margin = unzommedMargin * this.zoom;
+    var color = Config.get(Config.DEV_PAGE_MARGIN_COLOR);
+
+    if (!this.marginPatternDef) {
+        // this.marginPatternDef = Dom.newDOMElement({
+        //
+        // });
+        // this.bgLayer.appendChild(this.marginPatternDef);
+    }
+
+    if (!this.marginPath) {
+        this.marginPath = document.createElementNS(PencilNamespaces.svg, "svg:path");
+        this.marginPath.setAttributeNS(PencilNamespaces.p, "p:name", "margins");
+        this.marginPath.setAttribute("stroke", "none");
+        this.marginPath.setAttribute("fill", color);
+        this.bgLayer.appendChild(this.marginPath);
+    }
+
+    var x = 5;
+    var width = this.width * this.zoom;
+    var height = this.height * this.zoom;
+    this.marginPath.setAttribute("d", [
+        M(0 - x, 0 - x), L(0 - x, height + x), L(width + x, height + x), L(width + x, 0 - x), z,
+        M(margin, margin), L(width - margin, margin), L(width - margin, height - margin), L(margin, height - margin), z
+    ].join(" "));
+};
diff --git a/app/pencil-core/canvasHelper/snappingHelper.js b/app/pencil-core/canvasHelper/snappingHelper.js
@@ -111,6 +111,23 @@ SnappingHelper.prototype.rebuildSnappingGuide = function () {
             }
         }
     }
+
+    var margin = Pencil.controller.getDocumentPageMargin();
+    if (margin) {
+        var uid = Util.newUUID();
+        this.snappingGuide[uid] = {
+                vertical: [
+                    new SnappingData("MarginSnap", margin, "Left", true, uid),
+                    new SnappingData("MarginSnap", this.canvas.width - margin, "Right", true, uid)
+                ],
+                horizontal: [
+                    new SnappingData("MarginSnap", margin, "Top", false, uid),
+                    new SnappingData("MarginSnap", this.canvas.height - margin, "Bottom", false, uid)
+                ]
+            };
+
+    }
+
     this.sortData();
 };
 SnappingHelper.prototype.updateSnappingGuide = function (controller, remove) {

diff --git a/app/pencil-core/common/Canvas.js b/app/pencil-core/common/Canvas.js
@@ -178,6 +178,7 @@ function Canvas(element) {
         thiz.handleClick(event);
     }, false);
     this.svg.addEventListener("mousedown", function (event) {
+        thiz.movementDisabled = Pencil.controller.movementDisabled || event.ctrlKey;
         // document.commandDispatcher.advanceFocus();
         thiz.focus();
         thiz.handleMouseDown(event);
@@ -338,6 +339,10 @@ function Canvas(element) {
             CanvasImpl.setupGrid.apply(this);
         }
     }.bind(this));
+    window.globalEventBus.listen("doc-options-change", function (data) {
+        CanvasImpl.drawMargin.apply(this);
+        this.snappingHelper.rebuildSnappingGuide();
+    }.bind(this));
 
 }
 
@@ -1148,6 +1153,8 @@ Canvas.prototype.handleMouseMove = function (event, fake) {
             if (!fake) {
                 event.preventDefault();
                 event.stopPropagation();
+
+                if (this.movementDisabled) return;
             }
 
             if (this.currentController.markAsMoving)
@@ -1386,7 +1393,7 @@ Canvas.prototype.handleKeyPress = function (event) {
             event.preventDefault();
         }
     } else if (event.keyCode == DOM_VK_F2) {
-        if (this.currentController) {
+        if (this.currentController && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {
             Dom.emitEvent("p:TextEditingRequested", this.element, {
                 controller : this.currentController
             });
@@ -2520,21 +2527,42 @@ Canvas.prototype.sizeToContent = function (hPadding, vPadding) {
     return newSize;
 };
 Canvas.prototype.sizeToContent__ = function (hPadding, vPadding) {
+    var pageMargin = Pencil.controller.getDocumentPageMargin() || 0;
+
+    hPadding += pageMargin;
+    vPadding += pageMargin;
 
     this.zoomTo(1.0);
 
     var thiz = this;
     var maxBox = null;
+    function out(name, rect) {
+        console.log(name, "left: ", rect.left, "top: ", rect.top, "width: ", rect.width, "height: ", rect.height);
+    }
+    out("this.svg", this.svg.getBoundingClientRect());
     Dom.workOn("./svg:g[@p:type]", this.drawingLayer, function (node) {
         try {
             var controller = thiz.createControllerFor(node);
+            if (controller.def && controller.def.meta.excludeSizeCalculation) return;
             var bbox = controller.getBoundingRect();
+            //HACK: inspect the strokeWidth attribute to fix half stroke bbox issue
             var box = {
                 x1 : bbox.x,
                 y1 : bbox.y,
                 x2 : bbox.x + bbox.width,
                 y2 : bbox.y + bbox.height
             };
+
+            if (controller.getGeometry) {
+                var geo = controller.getGeometry();
+                if (geo.ctm && geo.ctm.a == 1 && geo.ctm.b == 0 && geo.ctm.c == 0 && geo.ctm.d == 1 && geo.dim) {
+                    box.x1 = geo.ctm.e;
+                    box.y1 = geo.ctm.f;
+                    box.x2 = box.x1 + geo.dim.w;
+                    box.y2 = box.y1 + geo.dim.h;
+                }
+            }
+
             if (maxBox == null) {
                 maxBox = box;
             } else {
@@ -2556,6 +2584,10 @@ Canvas.prototype.sizeToContent__ = function (hPadding, vPadding) {
                 Util.getMessage("button.cancel.close"));
         return;
     }
+    maxBox.x1 = Math.floor(maxBox.x1);
+    maxBox.x2 = Math.ceil(maxBox.x2);
+    maxBox.y1 = Math.floor(maxBox.y1);
+    maxBox.y2 = Math.ceil(maxBox.y2);
 
     var width = maxBox.x2 - maxBox.x1 + 2 * hPadding;
     var height = maxBox.y2 - maxBox.y1 + 2 * vPadding;

diff --git a/app/pencil-core/common/EpgzHandler.js b/app/pencil-core/common/EpgzHandler.js
@@ -28,6 +28,7 @@ EpgzHandler.prototype.loadDocument = function(filePath) {
 
 EpgzHandler.prototype.saveDocument = function (documentPath) {
     return new Promise(function (resolve, reject) {
+        var path = null;
         var targz = require('tar.gz');
         new targz({}, {fromBase: true}).compress(Pencil.documentHandler.tempDir.name, documentPath)
         .then(resolve).catch(reject);

diff --git a/app/pencil-core/common/config.js b/app/pencil-core/common/config.js
@@ -51,3 +51,19 @@ try {
 }
 
 Config._load();
+
+
+
+//Specific configuration schema management
+Config.define = function (name, defaultValue) {
+    if (Config.get(name, null) === null) {
+        Config.set(name, defaultValue);
+    }
+
+    return name;
+};
+
+Config.DEV_PAGE_MARGIN_SIZE = Config.define("dev.pageMargin.size", Config.DEV_DEFAULT_PAGE_MARGIN);
+Config.DEV_PAGE_MARGIN_COLOR = Config.define("dev.pageMargin.color", "rgba(0, 0, 0, 0.2)");
+
+Config.DEV_ENABLE_DISABLED_IN_PROP_PAGE = Config.define("dev.enable_disabled_in_property_page", false);
diff --git a/app/pencil-core/common/controller.js b/app/pencil-core/common/controller.js
@@ -28,7 +28,7 @@ Controller.prototype.makeSubDir = function (sub) {
     return fullPath;
 };
 Controller.prototype.getDocumentName = function () {
-    return this.documentPath ? path.basename(this.documentPath).replace(/\.epz$/, "") : "* Unsaved document";
+    return this.documentPath ? path.basename(this.documentPath).replace(/\.[a-z]+$/, "") : "* Unsaved document";
 };
 // Controller.prototype.newDocument = function () {
 //     var thiz = this;
@@ -1057,6 +1057,15 @@ Controller.prototype.copyAsRef = function (sourcePath, callback) {
 
     rd.pipe(wr);
 };
+Controller.prototype.generateCollectionResourceRefId = function (collection, resourcePath) {
+    var id = "collection " + collection.id + " " + resourcePath;
+    var md5 = require("md5");
+    id = md5(id) + path.extname(resourcePath);
+
+    id = id.replace(/[^a-z\-0-9]+/gi, "_");
+
+    return id;
+};
 Controller.prototype.collectionResourceAsRefSync = function (collection, resourcePath) {
     var parts = resourcePath.split("/");
     sourcePath = collection.installDirPath;
@@ -1069,8 +1078,7 @@ Controller.prototype.collectionResourceAsRefSync = function (collection, resourc
         return null;
     }
 
-    var id = "collection " + collection.id + " " + resourcePath;
-    id = id.replace(/[^a-z\-0-9]+/gi, "_");
+    var id = this.generateCollectionResourceRefId(collection, resourcePath);
 
     var filePath = path.join(this.makeSubDir(Controller.SUB_REFERENCE), id);
 
@@ -1414,6 +1422,18 @@ Controller.prototype.exportAsLayout = function () {
     });
 };
 
+Controller.prototype.getDocumentPageMargin = function () {
+    if (!StencilCollectionBuilder.isDocumentConfiguredAsStencilCollection()) {
+        return null;
+    }
+    var options = StencilCollectionBuilder.getCurrentDocumentOptions();
+    if (!options) {
+        return null;
+    }
+
+    return options.pageMargin || Config.get(Config.DEV_PAGE_MARGIN_SIZE) || 40;
+};
+
 
 window.onbeforeunload = function (event) {
     // Due to a change of Chrome 51, returning non-empty strings or true in beforeunload handler now prevents the page to unload