dsh-drawai 0.4.2 → 0.4.4

package/README.md

@@ -24,10 +24,10 @@ DrawAI 在右侧栏提供画布，也向对话中的模型提供读图、改图
 
 ```powershell
 # DeepSeek Harness 桌面版
-dsh plugin --profile desktop add dsh-drawai@0.4.2
+dsh plugin --profile desktop add dsh-drawai@0.4.4
 
 # 使用 dsh web 时，安装到 web profile
-dsh plugin --profile web add dsh-drawai@0.4.2
+dsh plugin --profile web add dsh-drawai@0.4.4
 ```
 
 桌面版和 Web 分别管理插件，只需运行需要的命令。安装完成后**完全重启对应的宿主**，然后在右侧栏找到「DrawAI 画布」。
@@ -43,6 +43,8 @@ dsh plugin --profile desktop update dsh-drawai@latest
 
 > 0.4.1 将视频渲染依赖放到独立运行环境，安装插件时无需为 esbuild 授权构建脚本。首次使用某些视频功能时需要联网初始化，详见下文。
 > 0.4.2 修了画布工具注册、渲染预览一直 pending、子目录画布打不开、整片风格 demo 缺依赖等一批问题，详见 [发布说明](docs/release.md)。
+> 0.4.3 把内嵌技能拆成「画布」与「视频」两条，做视频不必先被读写画布那句挡住，详见 [发布说明](docs/release.md)。
+> 0.4.4 新增 `diagram_export`，没有画布侧栏的通道也能在宿主侧导成 SVG / PNG；同时修了拐弯连线在预览里糊成黑块，整片风格增至 15 种，详见 [发布说明](docs/release.md)。
 
 ## 第一次使用
 
@@ -62,7 +64,7 @@ dsh plugin --profile desktop update dsh-drawai@latest
 
 画布支持形状、独立文字、表格、SVG 和位图节点，以及直线、折线、曲线、自环和悬空连线。可用多选、图层、顺序、对齐和页面切换整理内容；双击文字或表格编辑。
 
-模型通过 `diagram_read` 读取结构、样式、选区与文件版本，通过 `diagram_apply` 增删或修改节点和边。对于并发编辑，`expectRevision` 可在文件版本不匹配时阻止写入。
+模型通过 `diagram_read` 读取结构、样式、选区与文件版本，通过 `diagram_apply` 增删或修改节点和边。对于并发编辑，`expectRevision` 可在文件版本不匹配时阻止写入。要成品图时用 `diagram_export` 在宿主侧直接导成 SVG / PNG —— 不需要打开画布，QQ、CLI 这类没有侧栏的通道也能用。
 
 例如可以继续对话：
 
@@ -136,7 +138,7 @@ FFmpeg 按显式路径、系统 PATH、缓存及自动下载的顺序查找，
 | 文档 | 内容 |
 |---|---|
 | [原生画布与兼容说明](docs/native-canvas.md) | `.drawai`、媒体目录与 `.drawio` 迁移 |
-| [画布 AI 工具参考](docs/diagram-tools.md) | `diagram_read`、`diagram_apply` 和图片矢量化 |
+| [画布 AI 工具参考](docs/diagram-tools.md) | `diagram_read`、`diagram_apply`、`diagram_export` 和图片矢量化 |
 | [视频节点说明](docs/video-nodes.md) | 视频导入、复刻、后台任务和导出 |
 | [动效视频说明](docs/motion-video.md) | 分镜、工程、素材、预览、渲染与回填 |
 | [声音制作说明](docs/motion-audio.md) | 音轨、音效、旁白和节拍 |
@@ -158,4 +160,4 @@ npm run watch   # 开发时监听并重建
 
 ## License
 
-插件采用 [MIT License](LICENSE)。第三方字体、素材及按需下载组件的许可和来源见同一文件；使用外部音效等素材时，请另行核对其许可。
+插件采用 [MIT License](LICENSE)。第三方字体、素材及按需下载组件的许可和来源见同一文件；使用外部音效等素材时，请另行核对其许可。

package/lib/client.js

