Skip to content

Commit c37acad

Browse files
salkiniumsalkinium
committed
More visual refinements
1 parent 24dfe13 commit c37acad

4 files changed

Lines changed: 216 additions & 6 deletions

File tree

‎src/modm_pinout/assets/scripts/pinout-package.js‎

Lines changed: 164 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -609,6 +609,31 @@
609609
return { zoomOutButton, zoomInButton, zoomLabel };
610610
};
611611

612+
ctx.syncPackageViewportResizeHandle = function syncPackageViewportResizeHandle() {
613+
const packageUi = ctx.packageUi || null;
614+
if (!packageUi || !packageUi.resizeHandle) {
615+
return;
616+
}
617+
618+
const bounds = ctx.packageViewportHeightBounds();
619+
const height = Math.round(packageUi.viewportHeight || bounds.min);
620+
packageUi.resizeHandle.setAttribute("aria-valuemin", String(bounds.min));
621+
packageUi.resizeHandle.setAttribute("aria-valuemax", String(bounds.max));
622+
packageUi.resizeHandle.setAttribute("aria-valuenow", String(height));
623+
packageUi.resizeHandle.setAttribute("aria-valuetext", `Package viewport height ${height} pixels`);
624+
};
625+
626+
ctx.refitPackageToViewport = function refitPackageToViewport() {
627+
const packageUi = ctx.packageUi || null;
628+
if (!packageUi || !packageUi.svg) {
629+
return;
630+
}
631+
632+
const fallbackWidth = packageUi.defaultBaseWidth || packageUi.baseWidth;
633+
packageUi.baseWidth = ctx.fitPackageBaseWidthToViewport(fallbackWidth);
634+
ctx.applyPackageZoom();
635+
};
636+
612637
ctx.packageViewportHeightBounds = function packageViewportHeightBounds() {
613638
return {
614639
min: 360,
@@ -626,6 +651,132 @@
626651
const height = clamp(nextHeight, bounds.min, bounds.max);
627652
packageUi.viewportHeight = height;
628653
packageUi.mountNode.style.height = `${Math.round(height)}px`;
654+
ctx.refitPackageToViewport();
655+
ctx.syncPackageViewportResizeHandle();
656+
};
657+
658+
ctx.finishPackageViewportResize = function finishPackageViewportResize(pointerId = null) {
659+
const packageUi = ctx.packageUi || null;
660+
if (!packageUi || !packageUi.resizeHandle || !packageUi.mouseDrag) {
661+
return;
662+
}
663+
664+
if (pointerId != null && packageUi.mouseDrag.pointerId !== pointerId) {
665+
return;
666+
}
667+
668+
if (
669+
packageUi.mouseDrag.pointerId != null &&
670+
typeof packageUi.resizeHandle.hasPointerCapture === "function" &&
671+
packageUi.resizeHandle.hasPointerCapture(packageUi.mouseDrag.pointerId)
672+
) {
673+
packageUi.resizeHandle.releasePointerCapture(packageUi.mouseDrag.pointerId);
674+
}
675+
676+
packageUi.mouseDrag = null;
677+
packageUi.resizeHandle.classList.remove("package-diagram-resizer-active");
678+
document.body.classList.remove("package-resize-active");
679+
};
680+
681+
ctx.bindPackageViewportResizeHandle = function bindPackageViewportResizeHandle() {
682+
const resizeHandle = document.getElementById("package-diagram-resizer");
683+
if (!resizeHandle || resizeHandle.dataset.bound === "true") {
684+
return;
685+
}
686+
687+
const resizeBy = (delta) => {
688+
const packageUi = ctx.packageUi || null;
689+
if (!packageUi) {
690+
return;
691+
}
692+
ctx.setPackageViewportHeight((packageUi.viewportHeight || 0) + delta);
693+
};
694+
695+
resizeHandle.addEventListener("pointerdown", (event) => {
696+
if (event.button !== 0 && event.pointerType !== "touch" && event.pointerType !== "pen") {
697+
return;
698+
}
699+
700+
const packageUi = ctx.packageUi || null;
701+
if (!packageUi || !packageUi.mountNode || packageUi.resizeHandle !== resizeHandle) {
702+
return;
703+
}
704+
705+
event.preventDefault();
706+
ctx.hidePackageTooltip();
707+
ctx.closePackageFunctionPicker();
708+
packageUi.mouseDrag = {
709+
pointerId: event.pointerId,
710+
startY: event.clientY,
711+
startHeight: packageUi.viewportHeight || packageUi.mountNode.getBoundingClientRect().height || 0,
712+
};
713+
packageUi.resizeHandle.classList.add("package-diagram-resizer-active");
714+
document.body.classList.add("package-resize-active");
715+
716+
if (typeof resizeHandle.setPointerCapture === "function") {
717+
resizeHandle.setPointerCapture(event.pointerId);
718+
}
719+
});
720+
721+
resizeHandle.addEventListener("pointermove", (event) => {
722+
const packageUi = ctx.packageUi || null;
723+
if (!packageUi || !packageUi.mouseDrag || packageUi.mouseDrag.pointerId !== event.pointerId) {
724+
return;
725+
}
726+
727+
event.preventDefault();
728+
const nextHeight = packageUi.mouseDrag.startHeight + (event.clientY - packageUi.mouseDrag.startY);
729+
ctx.setPackageViewportHeight(nextHeight);
730+
});
731+
732+
const stopResize = (event) => {
733+
if (!event) {
734+
ctx.finishPackageViewportResize();
735+
return;
736+
}
737+
ctx.finishPackageViewportResize(event.pointerId);
738+
};
739+
740+
resizeHandle.addEventListener("pointerup", stopResize);
741+
resizeHandle.addEventListener("pointercancel", stopResize);
742+
resizeHandle.addEventListener("lostpointercapture", stopResize);
743+
744+
resizeHandle.addEventListener("keydown", (event) => {
745+
switch (event.key) {
746+
case "ArrowDown":
747+
event.preventDefault();
748+
resizeBy(24);
749+
break;
750+
case "ArrowUp":
751+
event.preventDefault();
752+
resizeBy(-24);
753+
break;
754+
case "PageDown":
755+
event.preventDefault();
756+
resizeBy(96);
757+
break;
758+
case "PageUp":
759+
event.preventDefault();
760+
resizeBy(-96);
761+
break;
762+
case "Home": {
763+
const bounds = ctx.packageViewportHeightBounds();
764+
event.preventDefault();
765+
ctx.setPackageViewportHeight(bounds.min);
766+
break;
767+
}
768+
case "End": {
769+
const bounds = ctx.packageViewportHeightBounds();
770+
event.preventDefault();
771+
ctx.setPackageViewportHeight(bounds.max);
772+
break;
773+
}
774+
default:
775+
break;
776+
}
777+
});
778+
779+
resizeHandle.dataset.bound = "true";
629780
};
630781

631782
ctx.bindPackageZoomControls = function bindPackageZoomControls() {
@@ -730,6 +881,15 @@
730881
}
731882
});
732883

