Skip to content
Snippets Groups Projects
Verified Commit 7001b93f authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: Enhanced camera capture and metric components 

Summary of changes
- Refactored imports in `camera-capture.mjs` and aligned formatting for consistency.
- Added `setupLazyCameraInit` for a more efficient camera control initialization.
- Updated the `initCameraControl` function to initialize the camera after the component is visible.
- Adjusted default values and element references in `metric.mjs` and `metric-graph.mjs` for improved clarity.
- Maintained consistent naming and alignment across several CSS and JavaScript files to enhance readability.

The reason for these changes is primarily to improve code readability and maintainability while refactoring to ensure better initialization flows and alignment with modern JavaScript practices. This should make the components easier to work with and manage in future development efforts.
parent bd9f69fb
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 901 additions and 843 deletions
source/components/content/camera-capture.mjs
+ 397
− 366
View file @ 7001b93f
......@@ -114,7 +114,7 @@ class CameraCapture extends CustomElement {
super[assembleMethodSymbol]();
initControlReferences.call(this);
initEventHandler.call(this);
initCameraControl.call(this);
setupLazyCameraInit.call(this);
return this;
}
......@@ -201,6 +201,31 @@ class CameraCapture extends CustomElement {
}
}
/**
* @private
*/
function setupLazyCameraInit() {
const self = this;
let initialized = false;
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting && !initialized) {
initialized = true;
observer.disconnect();
initCameraControl.call(self);
}
}
}, {
root: null,
threshold: 0.1,
});
observer.observe(this);
}
/**
* @private
*/
......@@ -227,7 +252,10 @@ function initCameraControl() {
const cameras = devices.filter((device) => device.kind === "videoinput");
if (cameras.length === 0) {
addErrorAttribute(self, getTranslations().cameraNotSupportedOrNotAllowed);
addErrorAttribute(
self,
getTranslations().cameraNotSupportedOrNotAllowed,
);
return;
}
......@@ -253,7 +281,10 @@ function initCameraControl() {
});
self[fullScreenElementSymbol].style.top = "2rem";
self[controlElementSymbol].insertBefore(select, self[videoElementSymbol]);
self[controlElementSymbol].insertBefore(
select,
self[videoElementSymbol],
);
}
startCameraWithDeviceId.call(self, cameras[0].deviceId);
......@@ -264,7 +295,6 @@ function initCameraControl() {
});
}
function startCameraWithDeviceId(deviceId) {
const self = this;
navigator.mediaDevices
......@@ -485,7 +515,8 @@ function getTemplate() {
// language=HTML
return `
<div data-monster-role="control" part="control">
<monster-full-screen part="full-screen" style="display: none" data-monster-role="full-screen" data-monster-option-selector="[data-monster-role=control]"></monster-full-screen>
<monster-full-screen part="full-screen" style="display: none" data-monster-role="full-screen"
data-monster-option-selector="[data-monster-role=control]"></monster-full-screen>
<monster-state data-monster-role="emptyHistoryState">
<svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="350"
......@@ -514,11 +545,11 @@ function getTemplate() {
</g>
</svg>
<p class="camera-not-supported-text" data-monster-replace="path:labels.cameraNotSupportedOrNotAllowed | default:there was an error:string"></p>
<p class="camera-not-supported-text"
data-monster-replace="path:labels.cameraNotSupportedOrNotAllowed | default:there was an error:string"></p>
</monster-state>
<video autoplay style="display:none"></video>
<canvas style="display:none;"></canvas>
<div>
......
source/components/content/stylesheet/camera-capture.mjs
+ 13
− 6
View file @ 7001b93f
......@@ -13,7 +13,7 @@
import { addAttributeToken } from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
export {CameraCaptureStyleSheet}
export { CameraCaptureStyleSheet };
/**
* @private
......@@ -22,10 +22,17 @@ export {CameraCaptureStyleSheet}
const CameraCaptureStyleSheet = new CSSStyleSheet();
try {
CameraCaptureStyleSheet.insertRule(`
CameraCaptureStyleSheet.insertRule(
`
@layer cameracapture {
[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-primary-4);display:flex;flex-direction:column;justify-content:flex-end;margin:0;padding:0;position:relative}[data-monster-role=full-screen]{position:absolute;right:1rem;top:1rem;z-index:var(--monster-z-index-dropdown)}.camera-not-supported-text{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:1.2rem;font-weight:600;margin:0;padding:1rem;text-align:center}canvas,video{display:block;max-height:100%;max-width:100%}monster-button::part(button){border:none}
}`, 0);
}`,
0,
);
} catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
}
source/components/data/metric-graph.mjs
+ 354
− 356
View file @ 7001b93f
......@@ -16,7 +16,10 @@ import {
ATTRIBUTE_ERRORMESSAGE,
ATTRIBUTE_ROLE,
} from "../../dom/constants.mjs";
import {CustomElement, updaterTransformerMethodsSymbol} from "../../dom/customelement.mjs";
import {
CustomElement,
updaterTransformerMethodsSymbol,
} from "../../dom/customelement.mjs";
import {
assembleMethodSymbol,
registerCustomElement,
......@@ -26,14 +29,15 @@ import {isFunction, isString} from "../../types/is.mjs";
import { MetricGraphStyleSheet } from "./stylesheet/metric-graph.mjs";
import { fireCustomEvent } from "../../dom/events.mjs";
export { MetricGraph };
/**
* @private
* @type {symbol}
*/
export const metricGraphControlElementSymbol = Symbol("metricGraphControlElement");
export const metricGraphControlElementSymbol = Symbol(
"metricGraphControlElement",
);
/**
* A MetricGraph
......@@ -101,28 +105,24 @@ class MetricGraph extends CustomElement {
labels: {
title: null,
subtext: null,
},
classes: {
dot: "monster-theme-primary-1"
dot: "monster-theme-primary-1",
},
aria: {
description: null,
}
},
});
}
/**
*
* @returns {{tosparkline: ((function(*): (string|string))|*)}}
*/
[updaterTransformerMethodsSymbol]() {
return {
"toGraph": (value) => {
toGraph: (value) => {
if (isString(value)) {
value = value.split(",").map((v) => {
return parseFloat(v);
......@@ -151,8 +151,7 @@ class MetricGraph extends CustomElement {
default:
return renderLineGraph.call(this, value);
}
}
},
};
}
......@@ -169,8 +168,6 @@ class MetricGraph extends CustomElement {
static getCSSStyleSheet() {
return [MetricGraphStyleSheet];
}
}
function renderAreaGraph(values, options = {}) {
......@@ -224,25 +221,29 @@ function renderBubbleGraph(values, options = {}) {
let centerY;
switch (align) {
case "top": centerY = maxRadius; break;
case "bottom": centerY = height - maxRadius; break;
case "top":
centerY = maxRadius;
break;
case "bottom":
centerY = height - maxRadius;
break;
case "middle":
default: centerY = height / 2;
default:
centerY = height / 2;
}
return values.map((v, i) => {
return values
.map((v, i) => {
const x = i * stepX + stepX / 2;
const norm = (v - min) / range;
const r = minRadius + norm * (maxRadius - minRadius);
const opacity = lightRange[0] + norm * (lightRange[1] - lightRange[0]);
return `<circle cx="${x.toFixed(2)}" cy="${centerY.toFixed(2)}" r="${r.toFixed(2)}" fill="currentColor" fill-opacity="${opacity.toFixed(2)}" />`;
}).join("");
})
.join("");
}
function renderLollipopGraph(values, options = {}) {
const {
width = 100,
......@@ -260,16 +261,17 @@ function renderLollipopGraph(values, options = {}) {
const step = width / (values.length - 1);
return values.map((v, i) => {
return values
.map((v, i) => {
const x = i * step;
const y = height - ((v - min) / range) * height;
const line = `<line x1="${x}" y1="${height}" x2="${x}" y2="${y}" stroke="${color}" stroke-width="${strokeWidth}" />`;
const circle = `<circle cx="${x}" cy="${y}" r="${radius}" fill="${color}" />`;
return line + circle;
}).join("");
})
.join("");
}
function renderDotGraph(values, options = {}) {
const {
width = 100,
......@@ -286,15 +288,15 @@ function renderDotGraph(values, options = {}) {
const step = width / (values.length - 1);
return values.map((v, i) => {
return values
.map((v, i) => {
const x = i * step;
const y = height - ((v - min) / range) * height;
return `<circle cx="${x.toFixed(2)}" cy="${y.toFixed(2)}" r="${radius}" fill="${color}" />`;
}).join("");
})
.join("");
}
function renderBarGraph(values, options = {}) {
const {
width = 100,
......@@ -406,7 +408,6 @@ function renderStepGraph(values, options = {}) {
return `<path d="${d}" stroke="${stroke}" stroke-width="${strokeWidth}" fill="${fill}" stroke-linecap="round" stroke-linejoin="round" />`;
}
/**
* @private
* @return {void}
......@@ -417,7 +418,6 @@ function initControlReferences() {
);
}
/**
* @private
* @return {string}
......@@ -470,6 +470,4 @@ function getTemplate() {
</div>`;
}
registerCustomElement(MetricGraph);
source/components/data/metric.mjs
+ 92
− 94
View file @ 7001b93f
......@@ -106,7 +106,7 @@ class Metric extends CustomElement {
aria: {
description: null,
}
},
});
}
......@@ -123,8 +123,6 @@ class Metric extends CustomElement {
static getCSSStyleSheet() {
return [MetricStyleSheet];
}
}
/**
......
source/components/data/stylesheet/metric-graph.mjs
+ 13
− 6
View file @ 7001b93f
This diff is collapsed.
source/components/data/stylesheet/metric.mjs
+ 13
− 6
View file @ 7001b93f
This diff is collapsed.
source/components/layout/split-panel.mjs
+ 15
− 8
View file @ 7001b93f
......@@ -297,7 +297,6 @@ function initEventHandler() {
}
this[draggerElementSymbol].addEventListener("touchstart", (startEvent) => {
startEvent.preventDefault();
self[internalSymbol].getSubject().isDragging = true;
......@@ -308,7 +307,10 @@ function initEventHandler() {
if (!touch) return;
// identical logic as in mousemove - but with touch.clientX/clientY
let draggerWidth = getComputedStyle(self[draggerElementSymbol]).getPropertyValue("--monster-dragger-width") || "0";
let draggerWidth =
getComputedStyle(self[draggerElementSymbol]).getPropertyValue(
"--monster-dragger-width",
) || "0";
if (self.getOption("splitType") === TYPE_HORIZONTAL) {
const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
......@@ -316,30 +318,36 @@ function initEventHandler() {
const min = this.getOption("dimension").min;
const max = this.getOption("dimension").max;
const topAsPercent = (newTopHeight / this[splitScreenElementSymbol].offsetHeight) * 100;
const topAsPercent =
(newTopHeight / this[splitScreenElementSymbol].offsetHeight) * 100;
if (parseInt(min) > topAsPercent) newTopHeight = min;
else if (parseInt(max) < topAsPercent) newTopHeight = max;
else newTopHeight = topAsPercent + "%";
const newTopHeightPx = (parseInt(newTopHeight) / 100) * this[splitScreenElementSymbol].offsetHeight;
const newTopHeightPx =
(parseInt(newTopHeight) / 100) *
this[splitScreenElementSymbol].offsetHeight;
self[startPanelElementSymbol].style.height = `${newTopHeightPx}px`;
self[endPanelElementSymbol].style.height = `calc(100% - ${newTopHeightPx}px - ${draggerWidth})`;
self[endPanelElementSymbol].style.height =
`calc(100% - ${newTopHeightPx}px - ${draggerWidth})`;
} else {
const containerOffsetLeft = self[splitScreenElementSymbol].offsetLeft;
let newLeftWidth = touch.clientX - containerOffsetLeft;
const min = this.getOption("dimension").min;
const max = this.getOption("dimension").max;
const leftAsPercent = (newLeftWidth / this[splitScreenElementSymbol].offsetWidth) * 100;
const leftAsPercent =
(newLeftWidth / this[splitScreenElementSymbol].offsetWidth) * 100;
if (parseInt(min) > leftAsPercent) newLeftWidth = min;
else if (parseInt(max) < leftAsPercent) newLeftWidth = max;
else newLeftWidth = leftAsPercent + "%";
self[startPanelElementSymbol].style.width = `${newLeftWidth}`;
self[endPanelElementSymbol].style.width = `calc(100% - ${newLeftWidth} - ${draggerWidth})`;
self[endPanelElementSymbol].style.width =
`calc(100% - ${newLeftWidth} - ${draggerWidth})`;
}
};
......@@ -353,7 +361,6 @@ function initEventHandler() {
document.addEventListener("touchend", dragTouchEnd);
});
let userSelectDefault = getDocument().body.style.userSelect;
this[draggerElementSymbol].addEventListener("mousedown", () => {
......
source/monster.mjs
+ 3
− 0
View file @ 7001b93f
......@@ -21,6 +21,7 @@
export * from "./components/layout/collapse.mjs";
export * from "./components/layout/iframe.mjs";
export * from "./components/layout/tabs.mjs";
export * from "./components/layout/full-screen.mjs";
export * from "./components/layout/split-panel.mjs";
export * from "./components/layout/overlay.mjs";
export * from "./components/layout/popper.mjs";
......@@ -108,6 +109,8 @@ export * from "./components/state/log/entry.mjs";
export * from "./components/state/state.mjs";
export * from "./components/state/log.mjs";
export * from "./components/navigation/table-of-content.mjs";
export * from "./components/data/metric-graph.mjs";
export * from "./components/data/metric.mjs";
export * from "./components/constants.mjs";
export * from "./components/constants.mjs";
export * from "./text/formatter.mjs";
......
source/types/version.mjs
+ 1
− 1
View file @ 7001b93f
......@@ -156,7 +156,7 @@ function getMonsterVersion() {
}
/** don't touch, replaced by make with package.json version */
monsterVersion = new Version("4.10.0");
monsterVersion = new Version("4.11.0");
return monsterVersion;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment