@dxos/plugin-deck 0.6.8-main.046e6cf

package/src/types.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import type {
+  GraphBuilderProvides,
+  IntentResolverProvides,
+  LayoutProvides,
+  LocationProvides,
+  SettingsProvides,
+  SurfaceProvides,
+  TranslationsProvides,
+} from '@dxos/app-framework';
+
+// TODO(Zan): In the future we should consider adding new planks adjacent to the attended plank.
+export const NewPlankPositions = ['start', 'end'] as const;
+export type NewPlankPositioning = (typeof NewPlankPositions)[number];
+
+export const OverscrollOptions = ['none', 'centering'] as const;
+export type Overscroll = (typeof OverscrollOptions)[number];
+
+export type DeckSettingsProps = {
+  showFooter: boolean;
+  customSlots: boolean;
+  flatDeck: boolean;
+  enableNativeRedirect: boolean;
+  disableDeck: boolean;
+  newPlankPositioning: NewPlankPositioning;
+  overscroll: Overscroll;
+};
+
+export type DeckPluginProvides = SurfaceProvides &
+  IntentResolverProvides &
+  GraphBuilderProvides &
+  TranslationsProvides &
+  SettingsProvides<DeckSettingsProps> &
+  LayoutProvides &
+  LocationProvides;

package/src/util/check-app-scheme.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// TODO(mjamesderocher): Factor out as part of NavigationPlugin.
+export const checkAppScheme = (url: string) => {
+  const iframe = document.createElement('iframe');
+  iframe.style.display = 'none';
+  document.body.appendChild(iframe);
+
+  iframe.src = url + window.location.pathname.replace(/^\/+/, '') + window.location.search;
+
+  const timer = setTimeout(() => {
+    document.body.removeChild(iframe);
+  }, 3000);
+
+  window.addEventListener('pagehide', (event) => {
+    clearTimeout(timer);
+    document.body.removeChild(iframe);
+  });
+};

package/src/util/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './check-app-scheme';
+export * from './layout-parts';
+export * from './overscroll';

package/src/util/layout-parts.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type LayoutMode, type LayoutPart } from '@dxos/app-framework';
+
+/**
+ * If in solo mode and the part is the main part, open it in solo mode.
+ * From the dispatch POV we refer to both 'solo' and 'main' as 'main'.
+ */
+export const getEffectivePart = (partName: LayoutPart, layoutMode: LayoutMode): LayoutPart =>
+  layoutMode === 'solo' && partName === 'main' ? 'solo' : partName;

package/src/util/overscroll.ts

