@astronox/core 0.1.0

package/src/patterns/MapViewport/MapViewport.css

@@ -0,0 +1,257 @@
+.map-viewport-frame {
+  position: relative;
+  display: grid;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.map-viewport-frame[data-sizing='fill'] {
+  block-size: 100%;
+  aspect-ratio: var(--map-viewport-reference-aspect-ratio);
+}
+
+.map-viewport {
+  position: relative;
+  container-type: size;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  aspect-ratio: var(--map-viewport-reference-aspect-ratio);
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: hidden;
+  border: var(--nox-border-width) solid var(--nox-data-surface-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-data-surface-background);
+  scrollbar-color: var(--nox-scrollbar-thumb-hover)
+    var(--nox-data-surface-background);
+}
+
+.map-viewport-frame[data-sizing='fill'] .map-viewport {
+  block-size: 100%;
+  aspect-ratio: auto;
+}
+
+.map-viewport-frame[data-framing='embedded'] .map-viewport {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.map-viewport-frame[data-modal-portaled='true'] {
+  inline-size: 100%;
+  block-size: auto;
+  aspect-ratio: var(--map-viewport-reference-aspect-ratio);
+}
+
+.map-viewport-frame[data-modal-portaled='true'] .map-viewport {
+  block-size: auto;
+  aspect-ratio: var(--map-viewport-reference-aspect-ratio);
+}
+
+.map-viewport__modal-card {
+  --map-viewport-modal-scene-max-block-size: calc(
+    100dvh - var(--nox-page-surface-padding) * 2 -
+      var(--nox-section-responsive-block-size) - var(--nox-border-width) * 2
+  );
+
+  inline-size: min(
+    100%,
+    calc(
+      var(--map-viewport-modal-scene-max-block-size) *
+        var(--map-viewport-reference-ratio)
+    )
+  );
+  max-block-size: 100%;
+  align-self: center;
+  justify-self: center;
+}
+
+.map-viewport__modal-body {
+  overflow: hidden;
+}
+
+.map-viewport__modal-portal {
+  display: grid;
+  min-inline-size: 0;
+  min-block-size: 0;
+  inline-size: 100%;
+}
+
+.map-viewport::-webkit-scrollbar-track,
+.map-viewport::-webkit-scrollbar-corner {
+  background: var(--nox-data-surface-background);
+}
+
+.map-viewport::-webkit-scrollbar-thumb {
+  background: var(--nox-scrollbar-thumb-hover);
+  background-clip: content-box;
+}
+
+.map-viewport[data-map-overflow-inline='true'] {
+  overflow-x: scroll;
+}
+
+.map-viewport[data-map-overflow-block='true'] {
+  overflow-y: scroll;
+}
+
+.map-viewport[data-map-overflow-block='true'],
+.map-viewport[data-map-overflow-inline='true'] {
+  cursor: grab;
+}
+
+.map-viewport:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+}
+
+.map-viewport__scene {
+  position: relative;
+  inline-size: var(--map-viewport-scene-inline-size);
+  block-size: var(--map-viewport-scene-block-size);
+}
+
+.map-viewport__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
+  max-width: none;
+  max-height: none;
+  max-inline-size: none;
+  max-block-size: none;
+}
+
+.map-viewport__shape {
+  --map-viewport-shape-fill: var(--nox-tone-background-strong);
+  --map-viewport-shape-stroke: var(--nox-tone-border);
+
+  fill: var(--map-viewport-shape-fill);
+  stroke: var(--map-viewport-shape-stroke);
+  stroke-width: var(--nox-border-width);
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+  pointer-events: none;
+}
+
+.map-viewport__shape[data-map-shape-palette='range'] {
+  --map-viewport-shape-fill: color-mix(
+    in srgb,
+    var(--nox-source-map-range) 20%,
+    transparent
+  );
+  --map-viewport-shape-stroke: color-mix(
+    in srgb,
+    var(--nox-source-map-range) 40%,
+    transparent
+  );
+}
+
+.map-viewport__cell {
+  --map-viewport-cell-seed: var(--nox-tone-seed);
+  --map-viewport-cell-surface: color-mix(
+    in srgb,
+    var(--map-viewport-cell-seed) 38%,
+    var(--nox-mix-light)
+  );
+  --map-viewport-cell-surface-hover: color-mix(
+    in srgb,
+    var(--map-viewport-cell-seed) 52%,
+    var(--nox-mix-light)
+  );
+  --map-viewport-cell-background: color-mix(
+    in srgb,
+    var(--map-viewport-cell-surface) 86%,
+    transparent
+  );
+  --map-viewport-cell-background-hover: color-mix(
+    in srgb,
+    var(--map-viewport-cell-surface-hover) 90%,
+    transparent
+  );
+  --map-viewport-cell-border: color-mix(
+    in srgb,
+    var(--map-viewport-cell-seed) 74%,
+    var(--nox-mix-dark)
+  );
+
+  fill: var(--map-viewport-cell-background);
+  stroke: var(--map-viewport-cell-border);
+  stroke-width: max(1px, var(--nox-border-width));
+  transition:
+    fill var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+    opacity var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+    stroke var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+}
+
+.map-viewport__cell[data-map-cell-palette='available'] {
+  --map-viewport-cell-seed: var(--nox-source-map-available);
+}
+
+.map-viewport__cell[data-map-cell-palette='unavailable'] {
+  --map-viewport-cell-seed: var(--nox-source-map-unavailable);
+}
+
+.map-viewport__cell[data-map-cell-palette='field'] {
+  --map-viewport-cell-seed: var(--nox-source-map-field);
+}
+
+.map-viewport__cell[data-map-cell-palette='grass'] {
+  --map-viewport-cell-seed: var(--nox-source-map-grass);
+}
+
+.map-viewport__cell[data-map-cell-palette='mountain'] {
+  --map-viewport-cell-seed: var(--nox-source-map-mountain);
+}
+
+.map-viewport__cell[data-map-cell-palette='water'] {
+  --map-viewport-cell-seed: var(--nox-source-map-water);
+}
+
+.map-viewport[data-map-interaction='single-selection']
+  .map-viewport__cell[data-map-cell-state='available'],
+.map-viewport[data-map-interaction='single-selection']
+  .map-viewport__cell[data-map-cell-state='selected'] {
+  cursor: pointer;
+}
+
+.map-viewport[data-map-interaction='single-selection']
+  .map-viewport__cell[data-map-cell-state='unavailable'] {
+  cursor: not-allowed;
+}
+
+.map-viewport[data-map-viewport-dragging='true'],
+.map-viewport[data-map-viewport-dragging='true'] .map-viewport__svg,
+.map-viewport[data-map-viewport-dragging='true'] .map-viewport__cell {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.map-viewport__cell[role='button']:focus-visible {
+  outline: none;
+}
+
+.map-viewport__cell[role='button']:focus-visible rect {
+  stroke: var(--nox-focus-ring);
+  stroke-width: 3px;
+}
+
+.map-viewport__announcement {
+  position: absolute;
+  overflow: hidden;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .map-viewport[data-map-interaction='single-selection']
+    .map-viewport__cell:hover {
+    fill: var(--map-viewport-cell-background-hover);
+  }
+}

package/src/patterns/MapViewport/contracts.ts

@@ -0,0 +1,79 @@
+import type { DisplayMedia } from '../../display/contracts';
+
+export type MapViewportInteraction = 'none' | 'single-selection';
+export type MapViewportSizing = 'aspect' | 'fill';
+export type MapViewportCellState = 'available' | 'selected' | 'unavailable';
+export type MapViewportCellPalette =
+  'available' | 'unavailable' | 'field' | 'grass' | 'mountain' | 'water';
+export type MapViewportShapePalette = 'range';
+
+export type MapViewportImageLayer = {
+  id: string;
+  media: DisplayMedia;
+  plane: 'background' | 'foreground';
+  order: number;
+};
+
+export type MapViewportCell = {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  label: string;
+  state: MapViewportCellState;
+  palette?: MapViewportCellPalette;
+};
+
+export type MapViewportMarker = {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  label: string;
+  media: DisplayMedia;
+};
+
+type MapViewportShapeBase = {
+  id: string;
+  x: number;
+  y: number;
+  palette?: MapViewportShapePalette;
+};
+
+export type MapViewportShape =
+  | (MapViewportShapeBase & {
+      kind: 'circle';
+      radius: number;
+    })
+  | (MapViewportShapeBase & {
+      kind: 'ring';
+      innerRadius: number;
+      radius: number;
+    })
+  | (MapViewportShapeBase & {
+      kind: 'polygon';
+      points: readonly {
+        x: number;
+        y: number;
+      }[];
+    })
+  | (MapViewportShapeBase & {
+      kind: 'cross' | 'diagonal-cross' | 'horizontal-line' | 'vertical-line';
+      halfWidth: number;
+      radius: number;
+    });
+
+export type MapViewportModel = {
+  label: string;
+  width: number;
+  height: number;
+  visibleWidth: number;
+  visibleHeight: number;
+  interaction: MapViewportInteraction;
+  layers: readonly MapViewportImageLayer[];
+  cells: readonly MapViewportCell[];
+  markers?: readonly MapViewportMarker[];
+  shapes?: readonly MapViewportShape[];
+};

package/src/patterns/MapViewport/geometry.ts

@@ -0,0 +1,80 @@
+import type {
+  MapViewportModel,
+  MapViewportSizing,
+} from './contracts';
+
+export type MapViewportSceneGeometry = {
+  aspectRatio: string;
+  blockSize: string;
+  inlineSize: string;
+  overflowsBlock: boolean;
+  overflowsInline: boolean;
+  referenceRatio: string;
+};
+
+export function getMapViewportSceneGeometry(
+  model: MapViewportModel,
+  sizing: MapViewportSizing = 'aspect',
+): MapViewportSceneGeometry {
+  const visibleWidth = Math.max(1, model.visibleWidth);
+  const visibleHeight = Math.max(1, model.visibleHeight);
+  const sceneWidth = Math.max(1, model.width);
+  const sceneHeight = Math.max(1, model.height);
+  const overflowsBlock = sceneHeight > visibleHeight;
+  const overflowsInline = sceneWidth > visibleWidth;
+  const scale = resolveSceneScale(sizing, {
+    overflowsBlock,
+    overflowsInline,
+  });
+
+  return {
+    aspectRatio: [
+      formatDimension(visibleWidth),
+      formatDimension(visibleHeight),
+    ].join(' / '),
+    blockSize: formatSceneSize(sceneHeight, visibleWidth, visibleHeight, scale),
+    inlineSize: formatSceneSize(sceneWidth, visibleWidth, visibleHeight, scale),
+    overflowsBlock,
+    overflowsInline,
+    referenceRatio: formatDimension(visibleWidth / visibleHeight),
+  };
+}
+
+type SceneScale = 'block' | 'contain' | 'cover' | 'inline';
+
+function resolveSceneScale(
+  sizing: MapViewportSizing,
+  overflow: Pick<
+    MapViewportSceneGeometry,
+    'overflowsBlock' | 'overflowsInline'
+  >,
+): SceneScale {
+  if (sizing === 'aspect') return 'contain';
+  if (overflow.overflowsInline && !overflow.overflowsBlock) return 'block';
+  if (overflow.overflowsBlock && !overflow.overflowsInline) return 'inline';
+  if (overflow.overflowsBlock && overflow.overflowsInline) return 'contain';
+  return 'cover';
+}
+
+function formatSceneSize(
+  sceneDimension: number,
+  visibleWidth: number,
+  visibleHeight: number,
+  scale: SceneScale,
+): string {
+  const inlineSize = formatContainerRatio(sceneDimension / visibleWidth, 'cqi');
+  const blockSize = formatContainerRatio(sceneDimension / visibleHeight, 'cqb');
+
+  if (scale === 'inline') return inlineSize;
+  if (scale === 'block') return blockSize;
+  const scaleFunction = scale === 'contain' ? 'min' : 'max';
+  return `${scaleFunction}(${inlineSize}, ${blockSize})`;
+}
+
+function formatDimension(value: number): string {
+  return String(Number(value.toFixed(6)));
+}
+
+function formatContainerRatio(value: number, unit: 'cqb' | 'cqi'): string {
+  return `${formatDimension(value * 100)}${unit}`;
+}