diff options
Diffstat (limited to 'web/pw-visualizer')
| -rw-r--r-- | web/pw-visualizer/src/style.css | 19 | ||||
| -rw-r--r-- | web/pw-visualizer/src/webgl/util.ts | 26 |
2 files changed, 17 insertions, 28 deletions
diff --git a/web/pw-visualizer/src/style.css b/web/pw-visualizer/src/style.css index 09e33e6..02ab069 100644 --- a/web/pw-visualizer/src/style.css +++ b/web/pw-visualizer/src/style.css @@ -275,22 +275,3 @@ background: #ff7000; cursor: pointer; } - - ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - border-radius: 10px; - background-color: #444; - border-radius: 10px; - } - - ::-webkit-scrollbar { - width: 10px; - background-color: #444; - } - - ::-webkit-scrollbar-thumb { - border-radius: 10px; - background-color: #F90; - background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) - }
\ No newline at end of file diff --git a/web/pw-visualizer/src/webgl/util.ts b/web/pw-visualizer/src/webgl/util.ts index e08af3f..7b55d19 100644 --- a/web/pw-visualizer/src/webgl/util.ts +++ b/web/pw-visualizer/src/webgl/util.ts @@ -87,30 +87,39 @@ export class Resizer { this.viewbox = [...viewbox]; this.el_box = [el.width, el.height]; + // QUICK FIX: + // when filling the full display canvas, the turn bar will obstruct the bottom planets. + // to resolve this, we shift the viewbox up by 50px. + // This should be implemented in a cleaner way, though :( + let dy = 50 * viewbox[3] / el.height; + this.viewbox[1] -= dy; + this.viewbox[3] += dy; + if (keep_aspect_ratio) { const or_width = this.viewbox[2]; const or_height = this.viewbox[3]; - const width_percentage = this.viewbox[2] / el.width; - const height_percentage = this.viewbox[3] / el.height; + const width_percentage = this.viewbox[2] / this.el_box[0]; + const height_percentage = this.viewbox[3] / this.el_box[1]; + if (width_percentage < height_percentage) { // width should be larger - this.viewbox[2] = height_percentage * el.width; + this.viewbox[2] = height_percentage * this.el_box[0]; } else { // height should be larger - this.viewbox[3] = width_percentage * el.height; + this.viewbox[3] = width_percentage * this.el_box[1]; } this.viewbox[0] -= (this.viewbox[2] - or_width) / 2; this.viewbox[1] -= (this.viewbox[3] - or_height) / 2; + this.scaleX = this.viewbox[2] / this.viewbox[3]; } this.orig_viewbox = [...this.viewbox]; - el.addEventListener("mouseenter", this.mouseenter.bind(this), { capture: false, passive: true}); el.addEventListener("mouseleave", this.mouseleave.bind(this), { capture: false, passive: true}); el.addEventListener("mousemove", this.mousemove.bind(this), { capture: false, passive: true}); el.addEventListener("mousedown", this.mousedown.bind(this), { capture: false, passive: true}); @@ -127,15 +136,14 @@ export class Resizer { this.viewbox[1] = Math.min(this.viewbox[1] + this.viewbox[3], this.orig_viewbox[1] + this.orig_viewbox[3]) - this.viewbox[3]; } - mouseenter() { - this.hoovering = true; - } - mouseleave() { this.hoovering = false; } mousemove(e: MouseEvent) { + // when using mouseenter, hooveing will not be set to true if the mouse is already on the element when it is being created. + // TODO: is there a better way? + this.hoovering = true; this.mouse_pos = [e.offsetX, this.el_box[1] - e.offsetY]; if (this.dragging) { |