@gadmin2n/schematics 0.0.68 → 0.0.70

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/CodeFloatWindow.tsx

@@ -0,0 +1,476 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import Editor, { type OnMount } from '@monaco-editor/react';
+import { Button, Tooltip, Tabs } from 'antd';
+import { CloseOutlined, CopyOutlined, CheckOutlined } from '@ant-design/icons';
+import type { PropDoc, ComponentVariant } from './types';
+
+type IStandaloneCodeEditor = Parameters<OnMount>[0];
+
+// ─── Theme (reuse from ComponentCanvas) ──────────────────────────────────
+
+const C = {
+  bg: '#ffffff',
+  editorBg: '#fafafa',
+  editorBorder: '#e5e5e5',
+  importBg: '#f0f4ff',
+  importBorder: '#dce6fd',
+  importText: '#3451b2',
+  text: '#1a1a1a',
+  textMuted: '#999',
+  accent: '#087ea4',
+};
+
+// ─── PropTable (simplified inline version) ───────────────────────────────────
+
+const PropTable: React.FC<{ props: PropDoc[]; height: number }> = ({
+  props,
+  height,
+}) => (
+  <div
+    style={{
+      height,
+      overflow: 'auto',
+      borderTop: `1px solid ${C.editorBorder}`,
+    }}
+  >
+    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
+      <thead>
+        <tr style={{ background: '#fafafa', position: 'sticky', top: 0 }}>
+          {['Prop', 'Type', 'Default', 'Description'].map((h) => (
+            <th
+              key={h}
+              style={{
+                padding: '6px 8px',
+                textAlign: 'left',
+                borderBottom: `1px solid ${C.editorBorder}`,
+                fontWeight: 600,
+                color: C.text,
+              }}
+            >
+              {h}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {props.map((p) => (
+          <tr key={p.name} style={{ borderBottom: `1px solid #f0f0f0` }}>
+            <td
+              style={{
+                padding: '5px 8px',
+                fontFamily: 'monospace',
+                color: C.accent,
+                fontWeight: 600,
+              }}
+            >
+              {p.name}
+              {p.required && <span style={{ color: '#f5222d' }}> *</span>}
+            </td>
+            <td
+              style={{
+                padding: '5px 8px',
+                fontFamily: 'monospace',
+                color: '#666',
+                fontSize: 11,
+              }}
+            >
+              {p.type}
+            </td>
+            <td style={{ padding: '5px 8px', color: '#999', fontSize: 11 }}>
+              {p.default ?? '—'}
+            </td>
+            <td style={{ padding: '5px 8px', color: '#444' }}>{p.desc}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+// ─── CopyButton ──────────────────────────────────────────────────────────────
+
+const CopyButton: React.FC<{ text: string }> = ({ text }) => {
+  const [copied, setCopied] = useState(false);
+  return (
+    <Tooltip title={copied ? '已复制' : '复制代码'}>
+      <Button
+        size="small"
+        type="text"
+        icon={
+          copied ? (
+            <CheckOutlined style={{ color: '#52c41a' }} />
+          ) : (
+            <CopyOutlined />
+          )
+        }
+        onClick={() => {
+          navigator.clipboard.writeText(text);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        }}
+        style={{ fontSize: 12, color: C.textMuted }}
+      />
+    </Tooltip>
+  );
+};
+
+// ─── CodeFloatWindow ─────────────────────────────────────────────────────────
+
+interface CodeFloatWindowProps {
+  componentType: string;
+  imports: string;
+  code: string;
+  props: PropDoc[];
+  variants: ComponentVariant[];
+  onChange: (code: string) => void;
+  onClose: () => void;
+}
+
+const MIN_W = 320;
+const MIN_H = 240;
+
+type ResizeEdge = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+
+const EDGE_CURSORS: Record<ResizeEdge, string> = {
+  n: 'n-resize',
+  s: 's-resize',
+  e: 'e-resize',
+  w: 'w-resize',
+  ne: 'ne-resize',
+  nw: 'nw-resize',
+  se: 'se-resize',
+  sw: 'sw-resize',
+};
+
+const CodeFloatWindow: React.FC<CodeFloatWindowProps> = ({
+  componentType,
+  imports,
+  code,
+  props,
+  variants,
+  onChange,
+  onClose,
+}) => {
+  const [pos, setPos] = useState({ x: 200, y: 100 });
+  const [size, setSize] = useState({ w: 520, h: 500 });
+  const [propsHeight, setPropsHeight] = useState(160);
+  const dragging = useRef(false);
+  const dragStart = useRef({ x: 0, y: 0, px: 0, py: 0 });
+  const editorRef = useRef<IStandaloneCodeEditor | null>(null);
+
+  // 拖动标题栏
+  const handleTitleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragging.current = true;
+      dragStart.current = { x: e.clientX, y: e.clientY, px: pos.x, py: pos.y };
+
+      const onMove = (ev: MouseEvent) => {
+        if (!dragging.current) return;
+        setPos({
+          x: dragStart.current.px + (ev.clientX - dragStart.current.x),
+          y: dragStart.current.py + (ev.clientY - dragStart.current.y),
+        });
+      };
+      const onUp = () => {
+        dragging.current = false;
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+      };
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+    },
+    [pos],
+  );
+
+  // 拖拽边缘 resize
+  const handleEdgeMouseDown = useCallback(
+    (e: React.MouseEvent, edge: ResizeEdge) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startW = size.w;
+      const startH = size.h;
+      const startPx = pos.x;
+      const startPy = pos.y;
+
+      const onMove = (ev: MouseEvent) => {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+
+        setSize((prev) => {
+          let w = prev.w;
+          let h = prev.h;
+          if (edge.includes('e')) w = Math.max(MIN_W, startW + dx);
+          if (edge.includes('w')) w = Math.max(MIN_W, startW - dx);
+          if (edge.includes('s')) h = Math.max(MIN_H, startH + dy);
+          if (edge.includes('n')) h = Math.max(MIN_H, startH - dy);
+          return { w, h };
+        });
+
+        setPos((prev) => {
+          let x = prev.x;
+          let y = prev.y;
+          if (edge.includes('w')) x = startPx + Math.min(dx, startW - MIN_W);
+          if (edge.includes('n')) y = startPy + Math.min(dy, startH - MIN_H);
+          return { x, y };
+        });
+      };
+
+      const onUp = () => {
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+      };
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+    },
+    [size, pos],
+  );
+
+  // 同步外部 code 变化到 editor
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const model = editor.getModel();
+    if (model && model.getValue() !== code) {
+      editor.executeEdits('external', [
+        {
+          range: model.getFullModelRange(),
+          text: code,
+          forceMoveMarkers: true,
+        },
+      ]);
+    }
+  }, [code]);
+
+  const handleMount: OnMount = useCallback((editor) => {
+    editorRef.current = editor;
+  }, []);
+
+  // Props 区域 resize
+  const handlePropsResize = useCallback(
+    (startY: number) => {
+      const startH = propsHeight;
+      const onMove = (e: MouseEvent) => {
+        const delta = e.clientY - startY;
+        setPropsHeight(Math.max(60, Math.min(size.h * 0.6, startH - delta)));
+      };
+      const onUp = () => {
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+      };
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+    },
+    [propsHeight, size.h],
+  );
+
+  const HANDLE = 6; // resize handle 宽度 px
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        left: pos.x,
+        top: pos.y,
+        width: size.w,
+        height: size.h,
+        background: C.bg,
+        border: `1px solid ${C.editorBorder}`,
+        borderRadius: 8,
+        boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
+        display: 'flex',
+        flexDirection: 'column',
+        zIndex: 1000,
+        overflow: 'hidden',
+      }}
+    >
+      {/* ── Resize handles (8 directions) ── */}
+      {(['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'] as ResizeEdge[]).map(
+        (edge) => {
+          const isN = edge.includes('n');
+          const isS = edge.includes('s');
+          const isE = edge.includes('e');
+          const isW = edge.includes('w');
+          const isCorner = edge.length === 2;
+          const cornerSize = HANDLE * 3;
+          return (
+            <div
+              key={edge}
+              onMouseDown={(e) => handleEdgeMouseDown(e, edge)}
+              style={{
+                position: 'absolute',
+                cursor: EDGE_CURSORS[edge],
+                zIndex: 10,
+                // edges
+                top: isCorner
+                  ? isN
+                    ? 0
+                    : undefined
+                  : isN
+                    ? 0
+                    : isS
+                      ? undefined
+                      : HANDLE,
+                bottom: isCorner
+                  ? isS
+                    ? 0
+                    : undefined
+                  : isS
+                    ? 0
+                    : isN
+                      ? undefined
+                      : HANDLE,
+                left: isCorner
+                  ? isW
+                    ? 0
+                    : undefined
+                  : isW
+                    ? 0
+                    : isE
+                      ? undefined
+                      : HANDLE,
+                right: isCorner
+                  ? isE
+                    ? 0
+                    : undefined
+                  : isE
+                    ? 0
+                    : isW
+                      ? undefined
+                      : HANDLE,
+                width: isCorner ? cornerSize : isE || isW ? HANDLE : undefined,
+                height: isCorner ? cornerSize : isN || isS ? HANDLE : undefined,
+              }}
+            />
+          );
+        },
+      )}
+      {/* 标题栏 */}
+      <div
+        onMouseDown={handleTitleMouseDown}
+        style={{
+          height: 36,
+          padding: '0 12px',
+          background: '#f7f7f7',
+          borderBottom: `1px solid ${C.editorBorder}`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          cursor: 'move',
+          flexShrink: 0,
+          userSelect: 'none',
+        }}
+      >
+        <span style={{ fontSize: 13, fontWeight: 600, color: C.accent }}>
+          {componentType}
+        </span>
+        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
+          <CopyButton text={`${imports}\n\n${code}`} />
+          <Button
+            size="small"
+            type="text"
+            icon={<CloseOutlined />}
+            onClick={onClose}
+            style={{ color: C.textMuted }}
+          />
+        </div>
+      </div>
+
+      {/* Variant 切换 */}
+      {variants.length > 1 && (
+        <div
+          style={{
+            padding: '0 12px',
+            borderBottom: `1px solid ${C.editorBorder}`,
+            flexShrink: 0,
+            background: C.bg,
+          }}
+        >
+          <Tabs
+            size="small"
+            style={{ marginBottom: 0 }}
+            items={variants.map((v) => ({
+              key: v.name,
+              label: <span style={{ fontSize: 12 }}>{v.label}</span>,
+            }))}
+            onChange={(key) => {
+              const variant = variants.find((v) => v.name === key);
+              if (variant) onChange(variant.code);
+            }}
+          />
+        </div>
+      )}
+
+      {/* Imports（只读） */}
+      <div
+        style={{
+          background: C.importBg,
+          borderBottom: `1px solid ${C.importBorder}`,
+          padding: '6px 12px',
+          flexShrink: 0,
+        }}
+      >
+        <pre
+          style={{
+            margin: 0,
+            fontSize: 12,
+            color: C.importText,
+            fontFamily: "'Fira Mono', monospace",
+            lineHeight: 1.5,
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          {imports}
+        </pre>
+      </div>
+
+      {/* Monaco 编辑器 */}
+      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
+        <Editor
+          defaultLanguage="tsx"
+          value={code}
+          onChange={(val) => onChange(val ?? '')}
+          onMount={handleMount}
+          theme="vs"
+          options={{
+            minimap: { enabled: false },
+            fontSize: 13,
+            fontFamily: "'Fira Mono', monospace",
+            lineNumbers: 'on',
+            lineNumbersMinChars: 3,
+            scrollBeyondLastLine: false,
+            automaticLayout: true,
+            tabSize: 2,
+            renderLineHighlight: 'gutter',
+          }}
+        />
+      </div>
+
+      {/* Resize handle */}
+      <div
+        onMouseDown={(e) => {
+          e.preventDefault();
+          handlePropsResize(e.clientY);
+        }}
+        style={{
+          height: 4,
+          flexShrink: 0,
+          cursor: 'row-resize',
+          background: C.editorBorder,
+          transition: 'background 0.15s',
+        }}
+        onMouseEnter={(e) => (e.currentTarget.style.background = C.accent)}
+        onMouseLeave={(e) =>
+          (e.currentTarget.style.background = C.editorBorder)
+        }
+      />
+
+      {/* Props 表 */}
+      {props.length > 0 && <PropTable props={props} height={propsHeight} />}
+    </div>
+  );
+};
+
+export default CodeFloatWindow;

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/ComponentThumbnail.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect, useRef, memo } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { Root } from 'react-dom/client';
+import LivePreview from './LivePreview';
+import { CANVAS_DEFAULTS } from './canvasDefaults';
+
+// ─── Grid constants (same as CanvasPage) ─────────────────────────────────────
+const GRID_COLS = 48;
+const ROW_HEIGHT = 10;
+const MARGIN = 8;
+// Reference container width for computing pixel ratio (typical canvas width)
+const CANVAS_REF_WIDTH = 1200;
+const COL_WIDTH = (CANVAS_REF_WIDTH - MARGIN * (GRID_COLS + 1)) / GRID_COLS;
+
+/** Compute real pixel height for h grid rows */
+function gridH(h: number): number {
+  return h * ROW_HEIGHT + (h - 1) * MARGIN;
+}
+/** Compute real pixel width for w grid columns */
+function gridW(w: number): number {
+  return w * COL_WIDTH + (w - 1) * MARGIN;
+}
+
+interface Props {
+  componentType: string;
+  code?: string;
+  width?: number;
+}
+
+const ComponentThumbnail: React.FC<Props> = memo(
+  ({ componentType, code: codeProp, width = 140 }) => {
+    const def = CANVAS_DEFAULTS[componentType];
+    const containerRef = useRef<HTMLDivElement>(null);
+    const rootRef = useRef<Root | null>(null);
+    const slotRef = useRef<HTMLDivElement | null>(null);
+
+    if (!def) return null;
+
+    const layout = def.layout;
+    const rawCode = codeProp ?? def.variants[0]?.code ?? def.code ?? '';
+
+    // Thumbnail frame: fixed width, height from real pixel ratio
+    const thumbW = width;
+    const pxW = gridW(layout.w);
+    const pxH = gridH(layout.h);
+    const thumbH = thumbW * (pxH / pxW);
+
+    // Virtual canvas: use real pixel dimensions as render size
+    const renderW = Math.round(pxW);
+    const renderH = Math.round(pxH);
+    const scale = thumbW / renderW;
+
+    // Replace existing height in code to match ratio; don't inject if none exists
+    const code = replaceExistingHeight(rawCode, renderH);
+
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container || !code) return;
+
+      cleanup();
+
+      const slot = document.createElement('div');
+      Object.assign(slot.style, {
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        width: `${renderW}px`,
+        height: `${renderH}px`,
+        overflow: 'hidden',
+        transform: `scale(${scale})`,
+        transformOrigin: 'top left',
+        pointerEvents: 'none',
+      });
+
+      container.appendChild(slot);
+      slotRef.current = slot;
+
+      const root = createRoot(slot);
+      rootRef.current = root;
+      root.render(<LivePreview code={code} />);
+
+      return cleanup;
+
+      function cleanup() {
+        const r = rootRef.current;
+        const s = slotRef.current;
+        rootRef.current = null;
+        slotRef.current = null;
+        if (r) {
+          setTimeout(() => {
+            try {
+              r.unmount();
+            } catch {}
+          }, 0);
+        }
+        if (s && s.parentNode) {
+          s.parentNode.removeChild(s);
+        }
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [code, renderW, renderH, scale]);
+
+    return (
+      <div
+        ref={containerRef}
+        style={{
+          width: thumbW,
+          height: thumbH,
+          overflow: 'hidden',
+          position: 'relative',
+          flexShrink: 0,
+        }}
+      />
+    );
+  },
+);
+
+ComponentThumbnail.displayName = 'ComponentThumbnail';
+export default ComponentThumbnail;
+
+// ─── Helper ──────────────────────────────────────────────────────────────────
+
+/**
+ * If code already contains a height value, replace it with the correct ratio-based height.
+ * If no height exists, leave code untouched.
+ */
+function replaceExistingHeight(code: string, h: number): string {
+  if (/height\s*=\s*\{[\s\d]+\}/.test(code)) {
+    return code.replace(/height\s*=\s*\{[\s\d]+\}/, `height={${h}}`);
+  }
+  if (/height\s*:\s*\d+/.test(code)) {
+    return code.replace(/height\s*:\s*\d+/, `height: ${h}`);
+  }
+  return code;
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/IsolatedLivePreview.tsx

@@ -0,0 +1,101 @@
+/**
+ * IsolatedLivePreview
+ *
+ * Renders LivePreview in a completely separate React root so that:
+ *  1. antd v6 Spin (rc-motion ClassComponent) setState callbacks, which throw under
+ *     React 19's commitCallbacks, are silenced per-root via onUncaughtError / onCaughtError
+ *     and never propagate to the main app's defaultOnUncaughtError.
+ *  2. Any other runtime errors inside the preview are contained.
+ *
+ * The host div is a plain flex container; the inner root owns its own DOM node.
+ *
+ * Lifecycle notes:
+ *  - On mount: create DOM node + createRoot, render LivePreview.
+ *  - On `code` change (useEffect dep): unmount old root asynchronously,
+ *    create a fresh root synchronously. This avoids the "synchronously unmount
+ *    a root while React is already rendering" error in React 19 Strict Mode.
+ *  - On unmount: deferred unmount + remove of the inner div.
+ */
+import React, { useEffect, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { Root } from 'react-dom/client';
+import LivePreview from './LivePreview';
+
+interface IsolatedLivePreviewProps {
+  code: string;
+  style?: React.CSSProperties;
+}
+
+const IsolatedLivePreview: React.FC<IsolatedLivePreviewProps> = ({
+  code,
+  style,
+}) => {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<Root | null>(null);
+  const innerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+
+    // ── Tear down any previous root (deferred so we never call unmount
+    //    synchronously during React's commit phase).
+    const prevRoot = rootRef.current;
+    const prevInner = innerRef.current;
+    rootRef.current = null;
+    innerRef.current = null;
+
+    if (prevRoot || prevInner) {
+      setTimeout(() => {
+        try {
+          prevRoot?.unmount();
+        } catch {
+          /* ignore */
+        }
+        try {
+          prevInner?.remove();
+        } catch {
+          /* ignore */
+        }
+      }, 0);
+    }
+
+    // ── Create fresh inner div + root
+    const inner = document.createElement('div');
+    inner.style.cssText = 'width:100%;height:100%';
+    host.appendChild(inner);
+    innerRef.current = inner;
+
+    const root = createRoot(inner);
+    rootRef.current = root;
+    root.render(<LivePreview code={code} />);
+
+    return () => {
+      // Cleanup on unmount or before next effect run
+      const r = rootRef.current;
+      const d = innerRef.current;
+      rootRef.current = null;
+      innerRef.current = null;
+      setTimeout(() => {
+        try {
+          r?.unmount();
+        } catch {
+          /* ignore */
+        }
+        try {
+          d?.remove();
+        } catch {
+          /* ignore */
+        }
+      }, 0);
+    };
+    // Re-run when code changes so the preview always reflects the latest code.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [code]);
+
+  return (
+    <div ref={hostRef} style={{ width: '100%', height: '100%', ...style }} />
+  );
+};
+
+export default IsolatedLivePreview;