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 { ...@@ -114,7 +114,7 @@ class CameraCapture extends CustomElement {
super[assembleMethodSymbol](); super[assembleMethodSymbol]();
initControlReferences.call(this); initControlReferences.call(this);
initEventHandler.call(this); initEventHandler.call(this);
initCameraControl.call(this); setupLazyCameraInit.call(this);
return this; return this;
} }
...@@ -201,6 +201,31 @@ class CameraCapture extends CustomElement { ...@@ -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 * @private
*/ */
...@@ -227,7 +252,10 @@ function initCameraControl() { ...@@ -227,7 +252,10 @@ function initCameraControl() {
const cameras = devices.filter((device) => device.kind === "videoinput"); const cameras = devices.filter((device) => device.kind === "videoinput");
if (cameras.length === 0) { if (cameras.length === 0) {
addErrorAttribute(self, getTranslations().cameraNotSupportedOrNotAllowed); addErrorAttribute(
self,
getTranslations().cameraNotSupportedOrNotAllowed,
);
return; return;
} }
...@@ -253,7 +281,10 @@ function initCameraControl() { ...@@ -253,7 +281,10 @@ function initCameraControl() {
}); });
self[fullScreenElementSymbol].style.top = "2rem"; self[fullScreenElementSymbol].style.top = "2rem";
self[controlElementSymbol].insertBefore(select, self[videoElementSymbol]); self[controlElementSymbol].insertBefore(
select,
self[videoElementSymbol],
);
} }
startCameraWithDeviceId.call(self, cameras[0].deviceId); startCameraWithDeviceId.call(self, cameras[0].deviceId);
...@@ -264,7 +295,6 @@ function initCameraControl() { ...@@ -264,7 +295,6 @@ function initCameraControl() {
}); });
} }
function startCameraWithDeviceId(deviceId) { function startCameraWithDeviceId(deviceId) {
const self = this; const self = this;
navigator.mediaDevices navigator.mediaDevices
...@@ -485,7 +515,8 @@ function getTemplate() { ...@@ -485,7 +515,8 @@ function getTemplate() {
// language=HTML // language=HTML
return ` return `
<div data-monster-role="control" part="control"> <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"> <monster-state data-monster-role="emptyHistoryState">
<svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="350" width="350"
...@@ -514,11 +545,11 @@ function getTemplate() { ...@@ -514,11 +545,11 @@ function getTemplate() {
</g> </g>
</svg> </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> </monster-state>
<video autoplay style="display:none"></video> <video autoplay style="display:none"></video>
<canvas style="display:none;"></canvas> <canvas style="display:none;"></canvas>
<div> <div>
......
source/components/content/stylesheet/camera-capture.mjs
+ 13
− 6
View file @ 7001b93f
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
import { addAttributeToken } from "../../../dom/attributes.mjs"; import { addAttributeToken } from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs"; import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
export {CameraCaptureStyleSheet} export { CameraCaptureStyleSheet };
/** /**
* @private * @private
...@@ -22,10 +22,17 @@ export {CameraCaptureStyleSheet} ...@@ -22,10 +22,17 @@ export {CameraCaptureStyleSheet}
const CameraCaptureStyleSheet = new CSSStyleSheet(); const CameraCaptureStyleSheet = new CSSStyleSheet();
try { try {
CameraCaptureStyleSheet.insertRule(` CameraCaptureStyleSheet.insertRule(
`
@layer cameracapture { @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} [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) { } 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 { ...@@ -16,7 +16,10 @@ import {
ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_ERRORMESSAGE,
ATTRIBUTE_ROLE, ATTRIBUTE_ROLE,
} from "../../dom/constants.mjs"; } from "../../dom/constants.mjs";
import {CustomElement, updaterTransformerMethodsSymbol} from "../../dom/customelement.mjs"; import {
CustomElement,
updaterTransformerMethodsSymbol,
} from "../../dom/customelement.mjs";
import { import {
assembleMethodSymbol, assembleMethodSymbol,
registerCustomElement, registerCustomElement,
...@@ -26,14 +29,15 @@ import {isFunction, isString} from "../../types/is.mjs"; ...@@ -26,14 +29,15 @@ import {isFunction, isString} from "../../types/is.mjs";
import { MetricGraphStyleSheet } from "./stylesheet/metric-graph.mjs"; import { MetricGraphStyleSheet } from "./stylesheet/metric-graph.mjs";
import { fireCustomEvent } from "../../dom/events.mjs"; import { fireCustomEvent } from "../../dom/events.mjs";
export { MetricGraph }; export { MetricGraph };
/** /**
* @private * @private
* @type {symbol} * @type {symbol}
*/ */
export const metricGraphControlElementSymbol = Symbol("metricGraphControlElement"); export const metricGraphControlElementSymbol = Symbol(
"metricGraphControlElement",
);
/** /**
* A MetricGraph * A MetricGraph
...@@ -101,28 +105,24 @@ class MetricGraph extends CustomElement { ...@@ -101,28 +105,24 @@ class MetricGraph extends CustomElement {
labels: { labels: {
title: null, title: null,
subtext: null, subtext: null,
}, },
classes: { classes: {
dot: "monster-theme-primary-1" dot: "monster-theme-primary-1",
}, },
aria: { aria: {
description: null, description: null,
} },
}); });
} }
/** /**
* *
* @returns {{tosparkline: ((function(*): (string|string))|*)}} * @returns {{tosparkline: ((function(*): (string|string))|*)}}
*/ */
[updaterTransformerMethodsSymbol]() { [updaterTransformerMethodsSymbol]() {
return { return {
"toGraph": (value) => { toGraph: (value) => {
if (isString(value)) { if (isString(value)) {
value = value.split(",").map((v) => { value = value.split(",").map((v) => {
return parseFloat(v); return parseFloat(v);
...@@ -151,8 +151,7 @@ class MetricGraph extends CustomElement { ...@@ -151,8 +151,7 @@ class MetricGraph extends CustomElement {
default: default:
return renderLineGraph.call(this, value); return renderLineGraph.call(this, value);
} }
},
}
}; };
} }
...@@ -169,8 +168,6 @@ class MetricGraph extends CustomElement { ...@@ -169,8 +168,6 @@ class MetricGraph extends CustomElement {
static getCSSStyleSheet() { static getCSSStyleSheet() {
return [MetricGraphStyleSheet]; return [MetricGraphStyleSheet];
} }
} }
function renderAreaGraph(values, options = {}) { function renderAreaGraph(values, options = {}) {
...@@ -224,25 +221,29 @@ function renderBubbleGraph(values, options = {}) { ...@@ -224,25 +221,29 @@ function renderBubbleGraph(values, options = {}) {
let centerY; let centerY;
switch (align) { switch (align) {
case "top": centerY = maxRadius; break; case "top":
case "bottom": centerY = height - maxRadius; break; centerY = maxRadius;
break;
case "bottom":
centerY = height - maxRadius;
break;
case "middle": 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 x = i * stepX + stepX / 2;
const norm = (v - min) / range; const norm = (v - min) / range;
const r = minRadius + norm * (maxRadius - minRadius); const r = minRadius + norm * (maxRadius - minRadius);
const opacity = lightRange[0] + norm * (lightRange[1] - lightRange[0]); 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)}" />`; 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 = {}) { function renderLollipopGraph(values, options = {}) {
const { const {
width = 100, width = 100,
...@@ -260,16 +261,17 @@ function renderLollipopGraph(values, options = {}) { ...@@ -260,16 +261,17 @@ function renderLollipopGraph(values, options = {}) {
const step = width / (values.length - 1); const step = width / (values.length - 1);
return values.map((v, i) => { return values
.map((v, i) => {
const x = i * step; const x = i * step;
const y = height - ((v - min) / range) * height; const y = height - ((v - min) / range) * height;
const line = `<line x1="${x}" y1="${height}" x2="${x}" y2="${y}" stroke="${color}" stroke-width="${strokeWidth}" />`; 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}" />`; const circle = `<circle cx="${x}" cy="${y}" r="${radius}" fill="${color}" />`;
return line + circle; return line + circle;
}).join(""); })
.join("");
} }
function renderDotGraph(values, options = {}) { function renderDotGraph(values, options = {}) {
const { const {
width = 100, width = 100,
...@@ -286,15 +288,15 @@ function renderDotGraph(values, options = {}) { ...@@ -286,15 +288,15 @@ function renderDotGraph(values, options = {}) {
const step = width / (values.length - 1); const step = width / (values.length - 1);
return values.map((v, i) => { return values
.map((v, i) => {
const x = i * step; const x = i * step;
const y = height - ((v - min) / range) * height; const y = height - ((v - min) / range) * height;
return `<circle cx="${x.toFixed(2)}" cy="${y.toFixed(2)}" r="${radius}" fill="${color}" />`; return `<circle cx="${x.toFixed(2)}" cy="${y.toFixed(2)}" r="${radius}" fill="${color}" />`;
}).join(""); })
.join("");
} }
function renderBarGraph(values, options = {}) { function renderBarGraph(values, options = {}) {
const { const {
width = 100, width = 100,
...@@ -406,7 +408,6 @@ function renderStepGraph(values, options = {}) { ...@@ -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" />`; return `<path d="${d}" stroke="${stroke}" stroke-width="${strokeWidth}" fill="${fill}" stroke-linecap="round" stroke-linejoin="round" />`;
} }
/** /**
* @private * @private
* @return {void} * @return {void}
...@@ -417,7 +418,6 @@ function initControlReferences() { ...@@ -417,7 +418,6 @@ function initControlReferences() {
); );
} }
/** /**
* @private * @private
* @return {string} * @return {string}
...@@ -470,6 +470,4 @@ function getTemplate() { ...@@ -470,6 +470,4 @@ function getTemplate() {
</div>`; </div>`;
} }
registerCustomElement(MetricGraph); registerCustomElement(MetricGraph);
source/components/data/metric.mjs
+ 92
− 94
View file @ 7001b93f
...@@ -106,7 +106,7 @@ class Metric extends CustomElement { ...@@ -106,7 +106,7 @@ class Metric extends CustomElement {
aria: { aria: {
description: null, description: null,
} },
}); });
} }
...@@ -123,8 +123,6 @@ class Metric extends CustomElement { ...@@ -123,8 +123,6 @@ class Metric extends CustomElement {
static getCSSStyleSheet() { static getCSSStyleSheet() {
return [MetricStyleSheet]; 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() { ...@@ -297,7 +297,6 @@ function initEventHandler() {
} }
this[draggerElementSymbol].addEventListener("touchstart", (startEvent) => { this[draggerElementSymbol].addEventListener("touchstart", (startEvent) => {
startEvent.preventDefault(); startEvent.preventDefault();
self[internalSymbol].getSubject().isDragging = true; self[internalSymbol].getSubject().isDragging = true;
...@@ -308,7 +307,10 @@ function initEventHandler() { ...@@ -308,7 +307,10 @@ function initEventHandler() {
if (!touch) return; if (!touch) return;
// identical logic as in mousemove - but with touch.clientX/clientY // 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) { if (self.getOption("splitType") === TYPE_HORIZONTAL) {
const containerOffsetTop = self[splitScreenElementSymbol].offsetTop; const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
...@@ -316,30 +318,36 @@ function initEventHandler() { ...@@ -316,30 +318,36 @@ function initEventHandler() {
const min = this.getOption("dimension").min; const min = this.getOption("dimension").min;
const max = this.getOption("dimension").max; 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; if (parseInt(min) > topAsPercent) newTopHeight = min;
else if (parseInt(max) < topAsPercent) newTopHeight = max; else if (parseInt(max) < topAsPercent) newTopHeight = max;
else newTopHeight = topAsPercent + "%"; 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[startPanelElementSymbol].style.height = `${newTopHeightPx}px`;
self[endPanelElementSymbol].style.height = `calc(100% - ${newTopHeightPx}px - ${draggerWidth})`; self[endPanelElementSymbol].style.height =
`calc(100% - ${newTopHeightPx}px - ${draggerWidth})`;
} else { } else {
const containerOffsetLeft = self[splitScreenElementSymbol].offsetLeft; const containerOffsetLeft = self[splitScreenElementSymbol].offsetLeft;
let newLeftWidth = touch.clientX - containerOffsetLeft; let newLeftWidth = touch.clientX - containerOffsetLeft;
const min = this.getOption("dimension").min; const min = this.getOption("dimension").min;
const max = this.getOption("dimension").max; 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; if (parseInt(min) > leftAsPercent) newLeftWidth = min;
else if (parseInt(max) < leftAsPercent) newLeftWidth = max; else if (parseInt(max) < leftAsPercent) newLeftWidth = max;
else newLeftWidth = leftAsPercent + "%"; else newLeftWidth = leftAsPercent + "%";
self[startPanelElementSymbol].style.width = `${newLeftWidth}`; 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() { ...@@ -353,7 +361,6 @@ function initEventHandler() {
document.addEventListener("touchend", dragTouchEnd); document.addEventListener("touchend", dragTouchEnd);
}); });
let userSelectDefault = getDocument().body.style.userSelect; let userSelectDefault = getDocument().body.style.userSelect;
this[draggerElementSymbol].addEventListener("mousedown", () => { this[draggerElementSymbol].addEventListener("mousedown", () => {
......
source/monster.mjs
+ 3
− 0
View file @ 7001b93f
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
export * from "./components/layout/collapse.mjs"; export * from "./components/layout/collapse.mjs";
export * from "./components/layout/iframe.mjs"; export * from "./components/layout/iframe.mjs";
export * from "./components/layout/tabs.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/split-panel.mjs";
export * from "./components/layout/overlay.mjs"; export * from "./components/layout/overlay.mjs";
export * from "./components/layout/popper.mjs"; export * from "./components/layout/popper.mjs";
...@@ -108,6 +109,8 @@ export * from "./components/state/log/entry.mjs"; ...@@ -108,6 +109,8 @@ export * from "./components/state/log/entry.mjs";
export * from "./components/state/state.mjs"; export * from "./components/state/state.mjs";
export * from "./components/state/log.mjs"; export * from "./components/state/log.mjs";
export * from "./components/navigation/table-of-content.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 "./components/constants.mjs"; export * from "./components/constants.mjs";
export * from "./text/formatter.mjs"; export * from "./text/formatter.mjs";
......
source/types/version.mjs
+ 1
− 1
View file @ 7001b93f
...@@ -156,7 +156,7 @@ function getMonsterVersion() { ...@@ -156,7 +156,7 @@ function getMonsterVersion() {
} }
/** don't touch, replaced by make with package.json version */ /** don't touch, replaced by make with package.json version */
monsterVersion = new Version("4.10.0"); monsterVersion = new Version("4.11.0");
return monsterVersion; return monsterVersion;
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment