ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hover mini-map marker, knowledge base search, and the label generator

Browse Source
This commit is contained in:
Cameron Proudlock
2026-08-21 09:51:12 -04:00
parent 980b2e8be3
commit d26355cebb
1 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/components/LocationMapTooltip.vue
View File

@@ -111,6 +111,18 @@ const markerStyle = computed(() => ({
transform: `translate(-50%, -50%) scale(${1 / zoom.value})` transform: `translate(-50%, -50%) scale(${1 / zoom.value})`
})) }))
// The frame the marker's percentages are measured against MUST be the frame the
// drawing is painted in. The image used object-fit: contain inside a fixed
// 390x300 box, so a level whose drawing is not that aspect ratio was letterboxed
// or pillarboxed - and the marker, positioned at a percentage of the BOX, then
// sat in a different coordinate space from the drawing inside it. A tall
// drawing pillarboxes, every marker's x shifts, and one near the left edge
// lands in the grey gutter beside the map. Levels near 390:300 looked correct,
// which is why it only affected some assets.
//
// The fix is to let the IMAGE size the frame: the frame shrink-wraps the drawing,
// so a percentage of the frame IS a percentage of the drawing, whatever the
// level's aspect ratio. The letterboxing moves out to the preview around it.
// Transform style that centers on the marker and zooms toward it // Transform style that centers on the marker and zooms toward it
const transformStyle = computed(() => { const transformStyle = computed(() => {
// Calculate translation to center the marker in the preview // Calculate translation to center the marker in the preview
@@ -253,6 +265,12 @@ watch(currentTheme, () => {
.map-preview { .map-preview {
position: relative; position: relative;
/* Centres the aspect-fitted frame, which is where the letterboxing now
happens. The frame carries the drawing AND the marker, so the two can no
longer disagree. */
display: flex;
align-items: center;
justify-content: center;
/* Smaller than it was: this is a glance-and-move-on preview, and at 500px it /* Smaller than it was: this is a glance-and-move-on preview, and at 500px it
covered the row it was launched from. Aspect ratio kept. */ covered the row it was launched from. Aspect ratio kept. */
width: 390px; width: 390px;
@@ -263,15 +281,23 @@ watch(currentTheme, () => {
.map-transform { .map-transform {
position: relative; position: relative;
width: 100%; /* Shrink-wraps the image rather than filling the preview, so the box the
height: 100%; marker is positioned in is the box the drawing is painted in. */
max-width: 100%;
max-height: 100%;
transition: transform 0.15s ease-out; transition: transform 0.15s ease-out;
} }
.map-image { .map-image {
width: 100%; /* Sizes itself from the drawing, scaled down to fit the preview. NOT
height: 100%; width/height 100% with object-fit: contain - that painted the drawing
object-fit: contain; letterboxed inside a box the marker was measured against, which put the two
in different coordinate spaces on any level that is not 390:300. */
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
} }
.marker-dot { .marker-dot {