From 5bb8a350a8fdaaf24bd0a8ed801c3fb0d9ce31d2 Mon Sep 17 00:00:00 2001 From: Jono Brandel Date: Mon, 24 Jun 2024 10:55:57 -0700 Subject: [PATCH 1/2] Update object based on flagWidth and flagHeight --- extras/js/arc.js | 74 ++++++++++++++++++++++++----------------------- extras/jsm/arc.js | 70 +++++++++++++++++++++++--------------------- 2 files changed, 75 insertions(+), 69 deletions(-) diff --git a/extras/js/arc.js b/extras/js/arc.js index 151251be..4f453b07 100644 --- a/extras/js/arc.js +++ b/extras/js/arc.js @@ -1,7 +1,7 @@ -(function() { - +(function () { const TWO_PI = Math.PI * 2; - const cos = Math.cos, sin = Math.sin; + const cos = Math.cos, + sin = Math.sin; /** * @name Two.Arc @@ -16,7 +16,6 @@ * @param {Number} [resolution=4] - The number of vertices used to construct the circle. */ class Arc extends Two.Path { - _flagWidth = false; _flagHeight = false; _flagStartAngle = false; @@ -28,7 +27,6 @@ _endAngle = TWO_PI; constructor(x, y, width, height, startAngle, endAngle, resolution) { - if (typeof resolution !== 'number') { resolution = Two.Resolution; } @@ -87,7 +85,6 @@ if (typeof y === 'number') { this.position.y = y; } - } /** @@ -105,31 +102,31 @@ * @nota-bene Try not to call this method more than once a frame. */ _update() { - - if (this._flagVertices || this._flagRadius || this._flagStartAngle - || this._flagEndAngle) { - + if ( + this._flagVertices || + this._flagRadius || + this._flagStartAngle || + this._flagWidth || + this._flagHeight || + this._flagEndAngle + ) { const { width, height, startAngle, endAngle, vertices } = this; const rx = width / 2; const ry = height / 2; for (let i = 0; i < vertices.length; i++) { - const v = vertices[i]; const pct = i / (vertices.length - 1); const theta = pct * (endAngle - startAngle) + startAngle; v.x = rx * cos(theta); v.y = ry * sin(theta); - } - } super._update.call(this); return this; - } /** @@ -139,14 +136,15 @@ * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer. */ flagReset() { - super.flagReset.call(this); - this._flagWidth = this._flagHeight = this._flagStartAngle - = this._flagEndAngle = false; + this._flagWidth = + this._flagHeight = + this._flagStartAngle = + this._flagEndAngle = + false; return this; - } /** @@ -157,11 +155,18 @@ * @description Create a new instance of {@link Two.ArcSegment} with the same properties of the current path. */ clone() { - const { width, height, startAngle, endAngle } = this; const resolution = this.vertices.length; - const clone = new Arc(0, 0, width, height, startAngle, endAngle, resolution); + const clone = new Arc( + 0, + 0, + width, + height, + startAngle, + endAngle, + resolution + ); clone.position.copy(this.position); clone.rotation = this.rotation; @@ -183,62 +188,59 @@ } return clone; - } - } const protos = { width: { enumerable: true, - get: function() { + get: function () { return this._width; }, - set: function(v) { + set: function (v) { if (v !== this._width) { this._width = v; this._flagWidth = true; } - } + }, }, height: { enumerable: true, - get: function() { + get: function () { return this._height; }, - set: function(v) { + set: function (v) { if (v !== this._height) { this._height = v; this._flagHeight = true; } - } + }, }, startAngle: { enumerable: true, - get: function() { + get: function () { return this._startAngle; }, - set: function(v) { + set: function (v) { if (v !== this._startAngle) { this._startAngle = v; this._flagStartAngle = true; } - } + }, }, endAngle: { enumerable: true, - get: function() { + get: function () { return this._endAngle; }, - set: function(v) { + set: function (v) { if (v !== this._endAngle) { this._endAngle = v; this._flagEndAngle = true; } - } - } + }, + }, }; Two.Arc = Arc; - })(); diff --git a/extras/jsm/arc.js b/extras/jsm/arc.js index 2b8265d9..a4743184 100644 --- a/extras/jsm/arc.js +++ b/extras/jsm/arc.js @@ -4,7 +4,8 @@ import { Constants } from '../../src/constants.js'; import { Anchor } from '../../src/anchor.js'; import { Path } from '../../src/path.js'; -const cos = Math.cos, sin = Math.sin; +const cos = Math.cos, + sin = Math.sin; /** * @name Two.Arc @@ -19,7 +20,6 @@ const cos = Math.cos, sin = Math.sin; * @param {Number} [resolution=4] - The number of vertices used to construct the circle. */ export class Arc extends Path { - _flagWidth = false; _flagHeight = false; _flagStartAngle = false; @@ -31,7 +31,6 @@ export class Arc extends Path { _endAngle = TWO_PI; constructor(x, y, width, height, startAngle, endAngle, resolution) { - if (typeof resolution !== 'number') { resolution = Constants.Resolution; } @@ -90,7 +89,6 @@ export class Arc extends Path { if (typeof y === 'number') { this.position.y = y; } - } /** @@ -108,31 +106,31 @@ export class Arc extends Path { * @nota-bene Try not to call this method more than once a frame. */ _update() { - - if (this._flagVertices || this._flagRadius || this._flagStartAngle - || this._flagEndAngle) { - + if ( + this._flagVertices || + this._flagRadius || + this._flagWidth || + this._flagHeight || + this._flagStartAngle || + this._flagEndAngle + ) { const { width, height, startAngle, endAngle, vertices } = this; const rx = width / 2; const ry = height / 2; for (let i = 0; i < vertices.length; i++) { - const v = vertices[i]; const pct = i / (vertices.length - 1); const theta = pct * (endAngle - startAngle) + startAngle; v.x = rx * cos(theta); v.y = ry * sin(theta); - } - } super._update.call(this); return this; - } /** @@ -142,14 +140,15 @@ export class Arc extends Path { * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer. */ flagReset() { - super.flagReset.call(this); - this._flagWidth = this._flagHeight = this._flagStartAngle - = this._flagEndAngle = false; + this._flagWidth = + this._flagHeight = + this._flagStartAngle = + this._flagEndAngle = + false; return this; - } /** @@ -160,11 +159,18 @@ export class Arc extends Path { * @description Create a new instance of {@link Two.ArcSegment} with the same properties of the current path. */ clone() { - const { width, height, startAngle, endAngle } = this; const resolution = this.vertices.length; - const clone = new Arc(0, 0, width, height, startAngle, endAngle, resolution); + const clone = new Arc( + 0, + 0, + width, + height, + startAngle, + endAngle, + resolution + ); clone.position.copy(this.position); clone.rotation = this.rotation; @@ -186,58 +192,56 @@ export class Arc extends Path { } return clone; - } - } const protos = { width: { enumerable: true, - get: function() { + get: function () { return this._width; }, - set: function(v) { + set: function (v) { if (v !== this._width) { this._width = v; this._flagWidth = true; } - } + }, }, height: { enumerable: true, - get: function() { + get: function () { return this._height; }, - set: function(v) { + set: function (v) { if (v !== this._height) { this._height = v; this._flagHeight = true; } - } + }, }, startAngle: { enumerable: true, - get: function() { + get: function () { return this._startAngle; }, - set: function(v) { + set: function (v) { if (v !== this._startAngle) { this._startAngle = v; this._flagStartAngle = true; } - } + }, }, endAngle: { enumerable: true, - get: function() { + get: function () { return this._endAngle; }, - set: function(v) { + set: function (v) { if (v !== this._endAngle) { this._endAngle = v; this._flagEndAngle = true; } - } - } + }, + }, }; From d887c7868b1274833606205510f9d03fcd487181 Mon Sep 17 00:00:00 2001 From: Jono Brandel Date: Mon, 24 Jun 2024 10:56:03 -0700 Subject: [PATCH 2/2] Updated formatting --- extras/js/zui.js | 30 ++++++------------------------ extras/jsm/zui.js | 26 +++++--------------------- 2 files changed, 11 insertions(+), 45 deletions(-) diff --git a/extras/js/zui.js b/extras/js/zui.js index 93560641..971c31c5 100644 --- a/extras/js/zui.js +++ b/extras/js/zui.js @@ -1,13 +1,10 @@ -(function() { - +(function () { class Surface { - constructor(object) { this.object = object; } limits(min, max) { - const min_exists = typeof min !== 'undefined'; const max_exists = typeof max !== 'undefined'; @@ -19,7 +16,6 @@ this.max = max_exists ? max : this.max; return this; - } apply(px, py, s) { @@ -27,7 +23,6 @@ this.object.scale = s; return this; } - } /** @@ -37,20 +32,18 @@ * @param {HTMLElement} [domElement=document.body] - The HTML Element to attach event listeners to. */ class ZUI { - constructor(group, domElement) { - this.limits = { scale: ZUI.Limit.clone(), x: ZUI.Limit.clone(), - y: ZUI.Limit.clone() + y: ZUI.Limit.clone(), }; this.viewport = domElement || document.body; this.viewportOffset = { top: 0, left: 0, - matrix: new Two.Matrix() + matrix: new Two.Matrix(), }; this.surfaceMatrix = new Two.Matrix(); @@ -60,7 +53,6 @@ this.updateSurface(); this.add(new Surface(group)); - } static Surface = Surface; @@ -72,14 +64,14 @@ static Limit = { min: -Infinity, max: Infinity, - clone: function() { + clone: function () { const result = {}; for (let k in this) { result[k] = this[k]; } return result; - } - } + }, + }; static TranslateMatrix(m, x, y) { m.elements[2] += x; @@ -105,7 +97,6 @@ } addLimits(min, max) { - if (typeof min !== 'undefined') { if (this.limits.scale.min) { this.limits.scale.min = Math.max(min, this.limits.scale.min); @@ -125,7 +116,6 @@ } return this; - } clientToSurface(a, b, c) { @@ -173,7 +163,6 @@ } zoomSet(zoom, clientX, clientY) { - const newScale = this.fitToLimits(zoom); this.zoom = ZUI.ScaleToPosition(newScale); @@ -193,7 +182,6 @@ this.translateSurface(dx, dy); return this; - } translateSurface(x, y) { @@ -203,7 +191,6 @@ } updateOffset() { - const rect = this.viewport.getBoundingClientRect(); this.viewportOffset.left = rect.left - document.body.scrollLeft; @@ -214,18 +201,15 @@ .translate(this.viewportOffset.left, this.viewportOffset.top); return this; - } updateSurface() { - const e = this.surfaceMatrix.elements; for (let i = 0; i < this.surfaces.length; i++) { this.surfaces[i].apply(e[2], e[5], e[0]); } return this; - } reset() { @@ -238,9 +222,7 @@ fitToLimits(s) { return ZUI.Clamp(s, this.limits.scale.min, this.limits.scale.max); } - } Two.ZUI = ZUI; - })(); diff --git a/extras/jsm/zui.js b/extras/jsm/zui.js index f63a5ae3..b5f51dc4 100644 --- a/extras/jsm/zui.js +++ b/extras/jsm/zui.js @@ -1,13 +1,11 @@ import { Matrix } from '../../src/matrix.js'; class Surface { - constructor(object) { this.object = object; } limits(min, max) { - const min_exists = typeof min !== 'undefined'; const max_exists = typeof max !== 'undefined'; @@ -19,7 +17,6 @@ class Surface { this.max = max_exists ? max : this.max; return this; - } apply(px, py, s) { @@ -27,7 +24,6 @@ class Surface { this.object.scale = s; return this; } - } /** @@ -38,20 +34,18 @@ class Surface { * @description {@link Two.ZUI} is an extra class to turn your Two.js scene into a Google Maps or Adobe Illustrator style interface. See {@link https://codepen.io/jonobr1/pen/PobMKwb} for example usage. */ export class ZUI { - constructor(group, domElement) { - this.limits = { scale: ZUI.Limit.clone(), x: ZUI.Limit.clone(), - y: ZUI.Limit.clone() + y: ZUI.Limit.clone(), }; this.viewport = domElement || document.body; this.viewportOffset = { top: 0, left: 0, - matrix: new Matrix() + matrix: new Matrix(), }; this.surfaceMatrix = new Matrix(); @@ -61,7 +55,6 @@ export class ZUI { this.updateSurface(); this.add(new Surface(group)); - } static Surface = Surface; @@ -73,14 +66,14 @@ export class ZUI { static Limit = { min: -Infinity, max: Infinity, - clone: function() { + clone: function () { const result = {}; for (let k in this) { result[k] = this[k]; } return result; - } - } + }, + }; static TranslateMatrix(m, x, y) { m.elements[2] += x; @@ -112,7 +105,6 @@ export class ZUI { * @param {Number} [max=Infinity] - The maximum scale teh ZUI can zoom in to. */ addLimits(min, max) { - if (typeof min !== 'undefined') { if (this.limits.scale.min) { this.limits.scale.min = Math.max(min, this.limits.scale.min); @@ -132,7 +124,6 @@ export class ZUI { } return this; - } /** @@ -232,7 +223,6 @@ export class ZUI { * @description A function to set the zoom amount and the origin position. This is used internally by {@Two.ZUI#zoomBy}. */ zoomSet(zoom, clientX, clientY) { - const newScale = this.fitToLimits(zoom); this.zoom = ZUI.ScaleToPosition(newScale); @@ -252,7 +242,6 @@ export class ZUI { this.translateSurface(dx, dy); return this; - } /** @@ -269,7 +258,6 @@ export class ZUI { } updateOffset() { - const rect = this.viewport.getBoundingClientRect(); this.viewportOffset.left = rect.left - document.body.scrollLeft; @@ -280,18 +268,15 @@ export class ZUI { .translate(this.viewportOffset.left, this.viewportOffset.top); return this; - } updateSurface() { - const e = this.surfaceMatrix.elements; for (let i = 0; i < this.surfaces.length; i++) { this.surfaces[i].apply(e[2], e[5], e[0]); } return this; - } /** @@ -309,5 +294,4 @@ export class ZUI { fitToLimits(s) { return ZUI.Clamp(s, this.limits.scale.min, this.limits.scale.max); } - }