From 3ddddc168bf20eb9c076db56b3b38eec16950840 Mon Sep 17 00:00:00 2001 From: "nise.moe" Date: Sun, 3 Mar 2024 16:59:19 +0100 Subject: [PATCH] Removed slider image cache since it was buggy --- nise-replay-viewer/package-lock.json | 9 ---- nise-replay-viewer/package.json | 1 - nise-replay-viewer/src/osu/Drawer.ts | 81 +++++++++++++--------------- nise-replay-viewer/yarn.lock | 5 -- 4 files changed, 38 insertions(+), 58 deletions(-) diff --git a/nise-replay-viewer/package-lock.json b/nise-replay-viewer/package-lock.json index 40bc142..b7ef681 100644 --- a/nise-replay-viewer/package-lock.json +++ b/nise-replay-viewer/package-lock.json @@ -37,7 +37,6 @@ "sonner": "^1.3.1", "tailwind-merge": "^2.0.0", "tailwindcss-animate": "^1.0.7", - "ts-md5": "^1.3.1", "zustand": "^4.4.1" }, "devDependencies": { @@ -3646,14 +3645,6 @@ "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==" }, - "node_modules/ts-md5": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-1.3.1.tgz", - "integrity": "sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg==", - "engines": { - "node": ">=12" - } - }, "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", diff --git a/nise-replay-viewer/package.json b/nise-replay-viewer/package.json index 86af9af..dc6d8e5 100644 --- a/nise-replay-viewer/package.json +++ b/nise-replay-viewer/package.json @@ -46,7 +46,6 @@ "sonner": "^1.3.1", "tailwind-merge": "^2.0.0", "tailwindcss-animate": "^1.0.7", - "ts-md5": "^1.3.1", "zustand": "^4.4.1" } } diff --git a/nise-replay-viewer/src/osu/Drawer.ts b/nise-replay-viewer/src/osu/Drawer.ts index 3b3c7f0..7cd007c 100644 --- a/nise-replay-viewer/src/osu/Drawer.ts +++ b/nise-replay-viewer/src/osu/Drawer.ts @@ -1,10 +1,9 @@ import { Vector2 } from "osu-classes"; -import { Md5 } from "ts-md5"; import p5 from "p5"; import { loadImageAsync } from "@/utils"; export class Drawer { - private static imageCache: Record = {}; + static images = { cursor: undefined as any as p5.Image, cursortrail: undefined as any as p5.Image, @@ -129,51 +128,47 @@ export class Drawer { static drawSliderBody(origin: Vector2, path: Vector2[], radius: number) { Drawer.p.push(); - const cacheKey = Md5.hashStr(JSON.stringify(path) + JSON.stringify(radius)); - if (!this.imageCache[cacheKey]) { - const g = Drawer.p.createGraphics(512 * 4, 384 * 4); - g.scale(2); - g.translate(512 - 256, 384 - 192); - //@ts-ignore - const ctx = g.drawingContext; - ctx.lineCap = "round"; - ctx.lineJoin = "round"; - g.translate(origin.x, origin.y); - g.noFill(); + const g = Drawer.p.createGraphics(512 * 4, 384 * 4); + g.scale(2); + g.translate(512 - 256, 384 - 192); + //@ts-ignore + const ctx = g.drawingContext; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + g.translate(origin.x, origin.y); + g.noFill(); - g.strokeWeight(radius * 2 - 10); + g.strokeWeight(radius * 2 - 10); - g.stroke(255); - g.beginShape(); - for (const node of path) { - g.vertex(node.x, node.y); - } - g.endShape(); - - g.strokeWeight(radius * 2 - 17); - g.stroke(10); - g.beginShape(); - for (const node of path) { - g.vertex(node.x, node.y); - } - - g.endShape(); - - for (let i = 0; i < radius * 2 - 17; i += 2) { - g.strokeWeight(radius * 2 - 17 - i); - g.stroke(Math.round((i / (radius * 2 - 17)) * 45)); - g.beginShape(); - for (const node of path) { - g.vertex(node.x, node.y); - } - - g.endShape(); - } - - this.imageCache[cacheKey] = g; + g.stroke(255); + g.beginShape(); + for (const node of path) { + g.vertex(node.x, node.y); } + g.endShape(); + + g.strokeWeight(radius * 2 - 17); + g.stroke(10); + g.beginShape(); + for (const node of path) { + g.vertex(node.x, node.y); + } + + g.endShape(); + + for (let i = 0; i < radius * 2 - 17; i += 2) { + g.strokeWeight(radius * 2 - 17 - i); + g.stroke(Math.round((i / (radius * 2 - 17)) * 45)); + g.beginShape(); + for (const node of path) { + g.vertex(node.x, node.y); + } + + g.endShape(); + } + Drawer.p.imageMode(Drawer.p.CORNER); - Drawer.p.image(this.imageCache[cacheKey], -256, -192, 512 * 2, 384 * 2); + Drawer.p.image(g, -256, -192, 512 * 2, 384 * 2); Drawer.p.pop(); } diff --git a/nise-replay-viewer/yarn.lock b/nise-replay-viewer/yarn.lock index f2aa269..f88e4cf 100644 --- a/nise-replay-viewer/yarn.lock +++ b/nise-replay-viewer/yarn.lock @@ -1899,11 +1899,6 @@ ts-interface-checker@^0.1.9: resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz" integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA== -ts-md5@^1.3.1: - version "1.3.1" - resolved "https://registry.npmjs.org/ts-md5/-/ts-md5-1.3.1.tgz" - integrity sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg== - tslib@^2.0.0, tslib@^2.1.0, tslib@^2.4.0: version "2.6.2" resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"