@@ -0,0 +1,97 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type LayoutMode, type LayoutParts } from '@dxos/app-framework';
+import { PLANK_DEFAULTS } from '@dxos/react-ui-deck';
+
+import { type Overscroll } from '../types';
+
+export const calculateOverscroll = (
+  layoutMode: LayoutMode,
+  sidebarOpen: boolean,
+  complementarySidebarOpen: boolean,
+  layoutParts: LayoutParts,
+  plankSizing: Record<string, number>,
+  overscroll: Overscroll,
+) => {
+  if (!(layoutMode === 'deck' && overscroll === 'centering')) {
+    return;
+  }
+  if (!layoutParts.main || layoutParts.main.length === 0) {
+    return;
+  }
+
+  /**
+   * ┌────────────────────────────────────────────────────────────────────────────────────────────────────┐
+   * | Overscroll Padding Calculation for Centering Planks on Screen.                                     │
+   * ├────────────────────────────────────────────────────────────────────────────────────────────────────┤
+   * │ NOTE(Zan): I found the way you calculate the overscroll padding to center a plank on the screen    │
+   * │ at the edges of the scroll context a bit confusing, so I've diagrammed it here.                    │
+   * │                                                                                                    │
+   * │ Multiple Planks:                                                                                   │
+   * │ ───────────────                                                                                    │
+   * | Use the following overscroll padding calculation centering the boundary planks on the SCREEN.      │
+   * │                                                                                                    │
+   * │ Left Padding:                           Right Padding:                                             │
+   * │ ┌───┬────┬──────────────────┬──────┐    ┌──────┬──────────────────┬────┬───┐                       │
+   * │ │   │████│     Ideal        │      │    │      │      Ideal       │████│   │                       │
+   * │ │ S │█PL█│     first        │      │    │      │      last        │█PR█│ C │                       │
+   * │ │   │████│     plank        │      │    │      │      plank       │████│   │                       │
+   * │ └───┴────┴──────────────────┴──────┘    └──────┴──────────────────┴────┴───┘                       │
+   * │ <--------- screen width ----------->    <---------- screen width ---------->                       │
+   * │                                                                                                    │
+   * │ PL = ((screen width - Plank Width) / 2) - S                                                        │
+   * │ PR = ((screen width - Plank Width) / 2) - C                                                        │
+   * │                                                                                                    │
+   * │ S  = Sidebar width                     C  = Complementary sidebar width                            │
+   * │ PL = Padding Left                      PR = Padding Right                                          │
+   * │                                                                                                    │
+   * │ Single Plank:                                                                                      │
+   * │ ─────────────                                                                                      │
+   * │ For a single plank we use the following overscroll padding calculation to center the plank in      │
+   * │ the content area:                                                                                  │
+   * │                                                                                                    │
+   * │ ┌───┬───────────────────────┬───┬───────────────────────┬───┐                                      │
+   * │ │   │███████████████████████│   │███████████████████████│   │                                      │
+   * │ │ S │█████ Left Padding ████│ P │████ Right Padding ████│ C │                                      │
+   * │ │   │███████████████████████│   │███████████████████████│   │                                      │
+   * │ └───┴───────────────────────┴───┴───────────────────────┴───┘                                      │
+   * │ <------------------------ screen width --------------------->                                      │
+   * │                                                                                                    │
+   * │ Left/Right Padding Width = (screen width - S - P - C) / 2                                          │
+   * │                                                                                                    │
+   * │ S = Sidebar width (may be 0)                                                                       │
+   * │ P = Plank width (centered)                                                                         │
+   * │ C = Complementary sidebar width (may be 0)                                                         │
+   * └────────────────────────────────────────────────────────────────────────────────────────────────────┘
+   */
+
+  // TODO(Zan): Move complementary sidebar size (360px), sidebar size (270px), plank resize handle size (20px) to CSS variables.
+  const sidebarWidth = sidebarOpen ? '270px' : '0px';
+  const complementarySidebarWidth = complementarySidebarOpen ? '360px' : '0px';
+
+  const getPlankSize = (id: string) => (plankSizing[id] ?? PLANK_DEFAULTS.size).toFixed(2) + 'rem';
+
+  if (layoutParts.main.length === 1) {
+    // Center the plank in the content area.
+
+    const plank = layoutParts.main[0];
+    const plankSize = getPlankSize(plank.id);
+    const overscrollPadding = `max(0px, calc(((100dvw - ${sidebarWidth} - ${complementarySidebarWidth} - (${plankSize} + 20px)) / 2)))`;
+
+    return { paddingLeft: overscrollPadding, paddingRight: overscrollPadding };
+  } else {
+    // Center the plank on the screen.
+
+    const firstPlank = layoutParts.main[0];
+    const firstPlankInlineSize = getPlankSize(firstPlank.id);
+    const paddingLeft = `max(0px, calc(((100dvw - (${firstPlankInlineSize} + 20px)) / 2) - ${sidebarWidth}))`;
+
+    const lastPlank = layoutParts.main[layoutParts.main.length - 1];
+    const lastPlankInlineSize = getPlankSize(lastPlank.id);
+    const paddingRight = `max(0px, calc(((100dvw - (${lastPlankInlineSize} + 20px)) / 2) - ${complementarySidebarWidth}))`;
+
+    return { paddingLeft, paddingRight };
+  }
+};