ooxml-ui 1.29.0 → 1.30.0

package/dist/{chunk-W2JD75LX.js → chunk-BKHWBIXP.js}

@@ -2,9 +2,316 @@ import { parseSvgPreview } from './chunk-FN7IF6M6.js';
 import { OfficeElement, controlStyles, definer } from './chunk-QLHCGV4C.js';
 import { html, nothing } from 'lit';
 import { hexToRgbChannels } from 'ooxml-core/color';
-import { resolveDrawingColor, DIAGRAM_COLOR_SECTIONS, DIAGRAM_COLOR_ENTRIES, DIAGRAM_STYLE_ENTRIES, diagramDesignEdit, diagramNodeOutline } from 'ooxml-core/diagram';
+import { resolveDrawingColor, buildRectPathGradientSvg, DIAGRAM_COLOR_SECTIONS, DIAGRAM_COLOR_ENTRIES, DIAGRAM_STYLE_ENTRIES, diagramDesignEdit, diagramNodeOutline } from 'ooxml-core/diagram';
+import { evaluatePresetShape, ooxmlArcToSvg } from 'ooxml-core/geometry';
+import { wrapStyledRuns, designTextWidthEm } from 'ooxml-core/text';
+import { resolveDrawingOuterShadow } from 'ooxml-core/drawingml';
 
 var SVG_NS = "http://www.w3.org/2000/svg";
