circuitscript 0.0.29 → 0.0.32

package/dist/esm/layout.mjs

@@ -1,19 +1,23 @@
 import { Graph, alg } from '@dagrejs/graphlib';
-import { SymbolCustom, SymbolDrawing, SymbolFactory, SymbolPlaceholder, SymbolText } from "./draw_symbols.mjs";
+import { SymbolCustom, SymbolDrawing, SymbolFactory, SymbolCustomModule, SymbolPlaceholder, SymbolText } from "./draw_symbols.mjs";
 import { FrameAction, SequenceAction } from "./objects/ExecutionScope.mjs";
-import { GlobalNames, ParamKeys } from './globals.mjs';
+import { defaultFrameTitleTextSize, defaultGridSizeUnits, GlobalNames, ParamKeys, WireAutoDirection } from './globals.mjs';
 import { NumericValue } from './objects/ParamDefinition.mjs';
 import { Geometry } from './geometry.mjs';
 import { Logger } from './logger.mjs';
 import { Frame, FrameParamKeys, FramePlotDirection } from './objects/Frame.mjs';
-import { getBoundsSize, printBounds, resizeBounds, resizeToNearestGrid, toNearestGrid } from './utils.mjs';
+import { getBoundsSize, printBounds, resizeBounds, resizeToNearestGrid, roundValue, toNearestGrid } from './utils.mjs';
 import { Direction } from './objects/types.mjs';