884+
window.addEventListener("resize", () => {
885+
const packageUi = ctx.packageUi || null;
886+
if (!packageUi) {
887+
return;
888+
}
889+
890+
ctx.setPackageViewportHeight(packageUi.viewportHeight);
891+
});
892+
733893
ctx.packageGlobalHandlersBound = true;
734894
};
735895

@@ -1523,6 +1683,7 @@
15231683
const mountNode = document.getElementById("package-diagram");
15241684
const controlsNode = document.getElementById("package-view-controls");
15251685
const subtitleNode = document.getElementById("package-subtitle");
1686+
const resizeHandle = document.getElementById("package-diagram-resizer");
15261687
if (!mountNode) {
15271688
return;
15281689
}
@@ -1581,11 +1742,13 @@
15811742
highlightedRowIds: new Set(),
15821743
highlightedField: null,
15831744
baseWidth: ctx.packageRendererDefaultWidth(packageModel),
1745+
defaultBaseWidth: ctx.packageRendererDefaultWidth(packageModel),
15841746
zoom: 1,
15851747
zoomConfig: ctx.packageRendererZoomConfig(packageModel),
15861748
zoomOutButton: zoomControls ? zoomControls.zoomOutButton : null,
15871749
zoomInButton: zoomControls ? zoomControls.zoomInButton : null,
15881750
zoomLabel: zoomControls ? zoomControls.zoomLabel : null,
1751+
resizeHandle,
15891752
viewportHeight: mountNode.getBoundingClientRect().height || 640,
15901753
mouseDrag: null,
15911754
touchGesture: null,
@@ -1598,9 +1761,8 @@
15981761
stage.append(svg, tooltip, picker);
15991762
mountNode.append(stage);
16001763
ctx.setPackageViewportHeight(ctx.packageUi.viewportHeight);
1601-
ctx.packageUi.baseWidth = ctx.fitPackageBaseWidthToViewport(ctx.packageUi.baseWidth);
1764+
ctx.bindPackageViewportResizeHandle();
16021765
ctx.bindPackageZoomControls();
1603-
ctx.applyPackageZoom();
16041766
ctx.resetPackageDetail();
16051767
};
16061768
};