+function drawingPathData(path, width, height) {
+  const sx = path.width ? width / path.width : 1;
+  const sy = path.height ? height / path.height : 1;
+  const out = [];
+  let px = 0;
+  let py = 0;
+  let startX = 0;
+  let startY = 0;
+  for (const command of path.commands) {
+    if (command.op === "A") {
+      const arc = ooxmlArcToSvg(
+        command.wR * sx,
+        command.hR * sy,
+        command.startAngle * 6e4,
+        command.swingAngle * 6e4,
+        px,
+        py
+      );
+      if (arc) {
+        out.push(arc.svg);
+        px = arc.endX;
+        py = arc.endY;
+      }
+    } else if (command.op === "Z") {
+      out.push("Z");
+      px = startX;
+      py = startY;
+    } else {
+      px = command.x * sx;
+      py = command.y * sy;
+      if (command.op === "M" || command.op === "L") {
+        out.push(`${command.op}${px} ${py}`);
+        if (command.op === "M") {
+          startX = px;
+          startY = py;
+        }
+      } else if (command.op === "C")
+        out.push(
+          `C${command.x1 * sx} ${command.y1 * sy} ${command.x2 * sx} ${command.y2 * sy} ${px} ${py}`
+        );
+      else if (command.op === "Q") out.push(`Q${command.x1 * sx} ${command.y1 * sy} ${px} ${py}`);
+    }
+  }
+  return out.join(" ");
+}
+function diagramShapeElement(doc, shape, approximated) {
+  const width = shape.frame.width / 9525;
+  const height = shape.frame.height / 9525;
+  if (!shape.paths?.length && ["rect", "ellipse"].includes(shape.geometry)) {
+    const element = doc.createElementNS(SVG_NS, shape.geometry === "ellipse" ? "ellipse" : "rect");
+    if (shape.geometry === "ellipse") {
+      element.setAttribute("cx", String(width / 2));
+      element.setAttribute("cy", String(height / 2));
+      element.setAttribute("rx", String(width / 2));
+      element.setAttribute("ry", String(height / 2));
+    } else {
+      element.setAttribute("width", String(width));
+      element.setAttribute("height", String(height));
+    }
+    return element;
+  }
+  const evaluated = shape.paths?.length ? void 0 : evaluatePresetShape(shape.geometry, width, height, shape.adjustments);
+  const paths = shape.paths?.map((path) => ({
+    d: drawingPathData(path, width, height),
+    fill: path.fill,
+    stroke: path.stroke
+  })) ?? evaluated?.paths;
+  if (paths?.length) {
+    const group = doc.createElementNS(SVG_NS, "g");
+    for (const path of paths) {
+      const element = doc.createElementNS(SVG_NS, "path");
+      element.setAttribute("d", path.d);
+      if (path.fill === "none") element.setAttribute("fill", "none");
+      if (path.stroke === false) element.setAttribute("stroke", "none");
+      group.append(element);
+    }
+    return group;
+  }
+  if (!approximated.includes(shape.geometry)) approximated.push(shape.geometry);
+  const rect2 = doc.createElementNS(SVG_NS, "rect");
+  rect2.setAttribute("width", String(width));
+  rect2.setAttribute("height", String(height));
+  rect2.setAttribute("data-approximated", shape.geometry);
+  return rect2;
+}
+var NS = "http://www.w3.org/2000/svg";
+var serial = 0;
+function diagramFill(doc, defs, fill, scheme, report) {
+  if (!fill || fill.kind === "none") return "none";
+  if (fill.kind === "solid") return colorToCss(fill.color, scheme, report) ?? "none";
+  if (fill.kind !== "gradient") {
+    if (!report.approximatedFills.includes(fill.kind)) report.approximatedFills.push(fill.kind);
+    return "#d1d5db";
+  }
+  const id = `office-smartart-paint-${++serial}`;
+  if (fill.path === "rect") {
+    const stops = fill.stops.flatMap((stop) => {
+      const color = resolveDrawingColor(stop.color, { scheme: (name) => scheme[name] });
+      return color ? [{ position: stop.position, color: color.hex, opacity: color.alpha }] : [];
+    });
+    const pattern = doc.createElementNS(NS, "pattern");
+    pattern.id = id;
+    pattern.setAttribute("width", "1");
+    pattern.setAttribute("height", "1");
+    pattern.setAttribute("patternContentUnits", "objectBoundingBox");
+    const image = doc.createElementNS(NS, "image");
+    image.setAttribute("width", "1");
+    image.setAttribute("height", "1");
+    image.setAttribute("preserveAspectRatio", "none");
+    image.setAttribute(
+      "href",
+      `data:image/svg+xml,${encodeURIComponent(buildRectPathGradientSvg(stops, void 0, fill.fillToRect, { bands: 40, independentOpacity: true }))}`
+    );
+    pattern.append(image);
+    defs.append(pattern);
+    return `url(#${id})`;
+  }
+  const radial = Boolean(fill.path);
+  const gradient = doc.createElementNS(NS, radial ? "radialGradient" : "linearGradient");
+  gradient.id = id;
+  if (radial) {
+    const rect2 = fill.fillToRect;
+    gradient.setAttribute("cx", String(rect2 ? (rect2.l + 1 - rect2.r) / 2 : 0.5));
+    gradient.setAttribute("cy", String(rect2 ? (rect2.t + 1 - rect2.b) / 2 : 0.5));
+    gradient.setAttribute("r", "0.5");
+    if (fill.path !== "circle" && !report.approximatedFills.includes(`gradient:${fill.path}`))
+      report.approximatedFills.push(`gradient:${fill.path}`);
+  } else {
+    const radians = (fill.angle ?? 0) * Math.PI / 180;
+    const dx = Math.cos(radians) / 2;
+    const dy = Math.sin(radians) / 2;
+    gradient.setAttribute("x1", String(0.5 - dx));
+    gradient.setAttribute("y1", String(0.5 - dy));
+    gradient.setAttribute("x2", String(0.5 + dx));
+    gradient.setAttribute("y2", String(0.5 + dy));
+  }
+  for (const stop of fill.stops) {
+    const element = doc.createElementNS(NS, "stop");
+    element.setAttribute("offset", `${stop.position}%`);
+    element.setAttribute("stop-color", colorToCss(stop.color, scheme, report) ?? "#808080");
+    gradient.append(element);
+  }
+  defs.append(gradient);
+  return `url(#${id})`;
+}
+var NS2 = "http://www.w3.org/2000/svg";
+function runStyle(element, run, fonts, scheme, report) {
+  if (run.sizePt !== void 0) element.setAttribute("font-size", String(run.sizePt * 96 / 72));
+  if (run.bold !== void 0) element.setAttribute("font-weight", run.bold ? "700" : "400");
+  if (run.italic !== void 0)
+    element.setAttribute("font-style", run.italic ? "italic" : "normal");
+  if (run.underline !== void 0)
+    element.setAttribute("text-decoration", run.underline ? "underline" : "none");
+  if (run.color)
+    element.setAttribute("fill", colorToCss(run.color, scheme, report) ?? "currentColor");
+  const typeface = run.typeface;
+  const font = typeface === "+mj-lt" ? fonts.major : typeface === "+mn-lt" ? fonts.minor : typeface;
+  if (font) element.setAttribute("font-family", font);
+}
+function diagramTextElement(doc, shape, scheme, fonts, report) {
+  const frame = shape.textFrame ?? shape.frame;
+  const ox = (frame.x - shape.frame.x) / 9525;
+  const oy = (frame.y - shape.frame.y) / 9525;
+  const w = frame.width / 9525;
+  const h = frame.height / 9525;
+  const sourceParagraphs = shape.text?.paragraphs ?? [];
+  const insets = shape.text?.insetsEmu;
+  const contentX = ox + (insets?.left ?? 0) / 9525;
+  const contentY = oy + (insets?.top ?? 0) / 9525;
+  const contentWidth = Math.max(1, w - ((insets?.left ?? 0) + (insets?.right ?? 0)) / 9525);
+  const contentHeight = Math.max(1, h - ((insets?.top ?? 0) + (insets?.bottom ?? 0)) / 9525);
+  const paragraphs = sourceParagraphs.flatMap((paragraph, paragraphIndex) => {
+    const runs = paragraph.runs.map((run) => ({ ...paragraph.defaultProperties, ...run }));
+    const measure = (content, run) => {
+      const family = run.typeface === "+mj-lt" ? fonts.major : run.typeface === "+mn-lt" ? fonts.minor : run.typeface;
+      const em = designTextWidthEm(content, family ?? fonts.minor ?? "Arial", run.bold);
+      if (em === void 0) {
+        const issue = `font-metrics:${family ?? fonts.minor ?? "Arial"}`;
+        if (!report.approximatedText?.includes(issue))
+          report.approximatedText = [...report.approximatedText ?? [], issue];
+      }
+      return (em ?? [...content].length * 0.5) * (run.sizePt ?? 12) * 96 / 72;
+    };
+    const maxWidth = shape.body?.bodyProperties?.wrap === "none" ? Infinity : contentWidth;
+    const plain = runs.map((run) => run.text).join("");
+    let offset = 0;
+    const lines = wrapStyledRuns(runs, maxWidth, measure, { breakWords: true });
+    return lines.map((line2, index) => {
+      const content = line2.map((run) => run.text).join("");
+      const start = plain.indexOf(content, offset);
+      const separator = start >= offset ? plain.slice(offset, start) : "";
+      offset = Math.max(offset, start + content.length);
+      return {
+        ...paragraph,
+        runs: line2,
+        separatorBefore: index === 0 && paragraphIndex > 0 ? "\n" : separator,
+        first: index === 0,
+        last: index === lines.length - 1
+      };
+    });
+  });
+  const first = paragraphs[0]?.runs[0];
+  const size = (first?.sizePt ?? 12) * 96 / 72;
+  const text = doc.createElementNS(NS2, "text");
+  text.setAttribute("x", String(ox + w / 2));
+  text.setAttribute("y", String(oy + h / 2));
+  text.setAttribute("text-anchor", "middle");
+  text.setAttribute("dominant-baseline", "central");
+  text.setAttribute("font-size", String(size));
+  text.setAttribute(
+    "fill",
+    colorToCss(first?.color ?? shape.style?.font?.color, scheme, report) ?? "currentColor"
+  );
+  const ref = shape.style?.font?.fontIndex;
+  const inherited = ref === "major" ? fonts.major : ref === "minor" ? fonts.minor : void 0;
+  if (inherited) text.setAttribute("font-family", inherited);
+  if (first) runStyle(text, first, fonts, scheme, report);
+  const body = shape.body?.bodyProperties;
+  if (body && (body.vertical && body.vertical !== "horz" || body.rotation || (body.columnCount ?? 1) > 1))
+    report.approximatedText = [
+      .../* @__PURE__ */ new Set([...report.approximatedText ?? [], "vertical-or-multicolumn"])
+    ];
+  if (shape.body?.paragraphs.some(
+    (paragraph) => paragraph.properties?.bullet && paragraph.properties.bullet.kind !== "none" || paragraph.properties?.tabStops?.length
+  ))
+    report.approximatedText = [.../* @__PURE__ */ new Set([...report.approximatedText ?? [], "bullets-or-tabs"])];
+  const spacing = (value, nominal) => value ? value.unit === "points" ? value.value * 96 / 72 : value.value * nominal : 0;
+  const heights = paragraphs.map((paragraph) => {
+    const nominal = Math.max(size, ...paragraph.runs.map((run) => (run.sizePt ?? 12) * 96 / 72));
+    return {
+      line: paragraph.lineSpacing ? spacing(paragraph.lineSpacing, nominal) : nominal * 1.2,
+      before: paragraph.first ? spacing(paragraph.spaceBefore, nominal) : 0,
+      after: paragraph.last ? spacing(paragraph.spaceAfter, nominal) : 0
+    };
+  });
+  const totalHeight = heights.reduce(
+    (sum, value) => sum + value.line + value.before + value.after,
+    0
+  );
+  const anchor = shape.text?.anchor;
+  let y = anchor === "t" ? contentY : anchor === "b" ? contentY + contentHeight - totalHeight : contentY + (contentHeight - totalHeight) / 2;
+  paragraphs.forEach((paragraph, index) => {
+    if (paragraph.separatorBefore) text.append(doc.createTextNode(paragraph.separatorBefore));
+    const line2 = doc.createElementNS(NS2, "tspan");
+    const align = paragraph.align;
+    const x = align === "l" ? contentX : align === "r" ? contentX + contentWidth : contentX + contentWidth / 2;
+    const height = heights[index] ?? { line: size, before: 0, after: 0 };
+    y += height.before;
+    line2.setAttribute("x", String(x));
+    line2.setAttribute("y", String(y + height.line / 2));
+    line2.setAttribute("text-anchor", align === "l" ? "start" : align === "r" ? "end" : "middle");
+    for (const run of paragraph.runs) {
+      const span = doc.createElementNS(NS2, "tspan");
+      span.textContent = run.text;
+      runStyle(
+        span,
+        { bold: false, italic: false, underline: false, ...paragraph.defaultProperties, ...run },
+        fonts,
+        scheme,
+        report
+      );
+      line2.append(span);
+    }
+    text.append(line2);
+    y += height.line + height.after;
+  });
+  return text;
+}
+var NS3 = "http://www.w3.org/2000/svg";
+var serial2 = 0;
+function diagramEffects(doc, defs, body, shape, scheme, report) {
+  for (const effect of shape.effects?.effects ?? []) {
+    const shadow = effect.kind === "outerShadow" ? resolveDrawingOuterShadow(effect, { scheme: (name) => scheme[name] }) : void 0;
+    if (!shadow) {
+      report.unappliedEffects = [.../* @__PURE__ */ new Set([...report.unappliedEffects ?? [], effect.kind])];
+      continue;
+    }
+    const filter = doc.createElementNS(NS3, "filter");
+    filter.id = `office-smartart-shadow-${++serial2}`;
+    filter.setAttribute("filterUnits", "userSpaceOnUse");
+    const pad = Math.max(
+      shadow.blur * 3 + Math.abs(shadow.dx),
+      shadow.blur * 3 + Math.abs(shadow.dy),
+      1
+    );
+    filter.setAttribute("x", String(-pad));
+    filter.setAttribute("y", String(-pad));
+    filter.setAttribute("width", String(shape.frame.width / 9525 + pad * 2));
+    filter.setAttribute("height", String(shape.frame.height / 9525 + pad * 2));
+    filter.setAttribute("color-interpolation-filters", "sRGB");
+    const drop = doc.createElementNS(NS3, "feDropShadow");
+    drop.setAttribute("dx", String(shadow.dx));
+    drop.setAttribute("dy", String(shadow.dy));
+    drop.setAttribute("stdDeviation", String(shadow.blur / 2));
+    drop.setAttribute("flood-color", shadow.color);
+    drop.setAttribute("flood-opacity", String(shadow.opacity));
+    filter.append(drop);
+    defs.append(filter);
+    body.setAttribute("filter", `url(#${filter.id})`);
+  }
+}
+
+// src/smartart/smartart-svg.ts
+var SVG_NS2 = "http://www.w3.org/2000/svg";
 var EMU_PER_PX = 9525;
 function colorToCss(color, scheme, report) {
   if (!color) return void 0;
@@ -24,66 +331,6 @@ function colorToCss(color, scheme, report) {
   if (color.kind === "system" && !color.fallback) return void 0;
   return "#9ca3af";
 }
-function fillToCss(fill, scheme, report) {
-  if (!fill) return "none";
-  if (fill.kind === "none") return "none";
-  if (fill.kind === "solid") return colorToCss(fill.color, scheme, report) ?? "none";
-  if (!report.approximatedFills.includes(fill.kind)) report.approximatedFills.push(fill.kind);
-  if (fill.kind === "gradient") return colorToCss(fill.stops[0]?.color, scheme, report) ?? "none";
-  return "#d1d5db";
-}
-function pathData(path, widthPx, heightPx) {
-  const sx = path.width ? widthPx / path.width : 1;
-  const sy = path.height ? heightPx / path.height : 1;
-  const x = (v) => +(v * sx).toFixed(2);
-  const y = (v) => +(v * sy).toFixed(2);
-  const out = [];
-  for (const c of path.commands) {
-    if (c.op === "M" || c.op === "L") out.push(`${c.op}${x(c.x)} ${y(c.y)}`);
-    else if (c.op === "C")
-      out.push(`C${x(c.x1)} ${y(c.y1)} ${x(c.x2)} ${y(c.y2)} ${x(c.x)} ${y(c.y)}`);
-    else if (c.op === "Q") out.push(`Q${x(c.x1)} ${y(c.y1)} ${x(c.x)} ${y(c.y)}`);
-    else if (c.op === "Z") out.push("Z");
-  }
-  return out.join("");
-}
-var hasArc = (shape) => Boolean(shape.paths?.some((p) => p.commands.some((c) => c.op === "A")));
-function shapeElement(doc, shape, report) {
-  const { frame } = shape;
-  const w = frame.width / EMU_PER_PX;
-  const h = frame.height / EMU_PER_PX;
-  if (shape.paths?.length) {
-    const el = doc.createElementNS(SVG_NS, "g");
-    for (const path of shape.paths) {
-      const p = doc.createElementNS(SVG_NS, "path");
-      p.setAttribute("d", pathData(path, w, h));
-      el.append(p);
-    }
-    if (hasArc(shape) && !report.approximatedGeometries.includes("custom:arc")) {
-      report.approximatedGeometries.push("custom:arc");
-    }
-    return el;
-  }
-  if (shape.geometry === "ellipse") {
-    const e = doc.createElementNS(SVG_NS, "ellipse");
-    e.setAttribute("rx", String(w / 2));
-    e.setAttribute("ry", String(h / 2));
-    e.setAttribute("cx", String(w / 2));
-    e.setAttribute("cy", String(h / 2));
-    return e;
-  }
-  const rect2 = doc.createElementNS(SVG_NS, "rect");
-  rect2.setAttribute("width", String(w));
-  rect2.setAttribute("height", String(h));
-  if (shape.geometry === "roundRect") {
-    const adj = (shape.adjustments?.adj ?? 16667) / 1e5;
-    rect2.setAttribute("rx", String(Math.min(w, h) * adj));
-  } else if (shape.geometry !== "rect" && !report.approximatedGeometries.includes(shape.geometry)) {
-    report.approximatedGeometries.push(shape.geometry);
-    rect2.setAttribute("data-approximated", shape.geometry);
-  }
-  return rect2;
-}
 function renderDiagramDrawing(doc, drawing, scheme = {}, fonts = {}) {
   const report = {
     shapeCount: drawing.shapes.length,
@@ -91,14 +338,16 @@ function renderDiagramDrawing(doc, drawing, scheme = {}, fonts = {}) {
     flattened3d: 0,
     approximatedFills: []
   };
-  const svg = doc.createElementNS(SVG_NS, "svg");
+  const svg = doc.createElementNS(SVG_NS2, "svg");
+  const defs = doc.createElementNS(SVG_NS2, "defs");
+  svg.append(defs);
   let right = 0;
   let bottom = 0;
   for (const shape of drawing.shapes) {
     const { frame } = shape;
     right = Math.max(right, (frame.x + frame.width) / EMU_PER_PX);
     bottom = Math.max(bottom, (frame.y + frame.height) / EMU_PER_PX);
-    const group = doc.createElementNS(SVG_NS, "g");
+    const group = doc.createElementNS(SVG_NS2, "g");
     group.dataset.modelId = shape.modelId;
     const cx = frame.width / EMU_PER_PX / 2;
     const cy = frame.height / EMU_PER_PX / 2;
@@ -110,9 +359,10 @@ function renderDiagramDrawing(doc, drawing, scheme = {}, fonts = {}) {
       transform.push(`translate(${cx} ${cy}) scale(${fx} ${fy}) translate(${-cx} ${-cy})`);
     }
     group.setAttribute("transform", transform.join(" "));
-    const body = shapeElement(doc, shape, report);
-    body.setAttribute("fill", fillToCss(shape.fill, scheme, report));
-    const stroke = shape.line?.fill?.kind === "solid" ? colorToCss(shape.line.fill.color, scheme, report) : void 0;
+    const body = diagramShapeElement(doc, shape, report.approximatedGeometries);
+    body.setAttribute("fill", diagramFill(doc, defs, shape.fill, scheme, report));
+    diagramEffects(doc, defs, body, shape, scheme, report);
+    const stroke = shape.line?.fill && shape.line.widthEmu !== 0 ? diagramFill(doc, defs, shape.line.fill, scheme, report) : void 0;
     body.setAttribute("stroke", stroke ?? "none");
     if (stroke)
       body.setAttribute(
@@ -124,46 +374,13 @@ function renderDiagramDrawing(doc, drawing, scheme = {}, fonts = {}) {
       report.flattened3d += 1;
       group.setAttribute("data-flattened-3d", "");
     }
-    if (shape.text?.text) group.append(textElement(doc, shape, scheme, fonts, report));
+    if (shape.text?.text) group.append(diagramTextElement(doc, shape, scheme, fonts, report));
     svg.append(group);
   }
   svg.setAttribute("viewBox", `0 0 ${Math.max(right, 1)} ${Math.max(bottom, 1)}`);
   svg.setAttribute("overflow", "visible");
   return { svg, report };
 }
-function textElement(doc, shape, scheme, fonts, report) {
-  const frame = shape.textFrame ?? {
-    x: shape.frame.x,
-    y: shape.frame.y,
-    width: shape.frame.width,
-    height: shape.frame.height
-  };
-  const ox = (frame.x - shape.frame.x) / EMU_PER_PX;
-  const oy = (frame.y - shape.frame.y) / EMU_PER_PX;
-  const w = frame.width / EMU_PER_PX;
-  const h = frame.height / EMU_PER_PX;
-  const text = doc.createElementNS(SVG_NS, "text");
-  const first = shape.text?.paragraphs[0]?.runs[0];
-  const sizePx = (first?.sizePt ?? 12) * 96 / 72;
-  text.setAttribute("x", String(ox + w / 2));
-  text.setAttribute("y", String(oy + h / 2));
-  text.setAttribute("text-anchor", "middle");
-  text.setAttribute("dominant-baseline", "central");
-  text.setAttribute("font-size", String(sizePx));
-  text.setAttribute(
-    "fill",
-    colorToCss(first?.color ?? shape.style?.font?.color, scheme, report) ?? "currentColor"
-  );
-  if (first?.bold) text.setAttribute("font-weight", "700");
-  if (first?.italic) text.setAttribute("font-style", "italic");
-  const ref = shape.style?.font?.fontIndex;
-  const inherited = ref === "major" ? fonts.major : ref === "minor" ? fonts.minor : void 0;
-  const typeface = first?.typeface;
-  const font = typeface === "+mj-lt" ? fonts.major : typeface === "+mn-lt" ? fonts.minor : typeface ?? inherited;
-  if (font) text.setAttribute("font-family", font);
-  text.textContent = shape.text?.paragraphs.map((p) => p.runs.map((r) => r.text).join("")).join(" ") ?? "";
-  return text;
-}
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/smartart/smartart.css?raw
 var smartart_default = ":host {\n	display: block;\n}\nsvg {\n	display: block;\n	width: 100%;\n	height: auto;\n	max-height: 100%;\n}\ntext {\n	pointer-events: none;\n}\ntext:not([font-family]) {\n	font-family: var(--office-font);\n}\n.empty {\n	padding: var(--office-space-2);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-muted-foreground);\n}\n@media (forced-colors: active) {\n	text {\n		fill: CanvasText;\n	}\n}\n";