🚧 Progress on workbench

packages/core/src/attributes.js

@@ -72,6 +72,22 @@ Attributes.prototype.renderIfPrefixIs = function(prefix = "") {
   return svg;
 };
 
+/** Returns a props object for attributes with a fiven prefix
+ * typically used for data-text*/
+Attributes.prototype.asPropsIfPrefixIs = function(prefix = "") {
+  let props = {};
+  let prefixLen = prefix.length;
+  for (let key in this.list) {
+    if (key.substr(0, prefixLen) === prefix) {
+      let propKey = key.substr(prefixLen);
+      if (propKey === "class") propKey = "className";
+      props[propKey] = this.get(key);
+    }
+  }
+
+  return props;
+};
+
 /** Returns a deep copy of this */
 Attributes.prototype.clone = function() {
   let clone = new Attributes();

packages/core/src/pattern.js

@@ -142,6 +142,8 @@ Pattern.prototype.draft = function() {
             "() was undefined. Did you forget to return the Part object?"
         );
       this.parts[partName].render = this.wants(partName);
+    } else {
+      this.parts[partName].render = false;
     }
   }
   this.runHooks("postDraft");
@@ -390,7 +392,7 @@ Pattern.prototype.pack = function() {
     let part = this.parts[key];
     // Avoid multiple render calls to cause stacking of transforms
     part.attributes.remove("transform");
-    if (part.render && this.needs(key)) {
+    if (part.render) {
       part.stack();
       let width = part.bottomRight.x - part.topLeft.x;
       let height = part.bottomRight.y - part.topLeft.y;
@@ -577,3 +579,31 @@ Pattern.prototype.wants = function(partName) {
 
   return true;
 };
+
+/** Returns props required to render this pattern through
+ *  an external renderer (eg. a React component)
+ */
+Pattern.prototype.getRenderProps = function() {
+  this.pack();
+  let props = {};
+  props.width = this.width;
+  props.height = this.height;
+  props.settings = this.settings;
+  props.parts = {};
+  for (let p of Object.keys(this.parts)) {
+    if (this.parts[p].render) {
+      props.parts[p] = {
+        paths: this.parts[p].paths,
+        points: this.parts[p].points,
+        snippets: this.parts[p].points,
+        attributes: this.parts[p].attributes,
+        height: this.parts[p].height,
+        width: this.parts[p].width,
+        bottomRight: this.parts[p].bottomRight,
+        topLeft: this.parts[p].topLeft
+      };
+    }
+  }
+
+  return props;
+};

packages/core/src/svg.js

@@ -62,7 +62,7 @@ Svg.prototype.render = function(pattern) {
   this.layout = {}; // Reset layout
   for (let partId in pattern.parts) {
     let part = pattern.parts[partId];
-    if (part.render && pattern.needs(partId)) {
+    if (part.render) {
       let partSvg = this.renderPart(part);
       this.layout[partId] = {
         svg: partSvg,