@deck.gl/widgets 9.2.11 → 9.3.0-alpha.2

package/src/stylesheet.css

@@ -1,5 +1,6 @@
 .deck-widget {
   margin: var(--widget-margin, 12px);
+  box-sizing: border-box;
 }
 
 /* Common button container styles */
@@ -29,6 +30,9 @@
   padding: 1px;
   gap: 1px;
 }
+.deck-widget-button-group > .deck-widget-button {
+  display: contents;
+}
 
 .deck-widget-button-group.vertical {
   display: inline-flex;
@@ -201,37 +205,56 @@
 
 /* Timeline widget styles */
 .deck-widget.deck-widget-timeline {
-  display: flex;
-  align-items: center;
-  pointer-events: 'auto';
+  position: absolute;
+  margin: var(--widget-margin, 12px);
+  left: 0;
+  right: 0;
+  pointer-events: all;
 }
-
-.deck-widget.deck-widget-timeline .timeline-slider {
-  margin: 0 8px;
-  flex: 1;
-  pointer-events: 'auto';
-  cursor: pointer;
+.deck-widget.deck-widget-timeline[data-placement^=top-] {
+  top: 0;
 }
-
-.deck-widget.deck-widget-timeline .text {
-  color: var(--button-icon-idle, rgb(97, 97, 102));
+.deck-widget.deck-widget-timeline[data-placement^=bottom-] {
+  bottom: 0;
 }
-
-.deck-widget.deck-widget-timeline .text:hover {
-  color: var(--button-icon-hover, rgb(24, 24, 26));
+.deck-widget.deck-widget-timeline .deck-widget-button-group {
+  box-sizing: border-box;
+  gap: var(--widget-margin, 12px);
+  padding: var(--widget-margin, 12px);
 }
-
-/* FPS widget styles */
-
-.deck-widget.deck-widget-fps button {
+.deck-widget-timeline button.deck-widget-timeline-pause .deck-widget-icon {
+  mask-image: var(
+    --icon-pause,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-pause,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/></svg>')
+  );
+}
+.deck-widget-timeline button.deck-widget-timeline-play .deck-widget-icon {
+  mask-image: var(
+    --icon-play,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M320-200v-560l440 280-440 280Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-play,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M320-200v-560l440 280-440 280Z"/></svg>')
+  );
+}
+.deck-widget-timeline-label {
+  position: relative;
   pointer-events: none;
+  width: fit-content;
+  font-size: 13px;
+  color: var(--menu-text, rgb(24, 24, 26));
+  white-space: nowrap;
 }
-
-.deck-widget.deck-widget-fps .text {
-  color: var(--button-text, rgb(24, 24, 26));
-  font-family: monospace;
-  font-size: 8px;
-  font-weight: 700;
+.deck-widget-timeline-label--current {
+  transform: translate(-50%, -100%);
+  border-radius: var(--button-corner-radius, 8px);
+  background: var(--menu-background, #fff);
+  padding: 4px;
 }
 
 /* Loading styles */
@@ -370,7 +393,6 @@
 }
 
 .deck-widget .deck-widget-dropdown-menu {
-  position: absolute;
   top: calc(100% + var(--menu-gap, 4px));
   left: 1px;
   right: 1px;
@@ -389,14 +411,16 @@
 
 .deck-widget .deck-widget-dropdown-item {
   padding: 8px 12px;
-  cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
+  cursor: default;
+  user-select: none;
   text-overflow: ellipsis;
   color: var(--menu-text, rgb(24, 24, 26));
 }
 
-.deck-widget .deck-widget-dropdown-item:hover {
+.deck-widget .deck-widget-dropdown-item:not(.disabled):hover {
+  cursor: pointer;
   background: var(--menu-item-hover, rgba(128, 128, 128, 0.15));
 }
 
@@ -414,21 +438,249 @@
 }
 
 /* Stats styles */
+.deck-widget.deck-widget-stats button .text {
+  color: var(--button-text, rgb(24, 24, 26));
+  font-family: monospace;
+  font-size: 8px;
+  font-weight: 700;
+}
 .deck-widget-stats-container {
-  border-radius: var(--button-corner-radius, 4px);
+  border-radius: var(--button-corner-radius, 8px);
   display: inline-flex;
   flex-direction: column;
-  padding: 4px;
   font-size: 0.7rem;
   /* Approximately 14px */
   line-height: 1.6;
-  font-family:
-    'SF Mono',
-    /* macOS */ 'Menlo',
-    /* macOS */ 'Consolas',
-    /* Windows */ 'DejaVu Sans Mono',
-    /* Linux */ 'Liberation Mono',
-    /* Linux */ monospace;
-  background-color: var(--button-background, #fff);
-  color: var(--button-text, rgb(24, 24, 26));
+  font-family: monospace;
+  background-color: var(--menu-background, #fff);
+  color: var(--menu-text, rgb(24, 24, 26));
+  box-shadow: var(--menu-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
+}
+.deck-widget-stats-header {
+  color: var(--button-icon-idle, rgba(97, 97, 102, 1));
+  padding-left: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.deck-widget-stats-header:hover {
+  color: var(--button-icon-hover, rgb(24, 24, 26));
+}
+.deck-widget-stats-header .deck-widget-dropdown-button {
+  background: none;
+  border: none;
+}
+.deck-widget-stats-content {
+  padding: 4px 8px 8px;
+}
+
+/* Popup styles */
+.deck-widget.deck-widget-popover {
+  margin: 0 !important;
+}
+.deck-widget-popup-content {
+  border-radius: var(--button-corner-radius, 8px);
+  background: var(--menu-background, #fff);
+  color: var(--menu-text, rgb(24, 24, 26));
+  box-shadow: var(--menu-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
+  padding: 10px;
+}
+.deck-widget-popup-content .deck-widget-popup-controls {
+  --button-size: 20px;
+}
+.deck-widget-popup-content .deck-widget-popup-controls .deck-widget-button {
+  box-shadow: none;
+}
+.deck-widget-popup-content button.deck-widget-popup-close-button .deck-widget-icon {
+  mask-image: var(
+    --icon-close,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -120 120 120" fill="black"><path d="m32-25-7-7 28-28-28-28 7-7 28 28 28-28 7 7-28 28 28 28-7 7-28-28-28 28Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-close,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -120 120 120" fill="black"><path d="m32-25-7-7 28-28-28-28 7-7 28 28 28-28 7 7-28 28 28 28-7 7-28-28-28 28Z"/></svg>')
+  );
+}
+
+/** Range input */
+.deck-widget-range {
+  position: relative;
+  pointer-events: all;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  box-sizing: border-box;
+  margin: 0;
+}
+.deck-widget-range__track {
+  position: relative;
+  cursor: pointer;
+  flex: 1;
+  background: var(--range-track-color, #888);
+  border-radius: calc(var(--range-track-size, 16px) / 2);
+}
+.deck-widget-range__decorations {
+  position: absolute;
+}
+.deck-widget-range__decoration {
+  position: absolute;
+}
+.deck-widget-range__decoration:active {
+  background-color: var(--range-decoration-active-color, gold) !important;
+}
+.deck-widget-range__thumb {
+  position: relative;
+  box-sizing: content-box;
+  padding: calc(var(--range-thumb-size, 10px) / 2);
+  border-radius: calc(var(--range-thumb-size, 10px) / 2);
+  margin: calc(var(--range-thumb-size, 10px) * -0.5);
+  background: var(--range-thumb-color, #444);
+}
+.deck-widget-range__button {
+  cursor: pointer;
+  opacity: 0.4;
+  background-color: transparent;
+  width: var(--range-step-button-size, 24px);
+  height: var(--range-step-button-size, 24px);
+  background-size: cover;
+  border: none;
+  padding: 0;
+}
+.deck-widget-range__button:hover {
+  opacity: 1;
+}
+.deck-widget-range:not(.deck-widget-range--disabled) .deck-widget-range__button:disabled {
+  pointer-events: none;
+  opacity: 0.1;
+}
+.deck-widget-range--disabled {
+  display: none;
+}
+.deck-widget-range--vertical {
+  flex-direction: column;
+  height: 100%;
+  top: 0;
+}
+.deck-widget-range--horizontal {
+  flex-direction: row;
+  width: 100%;
+  left: 0;
+}
+.deck-widget-range--vertical .deck-widget-range__track {
+  width: var(--range-track-size, 16px);
+  padding-top: calc(var(--range-track-size, 16px) / 2);
+  padding-bottom: calc(var(--range-track-size, 16px) / 2);
+  height: 100%;
+  min-height: calc(var(--range-track-size, 16px) * 3);
+}
+.deck-widget-range--vertical .deck-widget-range__thumb {
+  width: 0;
+  left: 50%;
+  cursor: ns-resize;
+}
+.deck-widget-range--vertical .deck-widget-range__decorations {
+  top: calc(var(--range-track-size, 16px) / 2);
+  bottom: calc(var(--range-track-size, 16px) / 2);
+  left: 0;
+  right: 0;
+}
+.deck-widget-range--vertical .deck-widget-range__button--start .deck-widget-icon {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/></svg>');
+}
+.deck-widget-range--vertical .deck-widget-range__button--end .deck-widget-icon {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
+}
+.deck-widget-range--horizontal .deck-widget-range__track {
+  height: var(--range-track-size, 16px);
+  padding-left: calc(var(--range-track-size, 16px) / 2);
+  padding-right: calc(var(--range-track-size, 16px) / 2);
+  width: 100%;
+  min-width: calc(var(--range-track-size, 16px) * 3);
+}
+.deck-widget-range--horizontal .deck-widget-range__thumb {
+  height: 0;
+  top: 50%;
+  cursor: ew-resize;
+}
+.deck-widget-range--horizontal .deck-widget-range__decorations {
+  left: calc(var(--range-track-size, 16px) / 2);
+  right: calc(var(--range-track-size, 16px) / 2);
+  top: 0;
+  bottom: 0;
+}
+.deck-widget-range--horizontal .deck-widget-range__button--start .deck-widget-icon {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>');
+}
+.deck-widget-range--horizontal .deck-widget-range__button--end .deck-widget-icon {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>');
+}
+
+/** Scrollbar */
+.deck-widget-scrollbar .deck-widget-range {
+  position: absolute;
+}
+.deck-widget-scrollbar .deck-widget-range--vertical {
+  top: var(--range-step-button-size, 24px);
+  height: calc(100% - var(--range-step-button-size, 24px) * 2);
+}
+.deck-widget-scrollbar[data-placement$=-left] .deck-widget-range--vertical {
+  left: 0;
+}
+.deck-widget-scrollbar[data-placement$=-right] .deck-widget-range--vertical {
+  right: 0;
+}
+.deck-widget-scrollbar .deck-widget-range--horizontal {
+  left: var(--range-step-button-size, 24px);
+  width: calc(100% - var(--range-step-button-size, 24px) * 2);
+}
+.deck-widget-scrollbar[data-placement^=top-] .deck-widget-range--horizontal {
+  top: 0;
+}
+.deck-widget-scrollbar[data-placement^=bottom-] .deck-widget-range--horizontal {
+  bottom: 0;
+}
+
+/** Splitter */
+.deck-widget.deck-widget-splitter {
+  position: absolute;
+  margin: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.deck-widget-splitter-handle {
+  position: absolute;
+  background: var(--button-background, #fff);
+  z-index: 10;
+  pointer-events: auto;
+  box-shadow: inset 1px 1px 1px var(--button-icon-idle, #616166);
+}
+.deck-widget-splitter-handle.active {
+  box-shadow: var(--button-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
+}
+.deck-widget-splitter-handle:before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  box-sizing: content-box;
+  width: 100%;
+  height: 100%;
+  padding: 4px;
+  margin: -4px;
+}
+.deck-widget-splitter-handle--horizontal {
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  margin-left: -1px;
+  cursor: col-resize;
+}
+.deck-widget-splitter-handle--vertical {
+  left: 0;
+  right: 0;
+  height: 2px;
+  margin-top: -1px;
+  cursor: row-resize;
 }

package/src/theme-widget.tsx

@@ -116,10 +116,12 @@ export class ThemeWidget extends Widget<ThemeWidgetProps> {
   /** Read browser preference */
   _getInitialThemeMode(): 'light' | 'dark' {
     const {initialThemeMode} = this.props;
-    return initialThemeMode === 'auto'
-      ? window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light'
-      : initialThemeMode;
+    if (initialThemeMode !== 'auto') {
+      return initialThemeMode;
+    }
+    if (typeof window === 'undefined') {
+      return 'light';
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
 }

package/src/themes.ts

@@ -30,6 +30,13 @@ export type DeckWidgetTheme = {
   '--menu-shadow'?: string;
   '--menu-text'?: string;
   '--menu-item-hover'?: string;
+  // scrollbar
+  '--range-step-button-size'?: string;
+  '--range-track-size'?: string;
+  '--range-thumb-size'?: string;
+  '--range-track-color'?: string;
+  '--range-thumb-color'?: string;
+  '--range-decoration-active-color'?: string;
 };
 
 export const LightTheme = {
@@ -52,7 +59,13 @@ export const LightTheme = {
   '--menu-border': 'unset',
   '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
   '--menu-text': 'rgb(24, 24, 26, 1)',
-  '--menu-item-hover': 'rgba(0, 0, 0, 0.08)'
+  '--menu-item-hover': 'rgba(0, 0, 0, 0.08)',
+  '--range-step-button-size': '24px',
+  '--range-track-size': '16px',
+  '--range-thumb-size': '10px',
+  '--range-track-color': '#d8d8e5',
+  '--range-thumb-color': '#616166',
+  '--range-decoration-active-color': '#f8dd50'
 } as const satisfies Required<DeckWidgetTheme>;
 
 export const DarkTheme = {
@@ -75,7 +88,13 @@ export const DarkTheme = {
   '--menu-border': 'unset',
   '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
   '--menu-text': 'rgb(215, 214, 229, 1)',
-  '--menu-item-hover': 'rgba(255, 255, 255, 0.1)'
+  '--menu-item-hover': 'rgba(255, 255, 255, 0.1)',
+  '--range-step-button-size': '24px',
+  '--range-track-size': '16px',
+  '--range-thumb-size': '10px',
+  '--range-track-color': '#2c2c30',
+  '--range-thumb-color': '#9e9da8',
+  '--range-decoration-active-color': '#dd7d2c'
 } as const satisfies Required<DeckWidgetTheme>;
 
 export const LightGlassTheme = {
@@ -99,7 +118,13 @@ export const LightGlassTheme = {
   '--menu-border': '1px solid rgba(255, 255, 255, 0.6)',
   '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
   '--menu-text': 'rgb(24, 24, 26, 1)',
-  '--menu-item-hover': 'rgba(0, 0, 0, 0.08)'
+  '--menu-item-hover': 'rgba(0, 0, 0, 0.08)',
+  '--range-step-button-size': '24px',
+  '--range-track-size': '16px',
+  '--range-thumb-size': '10px',
+  '--range-track-color': 'rgba(215, 214, 229, 0.3)',
+  '--range-thumb-color': 'rgba(97, 97, 102, 1)',
+  '--range-decoration-active-color': 'rgba(255, 215, 0, 0.6)'
 } as const satisfies Required<DeckWidgetTheme>;
 
 export const DarkGlassTheme = {
@@ -123,5 +148,11 @@ export const DarkGlassTheme = {
   '--menu-border': '1px solid rgba(18, 18, 20, 0.75)',
   '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
   '--menu-text': 'rgb(215, 214, 229, 1)',
-  '--menu-item-hover': 'rgba(255, 255, 255, 0.1)'
+  '--menu-item-hover': 'rgba(255, 255, 255, 0.1)',
+  '--range-step-button-size': '24px',
+  '--range-track-size': '16px',
+  '--range-thumb-size': '10px',
+  '--range-track-color': 'rgba(24, 24, 26, 0.3)',
+  '--range-thumb-color': 'rgba(158, 157, 168, 1)',
+  '--range-decoration-active-color': 'rgba(255, 145, 0, 0.6)'
 } as const satisfies Required<DeckWidgetTheme>;