dsh-drawai 0.1.1 → 0.2.0

package/lib/style-kernel.js

@@ -41,6 +41,7 @@
 // ── 规范键序：落盘顺序稳定、diff 友好；不在表里的键（开放集合）按插入序排在后面 ──
 var STYLE_KEY_ORDER = [
   'shape', 'ellipse', 'rhombus', 'rounded', 'arcSize', 'curved', 'direction', 'flipH', 'flipV',
+  'imageAspect', 'image', 'imageBackground', 'imageBorder',
   'whiteSpace', 'html', 'fontSize', 'fontFamily', 'fontColor', 'fontStyle',
   'fillColor', 'strokeColor', 'strokeWidth', 'dashed', 'dashPattern',
   'edgeStyle', 'orthogonalLoop', 'jettySize', 'sourceJettySize', 'targetJettySize',
@@ -86,14 +87,32 @@ var NODE_SHAPE_STYLE = {
   cylinder: 'shape=cylinder3',
   document: 'shape=document',
   hexagon: 'shape=hexagon',
+  // svg：节点内容是一段**内嵌 SVG 标记**（不是标签文字），见下面 SVG 那一节。
+  // imageAspect=0 = 拉伸铺满节点框（drawio 插入图片时写的也是 0，见 Actions.js:1848）；
+  // 想等比缩放居中就显式写 imageAspect=1。
+  svg: 'shape=image;imageAspect=0',
+  // image：内嵌位图（png/jpeg/gif/webp 的 data URI）。落盘同样是 drawio 的图片形状；
+  // 缺省 imageAspect=1（等比居中）—— 截图/照片拉伸会变形，和 svg 图标的缺省相反。
+  image: 'shape=image;imageAspect=1',
+  // 分区（飞书式区块 / drawio 的 group 容器）：可插入的容器元素，不是"选中后成组"。
+  // verticalAlign=top + align=left：标题贴在框顶部左侧（区块名），里面再放其它节点。
+  section:
+    'group;container=1;collapsible=0;recursiveResize=0;fillColor=#f5f5f5;strokeColor=#9aa0a6;dashed=1;dashPattern=6 3;verticalAlign=top;align=left;spacingLeft=10;spacingTop=6;fontStyle=0',
 }
 
 /** 形状枚举的顺序（UI 菜单、read 输出的稳定顺序）。顺序对齐 drawio 的形状面板。 */
-var NODE_SHAPES = ['rect', 'rounded', 'text', 'stadium', 'ellipse', 'diamond', 'parallelogram', 'cylinder', 'document', 'hexagon']
+var NODE_SHAPES = ['rect', 'rounded', 'text', 'section', 'stadium', 'ellipse', 'diamond', 'parallelogram', 'cylinder', 'document', 'hexagon', 'svg', 'image']
 
 /** 文字形状独有的"隐形"设置：离开文字形状时要清掉（它们不该跟着变成别的形状）。 */
 var TEXT_SHAPE_ONLY_KEYS = { strokeColor: 'none', fillColor: 'none' }
 
+/** SVG / 位图形状独有的键：离开这类形状时要清掉（否则文件里留着一大段看不见的 data URI）。 */
+var SVG_SHAPE_ONLY_KEYS = ['image', 'imageAspect']
+var IMAGE_SHAPE_ONLY_KEYS = SVG_SHAPE_ONLY_KEYS
+
+/** 分区形状独有的键：离开 section 时要清掉（否则普通矩形仍带着 container=1）。 */
+var SECTION_SHAPE_ONLY_KEYS = ['group', 'container', 'collapsible', 'recursiveResize', 'spacingLeft', 'spacingTop', 'fontStyle']
+
 /** 线型枚举 → style 键。solid 是缺省，落盘即"没有 dashed 键"。 */
 var DASH_PRESETS = {
   solid: null,
@@ -167,6 +186,17 @@ function parseStyle(text) {
   var parts = String(text).split(';')
   for (var p = 0; p < parts.length; p += 1) {
     var part = parts[p].trim()
+    // 内嵌图片的 data URI 里**自带一个分号**（`data:image/png;base64,iVBOR…`），
+    // 按 ';' 硬分会把 `base64,iVBOR…` 当成一个独立的键 —— 拼回去就变成
+    // `…;base64,iVBOR…=1;`，那张图片没了（实测：任何一次 setStyle 都会把它写坏）。
+    // base64 的字母表里没有 ';'，所以"base64,"开头的那一段一定是上一段的续行。
+    if (part.indexOf('base64,') === 0 && p > 0) {
+      var lastKey = lastKeyOf(out)
+      if (lastKey !== null) {
+        out[lastKey] = out[lastKey] + ';' + part
+        continue
+      }
+    }
     if (part.length === 0) continue
     var eq = part.indexOf('=')
     if (eq < 0) out[part] = '1'
@@ -179,6 +209,12 @@ function parseStyle(text) {
   return out
 }
 
+/** 对象里最后插入的键（parseStyle 合并 `;base64,` 续行时要找"上一段是谁"）。 */
+function lastKeyOf(map) {
+  var names = Object.keys(map)
+  return names.length === 0 ? null : names[names.length - 1]
+}
+
 /** 把键值对象拼回 style 串：规范键序 + 未知键按插入序 + 结尾分号。空对象 → 空串。 */
 function formatStyle(value) {
   var map = parseStyle(value)
@@ -257,7 +293,21 @@ function styleIsEmpty(style) {
 function nodeShapeFromStyle(style) {
   // 独立文字：drawio 用裸键 `text`（不是 `shape=text`）表达，所以要单独认一次。
   if (styleGet(style, 'text', null) !== null) return 'text'
+  // 分区 / 分组容器：drawio 用裸键 `group` + `container=1`（不是 shape=group）。
+  if (styleGet(style, 'group', null) !== null) return 'section'
+  if (styleGet(style, 'container', null) === '1' && styleGet(style, 'swimlane', null) === null) return 'section'
   var shape = styleGet(style, 'shape', null)
+  // 图片形状：`shape=image`（或 drawio 的裸键写法留下的 `image=` data URI）。
+  //   · SVG data URI → 工具形状 `svg`（可编辑标记）
+  //   · 位图 data URI（png/jpeg/gif/webp）→ 工具形状 `image`（画布用 <image> 画出来）
+  //   · 外链/相对路径 → 仍落回 rect（文件读不到，notes 里说明按矩形显示）
+  var imageVal = styleGet(style, 'image', null)
+  var looksLikeImageShape =
+    shape === 'image' || (typeof imageVal === 'string' && imageVal.indexOf('data:image/') === 0)
+  if (looksLikeImageShape) {
+    if (isSvgDataUri(imageVal)) return 'svg'
+    if (isRasterDataUri(imageVal)) return 'image'
+  }
   if (shape === 'parallelogram') return 'parallelogram'
   if (shape === 'cylinder3' || shape === 'cylinder') return 'cylinder'
   if (shape === 'document') return 'document'
@@ -282,6 +332,9 @@ function styleFromNodeShape(shape) {
 function styleWithNodeShape(style, shape) {
   var map = parseStyle(style)
   var wasText = nodeShapeFromStyle(style) === 'text'
+  var wasSvg = nodeShapeFromStyle(style) === 'svg'
+  var wasImage = nodeShapeFromStyle(style) === 'image'
+  var wasSection = nodeShapeFromStyle(style) === 'section'
   var shapeKeys = ['shape', 'ellipse', 'rhombus', 'rounded', 'arcSize', 'text']
   for (var i = 0; i < shapeKeys.length; i += 1) delete map[shapeKeys[i]]
   // 从"文字"换成别的形状：把它的隐形设置也清掉，否则换出来的矩形/椭圆是看不见的
@@ -292,12 +345,163 @@ function styleWithNodeShape(style, shape) {
       if (String(map[noneKeys[n]]).toLowerCase() === TEXT_SHAPE_ONLY_KEYS[noneKeys[n]]) delete map[noneKeys[n]]
     }
   }
+  // 同理：从"SVG 图形 / 位图"换成别的形状时，把那段内嵌 data URI 一起清掉 —— 留着它
+  // 没人看得见，却会让文件白白胖一大截（而且下次换回会突然冒出一张旧图）。
+  // svg ↔ image 互切也要清：一个是标记、一个是位图，不能共用同一段 image=。
+  if ((wasSvg || wasImage) && shape !== 'svg' && shape !== 'image') {
+    for (var s = 0; s < SVG_SHAPE_ONLY_KEYS.length; s += 1) delete map[SVG_SHAPE_ONLY_KEYS[s]]
+  } else if (wasSvg && shape === 'image') {
+    for (var s2 = 0; s2 < SVG_SHAPE_ONLY_KEYS.length; s2 += 1) delete map[SVG_SHAPE_ONLY_KEYS[s2]]
+  } else if (wasImage && shape === 'svg') {
+    for (var s3 = 0; s3 < IMAGE_SHAPE_ONLY_KEYS.length; s3 += 1) delete map[IMAGE_SHAPE_ONLY_KEYS[s3]]
+  }
+  // 离开分区：清掉容器键，否则普通矩形还会带着 container=1，被当成分区。
+  if (wasSection && shape !== 'section') {
+    for (var c = 0; c < SECTION_SHAPE_ONLY_KEYS.length; c += 1) delete map[SECTION_SHAPE_ONLY_KEYS[c]]
+  }
   var preset = parseStyle(styleFromNodeShape(shape))
   var names = Object.keys(preset)
   for (var p = 0; p < names.length; p += 1) map[names[p]] = preset[names[p]]
   return formatStyle(map)
 }
 
+// ── 内嵌 SVG 内容（形状枚举里的 `svg`）──────────────────────────────────────
+/**
+ * `svg` 形状的落盘形态，逐字对齐 drawio：
+ *
+ *     shape=image;imageAspect=0;image=data:image/svg+xml,<encodeURIComponent(标记)>
+ *
+ * 两条依据都来自 drawio v31.4.5 源码（不是猜的）：
+ *   · `mxImageShape.apply`：`preserveImageAspect = getNumber(style, STYLE_IMAGE_ASPECT, 1) == 1`
+ *     （mxgraph/src/shape/mxImageShape.js）—— 键缺省是 1（等比缩放居中），
+ *     而 drawio 自己插入图片时写的是 `imageAspect=0`（js/grapheditor/Actions.js:1848），
+ *     所以"拉伸铺满"要显式写 0，这也是我们的缺省。
+ *   · `mxGraph.postProcessCellStyle`（js/app.min.js:1315）认的形式就是
+ *     `data:image/svg+xml,%3C…`（百分号编码）与 `data:image/…;base64,…` 两种 ——
+ *     也就是说这个写法在 drawio 桌面版里也能原样渲染出来，不只是本画布能看。
+ *
+ * 为什么用百分号编码而不是 base64：编码后的串里**一个 ';' 都没有**，而 drawio 与本内核的
+ * style 解析都是按 ';' 分段 —— base64 的 `data:image/svg+xml;base64,…` 里那个分号是解析器的雷
+ * （postProcessCellStyle 也正是把非 svg 的 data URI 转成 base64 形态，两套并存）。
+ */
+var SVG_IMAGE_VALUE_PREFIX = 'data:image/svg+xml,'
+var SVG_IMAGE_VALUE_PREFIX_B64 = 'data:image/svg+xml;base64,'
+var SVG_XMLNS = 'xmlns="http://www.w3.org/2000/svg"'
+
+/** 一段文本看起来像不像 SVG 标记（粗判：不做 XML 解析 —— 内核零依赖、两侧都要能跑）。 */
+function isSvgMarkup(value) {
+  return typeof value === 'string' && /<svg[\s>]/i.test(value)
+}
+
+/**
+ * 归一化 SVG 标记：去首尾空白；**缺 xmlns 时补上**。
+ *
+ * 补 xmlns 不是洁癖：SVG 被当作图片加载时（<image href>、<img src>）按 XML 解析，
+ * 根元素没有 xmlns 的文档会被直接丢弃 —— 表现就是"节点框里什么都没有"，且不报任何错。
+ * 模型随手写的 `<svg viewBox="0 0 24 24">…` 十有八九没有 xmlns，所以在这里补。
+ */
+function normalizeSvgMarkup(markup) {
+  var text = String(markup === null || markup === undefined ? '' : markup)
+  text = text.replace(/^\s+/, '').replace(/\s+$/, '')
+  var head = text.slice(0, 1024)
+  if (/<svg[\s>]/i.test(head) && /xmlns\s*=/i.test(head) === false) {
+    text = text.replace(/<svg\b/i, '<svg ' + SVG_XMLNS)
+  }
+  return text
+}
+
+/** 是不是 SVG 的 data URI（百分号编码与 base64 两种形态都认）。 */
+function isSvgDataUri(value) {
+  if (typeof value !== 'string') return false
+  return value.indexOf(SVG_IMAGE_VALUE_PREFIX) === 0 || value.indexOf(SVG_IMAGE_VALUE_PREFIX_B64) === 0
+}
+
+/**
+ * 是不是本画布能画的**位图** data URI（png / jpeg / gif / webp）。
+ *
+ * 外链、相对路径、以及画布解不开的格式（bmp/tiff/svg 以外的……）都不算 ——
+ * 那些仍按矩形占位，notes 里会说明。
+ */
+function isRasterDataUri(value) {
+  if (typeof value !== 'string') return false
+  return /^data:image\/(png|jpe?g|gif|webp);base64,/i.test(value)
+}
+
+/**
+ * SVG data URI → 标记文本；**只解百分号编码那一种**，base64 返回 null。
+ *
+ * 为什么不做 base64：解 base64 要用 atob（浏览器）或 Buffer（Node），
+ * 而本内核是宿主与客户端共用的一份纯函数，不许碰任何环境全局。
+ * 宿主那边要读 base64 形态时自己用 Buffer 补（见 src/index.js）。
+ */
+function svgMarkupFromImageValue(value) {
+  if (typeof value !== 'string') return null
+  if (value.indexOf(SVG_IMAGE_VALUE_PREFIX) !== 0) return null
+  try {
+    return decodeURIComponent(value.slice(SVG_IMAGE_VALUE_PREFIX.length))
+  } catch (error) {
+    return null
+  }
+}
+
+/** 标记文本 → data URI（与 drawio 自己写出来的形态逐字一致）。 */
+function imageValueFromSvgMarkup(markup) {
+  return SVG_IMAGE_VALUE_PREFIX + encodeURIComponent(normalizeSvgMarkup(markup))
+}
+
+/** 从 style 取 `image` 键的值（没有/空串 → null）。渲染端直接拿它喂 <image href>。 */
+function imageValueFromStyle(style) {
+  var value = styleGet(style, 'image', null)
+  if (typeof value !== 'string' || value.length === 0) return null
+  return value
+}
+
+/** 从 style 取内嵌的 SVG 标记：不是 SVG 内容节点（或只有 base64）就返回 null。 */
+function svgMarkupFromStyle(style) {
+  var value = imageValueFromStyle(style)
+  if (value === null || isSvgDataUri(value) === false) return null
+  return svgMarkupFromImageValue(value)
+}
+
+/** 写内嵌 SVG 内容：形状键一起落成 image 形态，其它键（配色/字号/…）原样保留。 */
+function styleWithSvgMarkup(style, markup, aspect) {
+  var fit = String(aspect) === '1'
+  return stylePatch(style, {
+    shape: 'image',
+    imageAspect: fit ? '1' : '0',
+    image: imageValueFromSvgMarkup(markup),
+  })
+}
+
+/**
+ * 写内嵌位图：`image=` 必须是 `data:image/(png|jpeg|gif|webp);base64,…`。
+ * 缺省 imageAspect=1（等比）；显式传 0 则拉伸铺满。
+ */
+function styleWithImageDataUri(style, dataUri, aspect) {
+  if (isRasterDataUri(dataUri) === false) {
+    throw new Error('styleWithImageDataUri: dataUri 必须是 data:image/(png|jpeg|gif|webp);base64,…')
+  }
+  var fit = aspect === undefined || aspect === null ? true : String(aspect) === '1'
+  return stylePatch(style, {
+    shape: 'image',
+    imageAspect: fit ? '1' : '0',
+    image: dataUri,
+  })
+}
+
+/** 清掉内嵌 SVG / 位图内容（回到矩形）：image / imageAspect / shape 一起删。 */
+function styleWithoutSvgMarkup(style) {
+  var map = parseStyle(style)
+  for (var i = 0; i < SVG_SHAPE_ONLY_KEYS.length; i += 1) delete map[SVG_SHAPE_ONLY_KEYS[i]]
+  if (map.shape === 'image') delete map.shape
+  return formatStyle(map)
+}
+
+/** 与 styleWithoutSvgMarkup 同义：位图与 SVG 共用同一组 image 键。 */
+function styleWithoutImageDataUri(style) {
+  return styleWithoutSvgMarkup(style)
+}
+
 // ── 配色 ─────────────────────────────────────────────────────────────────────
 
 /** 从 style 取填充/描边/字色，缺省即 drawio 缺省（白底黑边黑字）。 */
@@ -810,6 +1014,10 @@ export {
   DEFAULT_FILL, DEFAULT_STROKE, DEFAULT_FONT, DEFAULT_NODE_STYLE, DEFAULT_EDGE_STYLE,
   parseStyle, formatStyle, styleGet, styleSet, stylePatch, styleIsEmpty, styleNumber,
   nodeShapeFromStyle, styleFromNodeShape, styleWithNodeShape,
+  isSvgMarkup, normalizeSvgMarkup, isSvgDataUri, isRasterDataUri, svgMarkupFromImageValue, imageValueFromSvgMarkup,
+  imageValueFromStyle, svgMarkupFromStyle, styleWithSvgMarkup, styleWithoutSvgMarkup,
+  styleWithImageDataUri, styleWithoutImageDataUri,
+  SVG_IMAGE_VALUE_PREFIX, SVG_IMAGE_VALUE_PREFIX_B64,
   colorsFromStyle, colorNameFromStyle, styleWithColorName, styleWithColors,
   textColorNameFromStyle, styleWithTextColorName,
   dashFromStyle, styleWithDash, dashPatternFromStyle,