Union/ProjectLighthouse
1
0
Fork 0
mirror of https://github.com/LBPUnion/ProjectLighthouse.git synced 2025-07-24 14:11:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix performance on photos page

Browse source
This commit is contained in:
jvyden 2021-12-18 15:43:16 -05:00
parent df292dc156
commit d2ec550421
No known key found for this signature in database
GPG key ID: 18BCF2BE0262B278
2 changed files with 15 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

26
ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml
View file

@ -1,14 +1,13 @@
@using LBPUnion.ProjectLighthouse.Types
@model LBPUnion.ProjectLighthouse.Types.Photo
<div style="position: relative">
<canvas class="hide-subjects" id="canvas-subjects-@Model.PhotoId" width="1920" height="1080"
style="position: absolute; transform: rotate(180deg)"></canvas>
style="position: absolute; transform: rotate(180deg)">
</canvas>
<img id="game-image-@Model.PhotoId" src="/gameAssets/@Model.LargeHash"
style="width: 100%; height: auto; border-radius: .28571429rem;">
style="width: 100%; height: auto; border-radius: .28571429rem;">
</div>
<br>
@ -31,14 +30,16 @@
}
</div>
@{
PhotoSubject[] subjects = Model.Subjects.ToArray();
foreach (PhotoSubject subject in subjects) subject.Username = subject.User.Username;
}
<script>
// render the page first so that image heights have been calculated
window.addEventListener("load", function () {
var canvas = document.getElementById("canvas-subjects-@Model.PhotoId");
const canvas = document.getElementById("canvas-subjects-@Model.PhotoId");
const hoverer = document.getElementById("hover-subjects-@Model.PhotoId");
const image = document.getElementById("game-image-@Model.PhotoId");
hoverer.addEventListener('mouseenter', function () {
@ -47,10 +48,10 @@
hoverer.addEventListener('mouseleave', function () {
canvas.className = "photo-subjects hide-subjects";
});
const context = canvas.getContext('2d');
var context = canvas.getContext('2d');
const subjects = @Html.Raw(Json.Serialize(Model.Subjects.ToArray()));
const subjects = @Html.Raw(Json.Serialize(subjects.ToArray()));
canvas.width = image.offsetWidth;
canvas.height = image.clientHeight; // space for names to hang off
@ -65,7 +66,6 @@
const colours = ["#a5599f", "#477f84", "#5fa559", "#a5595f"];
subjects.forEach((s, si) => {
const colour = colours[si % 4];
// Bounding box
@ -92,7 +92,7 @@
context.fillStyle = colour;
// Text width/height for the label background
const tw = context.measureText(s.user.username).width;
const tw = context.measureText(s.username).width;
const th = 24;
// Check if the label will flow off the bottom of the frame
@ -117,7 +117,7 @@
// Draw text, rotated back upright (canvas draws rotated 180deg)
context.fillStyle = "white";
context.rotate(Math.PI);
context.fillText(s.user.username, lx, ly);
context.fillText(s.username, lx, ly);
// reset transform
context.setTransform(1, 0, 0, 1, 0, 0);

2
ProjectLighthouse/Types/PhotoSubject.cs
View file

@ -1,6 +1,7 @@
using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Text.Json.Serialization;
using System.Xml.Serialization;
using LBPUnion.ProjectLighthouse.Serialization;
@ -20,6 +21,7 @@ namespace LBPUnion.ProjectLighthouse.Types
[XmlIgnore]
[ForeignKey(nameof(UserId))]
[JsonIgnore]
public User User { get; set; }
[NotMapped]