Attempt to provide a public interface for groups

src/element.ts

@@ -21,6 +21,8 @@ export default (p5: P5SVG) => {
     p5.SVGElement = class SVGElement extends p5.Element {
         public elt: Element
 
+        public isUserInstanciated: boolean
+
         /**
          * Returns an Array of children of current SVG Element matching given selector
          *
@@ -50,13 +52,27 @@ export default (p5: P5SVG) => {
          * Create SVGElement
          *
          */
-        static create(nodeName: string, attributes: { [key: string]: string }) {
+        static create(nodeName: string, attributes: { [key: string]: string }, isUserInstanciated: boolean?) {
             attributes = attributes || {}
             const elt = document.createElementNS('http://www.w3.org/2000/svg', nodeName)
             Object.keys(attributes).forEach(function (k) {
                 elt.setAttribute(k, attributes[k])
             })
-            return new SVGElement(elt as any)
+            const svgEl = new SVGElement(elt as any)
+            svgEl.isUserInstanciated = isUserInstanciated;
+            return svgEl;
+        }
+
+        /**
+         * Check if any group above is user instanciated
+         * Will also return true if oneself is user instanciated
+         * 
+         */
+        isWithinUserInstanciated() {
+            if (this.isUserInstanciated) return true;
+            if (!(this.parentNode instanceof SVGElement)) return false;
+
+            return this.parentNode.isWithinUserInstanciated();
         }
 
         /**

src/filters.ts

@@ -55,6 +55,11 @@ export default function (p5: P5SVG) {
             // create new <g> so that new element won't be influenced by the filter
             g = p5.SVGElement.create('g')
             rootGroup.appendChild(g.elt)
+
+            if (ctx.__currentElement.isWithinUserInstanciated()) {
+                console.warn('Filter will promptly exit out of any instanciated group. Please make sure you\'ve exited them before filtering');
+            }
+
             ctx.__currentElement = g.elt
         } else {
             _filter.apply(this, [operation, value])

src/groupInterface.ts

@@ -0,0 +1,43 @@
+import p5RendererSVG from "./p5.RendererSVG";
+import { P5SVG, SVGElement, p5SVG } from "./types";
+
+export default function (p5: P5SVG) {
+    p5.prototype.pushSVGGroup = function (this: p5SVG) {
+        if (!(this._renderer instanceof p5RendererSVG)) {
+            console.warn('Attempted to push SVG group in non-svg canvas');
+            return null;
+        }
+
+        const group = p5.SVGElement.create('g', {}, true);
+
+        const currEl = this._renderer.drawingContext.__currentElement;
+
+        if (currEl.tagName !== 'g' && currEl.tagName) {
+            console.warn('Attempted to pop SVG group whilst not in g, svg');
+            return;
+        }
+
+        currEl.append(group);
+
+        this._renderer.drawingContext.__currentElement = group;
+
+        return group;
+    }
+
+    p5.prototype.popSVGGroup = function (this: p5SVG, group: SVGElement) {
+        if (!(this._renderer instanceof p5RendererSVG)) {
+            console.warn('Attempted to pop SVG group in non-svg canvas');
+            return null;
+        }
+
+        const currEl = this._renderer.drawingContext.__currentElement;
+
+        if (currEl !== group) {
+            return; // Silently fail: the warning has already been given by filter
+        }
+
+        this._renderer.drawingContext.__currentElement = currEl.parentNode();
+
+        return;
+    }
+}

src/index.ts

@@ -6,6 +6,7 @@ import IO from './io'
 import Image from './image'
 import Element from './element'
 import Filters from './filters'
+import GroupInterface from './groupInterface'
 import constants from './constants'
 
 function init(p5: P5) {
@@ -18,6 +19,8 @@ function init(p5: P5) {
     Image(p5svg)
     Filters(p5svg)
     Element(p5svg)
+    GroupInterface(p5svg)
+
 
     // attach constants to p5 instance
     p5svg.prototype['SVG'] = constants.SVG