circuitscript 0.0.29 → 0.0.32

package/dist/cjs/layout.js

@@ -11,11 +11,15 @@ const logger_js_1 = require("./logger.js");
 const Frame_js_1 = require("./objects/Frame.js");
 const utils_js_1 = require("./utils.js");
 const types_js_1 = require("./objects/types.js");
+const helpers_js_1 = require("./helpers.js");
 class LayoutEngine {
-    constructor() {
+    constructor(options = { showBaseFrame: false }) {
         this.placeSubgraphVersion = 2;
         this.layoutWarnings = [];
+        this.showBaseFrame = false;
         this.logger = new logger_js_1.Logger();
+        const { showBaseFrame = false } = options ?? {};
+        this.showBaseFrame = showBaseFrame;
     }
     print(...params) {
         this.logger.add(params.join(' '));
@@ -123,6 +127,11 @@ 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 = [];
@@ -135,7 +144,7 @@ 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);
@@ -186,7 +195,7 @@ class LayoutEngine {
     }
     placeAndSizeFrame(frame, level = 0) {
         const innerFrames = frame.innerItems;
-        const gridSize = 20;
+        const gridSize = globals_js_1.defaultGridSizeUnits;
         let accumX = 0;
         let accumY = 0;
         const boundPoints = [];
@@ -259,6 +268,12 @@ class LayoutEngine {
             boundPoints.push([innerFrame.x, innerFrame.y], [innerFrame.x + frameWidth, innerFrame.y + frameHeight]);
         });
         frame.bounds = (0, utils_js_1.resizeBounds)(getBoundsFromPoints(boundPoints), frame.padding);
+        if (frame.width !== null) {
+            frame.bounds.xmax = (0, helpers_js_1.milsToMM)(frame.bounds.xmin + frame.width);
+        }
+        if (frame.height !== null) {
+            frame.bounds.ymax = (0, helpers_js_1.milsToMM)(frame.bounds.ymin + frame.height);
+        }
     }
     dumpFrame(frame, level = 0) {
         this.print(level, "".padStart(level * 4), 'frame, items:', frame.innerItems.length);
@@ -326,7 +341,7 @@ class LayoutEngine {
                 tmpFrame.containsTitle = true;
                 tmpFrame.subgraphId = title.replace(/\s/g, "_");
                 const textObject = new RenderText(title);
-                textObject.fontSize = 16;
+                textObject.fontSize = globals_js_1.defaultFrameTitleTextSize;
                 textObject.fontWeight = 'bold';
                 textObject.symbol.refreshDrawing();
                 tmpFrame.innerItems.push(textObject);
@@ -388,7 +403,12 @@ class LayoutEngine {
                     }
                     else {
                         const symbolPinDefinitions = generateLayoutPinDefinition(component);
-                        tmpSymbol = new draw_symbols_js_1.SymbolCustom(symbolPinDefinitions);
+                        if (component.typeProp === 'module') {
+                            tmpSymbol = new draw_symbols_js_1.SymbolCustomModule(symbolPinDefinitions);
+                        }
+                        else {
+                            tmpSymbol = new draw_symbols_js_1.SymbolCustom(symbolPinDefinitions);
+                        }
                     }
                     applyComponentParamsToSymbol(typeProp, component, tmpSymbol);
                     let didSetAngle = false;
@@ -405,7 +425,7 @@ class LayoutEngine {
                             component.parameters.get('flipY');
                     }
                     if (tmpSymbol instanceof draw_symbols_js_1.SymbolCustom && widthProp) {
-                        tmpSymbol.bodyWidth = widthProp;
+                        tmpSymbol.bodyWidth = (0, helpers_js_1.milsToMM)(widthProp);
                     }
                     if (!didSetAngle && component.parameters.has('_addDirection')) {
                         tmpSymbol.refreshDrawing(false);
@@ -491,6 +511,14 @@ class LayoutEngine {
                         newFrame.borderWidth =
                             frameObject.parameters.get(Frame_js_1.FrameParamKeys.Border);
                     }
+                    if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Width)) {
+                        newFrame.width =
+                            frameObject.parameters.get(Frame_js_1.FrameParamKeys.Width);
+                    }
+                    if (frameObject.parameters.has(Frame_js_1.FrameParamKeys.Height)) {
+                        newFrame.height =
+                            frameObject.parameters.get(Frame_js_1.FrameParamKeys.Height);
+                    }
                     containerFrames.push(newFrame);
                     frameStack.push(newFrame);
                     prevFrame && prevFrame.innerItems.push(newFrame);
@@ -586,6 +614,10 @@ 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);
@@ -598,10 +630,6 @@ 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;
@@ -652,19 +680,31 @@ 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}`);
                 }
             });
         });
@@ -827,25 +867,27 @@ class LayoutEngine {
 }
 exports.LayoutEngine = 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 [
+        (0, utils_js_1.roundValue)(x), (0, utils_js_1.roundValue)(y)
+    ];
 }
 function getNeighbours(graph, nodeIds) {
     return nodeIds.reduce((accum, nodeId) => {
@@ -871,11 +913,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,
             });
         }
     }
@@ -891,11 +935,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);
                 }
@@ -1018,19 +1064,26 @@ class RenderWire extends RenderObject {
         this.segments.forEach(segment => {
             const { direction, value } = segment;
             let didAddPoint = false;
+            let useValue;
+            if (value instanceof helpers_js_1.UnitDimension) {
+                useValue = value.getMM();
+            }
+            else {
+                useValue = value;
+            }
             if (direction === types_js_1.Direction.Down) {
-                tmpY += value;
+                tmpY += useValue;
             }
             else if (direction === types_js_1.Direction.Up) {
-                tmpY -= value;
+                tmpY -= useValue;
             }
             else if (direction === types_js_1.Direction.Left) {
-                tmpX -= value;
+                tmpX -= useValue;
             }
             else if (direction === types_js_1.Direction.Right) {
-                tmpX += value;
+                tmpX += useValue;
             }
-            else if (direction === 'auto' || direction === "auto_") {
+            else if (direction === globals_js_1.WireAutoDirection.Auto || direction === globals_js_1.WireAutoDirection.Auto_) {
                 const { valueXY = [0, 0] } = segment;
                 const tmpPoints = this.getAutoPoints(valueXY, direction);
                 tmpPoints.forEach(point => {
@@ -1049,9 +1102,11 @@ class RenderWire extends RenderObject {
         this.points = points;
     }
     getAutoPoints(value, direction) {
-        const inQuadrant = geometry_js_1.Geometry.getQuadrant(value[0], value[1]);
-        const [dx, dy] = value;
-        if (direction === 'auto') {
+        const valueX = (0, utils_js_1.roundValue)(value[0]);
+        const valueY = (0, utils_js_1.roundValue)(value[1]);
+        const inQuadrant = geometry_js_1.Geometry.getQuadrant(valueX, valueY);
+        const [dx, dy] = [valueX, valueY];
+        if (direction === globals_js_1.WireAutoDirection.Auto) {
             switch (inQuadrant) {
                 case 0:
                 case 2:
@@ -1061,7 +1116,7 @@ class RenderWire extends RenderObject {
                     return [[0, dy], [dx, 0]];
             }
         }
-        else if (direction === 'auto_') {
+        else if (direction === globals_js_1.WireAutoDirection.Auto_) {
             switch (inQuadrant) {
                 case 0:
                 case 2:
@@ -1096,17 +1151,24 @@ class RenderWire extends RenderObject {
         let tmpY = this.y;
         excludeLastSegment.forEach(segment => {
             const { direction, value } = segment;
+            let useValue;
+            if (value instanceof helpers_js_1.UnitDimension) {
+                useValue = value.getMM();
+            }
+            else {
+                useValue = value;
+            }
             if (direction === types_js_1.Direction.Down) {
-                tmpY += value;
+                tmpY += useValue;
             }
             else if (direction === types_js_1.Direction.Up) {
-                tmpY -= value;
+                tmpY -= useValue;
             }
             else if (direction === types_js_1.Direction.Left) {
-                tmpX -= value;
+                tmpX -= useValue;
             }
             else if (direction === types_js_1.Direction.Right) {
-                tmpX += value;
+                tmpX += useValue;
             }
         });
         let useValue = null;
@@ -1125,8 +1187,8 @@ class RenderWire extends RenderObject {
             case types_js_1.Direction.Down:
                 useValue = tmpY - untilY;
                 break;
-            case 'auto':
-            case 'auto_':
+            case globals_js_1.WireAutoDirection.Auto:
+            case globals_js_1.WireAutoDirection.Auto_:
                 valueXY = [
                     untilX - tmpX,
                     untilY - tmpY,
@@ -1193,10 +1255,12 @@ class RenderFrame extends RenderObject {
         this.innerItems = [];
         this.translateX = 0;
         this.translateY = 0;
-        this.padding = 20;
-        this.gap = 20;
+        this.padding = (0, helpers_js_1.milsToMM)(100);
+        this.gap = (0, helpers_js_1.milsToMM)(100);
         this.direction = Frame_js_1.FramePlotDirection.Column;
-        this.borderWidth = 1;
+        this.borderWidth = 5;
+        this.width = null;
+        this.height = null;
         this.subgraphId = "";
         this.containsTitle = false;
         this.frame = frame;

package/dist/cjs/main.js

@@ -52,16 +52,22 @@ async function main() {
     let scriptData;
     if (args.length > 0 && args[0]) {
         inputFilePath = args[0];
-        scriptData = (0, fs_1.readFileSync)(inputFilePath, { encoding: 'utf-8' });
-        if (currentDirectory === null) {
-            currentDirectory = path_1.default.dirname(inputFilePath);
+        if ((0, fs_1.existsSync)(inputFilePath)) {
+            scriptData = (0, fs_1.readFileSync)(inputFilePath, { encoding: 'utf-8' });
+            if (currentDirectory === null) {
+                currentDirectory = path_1.default.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/cjs/objects/ClassComponent.js

@@ -21,8 +21,10 @@ class ClassComponent {
         this.followWireOrientationProp = true;
         this.wireOrientationAngle = 0;
         this.useWireOrientationAngle = true;
+        this.didSetWireOrientationAngle = false;
         this.styles = {};
         this.assignedRefDes = null;
+        this.moduleCounter = 0;
         this.instanceName = instanceName;
         this.numPins = numPins;
         this.className = className;

package/dist/cjs/objects/ExecutionScope.js

@@ -90,7 +90,7 @@ 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/cjs/objects/Frame.js

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

package/dist/cjs/objects/Net.js

@@ -16,10 +16,11 @@ 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/cjs/objects/PinTypes.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PinTypes = void 0;
+exports.AllPinTypes = exports.PinTypes = void 0;
 var PinTypes;
 (function (PinTypes) {
     PinTypes["Any"] = "any";
@@ -9,3 +9,9 @@ var PinTypes;
     PinTypes["IO"] = "io";
     PinTypes["Power"] = "power";
 })(PinTypes || (exports.PinTypes = PinTypes = {}));
+exports.AllPinTypes = [
+    PinTypes.Any,
+    PinTypes.Input,
+    PinTypes.Output,
+    PinTypes.IO,
+];

package/dist/cjs/objects/types.js

@@ -1,12 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Direction = exports.ParseSymbolType = exports.UndeclaredReference = void 0;
+exports.Direction = exports.ParseSymbolType = exports.DeclaredReference = exports.UndeclaredReference = void 0;
 class UndeclaredReference {
     constructor(reference) {
         this.reference = reference;
     }
 }
 exports.UndeclaredReference = UndeclaredReference;
+class DeclaredReference {
+    constructor(refType) {
+        this.found = refType.found;
+        this.name = refType.name;
+        this.trailers = refType.trailers;
+        this.type = refType.type;
+        this.value = refType.value;
+    }
+}
+exports.DeclaredReference = DeclaredReference;
 var ParseSymbolType;
 (function (ParseSymbolType) {
     ParseSymbolType["Variable"] = "variable";

package/dist/cjs/regenerate-tests.js

@@ -9,7 +9,7 @@ const sizing_js_1 = require("./sizing.js");
 const mainDir = './__tests__/renderData/';
 const fontsPath = (0, helpers_js_1.getFontsPath)();
 const defaultLibsPath = (0, helpers_js_1.getDefaultLibsPath)();
-async function regenerateTests() {
+async function regenerateTests(extra = "") {
     await (0, sizing_js_1.prepareSVGEnvironment)(fontsPath);
     const cstFiles = [];
     const files = fs_1.default.readdirSync(mainDir);
@@ -21,12 +21,73 @@ async function regenerateTests() {
     cstFiles.forEach(file => {
         const inputPath = mainDir + file;
         const scriptData = fs_1.default.readFileSync(inputPath, { encoding: 'utf-8' });
-        const outputPath = inputPath + '.svg';
+        const outputPath = mainDir + 'svgs/' + file + extra + '.svg';
         (0, helpers_js_1.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_1.default.writeFileSync(mainDir + "compiled.html", result);
+    }
+})();

package/dist/cjs/render.js

@@ -7,6 +7,7 @@ const sizing_js_1 = require("./sizing.js");
 const globals_js_1 = require("./globals.js");
 const ParamDefinition_js_1 = require("./objects/ParamDefinition.js");
 const utils_js_1 = require("./utils.js");
+const helpers_js_1 = require("./helpers.js");
 function generateSVG2(graph) {
     const window = (0, sizing_js_1.getCreateSVGWindow)()();
     const document = window.document;
@@ -14,14 +15,16 @@ function generateSVG2(graph) {
     const canvas = (0, svg_js_1.SVG)(document.documentElement);
     (0, sizing_js_1.applyFontsToSVG)(canvas);
     generateSVGChild(canvas, graph.components, graph.wires, graph.junctions, graph.mergedWires, graph.frameObjects, graph.textObjects);
+    const scale = globals_js_1.MMToPx * globals_js_1.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,
+    };
 }
 exports.generateSVG2 = generateSVG2;
 function generateSVGChild(canvas, components, wires, junctions, mergedWires, frameObjects, textObjects) {
@@ -70,8 +73,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 * globals_js_1.fontDisplayScale,
             })
                 .translate(wire.x + 5, wire.y + 5);
         });
@@ -83,8 +86,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: globals_js_1.ColorScheme.WireColor,
-                linecap: 'square' })
+                .stroke({
+                width: globals_js_1.defaultWireLineWidth,
+                color: globals_js_1.ColorScheme.WireColor,
+                linecap: 'square'
+            })
                 .fill('none');
         });
         intersectPoints.forEach(point => {
@@ -113,7 +119,7 @@ function generateSVGChild(canvas, components, wires, junctions, mergedWires, fra
             }
             const tmpRect = frameGroup.rect(width, height)
                 .fill('none')
-                .stroke({ width: borderWidth, color: strokeColor });
+                .stroke({ width: (0, helpers_js_1.milsToMM)(borderWidth), color: strokeColor });
             tmpRect.translate(item.x, item.y);
         }
     });
@@ -124,13 +130,14 @@ function generateSVGChild(canvas, components, wires, junctions, mergedWires, fra
         symbol.draw(innerGroup);
     });
     const drawOrigin = false;
+    const originSize = (0, helpers_js_1.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 = globals_js_1.defaultGridSizeUnits;
     const { x, y, x2, y2 } = canvasSize;
     const gridStartX = (Math.floor(x / gridSize) - 1) * gridSize;
     const gridStartY = (Math.floor(y / gridSize) - 1) * gridSize;
@@ -138,19 +145,20 @@ function drawGrid(group, canvasSize) {
     const gridEndY = (Math.ceil(y2 / gridSize) + 1) * gridSize;
     const numCols = Math.ceil((gridEndX - gridStartX) / gridSize);
     const lines = [];
+    const smallOffset = (0, helpers_js_1.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 = (0, helpers_js_1.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'
     });
 }