@gadmin2n/schematics 0.0.71 → 0.0.74

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

@@ -1,476 +0,0 @@
-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/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/ComponentThumbnail.tsx

@@ -1,137 +0,0 @@
-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 {
-              /* unmount may fail if already unmounted */
-            }
-          }, 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/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/IsolatedLivePreview.tsx

@@ -1,101 +0,0 @@
-/**
- * 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;