@@ -2201,7 +2201,7 @@ window.__ModuleLoader__.load({
       "source": "https://github.com/Vincentwei1021/mg-styles-15",
       "commit": "49052d80bfaf9fa8412cc9710530e5e95a3b8d8c",
       "license": "MIT",
-      "note": "整片风格库：14 种 MG 视觉语言，每种由一份上游提示词 + 一支上游成片源码 + 一份 Remotion 移植 brief 组成。上游的 04-3d-render（Blender 离线渲的 CGI 质感）没有收录，需要那种质感请走外部渲染回灌。",
+      "note": "整片风格库：15 种 MG 视觉语言，每种由一份上游提示词 + 一支上游成片源码 + 一份 Remotion 移植 brief 组成。上游的 04-3d-render（Blender 离线渲的 CGI 质感）没有收录，需要那种质感请走外部渲染回灌。",
       "promptChars": 1258,
       "styles": [
         {
@@ -2293,7 +2293,8 @@ window.__ModuleLoader__.load({
             "files": [
               "demos/01-flat-vector/index.html"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "02-line-art",
@@ -2386,7 +2387,8 @@ window.__ModuleLoader__.load({
             "files": [
               "demos/02-line-art/film.js"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "03-isometric",
@@ -2500,7 +2502,8 @@ window.__ModuleLoader__.load({
               "demos/03-isometric/js/ui.js",
               "demos/03-isometric/js/world.js"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "05-cel-boil",
@@ -2595,7 +2598,8 @@ window.__ModuleLoader__.load({
             "files": [
               "demos/05-cel-boil/js/scene.js"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "06-collage",
@@ -2689,7 +2693,8 @@ window.__ModuleLoader__.load({
             "files": [
               "demos/06-collage/index.html"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "07-liquid",
@@ -2796,7 +2801,8 @@ window.__ModuleLoader__.load({
               "demos/07-liquid/js/shaders.js",
               "demos/07-liquid/js/type.js"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "08-morph",
@@ -2892,7 +2898,8 @@ window.__ModuleLoader__.load({
             "files": [
               "demos/08-morph/index.html"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "09-bauhaus",
@@ -2984,7 +2991,8 @@ window.__ModuleLoader__.load({
             "files": [
               "demos/09-bauhaus/film.js"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "10-synthwave",
@@ -3076,7 +3084,8 @@ window.__ModuleLoader__.load({
             "files": [
               "demos/10-synthwave/index.html"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "12-aurora-glass",
@@ -3172,7 +3181,8 @@ window.__ModuleLoader__.load({
               "demos/12-aurora-glass/main.js",
               "demos/12-aurora-glass/shaders.js"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "18-hanazi",
@@ -3263,7 +3273,8 @@ window.__ModuleLoader__.load({
             "files": [
               "demos/18-hanazi/index.html"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "19-paperclip",
@@ -3353,7 +3364,8 @@ window.__ModuleLoader__.load({
             "files": [
               "demos/19-paperclip/index.html"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "20-pixel",
@@ -3442,7 +3454,8 @@ window.__ModuleLoader__.load({
             "files": [
               "demos/20-pixel/film.js"
             ]
-          }
+          },
+          "origin": null
         },
         {
           "slug": "22-hud",
@@ -3549,6 +3562,106 @@ window.__ModuleLoader__.load({
               "demos/22-hud/js/util.js",
               "demos/22-hud/js/v5.js"
             ]
+          },
+          "origin": null
+        },
+        {
+          "slug": "23-ink-wash",
+          "name": "水墨写意",
+          "en": "Chinese Ink Wash / Xieyi",
+          "heading": "水墨写意 Chinese Ink Wash / Xieyi",
+          "oneLiner": "宣纸是底、墨只加不铺：一笔一笔写出窗、竹、猫与人，墨分五色，留白是挖出来的，钤印收尾。",
+          "shot": "huashu 17_ink · 1920×1080 · 30 fps · 10 秒 · 单镜写意房间",
+          "tags": [
+            "水墨",
+            "写意",
+            "国风",
+            "宣纸",
+            "毛笔",
+            "墨分五色",
+            "留白",
+            "八大山人",
+            "齐白石",
+            "ink-wash",
+            "xieyi",
+            "chinese-ink"
+          ],
+          "signature": [
+            "纸是整幅唯一的底：#efe6d0 宣纸 + 2600 根纸纤维 + 四角暗角 α.22，没有纯白也没有纯黑背景",
+            "每一笔都是毛笔：4px 等弧长重采样，笔压起收，逐根笔毛按噪声断开出飞白，笔尾比笔头细 30–50%",
+            "墨只用一个色 [16,14,12]，靠 tone 分五色（焦 .9／浓 .8／重 .6／淡 .35／清 .15），全片不出现第二种黑",
+            "晕染是两遍 multiply（外晕 halo·(0.4+grow) + 本体 blur·(1.6−0.6grow)），grow 0→1 是「洇开」不是「淡入」",
+            "留白用 destination-out 从色层里挖掉露出纸色，不是画白色；钤印 1.5→1 倍压下去、multiply 盖上"
+          ],
+          "palette": {
+            "page": "#EFE6D0",
+            "surface": "#F7F1E2",
+            "field": "#6F8AA0",
+            "text": "#14120F",
+            "muted": "#8A7C64",
+            "accent": "#C4281E",
+            "border": "#C9B58C"
+          },
+          "paletteSource": "brief",
+          "colors": [
+            "#EFE6D0",
+            "#F7F1E2",
+            "#14120F",
+            "#C4281E",
+            "#D8553F",
+            "#C47A3C",
+            "#6F8AA0",
+            "#E2AA34"
+          ],
+          "fonts": {
+            "display": "\"Long Cang\",\"Noto Serif SC\",serif",
+            "text": "\"Noto Serif SC\",\"HarmonyOS Sans SC\",serif",
+            "mono": "\"IBM Plex Mono\",monospace"
+          },
+          "rhythm": {
+            "bpm": 60,
+            "fps": 30,
+            "duration": 10,
+            "aspect": "16:9",
+            "cutFrames": 30
+          },
+          "prompt": "prompts/23-ink-wash.md",
+          "demos": [
+            "demos/23-ink-wash/film.js",
+            "demos/23-ink-wash/brush.js"
+          ],
+          "brief": "briefs/23-ink-wash.md",
+          "engine": "canvas2d",
+          "engines": [
+            "canvas2d"
+          ],
+          "engineNote": "纯 Canvas2D：宣纸纤维、笔毛飞白、墨晕两遍 multiply 全在 2D 画布上画，没有 shader，也没有 DOM 或贴图合成。",
+          "engineFiles": [
+            "demos/23-ink-wash/brush.js"
+          ],
+          "motion": {
+            "motionBlur": null,
+            "transitions": "cut",
+            "impact": false,
+            "camera": false,
+            "grain": {
+              "size": null
+            },
+            "secondary": [],
+            "feather": false,
+            "files": [
+              "demos/23-ink-wash/film.js"
+            ]
+          },
+          "origin": {
+            "source": "https://github.com/alchaincyf/huashu-art-motion",
+            "license": "MIT",
+            "files": {
+              "prompts/23-ink-wash.md": "references/风格配方/17_ink.md",
+              "demos/23-ink-wash/film.js": "scripts/engine/scenes/17_ink.js",
+              "demos/23-ink-wash/brush.js": "scripts/engine/lib/brush.js"
+            },
+            "note": "场景为节选（少女段落未收），brush.js 逐字收录；依赖上游全局 U/KIT/PAINT，只作阅读参考。"
           }
         }
       ]
@@ -5191,7 +5304,7 @@ window.__ModuleLoader__.load({
         React.createElement('div', { style: { display: 'flex', flexDirection: 'column', height: '100%' } },
           React.createElement('header', { style: { padding: '20px 24px', borderBottom: '1px solid #8883', display: 'flex', justifyContent: 'space-between', gap: 16 } },
             React.createElement('div', null, React.createElement('strong', { style: { fontSize: 20 } }, props.replaceId ? '换一种整片风格' : '整片风格库'),
-              React.createElement('div', { style: { fontSize: 12, opacity: .65, marginTop: 6 } }, '14 种 MG 视觉语言 · 一种风格管一条片子的色板、字体、节奏与动效语法 · 不是单镜动效')),
+              React.createElement('div', { style: { fontSize: 12, opacity: .65, marginTop: 6 } }, '15 种 MG 视觉语言 · 一种风格管一条片子的色板、字体、节奏与动效语法 · 不是单镜动效')),
             button('关闭', props.onClose)),
           React.createElement('div', { style: { display: 'flex', padding: '16px 24px', gap: 12 } },
             React.createElement('input', { autoFocus: true, 'aria-label': '搜索风格', placeholder: '搜索风格，例如：包豪斯、像素、HUD、拼贴', value: query,
@@ -11697,7 +11810,20 @@ window.__ModuleLoader__.load({
           }
           return props
         }
-        const hitProps = edgeFace({ key: 'edge-hit-' + i, className: 'drawai-edge-hit', d: pathOf(pts, 6, edgeCurved) })
+        // 命中带的观感必须**内联**，不能只写在注入页面的 CSS（.drawai-edge-hit）里：
+        // 同一棵树除了画进 DOM，还要被序列化成独立 SVG 去光栅化（"看一眼"的预览图、
+        // 导出 PNG/SVG），而 SVG-as-image 不继承宿主页面的 CSS —— 缺省 fill 是黑的。
+        // 直线段的填充面积为 0，看不出来；**只要路径拐了弯**，围出来的那块就变成实心多边形
+        // （issue #32：预览里连线糊成一条黑色色带，线本身还在，只是被压在黑块底下）。
+        // stroke 也不能省：命中的是这条 12px 的透明带子，靠 CSS 的话它就又退回 1px 实心黑线。
+        const hitProps = edgeFace({
+          key: 'edge-hit-' + i,
+          className: 'drawai-edge-hit',
+          d: pathOf(pts, 6, edgeCurved),
+          fill: 'none',
+          stroke: 'transparent',
+          strokeWidth: 12,
+        })
         children.push(React.createElement('path', hitProps))
         // 连线的画法全部存在文档的 style 键里：dashed/dashPattern 决定线型、endArrow/startArrow
         // 决定箭头、strokeColor 决定颜色、rounded 决定拐角是否圆滑 —— 与 drawio 一致，缺省即"不画"。