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

2
ProjectLighthouse/Types/PhotoSubject.cs
View file

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