@arronqzy/react-view 1.0.11 → 1.0.13

package/dist/styles.css

@@ -1090,6 +1090,10 @@ video {
   width: 2.25rem;
 }
 
+.w-\[108px\] {
+  width: 108px;
+}
+
 .w-\[220px\] {
   width: 220px;
 }
@@ -1098,10 +1102,6 @@ video {
   width: 280px;
 }
 
-.w-\[96px\] {
-  width: 96px;
-}
-
 .w-\[min\(92vw\2c 720px\)\] {
   width: min(92vw, 720px);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "files": [
     "src",
     "dist",
@@ -30,13 +30,13 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
-    "@arronqzy/blueprint-dsl": "1.0.5",
-    "@arronqzy/i18n": "0.1.3",
     "@arronqzy/ui": "1.0.5",
-    "@arronqzy/react-blueprint": "1.0.6",
+    "@arronqzy/react-blueprint": "1.0.7",
+    "@arronqzy/view-table": "0.1.3",
     "@arronqzy/rx-store": "1.0.4",
-    "@arronqzy/webllm-assistant": "0.1.5",
-    "@arronqzy/view-table": "0.1.3"
+    "@arronqzy/webllm-assistant": "0.1.7",
+    "@arronqzy/blueprint-dsl": "1.0.6",
+    "@arronqzy/i18n": "0.1.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",

package/src/panel/ReactViewOnlinePreview.tsx

@@ -35,6 +35,7 @@ import {
   parsePanelLayers,
   resolvePreviewLayerElements,
 } from "./utils/panelStateIO";
+import { applyPreviewSceneFill, readOutputScale } from "./utils/outputScale";
 
 const PREVIEW_BOOT_PHASES: PageLifecyclePhase[] = ["mounted"];
 
@@ -76,6 +77,8 @@ export function ReactViewOnlinePreview({
   >([]);
   const [layoutRevision, setLayoutRevision] = useState(0);
   const [layoutReady, setLayoutReady] = useState(false);
+  const [outputScale, setOutputScale] = useState(() => readOutputScale());
+  const [fillScale, setFillScale] = useState({ scaleX: 1, scaleY: 1 });
 
   const sceneRef = useRef<HTMLDivElement | null>(null);
 
@@ -179,25 +182,38 @@ export function ReactViewOnlinePreview({
 
   const displayElements = useMemo(
     () =>
-      scopedLayerElements.map((el) => ({
-        ...el,
-        x: el.x - sceneBounds.minX,
-        y: el.y - sceneBounds.minY,
-      })),
-    [sceneBounds.minX, sceneBounds.minY, scopedLayerElements]
+      scopedLayerElements.map((el) => {
+        const x = el.x - sceneBounds.minX;
+        const y = el.y - sceneBounds.minY;
+        if (outputScale) return { ...el, x, y };
+        return {
+          ...el,
+          x: x * fillScale.scaleX,
+          y: y * fillScale.scaleY,
+          width: el.width * fillScale.scaleX,
+          height: el.height * fillScale.scaleY,
+        };
+      }),
+    [
+      fillScale.scaleX,
+      fillScale.scaleY,
+      outputScale,
+      sceneBounds.minX,
+      sceneBounds.minY,
+      scopedLayerElements,
+    ]
   );
 
   const applySceneFit = useCallback(() => {
-    const scene = sceneRef.current;
-    if (!scene) return;
-    const vw = window.innerWidth || 1;
-    const vh = window.innerHeight || 1;
-    const sw = Math.max(1, sceneBounds.width);
-    const sh = Math.max(1, sceneBounds.height);
-    const scaleX = vw / sw;
-    const scaleY = vh / sh;
-    if (!Number.isFinite(scaleX) || !Number.isFinite(scaleY)) return;
-    scene.style.transform = `scale(${scaleX}, ${scaleY})`;
+    const enabled = readOutputScale();
+    setOutputScale(enabled);
+    const fill = applyPreviewSceneFill(
+      sceneRef.current,
+      sceneBounds.width,
+      sceneBounds.height,
+      enabled
+    );
+    setFillScale({ scaleX: fill.scaleX, scaleY: fill.scaleY });
     setLayoutRevision((v) => v + 1);
     notifyPreviewLayoutChanged();
   }, [sceneBounds.height, sceneBounds.width]);
@@ -304,9 +320,16 @@ export function ReactViewOnlinePreview({
           id="preview-scene"
           className="relative shrink-0 origin-top-left"
           style={{
-            width: sceneBounds.width,
-            height: sceneBounds.height,
+            width: outputScale
+              ? sceneBounds.width
+              : sceneBounds.width * fillScale.scaleX,
+            height: outputScale
+              ? sceneBounds.height
+              : sceneBounds.height * fillScale.scaleY,
             transformOrigin: "left top",
+            transform: outputScale
+              ? `scale(${fillScale.scaleX}, ${fillScale.scaleY})`
+              : "none",
           }}
         >
           <ElementsLayer

package/src/panel/ReactViewPanel.tsx

@@ -14,6 +14,7 @@ import { ElementsLayer } from "./components/ElementsLayer";
 import { SelectLayer } from "./components/SelectLayer";
 import { MoveableLayer } from "./components/MoveableLayer";
 import { buildChartOption, CHART_TYPES } from "./utils/chartOptionBuilder";
+import { readOutputScale, writeOutputScale } from "./utils/outputScale";
 import { MaterialSidebar } from "./components/MaterialSidebar";
 import { AssistantChatPanel } from "./ai/AssistantChatPanel";
 import {
@@ -94,6 +95,7 @@ import {
   EmptyTitle,
   Input,
   Menubar,
+  MenubarCheckboxItem,
   MenubarContent,
   MenubarItem,
   MenubarMenu,
@@ -460,6 +462,7 @@ export function ReactViewPanel({
   const [titleIconZoom, setTitleIconZoom] = useState(1.6);
   const [pendingPreviewLayerId, setPendingPreviewLayerId] = useState<string | null>(null);
   const [panelFontSize, setPanelFontSize] = useState<"sm" | "md" | "lg">("md");
+  const [outputScale, setOutputScale] = useState(() => readOutputScale());
   const [blueprintOpen, setBlueprintOpen] = useState(false);
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [blueprintGraph, setBlueprintGraph] = useState(() => BlueprintGraph.empty());
@@ -570,6 +573,10 @@ export function ReactViewPanel({
     }
   }, [panelFontSize]);
 
+  useEffect(() => {
+    writeOutputScale(outputScale);
+  }, [outputScale]);
+
   useEffect(() => {
     try {
       const stored = localStorage.getItem(TITLE_ICON_STORAGE_KEY) ?? "";
@@ -1784,16 +1791,49 @@ export function ReactViewPanel({
           });
         }
         var scene = document.getElementById("preview-scene");
+        var root = document.getElementById("preview-root");
+        var outputScale = ${outputScale ? "true" : "false"};
+        function rememberBox(node) {
+          if (node.dataset.origLeft != null) return;
+          node.dataset.origLeft = String(parseFloat(node.style.left) || 0);
+          node.dataset.origTop = String(parseFloat(node.style.top) || 0);
+          node.dataset.origWidth = String(parseFloat(node.style.width) || node.offsetWidth || 0);
+          node.dataset.origHeight = String(parseFloat(node.style.height) || node.offsetHeight || 0);
+        }
         function fitScene() {
           if (!scene) return;
           var vw = window.innerWidth || 1;
           var vh = window.innerHeight || 1;
           var sw = ${sceneWidth} || 1;
           var sh = ${sceneHeight} || 1;
-          // 铺满预览窗口：宽高分别缩放，保证内容贴住四边
           var scaleX = vw / sw;
           var scaleY = vh / sh;
-          scene.style.transform = "translate(0px,0px) scale(" + scaleX + "," + scaleY + ")";
+          if (root) root.style.overflow = "hidden";
+          var nodes = scene.querySelectorAll("[data-element-id]");
+          if (outputScale) {
+            scene.style.width = sw + "px";
+            scene.style.height = sh + "px";
+            scene.style.transform = "translate(0px,0px) scale(" + scaleX + "," + scaleY + ")";
+            nodes.forEach(function (node) {
+              rememberBox(node);
+              node.style.left = node.dataset.origLeft + "px";
+              node.style.top = node.dataset.origTop + "px";
+              node.style.width = node.dataset.origWidth + "px";
+              node.style.height = node.dataset.origHeight + "px";
+            });
+            return;
+          }
+          // 块仍按视口撑满，但不对整棵内容做 transform，字体保持原尺寸
+          scene.style.width = vw + "px";
+          scene.style.height = vh + "px";
+          scene.style.transform = "none";
+          nodes.forEach(function (node) {
+            rememberBox(node);
+            node.style.left = (Number(node.dataset.origLeft) * scaleX) + "px";
+            node.style.top = (Number(node.dataset.origTop) * scaleY) + "px";
+            node.style.width = (Number(node.dataset.origWidth) * scaleX) + "px";
+            node.style.height = (Number(node.dataset.origHeight) * scaleY) + "px";
+          });
         }
         fitScene();
         window.addEventListener("resize", fitScene);
@@ -2013,6 +2053,14 @@ export function ReactViewPanel({
                 <MenubarRadioItem value="zh-CN">{t("panel.theme.zhCN")}</MenubarRadioItem>
                 <MenubarRadioItem value="en-US">{t("panel.theme.enUS")}</MenubarRadioItem>
               </MenubarRadioGroup>
+              <MenubarSeparator />
+              <MenubarCheckboxItem
+                checked={outputScale}
+                onCheckedChange={(checked) => setOutputScale(checked === true)}
+                title={t("panel.menubar.outputScaleHint")}
+              >
+                {t("panel.menubar.outputScale")}
+              </MenubarCheckboxItem>
             </MenubarContent>
           </MenubarMenu>
         </Menubar>
@@ -3176,6 +3224,8 @@ export function ReactViewPanel({
               configFocus={sidebarConfigFocus}
               executionLog={executionLogView}
               selectedBlueprintNode={selectedBlueprintNode}
+              blueprintGraphNodes={blueprintGraph.document.nodes}
+              blueprintGraphEdges={blueprintGraph.document.edges}
               allowFalseSignalPropagation={
                 blueprintGraph.document.allowFalseSignalPropagation ?? false
               }

package/src/panel/ai/AssistantChatPanel.tsx

@@ -3,18 +3,17 @@ import {
   ASSISTANT_MODEL_OPTIONS,
   DEFAULT_MODEL_ID,
   WebLLMAssistantRuntime,
-  buildSystemPrompt,
   isWebGPUAvailable,
   looksLikePureQuestion,
-  parseAssistantAction,
   inferPanelAddFromUserText,
   runAgentLoop,
   buildEditorContext,
   tryLocalFaqReply,
+  buildChatSystemPrompt,
   buildForceReplyPrompt,
+  unwrapChatReply,
   buildPriorChatMessages,
   buildRecentDialogSummary,
-  looksLikeUnclearIntent,
   UNCLEAR_INTENT_REPLY,
   inferLocalEditorPlan,
   type ChatMessage,
@@ -345,15 +344,6 @@ export function AssistantChatPanel({
           return;
         }
 
-        // Vague greetings / short junk — ask instead of mutating.
-        if (looksLikeUnclearIntent(trimmed)) {
-          pushMessage({
-            role: "assistant",
-            content: t("panel.ai.unclearIntent") || UNCLEAR_INTENT_REPLY,
-          });
-          return;
-        }
-
         // High-confidence local tools (add / resize / delete / save …) — skip model.
         const selectedIds = depsRef.current.getSelectedIds() ?? [];
         const localPlan = inferLocalEditorPlan(trimmed, { selectedIds });
@@ -402,41 +392,20 @@ export function AssistantChatPanel({
         const runtime = runtimeRef.current!;
 
         if (looksLikePureQuestion(trimmed)) {
-          const ctx = buildEditorContext({
-            ...buildObservation(),
-            userGoal: trimmed,
-            recentDialog,
-          });
           const history: ChatMessage[] = [
-            { role: "system", content: buildSystemPrompt(ctx) },
+            { role: "system", content: buildChatSystemPrompt() },
             ...priorChat,
             { role: "user", content: trimmed },
           ];
-          let parsed = parseAssistantAction(await runtime.chat(history));
-          if (parsed.ok && parsed.action.type !== "reply") {
-            // Small models often mutate the page on Q&A — force a reply-only turn.
-            history.push({
-              role: "assistant",
-              content: JSON.stringify(parsed.action),
-            });
+          let message = unwrapChatReply(await runtime.chat(history));
+          if (!message) {
             history.push({ role: "user", content: buildForceReplyPrompt() });
-            parsed = parseAssistantAction(await runtime.chat(history));
+            message = unwrapChatReply(await runtime.chat(history));
           }
-          if (!parsed.ok) {
-            pushMessage({
-              role: "assistant",
-              content: `${t("panel.ai.parseFailed")}\n\n\`\`\`\n${parsed.rawText.slice(0, 800)}\n\`\`\``,
-            });
-            return;
-          }
-          if (parsed.action.type === "reply") {
-            pushMessage({ role: "assistant", content: parsed.action.message });
-            return;
-          }
-          // Still not a reply — refuse to mutate; ask clearly instead.
           pushMessage({
             role: "assistant",
-            content: t("panel.ai.unclearIntent") || UNCLEAR_INTENT_REPLY,
+            content:
+              message || t("panel.ai.unclearIntent") || UNCLEAR_INTENT_REPLY,
           });
           return;
         }
@@ -625,12 +594,17 @@ export function AssistantChatPanel({
                 onValueChange={setModelId}
                 disabled={busy || status === "loading"}
               >
-                <SelectTrigger className="h-8 w-[96px] rounded-md border-border bg-background text-[12px] shadow-none">
+                <SelectTrigger className="h-8 w-[108px] rounded-md border-border bg-background text-[12px] shadow-none">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent position="popper" sideOffset={6}>
                   {ASSISTANT_MODEL_OPTIONS.map((opt) => (
-                    <SelectItem key={opt.id} value={opt.id} className="text-[12px]">
+                    <SelectItem
+                      key={opt.id}
+                      value={opt.id}
+                      className="text-[12px]"
+                      title={t(opt.hintKey)}
+                    >
                       {t(opt.labelKey)}
                     </SelectItem>
                   ))}