github-issue-tower-defence-management 1.160.0 → 1.161.0

package/src/adapter/entry-points/console/ui/src/features/console/lib/mermaidZoom.ts

@@ -0,0 +1,34 @@
+export const MERMAID_ZOOM_MIN_SCALE = 1;
+export const MERMAID_ZOOM_MAX_SCALE = 6;
+export const MERMAID_ZOOM_SCALE_STEP = 0.5;
+
+export const clampMermaidZoomScale = (scale: number): number => {
+  if (Number.isNaN(scale)) {
+    return MERMAID_ZOOM_MIN_SCALE;
+  }
+  if (scale < MERMAID_ZOOM_MIN_SCALE) {
+    return MERMAID_ZOOM_MIN_SCALE;
+  }
+  if (scale > MERMAID_ZOOM_MAX_SCALE) {
+    return MERMAID_ZOOM_MAX_SCALE;
+  }
+  return scale;
+};
+
+export const mermaidZoomScaleIn = (scale: number): number =>
+  clampMermaidZoomScale(clampMermaidZoomScale(scale) + MERMAID_ZOOM_SCALE_STEP);
+
+export const mermaidZoomScaleOut = (scale: number): number =>
+  clampMermaidZoomScale(clampMermaidZoomScale(scale) - MERMAID_ZOOM_SCALE_STEP);
+
+export const isMermaidZoomScaleAtMinimum = (scale: number): boolean =>
+  clampMermaidZoomScale(scale) <= MERMAID_ZOOM_MIN_SCALE;
+
+export const isMermaidZoomScaleAtMaximum = (scale: number): boolean =>
+  clampMermaidZoomScale(scale) >= MERMAID_ZOOM_MAX_SCALE;
+
+export const formatMermaidZoomScale = (scale: number): string =>
+  `${Math.round(clampMermaidZoomScale(scale) * 100)}%`;
+
+export const mermaidZoomCanvasWidth = (scale: number): string =>
+  `${clampMermaidZoomScale(scale) * 100}%`;

package/src/adapter/entry-points/console/ui/src/index.css

@@ -610,6 +610,71 @@ body {
   font-size: 0.8125rem;
 }
 
+.console-mermaid-enlarge {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  padding: 10px 12px;
+  background: #21262d;
+  color: #e6edf3;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+}
+
+.console-mermaid-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  background: #0d1117;
+}
+
+.console-mermaid-modal-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #30363d;
+}
+
+.console-mermaid-modal-button,
+.console-mermaid-modal-close {
+  min-width: 44px;
+  min-height: 44px;
+  background: #21262d;
+  color: #e6edf3;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  font-size: 1.125rem;
+}
+
+.console-mermaid-modal-button:disabled {
+  opacity: 0.4;
+}
+
+.console-mermaid-modal-close {
+  margin-left: auto;
+}
+
+.console-mermaid-modal-scale {
+  min-width: 4.5rem;
+  text-align: center;
+  color: #8b949e;
+  font-size: 0.875rem;
+}
+
+.console-mermaid-modal-viewport {
+  flex: 1;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.console-mermaid-modal-canvas {
+  min-width: 100%;
+}
+
 .console-comment {
   padding: 12px 16px;
   margin-bottom: 10px;