‎src/modm_pinout/assets/scripts/pinout-table.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,7 @@
3131

3232
ctx.isPackageHeaderHighlightField = function isPackageHeaderHighlightField(field) {
3333
const normalizedField = String(field || "");
34-
return normalizedField === "selected_function"
35-
|| normalizedField === "internal_name"
34+
return ctx.BASE_REGEX_FILTER_FIELDS.includes(normalizedField)
3635
|| /^regex_\d+$/.test(normalizedField);
3736
};
3837

@@ -117,8 +116,9 @@
117116
};
118117

119118
ctx.bindAllPackageHeaderHighlights = function bindAllPackageHeaderHighlights() {
120-
ctx.bindPackageHeaderHighlight("selected_function");
121-
ctx.bindPackageHeaderHighlight("internal_name");
119+
for (const field of ctx.BASE_REGEX_FILTER_FIELDS) {
120+
ctx.bindPackageHeaderHighlight(field);
121+
}
122122
for (const meta of state.regexColumns) {
123123
ctx.bindPackageHeaderHighlight(meta.field);
124124
}

‎src/modm_pinout/assets/styles/pinout.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,45 @@ body {
205205
overflow: auto;
206206
}
207207

208+
.package-diagram-resizer {
209+
display: flex;
210+
justify-content: center;
211+
align-items: center;
212+
width: 100%;
213+
margin-top: 8px;
214+
padding: 4px 0 0;
215+
border-radius: 999px;
216+
color: var(--muted);
217+
cursor: ns-resize;
218+
touch-action: none;
219+
}
220+
221+
.package-diagram-resizer::before {
222+
content: "";
223+
width: min(132px, calc(100% - 32px));
224+
height: 6px;
225+
border-radius: 999px;
226+
background: var(--border);
227+
transition: background 120ms ease, transform 120ms ease;
228+
}
229+
230+
.package-diagram-resizer:hover::before,
231+
.package-diagram-resizer:focus-visible::before,
232+
.package-diagram-resizer-active::before {
233+
background: var(--accent);
234+
transform: scaleY(1.1);
235+
}
236+
237+
.package-diagram-resizer:focus-visible {
238+
outline: none;
239+
}
240+
241+
body.package-resize-active,
242+
body.package-resize-active * {
243+
cursor: ns-resize !important;
244+
user-select: none;
245+
}
246+
208247
.package-stage {
209248
position: relative;
210249
display: inline-flex;

‎src/modm_pinout/templates/pin_matrix.html.j2‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,15 @@
3535
<div id="package-view-controls" class="package-view-controls" aria-label="Package zoom controls"></div>
3636
</div>
3737
<div id="package-diagram" class="package-diagram" role="img" aria-label="Graphical package layout"></div>
38+
<div
39+
id="package-diagram-resizer"
40+
class="package-diagram-resizer"
41+
role="separator"
42+
aria-controls="package-diagram"
43+
aria-label="Resize package viewport"
44+
aria-orientation="horizontal"
45+
tabindex="0"
46+
></div>
3847
</section>
3948
{% endif %}
4049

0 commit comments

Comments
 (0)