Merge pull request #15 from inQWIRE/bhakti-branch

fixes (see desc)

package.json

@@ -2,7 +2,7 @@
   "name": "vizx",
   "displayName": "ViZX",
   "description": "Visualizer for the ZX calculus",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "repository": "https://github.com/inQWIRE/ViZX/",
   "publisher": "inQWIRE",
   "engines": {

src/constants/consts.ts

@@ -25,12 +25,3 @@ export const COLORSWAP_TRANSFORM = "⊙";
 export const FLIP_TRANSFORM = "⥍";
 
 export const NUMBER_KINDS = ["realnum", "num", "numvar", "numfunc", "real01"];
-
-export const VER_PAD = 100;
-export const HOR_PAD = 100;
-
-export const STACK_DASH: [number, number] = [10, 10];
-export const COMPOSE_DASH: [number, number] = [6, 6];
-export const CAST_DASH: [number, number] = [3, 3];
-export const PROPTO_DASH: [number, number] = [1, 1];
-export const FUNCTION_DASH: [number, number] = [3, 15];

src/constants/variableconsts.ts

@@ -13,6 +13,11 @@ export function scaleUp() {
   SMALL_TEXT = (SCALE / 10).toString().concat("px");
   MEDIUM_TEXT = (SCALE / 7).toString().concat("px");
   LARGE_TEXT = (SCALE / 2).toString().concat("px");
+  STACK_DASH = [0.06 * SCALE, 0.06 * SCALE];
+  COMPOSE_DASH = [0.16 * SCALE, 0.16 * SCALE];
+  CAST_DASH = [0.02 * SCALE, 0.02 * SCALE];
+  PROPTO_DASH = [0.005 * SCALE, 0.005 * SCALE];
+  FUNCTION_DASH = [0.03 * SCALE, 0.01 * SCALE];
 }
 
 export function scaleDown() {
@@ -30,13 +35,19 @@ export function scaleDown() {
   SMALL_TEXT = (SCALE / 10).toString().concat("px");
   MEDIUM_TEXT = (SCALE / 7).toString().concat("px");
   LARGE_TEXT = (SCALE / 2).toString().concat("px");
+  STACK_DASH = [0.06 * SCALE, 0.06 * SCALE];
+  COMPOSE_DASH = [0.16 * SCALE, 0.16 * SCALE];
+  CAST_DASH = [0.02 * SCALE, 0.02 * SCALE];
+  PROPTO_DASH = [0.005 * SCALE, 0.005 * SCALE];
+  FUNCTION_DASH = [0.03 * SCALE, 0.01 * SCALE];
 }
 
 export let CANVAS_WIDTH = 500;
 export let CANVAS_HEIGHT = 500;
 
 // SCALE = size of base square, ideally do not go below 100 or it'll be too small
-export let SCALE = 100;
+export let SCALE = 1000;
+export let LINE_WIDTH = SCALE / 200;
 export let BASE_SIZE = 1 * SCALE;
 export let PAD_SIZE = 0.1 * SCALE;
 export let PROPTO_SIZE = 0.2 * SCALE;
@@ -50,6 +61,13 @@ export let MEDIUM_TEXT = (SCALE / 7).toString().concat("px");
 export let LARGE_TEXT = (SCALE / 2).toString().concat("px");
 export let MONOSPACE_FONT = "Monospace";
 export let ARIAL_FONT = "Arial";
+export let HOR_PAD = 0.01 * SCALE;
+export let VER_PAD = 0.01 * SCALE;
+export let STACK_DASH: [number, number] = [0.06 * SCALE, 0.06 * SCALE];
+export let COMPOSE_DASH: [number, number] = [0.16 * SCALE, 0.16 * SCALE];
+export let CAST_DASH: [number, number] = [0.02 * SCALE, 0.02 * SCALE];
+export let PROPTO_DASH: [number, number] = [0.005 * SCALE, 0.005 * SCALE];
+export let FUNCTION_DASH: [number, number] = [0.03 * SCALE, 0.01 * SCALE];
 
 export let boundary = {
   tl: {

src/parsing/lexer.ts

@@ -8,6 +8,7 @@ export enum TokenKind {
   Succ,
   R0,
   R1,
+  PI,
 
   ZToken,
   XToken,
@@ -62,6 +63,7 @@ export const lexer = buildLexer([
   [true, /^S\s/g, TokenKind.Succ],
   [true, /^\(/g, TokenKind.LParen],
   [true, /^\)/g, TokenKind.RParen],
+  [true, /^PI/g, TokenKind.PI],
 
   [true, /^[A-WYa-zΑ-Ωα-ω][A-Za-zΑ-Ωα-ω0-9'_]*/g, TokenKind.Str],
   [true, /^\,/g, TokenKind.Comma],

src/parsing/parser.ts

@@ -27,6 +27,10 @@ function applyNumber(value: Token): ast.Num {
   return { val: value.text, kind: "num", expr: value.text } as ast.Number;
 }
 
+function applyPi(value: Token): ast.Num {
+  return { val: "π", kind: "num", expr: "π" } as ast.Number;
+}
+
 function applyNumVar(value: Token): ast.Num {
   return { val: value.text, kind: "numvar", expr: value.text } as ast.NumVar;
 }
@@ -96,7 +100,7 @@ function applyNumFunc(args: [Token, ast.Num, ast.Num[]]): ast.Num {
 }
 
 function applyNumberSucc(value: [Token, ast.Num]): ast.Num {
-  return { expr: value[1].expr.concat("+1"), kind: "num" } as ast.Number;
+  return { expr: "1+".concat(value[1].expr), kind: "num" } as ast.Number;
 }
 
 function applyRConst(val: Token): ast.Num {
@@ -124,6 +128,7 @@ NUML0.setPattern(
   alt(
     apply(alt(tok(lex.TokenKind.R0), tok(lex.TokenKind.R1)), applyRConst),
     apply(tok(lex.TokenKind.NumberToken), applyNumber),
+    apply(tok(lex.TokenKind.PI), applyPi),
     apply(
       seq(tok(lex.TokenKind.Sub), tok(lex.TokenKind.NumberToken)),
       applySign

src/parsing/sizes.ts

@@ -1,6 +1,8 @@
 import * as ast from "./ast";
-import { HOR_PAD, VER_PAD, NUMBER_KINDS } from "../constants/consts";
+import { NUMBER_KINDS } from "../constants/consts";
 import {
+  HOR_PAD,
+  VER_PAD,
   BASE_SIZE,
   CAST_SIZE,
   PAD_SIZE,

src/rendering/render.ts

@@ -1,8 +1,5 @@
 import * as ast from "../parsing/ast";
 import {
-  STACK_DASH,
-  COMPOSE_DASH,
-  CAST_DASH,
   CAP,
   CUP,
   BOX,
@@ -14,12 +11,16 @@ import {
   ADJOINT_TRANSFORM,
   CONJUGATE_TRANSFORM,
   TRANSPOSE_TRANSFORM,
-  FUNCTION_DASH,
   NUMBER_KINDS,
   N_STACK_OP,
   N_STACK_1_OP,
 } from "../constants/consts";
 import {
+  LINE_WIDTH,
+  FUNCTION_DASH,
+  STACK_DASH,
+  COMPOSE_DASH,
+  CAST_DASH,
   PAD_SIZE,
   setCanvasWidthHeight,
   boundary,
@@ -42,6 +43,7 @@ import { determineCanvasWidthHeight } from "../parsing/sizes";
 
 const canvas = document.querySelector("canvas")!;
 const ctx = canvas.getContext("2d")!;
+ctx.lineWidth = LINE_WIDTH;
 // // colors
 const white = "#FFFFFF";
 const black = "#000000";
@@ -214,6 +216,7 @@ function drawBoundary(boundary: quad, dash?: [number, number]) {
   } else {
     ctx.setLineDash([]);
   }
+  ctx.lineWidth = LINE_WIDTH;
   ctx.strokeStyle = black;
   ctx.beginPath();
   ctx.moveTo(boundary.tl.x, boundary.tl.y);
@@ -228,6 +231,7 @@ function drawBoundary(boundary: quad, dash?: [number, number]) {
 function drawFuncBoundary(boundary: quad) {
   ctx.setLineDash([]);
   ctx.strokeStyle = black;
+  ctx.lineWidth = LINE_WIDTH;
   ctx.beginPath();
   ctx.moveTo(boundary.tl.x + PAD_SIZE, boundary.tl.y);
   ctx.lineTo(boundary.tl.x, boundary.tl.y);
@@ -260,34 +264,36 @@ function drawCastNode(node: ast.ASTNode) {
   ctx.save();
   ctx.translate(cast.node.boundary!.tl.x - TEXT_PAD_SIZE, lc.y);
   let max_width: undefined | number = undefined;
-  if (cast.m.expr.length > 2) {
+  if (cast.n.expr.length > 2) {
     ctx.rotate(Math.PI / 2);
     max_width = node.ver_len! - 2 * TEXT_PAD_SIZE;
   }
-  text_format("cast_in_background", cast.m.expr);
-  const in_arr = Array(cast.m.expr.length).fill("█").join("");
+  text_format("cast_in_background", cast.n.expr);
+  const in_arr = Array(cast.n.expr.length).fill("█").join("");
   ctx.fillText(in_arr, 0, 0, max_width);
-  text_format("cast_in", cast.m.expr);
-  ctx.fillText(cast.m.expr, 0, 0, max_width);
+  text_format("cast_in", cast.n.expr);
+  ctx.fillText(cast.n.expr, 0, 0, max_width);
   ctx.restore();
   ctx.save();
+
   ctx.translate(cast.node.boundary!.tr.x + TEXT_PAD_SIZE, rc.y);
   max_width = undefined;
-  if (cast.n.expr.length > 2) {
+  if (cast.m.expr.length > 2) {
     ctx.rotate(-Math.PI / 2);
     max_width = node.ver_len! - 2 * TEXT_PAD_SIZE;
   }
-  text_format("cast_out_background", cast.n.expr);
-  const out_arr = Array(cast.n.expr.length).fill("█").join("");
+  text_format("cast_out_background", cast.m.expr);
+  const out_arr = Array(cast.m.expr.length).fill("█").join("");
   ctx.fillText(out_arr, 0, 0, max_width);
-  text_format("cast_out", cast.n.expr);
-  ctx.fillText(cast.n.expr, 0, 0, max_width);
+  text_format("cast_out", cast.m.expr);
+  ctx.fillText(cast.m.expr, 0, 0, max_width);
   ctx.restore();
 }
 
 function drawBaseNode(node: ast.ASTNode) {
   ctx.fillStyle = white;
   ctx.setLineDash([]);
+  ctx.lineWidth = LINE_WIDTH;
   ctx.strokeStyle = black;
   let inputs: string;
   let outputs: string;
@@ -397,17 +403,17 @@ function drawBaseNode(node: ast.ASTNode) {
     ctx.rotate(-Math.PI / 2);
     max_width = node.ver_len! - 2 * TEXT_PAD_SIZE;
   }
-  text_format("spider_in_out_background", outputs);
-  const out_arr = Array(outputs.length).fill("█").join("");
-  wrapText(
-    outputs,
-    0,
-    0,
-    max_width!,
-    ctx.measureText(outputs).actualBoundingBoxAscent +
-      ctx.measureText(outputs).actualBoundingBoxDescent,
-    true
-  );
+  // text_format("spider_in_out_background", outputs);
+  // const out_arr = Array(outputs.length).fill("█").join("");
+  // wrapText(
+  //   outputs,
+  //   0,
+  //   0,
+  //   max_width!,
+  //   ctx.measureText(outputs).actualBoundingBoxAscent +
+  //     ctx.measureText(outputs).actualBoundingBoxDescent,
+  //   true
+  // );
   // ctx.fillText(out_arr, 0, 0, max_width);
   text_format("spider_in_out", outputs);
   wrapText(
@@ -428,17 +434,17 @@ function drawBaseNode(node: ast.ASTNode) {
     max_width = node.ver_len! - 2 * TEXT_PAD_SIZE;
     ctx.rotate(Math.PI / 2);
   }
-  text_format("spider_in_out_background", inputs);
-  const in_arr = Array(inputs.length).fill("█").join("");
-  wrapText(
-    inputs,
-    0,
-    0,
-    max_width!,
-    ctx.measureText(inputs).actualBoundingBoxAscent +
-      ctx.measureText(inputs).actualBoundingBoxDescent,
-    true
-  );
+  // text_format("spider_in_out_background", inputs);
+  // const in_arr = Array(inputs.length).fill("█").join("");
+  // wrapText(
+  //   inputs,
+  //   0,
+  //   0,
+  //   max_width!,
+  //   ctx.measureText(inputs).actualBoundingBoxAscent +
+  //     ctx.measureText(inputs).actualBoundingBoxDescent,
+  //   true
+  // );
   // ctx.fillText(in_arr, 0, 0, max_width);
   text_format("spider_in_out", inputs);
   wrapText(
@@ -696,6 +702,7 @@ function render(this: Window, msg: MessageEvent<any>) {
   let node: ast.ASTNode = JSON.parse(command);
   setCanvasWidthHeight(determineCanvasWidthHeight(node));
   formatCanvas();
+  console.log("b4 drawing really small text = ", REALLY_SMALL_TEXT);
   draw(node);
 }