From e9be51bdeee8ffdaef7c5e274501bb8399527de3 Mon Sep 17 00:00:00 2001 From: Sam Ritchie Date: Thu, 12 Jan 2023 10:52:48 -0700 Subject: [PATCH 1/3] root --- CHANGES.md | 10 ++- docs/intro.md | 6 +- examples/test/root.html | 98 ++++++++++++++++++++++++++++++ src/stage/api.js | 7 ++- test/primitives/types/base/root.js | 28 +++++++++ 5 files changed, 144 insertions(+), 5 deletions(-) create mode 100644 examples/test/root.html create mode 100644 test/primitives/types/base/root.js diff --git a/CHANGES.md b/CHANGES.md index 8d8af22e..ab2c50f1 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,6 +1,14 @@ -### MathBox Changelog +## MathBox Changelog + +### [unreleased] + +- Add a `root` function to the API with the same 2-argument interface as all + other primitives. The map provided to the first argument is passed to + `mathbox.set`, and the second argument is passed to `mathbox.bind`. `root` + returns the root node. ### 2.2.1 + - Add Typescript support for live properties and `bind`. [#43](https://github.com/unconed/mathbox/pull/43) ### 2.2.0 diff --git a/docs/intro.md b/docs/intro.md index c28affd5..56c7e8fc 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -82,9 +82,9 @@ view width: 3, }) .grid({ - width: 2, + width: 2, divideX: 20, - divideY: 10, + divideY: 10, }); ``` @@ -110,7 +110,7 @@ mathbox.select('axis').set('color', 'black'); As the on-screen size of elements depends on the position of the camera, we can calibrate our units by setting the `focus` on the `` to match the camera distance: ```javascript -mathbox.set('focus', 3); +mathbox.root({focus: 3}); ``` Which gives us: diff --git a/examples/test/root.html b/examples/test/root.html new file mode 100644 index 00000000..28adadc1 --- /dev/null +++ b/examples/test/root.html @@ -0,0 +1,98 @@ + + + + + MathBox - Empty + + + + + + + + + + + + + + diff --git a/src/stage/api.js b/src/stage/api.js index f5c18d35..f6e3b519 100644 --- a/src/stage/api.js +++ b/src/stage/api.js @@ -43,6 +43,11 @@ export class API { this[type] = (options, binds) => this.add(type, options, binds); } } + this["root"] = (options, binds) => { + root.set(options); + root.bind(binds); + return this._reset(); + }; } select(selector) { @@ -166,7 +171,7 @@ export class API { } _reset() { let left; - return (left = this._up != null ? this._up.reset() : undefined) != null + return (left = this._up != null ? this._up._reset() : undefined) != null ? left : this; } diff --git a/test/primitives/types/base/root.js b/test/primitives/types/base/root.js new file mode 100644 index 00000000..327bbd23 --- /dev/null +++ b/test/primitives/types/base/root.js @@ -0,0 +1,28 @@ +import * as MB from "../../../../src"; +import { smallPause } from "../../../test_utils"; + +describe("primitives.types.base.root", () => { + it("reacts to changes in width", async () => { + const mathbox = MB.mathBox(); + const root = mathbox.root(); + expect(root).toBe(mathbox); + + // const array = cartesian.array({ width: 16 }); + + // const controller = array[0].controller; + // const rebuild = spyOn(controller, "rebuild").and.callThrough(); + + // expect(rebuild).toHaveBeenCalledTimes(0); + // expect(controller.space.width).toBe(16); + + // array.set("width", 32); + // await smallPause(); + // expect(rebuild).toHaveBeenCalledTimes(1); + // expect(controller.space.width).toBe(32); + + // array.set("width", 24); + // await smallPause(); + // expect(rebuild).toHaveBeenCalledTimes(2); + // expect(controller.space.width).toBe(24); + }); +}); From ddb35cc2df028725ac69f3dc88c26249998d5dff Mon Sep 17 00:00:00 2001 From: Sam Ritchie Date: Thu, 12 Jan 2023 11:06:42 -0700 Subject: [PATCH 2/3] demos --- examples/test/root.html | 13 +++++-------- test/primitives/types/base/root.js | 30 ++++++++++++------------------ 2 files changed, 17 insertions(+), 26 deletions(-) diff --git a/examples/test/root.html b/examples/test/root.html index 28adadc1..e044340b 100644 --- a/examples/test/root.html +++ b/examples/test/root.html @@ -20,11 +20,10 @@ - a minified version mathbox.min.js is also available; - recommend using a specific version (not @latest) in public sites --> - - + 5 * Math.sin(time * 0.5), } ); diff --git a/test/primitives/types/base/root.js b/test/primitives/types/base/root.js index 327bbd23..d49b960c 100644 --- a/test/primitives/types/base/root.js +++ b/test/primitives/types/base/root.js @@ -1,28 +1,22 @@ import * as MB from "../../../../src"; -import { smallPause } from "../../../test_utils"; describe("primitives.types.base.root", () => { - it("reacts to changes in width", async () => { + it("returns the root from any selection", async () => { const mathbox = MB.mathBox(); - const root = mathbox.root(); - expect(root).toBe(mathbox); + const root = mathbox.cartesian().root(); - // const array = cartesian.array({ width: 16 }); - - // const controller = array[0].controller; - // const rebuild = spyOn(controller, "rebuild").and.callThrough(); + expect(root).toBe(mathbox); + }); - // expect(rebuild).toHaveBeenCalledTimes(0); - // expect(controller.space.width).toBe(16); + it("reacts to changes in properties", async () => { + const mathbox = MB.mathBox(); + const root = mathbox.root(); - // array.set("width", 32); - // await smallPause(); - // expect(rebuild).toHaveBeenCalledTimes(1); - // expect(controller.space.width).toBe(32); + // default focus + expect(mathbox.get("focus")).toBe(1); - // array.set("width", 24); - // await smallPause(); - // expect(rebuild).toHaveBeenCalledTimes(2); - // expect(controller.space.width).toBe(24); + // set via root and see the change reflected in mathbox. + mathbox.root({ focus: 10 }); + expect(mathbox.get("focus")).toBe(10); }); }); From a7f31a72d14672da3934ea087e6d9e02e110affa Mon Sep 17 00:00:00 2001 From: Sam Ritchie Date: Thu, 12 Jan 2023 11:28:54 -0700 Subject: [PATCH 3/3] test --- test/bind.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/bind.spec.ts b/test/bind.spec.ts index 5ec0bcbf..afe0c2dc 100644 --- a/test/bind.spec.ts +++ b/test/bind.spec.ts @@ -70,7 +70,7 @@ describe("live properties", () => { const size1 = p.get("size") const opacity1 = p.get("opacity") - expect(Math.abs(size1 - 20.5)).toBeLessThan(0.2) - expect(Math.abs(opacity1 - 0.5)).toBeLessThan(0.2) + expect(Math.abs(size1 - 20.5)).toBeLessThan(0.3) + expect(Math.abs(opacity1 - 0.5)).toBeLessThan(0.3) }) });