This fixes issue #759

app/app.xhtml

@@ -146,11 +146,11 @@
  <script type="text/javascript" src="pencil-core/common/jspdf.min.js"></script>
  <script type="text/javascript" src="pencil-core/common/Canvas.js"></script>
  <script type="text/javascript" src="pencil-core/canvasHelper/OffScreenCanvas.js"></script>
-
+ <!--
  <script type="text/javascript" src="pencil-core/clipartBrowser/webUtil.js"></script>
  <script type="text/javascript" src="pencil-core/clipartBrowser/searchEngine.js"></script>
  <script type="text/javascript" src="pencil-core/clipartBrowser/newOpenClipartSearch.js"></script>
-
+ -->
  <script type="text/javascript" src="pencil-core/canvasHelper/GestureHelper.js"></script>
 
  <!--<script type="text/javascript" src="pencil-core/mainWindow.js"></script>-->
@@ -225,7 +225,6 @@
  <script type="text/javascript" src="views/tools/FontDetailDialog.js"></script>
  <script type="text/javascript" src="views/tools/FontManagementDialog.js"></script>
  <script type="text/javascript" src="views/tools/NPatchDialog.js"></script>
- <script type="text/javascript" src="views/tools/OpenClipartPane.js"></script>
  <script type="text/javascript" src="views/tools/SettingDialog.js"></script>
  <script type="text/javascript" src="views/tools/SizingPolicyDialog.js"></script>
  <script type="text/javascript" src="views/tools/StencilGeneratorDialog.js"></script>

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.1.1",
+ "version": "3.1.2",
  "author": {
  "name": "Evolus",
  "url": "http://evolus.vn",

app/pencil-core/behavior/commonFunctions.js

@@ -84,8 +84,9 @@ F.newDOMElement = function (spec) {
  if (name.match(/^_/)) continue;
  e.setAttribute(name, spec[name]);
  }
-
- if (spec._text) {
+ if (spec._html) {
+ e.innerHTML = spec._html;
+ } else if (spec._text) {
  e.appendChild(e.ownerDocument.createTextNode(spec._text));
  }
  if (spec._children && spec._children.length > 0) {

app/pencil-core/canvasHelper/GestureHelper.js

@@ -67,7 +67,7 @@ GestureHelper.prototype.updateKeyCodes = function () {
  if (this.activeGestureDef) break;
  }
 
- GestureHelper._output.innerHTML = this.heldKeyCodes.join(", ") + ":" + this.heldKeyCodes.map(c => {return String.fromCharCode(c)}).join(", ");
+ //GestureHelper._output.innerHTML = this.heldKeyCodes.join(", ") + ":" + this.heldKeyCodes.map(c => {return String.fromCharCode(c)}).join(", ");
 };
 
 GestureHelper.fromCanvas = function (canvas) {

app/pencil-core/common/Canvas.js

@@ -1945,6 +1945,24 @@ Canvas.prototype.doCopy = function () {
 
  var transferableData = this.currentController.createTransferableData();
 
+ var target = null;
+
+ if (transferableData.dataNode.getAttributeNS(PencilNamespaces.p, "type")) {
+ target = this.createControllerFor(transferableData.dataNode);
+ } else {
+ var targets = [];
+ for (var i = 0; i < transferableData.dataNode.childNodes.length; i ++) {
+ var node = transferableData.dataNode.childNodes[i];
+ var subTarget = this.createControllerFor(node);
+
+ targets.push(subTarget);
+ }
+ target = new TargetSet(this, targets);
+ }
+
+ if (target.processExportingTransferableProperties) target.processExportingTransferableProperties();
+
+
  transferableData.dataNode.removeAttribute("p:parentRef");
  var metaNode = Dom.getSingle(".//p:metadata", transferableData.dataNode);
  var childTargetsNode = Dom.getSingle("./p:childTargets", metaNode);

app/pencil-core/common/controller.js

@@ -1425,7 +1425,7 @@ Controller.prototype.invalidateBitmapFilePath = function (page, invalidatedIds)
  for (var key in page.bitmapCache) {
  var filePath = page.bitmapCache[key];
  try {
- fs.unlinkSync(page.bitmapFilePath);
+ fs.unlinkSync(filePath);
  } catch (e) {
  }
  }

app/pencil-core/common/svgRasterizer.js

@@ -359,6 +359,8 @@ Rasterizer.getExportScale = function (inputScale) {
 }
 Rasterizer.prototype.rasterizeSelectionToFile = function (target, filePath, callback, scale, options) {
  var geo = target.getGeometry();
+ var rect = target.svg.getBoundingClientRect();
+
  if (!geo) {
  //Util.showStatusBarWarning(Util.getMessage("the.selected.objects.cannot.be.exported"), true);
  alert(Util.getMessage("the.selected.objects.cannot.be.exported"));
@@ -373,27 +375,24 @@ Rasterizer.prototype.rasterizeSelectionToFile = function (target, filePath, call
  padding += strokeStyle.w;
  }
 
- var w = geo.dim.w + padding;
- var h = geo.dim.h + padding;
+ var w = rect.width + padding;
+ var h = rect.height + padding;
 
  debug("w: " + w);
 
  var svg = document.createElementNS(PencilNamespaces.svg, "svg");
  svg.setAttribute("width", "" + w + "px");
  svg.setAttribute("height", "" + h + "px");
 
+ var wrapper = document.createElementNS(PencilNamespaces.svg, "g");
+ var prect = target.svg.ownerSVGElement.getBoundingClientRect();
+ wrapper.setAttribute("transform", "translate(" + (prect.x - rect.x) + ", " + (prect.y - rect.y) + ")");
+
  var content = target.svg.cloneNode(true);
- content.removeAttribute("transform");
  content.removeAttribute("id");
 
- try {
- var dx = Math.round((w - geo.dim.w) / 2);
- var dy = Math.round((h - geo.dim.h) / 2);
- content.setAttribute("transform", "translate(" + dx + ", " + dy + ")");
- } catch (e) {
- Console.dumpError(e);
- }
- svg.appendChild(content);
+ svg.appendChild(wrapper);
+ wrapper.appendChild(content);
 
  var thiz = this;
  var s = Rasterizer.getExportScale(scale);
@@ -411,7 +410,6 @@ Rasterizer.prototype.rasterizeSelectionToFile = function (target, filePath, call
  });
  }, false, options);
 };
-
 Rasterizer.prototype._prepareWindowForRasterization = function(backgroundColor) {
  var h = 0;
  var w = 0;

app/pencil-core/common/util.js

@@ -469,9 +469,9 @@ Object.defineProperty(Event.prototype, "originalTarget", {
 
 var domParser = new DOMParser();
 
-/* public static XmlDocument */ Dom.loadSystemXml = function (relPath) {
+/* public static XmlDocument */ Dom.loadSystemXml = function (relPath, preProcessFileContent) {
  var absPath = getStaticFilePath(relPath);
- return Dom.parseFile(absPath);
+ return Dom.parseFile(absPath, preProcessFileContent);
 };
 
 Dom.isElementExistedInDocument = function(element) {
@@ -917,8 +917,9 @@ Dom.swapNode = function (node1, node2) {
  parentNode.removeChild(node1);
  parentNode.insertBefore(node1, ref);
 };
-Dom.parseFile = function (file) {
+Dom.parseFile = function (file, preProcessFileContent) {
  var fileContents = fs.readFileSync(file, "utf8");
+ if (preProcessFileContent) fileContents = preProcessFileContent(fileContents);
  var dom = Dom.parser.parseFromString(fileContents, "text/xml");
  return dom;
 };

app/pencil-core/editor/handleEditor.config.xml

@@ -12,16 +12,16 @@
  @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
  g.HandleEditor rect[p|name='Handle'] {
- fill: #ff0;
- stroke: #0a0;
+ fill: $handle_fill_color;
+ stroke: $handle_stroke_color;
  stroke-width: 3;
  stroke-opacity: 0;
  fill-opacity: .7;
  }
  g.HandleEditor rect[p|name='Handle'][p|focused='true'] {
  stroke-width: 2;
  stroke-opacity: 1;
- stroke: #f00;
+ stroke: $handle_focused_stroke_color;
  }
  g.HandleEditor rect[p|name='Handle']:hover {
  stroke-width: 6 !important;
@@ -30,7 +30,7 @@
  }
  g.HandleEditor rect[p|name='Handle'][p|connected='true'] {
  stroke-width: 15 !important;
- stroke: #f00 !important;
+ stroke: $handle_connected_stroke_color !important;
  stroke-opacity: .5 !important;
  }
  ]]></style>

app/pencil-core/editor/handleEditor.js

@@ -3,7 +3,15 @@ function HandleEditor() {
  this.canvas = null;
 }
 HandleEditor.ANCHOR_SIZE = 6;
-HandleEditor.configDoc = Dom.loadSystemXml("pencil-core/editor/handleEditor.config.xml");
+HandleEditor.configDoc = Dom.loadSystemXml("pencil-core/editor/handleEditor.config.xml", function (fileContent) {
+ if (!fileContent) return "";
+ var newContent = fileContent
+ .replace("$handle_fill_color", Config.get("handle.fill_color", "#ff0"))
+ .replace("$handle_stroke_color",Config.get("handle.stroke_color", "#0a0"))
+ .replace("$handle_focused_stroke_color", Config.get("handle.focused_stroke_color", "#f00"))
+ .replace("$handle_connected_stroke_color", Config.get("handle.connected_stroke_color", "#f00"));
+ return newContent;
+});
 HandleEditor.prototype.install = function (canvas) {
  this.canvas = canvas;
  this.canvas.onScreenEditors.push(this);

app/pencil-core/propertyType/handle.js

@@ -6,8 +6,8 @@ Handle.REG_EX = /^([\-0-9\.]+)\,([\-0-9\.]+)$/;
 Handle.fromString = function(literal) {
  var handle = new Handle();
  if (literal.match(Handle.REG_EX)) {
- handle.x = parseFloat(RegExp.$1);
- handle.y = parseFloat(RegExp.$2);
+ handle.x = Math.round(RegExp.$1);
+ handle.y = Math.round(RegExp.$2);
  }
 
  return handle;

app/pencil-core/propertyType/imageData.js

@@ -87,10 +87,40 @@ ImageData.invalidateValue = function (oldData, callback) {
  callback(null, error);
  }
  });
+ } else if (oldData.data.match(/^(ref:\/\/([^@]+))@(.+)$/)) {
+ var ref = RegExp.$1;
+ var fp = RegExp.$3;
+ var id = ImageData.refStringToId(ref);
+ var refFilePath = Pencil.controller.refIdToFilePath(id);
+
+ const fs = require("fs");
+ // assume that the ref is local to this document, generate the local file path and check it
+ if (fsExistSync(refFilePath)) {
+ callback(new ImageData(oldData.w, oldData.h, ref, null));
+ } else {
+ Pencil.controller.copyAsRef(fp, function (id, error) {
+ if (id) {
+ callback(new ImageData(oldData.w, oldData.h, ImageData.idToRefString(id)), null);
+ } else {
+ callback(null, error);
+ }
+ });
+ }
  } else {
  callback(null);
  }
 };
+ImageData.prepareForTransferable = function (imageData, propDef) {
+ if (imageData.data.match(/^ref:\/\//)) {
+ var data = imageData.data;
+ if (imageData.data.match(/^(ref:\/\/[^@]+)(@.+)$/)) data = RegExp.$1;
+ var id = ImageData.refStringToId(data);
+ if (!id) return;
+ var filePath = Pencil.controller.refIdToFilePath(id);
+ data = data + "@" + filePath;
+ imageData.data = data;
+ }
+};
 ImageData.prepareForEmbedding = function (oldData, callback) {
  if (oldData.data.match(/^ref:\/\//)) {
  var id = ImageData.refStringToId(oldData.data);

app/pencil-core/propertyType/richText.js

@@ -1,6 +1,9 @@
 function RichText(html) {
  this.html = html;
  this.value = html;
+ if (this.html instanceof PlainText && this.html.value) {
+ this.html.value = Dom.htmlEncode(this.html.value);
+ }
 }
 RichText.fromString = function (html) {
  return new RichText(html);

app/pencil-core/target/group.js

@@ -440,6 +440,16 @@ Group.prototype.createTransferableData = function () {
  dataNode: this.svg.cloneNode(true)
  };
 };
+Group.prototype.processExportingTransferableProperties = function () {
+ for (t in this.targets) {
+ this.targets[t].processExportingTransferableProperties();
+ }
+};
+Group.prototype.processImportedTransferableProperties = function () {
+ for (t in this.targets) {
+ this.targets[t].processImportedTransferableProperties();
+ }
+};
 Group.prototype.lock = function () {
  this.svg.setAttributeNS(PencilNamespaces.p, "p:locked", "true");
 };

app/pencil-core/target/shape.js

@@ -878,16 +878,7 @@ Shape.prototype.getTextEditingInfo = function (editingEvent) {
  }
  }
  var targetObject = Dom.getSingle(".//*[@p:name='" + target + "']", this.svg);
- //checking if the target is ok for use to base the location calculation
- var ok = true;
- try {
- var clientRect = targetObject.getBoundingClientRect();
- if (clientRect.width == 0 || clientRect.height == 0) {
- ok = false;
- }
- } catch (e) {}
-
- if (ok) {
+ if (targetObject) {
  info = {prop: prop,
  value: this.getProperty(name),
  targetName: target,
@@ -1061,12 +1052,56 @@ Shape.prototype.getTextEditingInfo = function (editingEvent) {
 };
 
 Shape.prototype.createTransferableData = function () {
+ var dataNode = this.svg.cloneNode(true);
+
  return {
  type: ShapeXferHelper.MIME_TYPE,
  isSVG: true,
- dataNode: this.svg.cloneNode(true)
+ dataNode: dataNode
  };
 };
+Shape.prototype.processExportingTransferableProperties = function () {
+ for (var name in this.def.propertyMap) {
+ var prop = this.def.propertyMap[name];
+ var value = this.getProperty(name);
+
+ if (prop.type.prepareForTransferable) {
+ prop.type.prepareForTransferable(value, prop);
+ this.storeProperty(name, value);
+ }
+ }
+};
+
+Shape.prototype.processImportedTransferableProperties = function () {
+ var names = [];
+ for (var name in this.def.propertyMap) {
+ names.push(name);
+ }
+ var index = -1;
+ var thiz = this;
+ (function next() {
+ index ++;
+ if (index >= names.length) return;
+ var name = names[index];
+
+ var prop = thiz.def.propertyMap[name];
+ var value = thiz.getProperty(name);
+
+ if (prop.type.invalidateValue) {
+ prop.type.invalidateValue(value, function (newValue) {
+ if (newValue) {
+ thiz.storeProperty(name, newValue);
+ thiz.applyBehaviorForProperty(name);
+ }
+ next();
+ });
+ } else {
+ next();
+ }
+ })();
+}
+
+
 Shape.prototype.lock = function () {
  this.svg.setAttributeNS(PencilNamespaces.p, "p:locked", "true");
 };