mascot-vis 2.0.0 → 3.0.0

package/tests/unit-tests/jasmine-browser.json

@@ -0,0 +1,21 @@
+{
+  "srcDir": "src",
+  "srcFiles": [],
+  "specDir": ".",
+  "specFiles": [
+    "tests/unit-tests/**/*[sS]pec.?(m)js"
+  ],
+  "helpers": [
+    "tests/unit-tests/helpers/**/*.?(m)js"
+  ],
+  "esmFilenameExtension": ".mjs",
+  "enableTopLevelAwait": false,
+  "env": {
+    "stopSpecOnExpectationFailure": false,
+    "stopOnSpecFailure": false,
+    "random": true
+  },
+  "browser": {
+    "name": "firefox"
+  }
+}

package/tests/unit-tests/jasmine.json

@@ -0,0 +1,14 @@
+{
+  "spec_dir": "tests/unit-tests",
+  "spec_files": [
+    "**/*[sS]pec.?(m)js",
+    "**/*[tT]est.?(m)js"
+  ],
+  "helpers": [
+    "helpers/**/*.?(m)js"
+  ],
+  "env": {
+    "stopSpecOnExpectationFailure": false,
+    "random": true
+  }
+}

package/tests/unit-tests/testSpec.js

@@ -0,0 +1,274 @@
+import * as msc from "../../dist/mascot-es.js"
+import { divideElement } from "../../src/action/divide.js";
+import { translate } from "../../src/action/translate.js";
+import GridPlacer from "../../src/depgraph/operator/layout/GridPlacer.js";
+import { elementRemoved, layoutSpecified, newCollectionCreated, newMarkCreated, parentChildConnected } from "../../src/depgraph/updateDepGraph.js";
+import { VarType } from "../../src/depgraph/variable/Variable.js";
+import Collection from "../../src/element/group/Collection.js";
+import { GridCorner, GridFillDirection } from "../../src/layout/LayoutConstants.js";
+
+import LinearGradient from "../../src/element/gradient/LinearGradient.js"
+
+describe("Mascot tests", function() {
+    let scn, dt;
+
+    beforeEach(async function() {
+        scn = msc.scene();
+        dt = await msc.csv("http://localhost:8020/datasets/csv/GDP Change.csv");// run 'npm run start' first
+        expect(dt).toBeDefined();
+    });
+
+    it("repeat mark", async function() {
+        let circle = scn.mark("circle", { radius: 6, x: 100, y: 80, fillColor: "orange", strokeWidth: 0, strokeDash:"none", strokeColor: "#222"});
+        let coll = scn.repeat(circle, dt, {"attribute": "Year"});
+        expect(coll.children.length).toBe(4);
+
+        let gl = msc.layout("grid");
+        coll.layout = gl;
+        expect(gl.cellBounds.length).toBe(4);
+    });
+    
+    it("rect mark", async function() {
+        let rect = scn.mark("rect", { top: 20, left: 100, width: 20, height: 20, fillColor: "orange", strokeWidth: 0});
+        let b = rect.bounds;
+        expect(b.left).toBe(100);
+        expect(b.top).toBe(20);
+        expect(b.x).toBe(110);
+        expect(b.y).toBe(30);
+        //scn.repeat(circle, dt, {"attribute": "company"});
+    });
+
+    it("grid layout: start & direction", async function() {
+        let group = new Collection(), placer = new GridPlacer("gridPlacer");
+        for (let i = 0; i < 4; i++)
+            group.addChild(scn.mark("rect", { top: 20, left: 100, width: 20, height: 20, fillColor: "orange", strokeWidth: 0}));
+        
+        let gl = msc.layout("grid", {numCols: 2, start: GridCorner.TopLeft, direction: GridFillDirection.RowFirst});
+        gl.group = group;
+        placer.fillGrid(group, gl);
+        expect(gl._grid[0][0]).toBe(0);
+        expect(gl._grid[0][1]).toBe(1);
+        expect(gl._grid[1][0]).toBe(2);
+        expect(gl._grid[1][1]).toBe(3);
+
+        gl = msc.layout("grid", {numCols: 2, start: GridCorner.TopLeft, direction: GridFillDirection.ColumnFirst});
+        gl.group = group;
+        placer.fillGrid(group, gl);
+        expect(gl._grid[0][0]).toBe(0);
+        expect(gl._grid[0][1]).toBe(2);
+        expect(gl._grid[1][0]).toBe(1);
+        expect(gl._grid[1][1]).toBe(3);
+
+
+        gl = msc.layout("grid", {numCols: 2, start: GridCorner.BottomRight, direction: GridFillDirection.RowFirst});
+        gl.group = group;
+        placer.fillGrid(group, gl);
+        expect(gl._grid[0][0]).toBe(3);
+        expect(gl._grid[0][1]).toBe(2);
+        expect(gl._grid[1][0]).toBe(1);
+        expect(gl._grid[1][1]).toBe(0);
+
+        gl = msc.layout("grid", {numCols: 2, start: GridCorner.BottomRight, direction: GridFillDirection.ColumnFirst});
+        gl.group = group;
+        placer.fillGrid(group, gl);
+        expect(gl._grid[0][0]).toBe(3);
+        expect(gl._grid[0][1]).toBe(1);
+        expect(gl._grid[1][0]).toBe(2);
+        expect(gl._grid[1][1]).toBe(0);
+
+        gl = msc.layout("grid", {numCols: 2, start: GridCorner.TopRight, direction: GridFillDirection.RowFirst});
+        gl.group = group;
+        placer.fillGrid(group, gl);
+        expect(gl._grid[0][0]).toBe(1);
+        expect(gl._grid[0][1]).toBe(0);
+        expect(gl._grid[1][0]).toBe(3);
+        expect(gl._grid[1][1]).toBe(2);
+
+        gl = msc.layout("grid", {numCols: 2, start: GridCorner.TopRight, direction: GridFillDirection.ColumnFirst});
+        gl.group = group;
+        placer.fillGrid(group, gl);
+        expect(gl._grid[0][0]).toBe(2);
+        expect(gl._grid[0][1]).toBe(0);
+        expect(gl._grid[1][0]).toBe(3);
+        expect(gl._grid[1][1]).toBe(1);
+
+        gl = msc.layout("grid", {numCols: 2, start: GridCorner.BottomLeft, direction: GridFillDirection.RowFirst});
+        gl.group = group;
+        placer.fillGrid(group, gl);
+        expect(gl._grid[0][0]).toBe(2);
+        expect(gl._grid[0][1]).toBe(3);
+        expect(gl._grid[1][0]).toBe(0);
+        expect(gl._grid[1][1]).toBe(1);
+
+        gl = msc.layout("grid", {numCols: 2, start: GridCorner.BottomLeft, direction: GridFillDirection.ColumnFirst});
+        gl.group = group;
+        placer.fillGrid(group, gl);
+        expect(gl._grid[0][0]).toBe(1);
+        expect(gl._grid[0][1]).toBe(3);
+        expect(gl._grid[1][0]).toBe(0);
+        expect(gl._grid[1][1]).toBe(2);
+    });
+
+    it ("glyph bounds", async function() {
+        let rect = scn.mark("rect", { top: 20, left: 100, width: 20, height: 20, fillColor: "orange", strokeWidth: 0}),
+            line = scn.mark("line", {x1: 0, y1: 10, x2: 20, y2: 20});
+        let glyph = scn.glyph(rect, line);
+        let c1 = scn.repeat(glyph, dt, {"attribute": "Quarter"});
+        expect(c1.bounds.width).toBe(120);
+        expect(c1.bounds.height).toBe(30);
+        expect(c1.bounds.left).toBe(0);
+        expect(c1.bounds.top).toBe(10);
+
+        expect(glyph.refBounds.width).toBe(120);
+        expect(glyph.refBounds.height).toBe(30);
+        expect(glyph.refBounds.left).toBe(0);
+        expect(glyph.refBounds.top).toBe(10);
+
+        expect(rect.refBounds.width).toBe(20);
+        expect(rect.refBounds.height).toBe(20);
+        expect(rect.refBounds.left).toBe(100);
+        expect(rect.refBounds.top).toBe(20);
+
+        expect(line.refBounds.width).toBe(20);
+        expect(line.refBounds.height).toBe(10);
+        expect(line.refBounds.left).toBe(0);
+        expect(line.refBounds.top).toBe(10);
+
+        c1.layout = msc.layout("grid", {numCols: 2, rowGap: 10, colGap: 10});
+        let line2 = c1.children[1].children[1];
+
+        expect(line2.refBounds.width).toBe(20);
+        expect(line2.refBounds.height).toBe(10);
+        expect(line2.refBounds.left).toBe(130);
+        expect(line2.refBounds.top).toBe(10);
+    });
+
+    it("nested collection bounds", async function() {
+        let rect = scn.mark("rect", { top: 0, left: 0, width: 100, height: 20, fillColor: "orange", strokeWidth: 0});
+        let c1 = scn.repeat(rect, dt, {"attribute": "Quarter"});
+        c1.layout = msc.layout("grid", {numCols: 1, rowGap: 10});
+        let c = scn.repeat(c1, dt, {attribute: "Year"});
+        c.layout = msc.layout("grid", {numCols: 1, rowGap: 10});
+        let c2 = c.children[1];
+        expect(c1.bounds.width).toBe(100);
+        expect(c1.bounds.height).toBe(110);
+        expect(c1.bounds.left).toBe(0);
+        expect(c1.bounds.top).toBe(0);
+
+        expect(c2.bounds.width).toBe(100);
+        expect(c2.bounds.height).toBe(110);
+        expect(c2.bounds.left).toBe(0);
+        expect(c2.bounds.top).toBe(120);
+
+        expect(c.bounds.width).toBe(100);
+        expect(c.bounds.height).toBe(470);
+        expect(c.bounds.left).toBe(0);
+        expect(c.bounds.top).toBe(0);
+
+        expect(c2.layout.cellBounds[0].top).toBe(120);
+        expect(c2.layout.cellBounds[1].top).toBe(150);
+
+        let r2 = c1.children[1];
+        expect(r2.bounds.width).toBe(100);
+        expect(r2.bounds.height).toBe(20);
+        expect(r2.bounds.left).toBe(0);
+        expect(r2.bounds.top).toBe(30);
+        expect(r2.refBounds.width).toBe(100);
+        expect(r2.refBounds.height).toBe(20);
+        expect(r2.refBounds.left).toBe(0);
+        expect(r2.refBounds.top).toBe(30);
+
+        let r6 = c2.children[1];
+        expect(r6.bounds.width).toBe(100);
+        expect(r6.bounds.height).toBe(20);
+        expect(r6.bounds.left).toBe(0);
+        expect(r6.bounds.top).toBe(150);
+        expect(r6.refBounds.width).toBe(100);
+        expect(r6.refBounds.height).toBe(20);
+        expect(r6.refBounds.left).toBe(0);
+        expect(r6.refBounds.top).toBe(150);
+
+        translate(c, 100, 100);
+        expect(r6.refBounds.width).toBe(100);
+        expect(r6.refBounds.height).toBe(20);
+        expect(r6.refBounds.left).toBe(100);
+        expect(r6.refBounds.top).toBe(250);
+
+    });
+
+    it("divide", async function() {
+        let rect = scn.mark("rect", { top: 0, left: 0, width: 100, height: 20, fillColor: "orange", strokeWidth: 0});
+        let c1 = scn.repeat(rect, dt, {"attribute": "Year"});
+        c1.layout = msc.layout("grid", {numCols: 1, rowGap: 10});
+        //let c = scn.divide(rect, dt, {attribute: "Quarter"});
+        //c.layout = msc.layout("grid", {numCols: 1, rowGap: 10});
+
+        let c = divideElement(scn, rect, "Quarter", undefined, dt);
+        elementRemoved(rect, scn._depGraph);
+        newMarkCreated(c.children[0], scn._depGraph);
+        newCollectionCreated(c, scn._depGraph);
+        layoutSpecified(c, c.layout, scn._depGraph);
+        parentChildConnected(c, c.children[0], scn._depGraph);
+        parentChildConnected(c.parent, c, scn._depGraph);
+        let rbv = scn._depGraph.findVariable(VarType.CHANNEL, ["x", c]);
+        // expect(rbv).toBeDefined();
+        // expect(rbv.incomingDataflow.type).toBe(OpType.GRID_LAYOUT);
+        //gv = scn._depGraph.getIncomingDataflowOperator(OpType.GRID_LAYOUT, c1);
+        // expect(c.layout.type).toBe("stack");
+        // let bv = scn._depGraph.getVariable(VarType.BOUNDS, rect),
+        //     gv = scn._depGraph.getIncomingDataflowOperator(OpType.GRID_LAYOUT, c1);
+        // expect(gv).not.toEqual(null);
+    });
+});
+
+
+
+
+
+describe("LinearGradient Class", function() {
+    let linearGradient;
+
+    beforeEach(function() {
+        linearGradient = new LinearGradient();
+    });
+
+    it("should correctly initialize with default parameters", function() {
+        expect(linearGradient.x1).toBe(0);
+        expect(linearGradient.x2).toBe(100);
+        expect(linearGradient.y1).toBe(0);
+        expect(linearGradient.y2).toBe(0);
+        expect(linearGradient.stops).toEqual([]);
+        expect(linearGradient.type).toBeDefined();
+        expect(linearGradient.id.startsWith(linearGradient.type)).toBeTrue();
+    });
+
+    it("should correctly initialize with provided parameters", function() {
+        const params = { x1: 10, x2: 90, y1: 20, y2: 30 };
+        const customGradient = new LinearGradient(params);
+        expect(customGradient.x1).toBe(params.x1);
+        expect(customGradient.x2).toBe(params.x2);
+        expect(customGradient.y1).toBe(params.y1);
+        expect(customGradient.y2).toBe(params.y2);
+    });
+
+    it("should add stops correctly", function() {
+        linearGradient.addStop(50, 'red', 1);
+        expect(linearGradient.stops.length).toBe(1);
+        expect(linearGradient.stops[0]).toEqual({ offset: 50, color: 'red', opacity: 1 });
+    });
+
+    it("should correctly convert to JSON", function() {
+        linearGradient.addStop(50, 'red', 1);
+        const json = linearGradient.toJSON();
+        expect(json.x1).toBe(0);
+        expect(json.x2).toBe(100);
+        expect(json.y1).toBe(0);
+        expect(json.y2).toBe(0);
+        expect(json.stops.length).toBe(1);
+        expect(json.stops[0]).toEqual({ offset: 50, color: 'red', opacity: 1 });
+        expect(json.type).toBeDefined();
+        expect(json.id.startsWith(json.type)).toBeTrue();
+    });
+
+    // Add more tests as needed
+});