fix: fixed the issue of unable to create sketches.

The livecode API has been generalized and there was some
backwackward-incompatible changes in that proces. Added
livecode-canvas.js with the required options to fix the issue.

community/public/build.json

@@ -6,5 +6,9 @@
     "public/css/style.css",
     "public/css/vars.css",
     "public/css/style.less"
+  ],
+  "js/livecode-canvas.js": [
+    "public/js/livecode-canvas.js"
   ]
+
 }

community/public/js/livecode-canvas.js

@@ -0,0 +1,106 @@
+
+function getLiveCodeOptions() {
+var START = `
+import sketch
+code = open("main.py").read()
+env = dict(sketch.__dict__)
+exec(code, env)
+`
+
+var SKETCH = `
+import json
+
+def sendmsg(msgtype, function, args):
+  """Sends a message to the frontend.
+
+  The frontend will receive the specified message whenever
+  this function is called. The frontend can decide to some
+  action on each of these messages.
+  """
+  msg = dict(msgtype=msgtype, function=function, args=args)
+  print("--MSG--", json.dumps(msg))
+
+def _draw(func, **kwargs):
+  sendmsg(msgtype="draw", function=func, args=kwargs)
+
+def circle(x, y, d):
+    """Draws a circle of diameter d with center (x, y).
+    """
+    _draw("circle", x=x, y=y, d=d)
+
+def line(x1, y1, x2, y2):
+    """Draws a line from point (x1, y1) to point (x2, y2).
+    """
+    _draw("line", x1=x1, y1=y1, x2=x2, y2=y2)
+
+def rect(x, y, w, h):
+    """Draws a rectangle on the canvas.
+
+    Parameters
+    ----------
+    x: x coordinate of the top-left corner of the rectangle
+    y: y coordinate of the top-left corner of the rectangle
+    w: width of the rectangle
+    h: height of the rectangle
+    """
+    _draw("rect", x=x, y=y, w=w, h=h)
+
+def clear():
+    _draw("clear")
+
+# clear the canvas on start
+clear()
+`
+  const CANVAS_FUNCTIONS = {
+    circle: function(ctx, args) {
+      ctx.beginPath();
+      ctx.arc(args.x, args.y, args.d/2, 0, 2*Math.PI);
+      ctx.stroke();
+    },
+    line: function(ctx, args) {
+      ctx.beginPath();
+      ctx.moveTo(args.x1, args.y1);
+      ctx.lineTo(args.x2, args.y2);
+      ctx.stroke();
+    },
+    rect: function(ctx, args) {
+      ctx.beginPath();
+      ctx.rect(args.x, args.y, args.w, args.h);
+      ctx.stroke();
+    },
+    clear: function(ctx, args) {
+      var width = 300;
+      var height = 300;
+      ctx.clearRect(0, 0, width, height);
+    }
+  }
+
+  function drawOnCanvas(canvasElement, funcName, args) {
+    var ctx = canvasElement.getContext('2d');
+    var func = CANVAS_FUNCTIONS[funcName];
+
+    var scalex = canvasElement.width/300;
+    var scaley = canvasElement.height/300;
+
+    ctx.save();
+    ctx.scale(scalex, scaley);
+    func(ctx, args);
+    ctx.restore();
+  }
+
+  return {
+    runtime: "python",
+    files: [
+        {filename: "start.py", contents: START},
+        {filename: "sketch.py", contents: SKETCH},
+    ],
+    command: ["python", "start.py"],
+    codemirror: true,
+    onMessage: {
+      draw: function(editor, msg) {
+        const canvasElement = editor.parent.querySelector("canvas");
+        drawOnCanvas(canvasElement, msg.function, msg.args);
+      }
+    }
+  }
+}

community/www/macros/livecode.html

@@ -49,15 +49,16 @@
 
 {% macro LiveCodeEditorJS(name, code) %}
 <script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
+<script type="text/javascript" src="/assets/community/js/livecode-canvas.js"></script>
+
 <script type="text/javascript">
   var livecodeEditors = [];
 
   $(function() {
     $(".livecode-editor").each((i, e) => {
       var editor = new LiveCodeEditor(e, {
-        runtime: "python-canvas",
         base_url: "{{ livecode_url }}",
-        codemirror: true
+        ...getLiveCodeOptions()
       })
       livecodeEditors.push(editor);
     })