+import { milsToMM, UnitDimension } from './helpers.mjs';
 export class LayoutEngine {
     logger;
     placeSubgraphVersion = 2;
     layoutWarnings = [];
-    constructor() {
+    showBaseFrame = false;
+    constructor(options = { showBaseFrame: false }) {
         this.logger = new Logger();
+        const { showBaseFrame = false } = options ?? {};
+        this.showBaseFrame = showBaseFrame;
     }
     print(...params) {
         this.logger.add(params.join(' '));
@@ -121,6 +125,11 @@ export class LayoutEngine {
         const baseFrame = frameObjects[0];
         baseFrame.padding = 0;
         baseFrame.borderWidth = 0;
+        if (this.showBaseFrame) {
+            baseFrame.borderWidth = 5;
+            baseFrame.width = 11692 - 400 * 2;
+            baseFrame.height = 8267 - 400 * 2;
+        }
         baseFrame.x = 0;
         baseFrame.y = 0;
         let textObjects = [];
@@ -133,7 +142,7 @@ export class LayoutEngine {
             const result = this.prepareFrames(graph, subgraphInfo, baseFrame);
             textObjects = result.textObjects;
             elementFrames = result.elementFrames;
-            const logFrames = false;
+            const logFrames = true;
             if (logFrames) {
                 this.print('===== dump frames =====');
                 this.dumpFrame(baseFrame);
@@ -184,7 +193,7 @@ export class LayoutEngine {
     }
     placeAndSizeFrame(frame, level = 0) {
         const innerFrames = frame.innerItems;
-        const gridSize = 20;
+        const gridSize = defaultGridSizeUnits;
         let accumX = 0;
         let accumY = 0;
         const boundPoints = [];
@@ -257,6 +266,12 @@ export class LayoutEngine {
             boundPoints.push([innerFrame.x, innerFrame.y], [innerFrame.x + frameWidth, innerFrame.y + frameHeight]);
         });
         frame.bounds = resizeBounds(getBoundsFromPoints(boundPoints), frame.padding);
+        if (frame.width !== null) {
+            frame.bounds.xmax = milsToMM(frame.bounds.xmin + frame.width);
+        }
+        if (frame.height !== null) {
+            frame.bounds.ymax = milsToMM(frame.bounds.ymin + frame.height);
+        }
     }
     dumpFrame(frame, level = 0) {
         this.print(level, "".padStart(level * 4), 'frame, items:', frame.innerItems.length);
@@ -324,7 +339,7 @@ export class LayoutEngine {
                 tmpFrame.containsTitle = true;
                 tmpFrame.subgraphId = title.replace(/\s/g, "_");
                 const textObject = new RenderText(title);
-                textObject.fontSize = 16;
+                textObject.fontSize = defaultFrameTitleTextSize;
                 textObject.fontWeight = 'bold';
                 textObject.symbol.refreshDrawing();
                 tmpFrame.innerItems.push(textObject);
@@ -386,7 +401,12 @@ export class LayoutEngine {
                     }
                     else {
                         const symbolPinDefinitions = generateLayoutPinDefinition(component);
-                        tmpSymbol = new SymbolCustom(symbolPinDefinitions);
+                        if (component.typeProp === 'module') {
+                            tmpSymbol = new SymbolCustomModule(symbolPinDefinitions);
+                        }
+                        else {
+                            tmpSymbol = new SymbolCustom(symbolPinDefinitions);
+                        }
                     }
                     applyComponentParamsToSymbol(typeProp, component, tmpSymbol);
                     let didSetAngle = false;
@@ -403,7 +423,7 @@ export class LayoutEngine {
                             component.parameters.get('flipY');
                     }
                     if (tmpSymbol instanceof SymbolCustom && widthProp) {
-                        tmpSymbol.bodyWidth = widthProp;
+                        tmpSymbol.bodyWidth = milsToMM(widthProp);
                     }
                     if (!didSetAngle && component.parameters.has('_addDirection')) {
                         tmpSymbol.refreshDrawing(false);
@@ -489,6 +509,14 @@ export class LayoutEngine {
                         newFrame.borderWidth =
                             frameObject.parameters.get(FrameParamKeys.Border);
                     }
+                    if (frameObject.parameters.has(FrameParamKeys.Width)) {
+                        newFrame.width =
+                            frameObject.parameters.get(FrameParamKeys.Width);
+                    }
+                    if (frameObject.parameters.has(FrameParamKeys.Height)) {
+                        newFrame.height =
+                            frameObject.parameters.get(FrameParamKeys.Height);
+                    }
                     containerFrames.push(newFrame);
                     frameStack.push(newFrame);
                     prevFrame && prevFrame.innerItems.push(newFrame);
@@ -584,6 +612,10 @@ export class LayoutEngine {
             this.placeNodeAtPosition(0, 0, node1, 1);
             return;
         }
+        let fixedNode;
+        let fixedNodePin;
+        let floatingNode;
+        let floatingNodePin;
         subgraphEdges.forEach(edge => {
             const [nodeId1, pin1, nodeId2, pin2] = graph.edge(edge);
             const [, node1] = graph.node(nodeId1);
@@ -596,10 +628,6 @@ export class LayoutEngine {
                 originNodes.push(node1);
                 originNodeGroups.set(node1.toString(), [node1]);
             }
-            let fixedNode;
-            let fixedNodePin;
-            let floatingNode;
-            let floatingNodePin;
             this.print('edge:', '[', node1, pin1, node1.isFloating, ']', '[', node2, pin2, node2.isFloating, ']');
             if (!node1.isFloating && node2.isFloating) {
                 fixedNode = node1;
@@ -650,19 +678,31 @@ export class LayoutEngine {
                 floatingNode.isFloating = false;
                 this.print('set node as not floating:', floatingNode);
                 const originNode = findOriginNode(fixedNode);
-                originNodeGroups.get(originNode).push(floatingNode);
-                this.print('linking node', floatingNode, 'to origin node', originNode);
+                const itemsArray = originNodeGroups.get(originNode);
+                if (itemsArray.indexOf(floatingNode) === -1) {
+                    itemsArray.push(floatingNode);
+                    this.print('linking node', floatingNode, 'to origin node', originNode);
+                }
+                else {
+                    this.print('node is alread linked', floatingNode, 'to origin node', originNode);
+                }
             }
             [node1, node2].forEach(item => {
                 if (item instanceof RenderWire && item.isEndAutoLength()) {
-                    this.print('auto length wire', item);
                     const [instance, pin] = item.getEndAuto();
                     const [, targetNode] = graph.node(instance.instanceName);
+                    this.print('wire', item, 'auto length to target:', instance, pin);
                     if (targetNode.isFloating) {
                         throw "Cannot create auto wire with floating node! Wire id: " + item.id + " to node " + instance + " pin " + pin;
                     }
+                    const targetOriginNode = findOriginNode(targetNode);
+                    const itemOriginNode = findOriginNode(item);
+                    if (targetOriginNode !== itemOriginNode) {
+                        throw "Wire auto length failed. Please specify a fixed wire length.";
+                    }
                     const [untilX, untilY] = getNodePositionAtPin(targetNode, pin);
                     item.setEndAuto(untilX, untilY);
+                    this.print(`set wire auto end at: ${untilX} ${untilY}`);
                 }
             });
         });
@@ -824,25 +864,27 @@ export class LayoutEngine {
     }
 }
 function getNodePositionAtPin(item, pin) {
+    let x = 0;
+    let y = 0;
     if (item instanceof RenderComponent) {
         const pinPosition = item.symbol.pinPosition(pin);
-        return [
-            item.x + pinPosition.x,
-            item.y + pinPosition.y
-        ];
+        x = item.x + pinPosition.x;
+        y = item.y + pinPosition.y;
     }
     else if (item instanceof RenderWire) {
         if (pin === 0) {
-            return [item.x, item.y];
+            x = item.x;
+            y = item.y;
         }
         else {
             const wireEnd = item.getWireEnd();
-            return [
-                item.x + wireEnd.x,
-                item.y + wireEnd.y
-            ];
+            x = item.x + wireEnd.x;
+            y = item.y + wireEnd.y;
         }
     }
+    return [
+        roundValue(x), roundValue(y)
+    ];
 }
 function getNeighbours(graph, nodeIds) {
     return nodeIds.reduce((accum, nodeId) => {
@@ -868,11 +910,13 @@ function generateLayoutPinDefinition(component) {
     if (component.arrangeProps === null) {
         for (let i = 0; i < existingPinIds.length; i++) {
             const pinPosition = Math.floor(i / 2);
+            const pin = pins.get(existingPinIds[i]);
             symbolPinDefinitions.push({
                 side: (i % 2 === 0) ? "left" : "right",
                 pinId: existingPinIds[i],
-                text: pins.get(existingPinIds[i]).name,
+                text: pin.name,
                 position: pinPosition,
+                pinType: pin.pinType,
             });
         }
     }
@@ -888,11 +932,13 @@ function generateLayoutPinDefinition(component) {
             }
             useItems.forEach(pinId => {
                 if (existingPinIds.indexOf(pinId) !== -1) {
+                    const pin = pins.get(pinId);
                     symbolPinDefinitions.push({
                         side: key,
                         pinId: pinId,
-                        text: pins.get(pinId).name,
-                        position: pins.get(pinId).position,
+                        text: pin.name,
+                        position: pin.position,
+                        pinType: pin.pinType,
                     });
                     addedPins.push(pinId);
                 }
@@ -1013,19 +1059,26 @@ export class RenderWire extends RenderObject {
         this.segments.forEach(segment => {
             const { direction, value } = segment;
             let didAddPoint = false;
+            let useValue;
+            if (value instanceof UnitDimension) {
+                useValue = value.getMM();
+            }
+            else {
+                useValue = value;
+            }
             if (direction === Direction.Down) {
-                tmpY += value;
+                tmpY += useValue;
             }
             else if (direction === Direction.Up) {
-                tmpY -= value;
+                tmpY -= useValue;
             }
             else if (direction === Direction.Left) {
-                tmpX -= value;
+                tmpX -= useValue;
             }
             else if (direction === Direction.Right) {
-                tmpX += value;
+                tmpX += useValue;
             }
-            else if (direction === 'auto' || direction === "auto_") {
+            else if (direction === WireAutoDirection.Auto || direction === WireAutoDirection.Auto_) {
                 const { valueXY = [0, 0] } = segment;
                 const tmpPoints = this.getAutoPoints(valueXY, direction);
                 tmpPoints.forEach(point => {
@@ -1044,9 +1097,11 @@ export class RenderWire extends RenderObject {
         this.points = points;
     }
     getAutoPoints(value, direction) {
-        const inQuadrant = Geometry.getQuadrant(value[0], value[1]);
-        const [dx, dy] = value;
-        if (direction === 'auto') {
+        const valueX = roundValue(value[0]);
+        const valueY = roundValue(value[1]);
+        const inQuadrant = Geometry.getQuadrant(valueX, valueY);
+        const [dx, dy] = [valueX, valueY];
+        if (direction === WireAutoDirection.Auto) {
             switch (inQuadrant) {
                 case 0:
                 case 2:
@@ -1056,7 +1111,7 @@ export class RenderWire extends RenderObject {
                     return [[0, dy], [dx, 0]];
             }
         }
-        else if (direction === 'auto_') {
+        else if (direction === WireAutoDirection.Auto_) {
             switch (inQuadrant) {
                 case 0:
                 case 2:
@@ -1091,17 +1146,24 @@ export class RenderWire extends RenderObject {
         let tmpY = this.y;
         excludeLastSegment.forEach(segment => {
             const { direction, value } = segment;
+            let useValue;
+            if (value instanceof UnitDimension) {
+                useValue = value.getMM();
+            }
+            else {
+                useValue = value;
+            }
             if (direction === Direction.Down) {
-                tmpY += value;
+                tmpY += useValue;
             }
             else if (direction === Direction.Up) {
-                tmpY -= value;
+                tmpY -= useValue;
             }
             else if (direction === Direction.Left) {
-                tmpX -= value;
+                tmpX -= useValue;
             }
             else if (direction === Direction.Right) {
-                tmpX += value;
+                tmpX += useValue;
             }
         });
         let useValue = null;
@@ -1120,8 +1182,8 @@ export class RenderWire extends RenderObject {
             case Direction.Down:
                 useValue = tmpY - untilY;
                 break;
-            case 'auto':
-            case 'auto_':
+            case WireAutoDirection.Auto:
+            case WireAutoDirection.Auto_:
                 valueXY = [
                     untilX - tmpX,
                     untilY - tmpY,
@@ -1189,10 +1251,12 @@ export class RenderFrame extends RenderObject {
     innerItems = [];
     translateX = 0;
     translateY = 0;
-    padding = 20;
-    gap = 20;
+    padding = milsToMM(100);
+    gap = milsToMM(100);
     direction = FramePlotDirection.Column;
-    borderWidth = 1;
+    borderWidth = 5;
+    width = null;
+    height = null;
     subgraphId = "";
     type;
     containsTitle = false;

package/dist/esm/main.mjs

@@ -2,7 +2,7 @@
 import { program } from 'commander';
 import figlet from 'figlet';
 import path from 'path';
-import { readFileSync, watch } from 'fs';
+import { readFileSync, watch, existsSync } from 'fs';
 import { prepareSVGEnvironment } from './sizing.mjs';
 import { getDefaultLibsPath, getFontsPath, getPackageVersion, renderScript } from './helpers.mjs';
 export default async function main() {
@@ -47,16 +47,22 @@ export default async function main() {
     let scriptData;
     if (args.length > 0 && args[0]) {
         inputFilePath = args[0];
-        scriptData = readFileSync(inputFilePath, { encoding: 'utf-8' });
-        if (currentDirectory === null) {
-            currentDirectory = path.dirname(inputFilePath);
+        if (existsSync(inputFilePath)) {
+            scriptData = readFileSync(inputFilePath, { encoding: 'utf-8' });
+            if (currentDirectory === null) {
+                currentDirectory = path.dirname(inputFilePath);
+            }
+        }
+        else {
+            console.error("Error: File could not be found");
+            return;
         }
     }
     else if (options.input) {
         scriptData = options.input;
     }
     else {
-        console.log("Error: No input provided");
+        console.error("Error: No input provided");
         return;
     }
     const scriptOptions = {

package/dist/esm/objects/ClassComponent.mjs

@@ -22,8 +22,14 @@ export class ClassComponent {
     followWireOrientationProp = true;
     wireOrientationAngle = 0;
     useWireOrientationAngle = true;
+    didSetWireOrientationAngle = false;
     styles = {};
     assignedRefDes = null;
+    moduleContainsExpressions;
+    moduleCounter = 0;
+    moduleExecutionContext;
+    moduleExecutionContextName;
+    modulePinIdToPortMap;
     constructor(instanceName, numPins, className) {
         this.instanceName = instanceName;
         this.numPins = numPins;

package/dist/esm/objects/ExecutionScope.mjs

@@ -89,7 +89,7 @@ export class ExecutionScope {
             }
         });
         return sortedNet.map(([component, pin, net]) => {
-            return [net.namespace + net.name, component.instanceName, pin];
+            return [net.toString(), component.instanceName, pin];
         });
     }
     printNets() {

package/dist/esm/objects/Frame.mjs

@@ -11,6 +11,8 @@ export var FrameParamKeys;
     FrameParamKeys["Direction"] = "direction";
     FrameParamKeys["Padding"] = "padding";
     FrameParamKeys["Border"] = "border";
+    FrameParamKeys["Width"] = "width";
+    FrameParamKeys["Height"] = "height";
 })(FrameParamKeys || (FrameParamKeys = {}));
 export var FramePlotDirection;
 (function (FramePlotDirection) {

package/dist/esm/objects/Net.mjs

@@ -18,10 +18,11 @@ export class Net {
         this.baseName = name;
     }
     toString() {
-        return this.name;
+        return this.namespace + this.name;
     }
     static isSame(netA, netB) {
-        return netA.name === netB.name &&
+        return netA.namespace === netB.namespace &&
+            netA.name === netB.name &&
             netA.baseName === netB.baseName &&
             netA.priority === netB.priority &&
             netA.type === netB.type;

package/dist/esm/objects/PinTypes.mjs

@@ -6,3 +6,9 @@ export var PinTypes;
     PinTypes["IO"] = "io";
     PinTypes["Power"] = "power";
 })(PinTypes || (PinTypes = {}));
+export const AllPinTypes = [
+    PinTypes.Any,
+    PinTypes.Input,
+    PinTypes.Output,
+    PinTypes.IO,
+];

package/dist/esm/objects/types.mjs

@@ -4,6 +4,20 @@ export class UndeclaredReference {
         this.reference = reference;
     }
 }
+export class DeclaredReference {
+    found;
+    name;
+    trailers;
+    type;
+    value;
+    constructor(refType) {
+        this.found = refType.found;
+        this.name = refType.name;
+        this.trailers = refType.trailers;
+        this.type = refType.type;
+        this.value = refType.value;
+    }
+}
 export var ParseSymbolType;
 (function (ParseSymbolType) {
     ParseSymbolType["Variable"] = "variable";

package/dist/esm/regenerate-tests.mjs

@@ -4,7 +4,7 @@ import { prepareSVGEnvironment } from './sizing.mjs';
 const mainDir = './__tests__/renderData/';
 const fontsPath = getFontsPath();
 const defaultLibsPath = getDefaultLibsPath();
-async function regenerateTests() {
+async function regenerateTests(extra = "") {
     await prepareSVGEnvironment(fontsPath);
     const cstFiles = [];
     const files = fs.readdirSync(mainDir);
@@ -16,12 +16,73 @@ async function regenerateTests() {
     cstFiles.forEach(file => {
         const inputPath = mainDir + file;
         const scriptData = fs.readFileSync(inputPath, { encoding: 'utf-8' });
-        const outputPath = inputPath + '.svg';
+        const outputPath = mainDir + 'svgs/' + file + extra + '.svg';
         renderScript(scriptData, outputPath, {
             currentDirectory: mainDir,
             defaultLibsPath,
         });
         console.log('generated ', outputPath);
     });
+    return cstFiles;
 }
-regenerateTests();
+(async () => {
+    const generateDiff = false;
+    const nextExtra = generateDiff ? '.next' : '';
+    const cstFiles = await regenerateTests(nextExtra);
+    const allFiles = [];
+    if (generateDiff) {
+        cstFiles.forEach(file => {
+            const svg1 = 'svgs/' + file + '.svg';
+            const svg2 = 'svgs/' + file + '.next.svg';
+            const cleanedName = file.replace('script', '').replace('.cst', '');
+            allFiles.push([file, svg1, svg2, cleanedName]);
+        });
+        const sortedFiles = allFiles.sort((a, b) => {
+            const nameA = a[3];
+            const nameB = b[3];
+            const indexA = Number(nameA);
+            const indexB = Number(nameB);
+            if (indexA > indexB) {
+                return 1;
+            }
+            else if (indexA < indexB) {
+                return -1;
+            }
+            else {
+                return 0;
+            }
+        });
+        const output = [];
+        sortedFiles.forEach(group => {
+            const [file, svg1, svg2] = group;
+            output.push(`<div class='group'>
+                <h3>${file}</h3>
+                <div class='items'>
+                    <div style='margin-right: 10px'>
+                        <h4>${svg1}</h4>
+                        <img src='${svg1}'/>
+                    </div>
+                    <div>
+                        <h4>${svg2}</h4>
+                        <img src='${svg2}'/>
+                    </div>
+                </div>
+            </div>`);
+        });
+        const result = `
+            <html>
+                <header>
+                    <title>SVG compare</title>
+                    <style>
+                        img { border: solid thin #ccc; }
+                        .items { display: flex; }
+                        body { font-family: Arial; }
+                    </style>
+                </header>
+                <body>
+                    ${output.join('')}
+                </body>
+            </html>`;
+        fs.writeFileSync(mainDir + "compiled.html", result);
+    }
+})();

package/dist/esm/render.mjs

@@ -1,9 +1,10 @@
 import { SVG, registerWindow } from '@svgdotjs/svg.js';
 import { RenderFrameType, getBounds } from "./layout.mjs";
 import { applyFontsToSVG, getCreateSVGWindow } from './sizing.mjs';
-import { ColorScheme, ComponentTypes, ParamKeys, junctionSize } from './globals.mjs';
+import { ColorScheme, ComponentTypes, MMToPx, ParamKeys, defaultGridSizeUnits, defaultWireLineWidth, defaultZoomScale, fontDisplayScale, junctionSize } from './globals.mjs';
 import { NumericValue } from './objects/ParamDefinition.mjs';
 import { getBoundsSize } from './utils.mjs';
+import { milsToMM } from './helpers.mjs';
 export function generateSVG2(graph) {
     const window = getCreateSVGWindow()();
     const document = window.document;
@@ -11,14 +12,16 @@ export function generateSVG2(graph) {
     const canvas = SVG(document.documentElement);
     applyFontsToSVG(canvas);
     generateSVGChild(canvas, graph.components, graph.wires, graph.junctions, graph.mergedWires, graph.frameObjects, graph.textObjects);
+    const scale = MMToPx * defaultZoomScale;
     const { x, y, width, height } = canvas.bbox();
-    const margin = 5;
-    const widthAndMargin = width + margin * 2;
-    const heightAndMargin = height + margin * 2;
-    const scale = 1;
-    canvas.size(widthAndMargin * scale, heightAndMargin * scale);
-    canvas.viewbox(x - margin, y - margin, widthAndMargin, heightAndMargin);
-    return canvas.svg();
+    const scaledWidth = width * scale;
+    const scaledHeight = height * scale;
+    canvas.size(scaledWidth, scaledHeight);
+    canvas.viewbox(x, y, width, height);
+    return {
+        svg: canvas.svg(),
+        width, height,
+    };
 }
 function generateSVGChild(canvas, components, wires, junctions, mergedWires, frameObjects, textObjects) {
     const displayWireId = false;
@@ -66,8 +69,8 @@ function generateSVGChild(canvas, components, wires, junctions, mergedWires, fra
         wires.forEach(wire => {
             wiresGroup.text(wire.id.toString())
                 .font({
-                family: 'Inter',
-                size: 10,
+                family: 'Arial',
+                size: 50 * fontDisplayScale,
             })
                 .translate(wire.x + 5, wire.y + 5);
         });
@@ -79,8 +82,11 @@ function generateSVGChild(canvas, components, wires, junctions, mergedWires, fra
             const pt1 = segment[0];
             const pt2 = segment[1];
             mergedWireGroup.line([pt1, pt2])
-                .stroke({ width: 1, color: ColorScheme.WireColor,
-                linecap: 'square' })
+                .stroke({
+                width: defaultWireLineWidth,
+                color: ColorScheme.WireColor,
+                linecap: 'square'
+            })
                 .fill('none');
         });
         intersectPoints.forEach(point => {
@@ -109,7 +115,7 @@ function generateSVGChild(canvas, components, wires, junctions, mergedWires, fra
             }
             const tmpRect = frameGroup.rect(width, height)
                 .fill('none')
-                .stroke({ width: borderWidth, color: strokeColor });
+                .stroke({ width: milsToMM(borderWidth), color: strokeColor });
             tmpRect.translate(item.x, item.y);
         }
     });
@@ -120,13 +126,14 @@ function generateSVGChild(canvas, components, wires, junctions, mergedWires, fra
         symbol.draw(innerGroup);
     });
     const drawOrigin = false;
+    const originSize = milsToMM(10);
     drawOrigin && canvas.group().translate(0, 0)
-        .circle(5)
-        .translate(-5 / 2, -5 / 2)
+        .circle(originSize)
+        .translate(-originSize / 2, -originSize / 2)
         .stroke('none').fill('red');
 }
 function drawGrid(group, canvasSize) {
-    const gridSize = 20;
+    const gridSize = defaultGridSizeUnits;
     const { x, y, x2, y2 } = canvasSize;
     const gridStartX = (Math.floor(x / gridSize) - 1) * gridSize;
     const gridStartY = (Math.floor(y / gridSize) - 1) * gridSize;
@@ -134,19 +141,20 @@ function drawGrid(group, canvasSize) {
     const gridEndY = (Math.ceil(y2 / gridSize) + 1) * gridSize;
     const numCols = Math.ceil((gridEndX - gridStartX) / gridSize);
     const lines = [];
+    const smallOffset = milsToMM(3);
+    const startY = gridStartY - smallOffset / 2;
+    const endY = gridEndY + smallOffset;
     for (let i = 0; i <= numCols; i++) {
         const startX = gridStartX + i * gridSize;
-        const startY = gridStartY - 0.5;
-        const endY = gridEndY;
         lines.push(`M ${startX} ${startY} L ${startX} ${endY}`);
     }
+    const strokeSize = milsToMM(3);
     group.path(lines.join(" "))
-        .fill('none')
         .attr({
-        'stroke-dasharray': '1,' + (gridSize - 1),
+        'stroke-dasharray': `${strokeSize},${gridSize - strokeSize}`,
     })
         .stroke({
-        width: 1,
-        color: '#aaa'
+        width: strokeSize,
+        color: '#000'
     });
 }