Create a small helper within the studio

packages/studio/src/builder.worker.js

@@ -4,6 +4,7 @@ import * as replicad from "replicad";
 import initOpenCascade from "./initOCSingle.js";
 import initOpenCascadeWithExceptions from "./initOCWithExceptions.js";
 import normalizeColor from "./utils/normalizeColor";
+import { StudioHelper } from "./utils/StudioHelper";
 import { runInContext, buildModuleEvaluator } from "./vm";
 
 self.replicad = replicad;
@@ -168,7 +169,9 @@ const buildShapesFromCode = async (code, params) => {
     await replicad.loadFont("/fonts/HKGrotesk-Regular.ttf");
 
   let shapes;
+  const helper = new StudioHelper();
   try {
+    self.$ = helper;
     shapes = await runCode(code, params);
   } catch (e) {
     let message = "error";
@@ -194,7 +197,7 @@ const buildShapesFromCode = async (code, params) => {
 
   shapes = organiseReturnValue(shapes);
   shapes = normalizeColorAndOpacity(shapes);
-  console.log(shapes);
+  shapes = helper.apply(shapes);
   SHAPES_MEMORY.defaultShape = shapes;
 
   return shapes

packages/studio/src/utils/StudioHelper.js

@@ -0,0 +1,58 @@
+const shapeOrSketch = (shape) => {
+  if (!(shape instanceof replicad.Sketch)) return shape;
+  if (shape.wire.isClosed) return shape.face();
+  return shape.wire;
+};
+
+export class StudioHelper {
+  constructor() {
+    this._shapes = [];
+    this._faceFinder = null;
+    this._edgeFinder = null;
+  }
+
+  debug(shape) {
+    this._shapes.push(shape);
+    return shape;
+  }
+
+  d(shape) {
+    return this.debug(shape);
+  }
+
+  highlightFace(faceFinder) {
+    this._faceFinder = faceFinder;
+    return faceFinder;
+  }
+
+  hf(faceFinder) {
+    return this.highlightFace(faceFinder);
+  }
+
+  highlightEdge(edgeFinder) {
+    this._edgeFinder = edgeFinder;
+    return edgeFinder;
+  }
+
+  he(edgeFinder) {
+    return this.highlightEdge(edgeFinder);
+  }
+
+  apply(config) {
+    const conf = config.concat(
+      this._shapes.map((s, i) => ({
+        shape: shapeOrSketch(s),
+        name: `Debug ${i}`,
+      }))
+    );
+    conf.forEach((shape) => {
+      if (this._edgeFinder && !shape.highlightEdge) {
+        shape.highlightEdge = this._edgeFinder;
+      }
+      if (this._faceFinder && !shape.highlightFace) {
+        shape.highlightFace = this._faceFinder;
+      }
+    });
+    return conf;
+  }
+}