@syzlm/ofdparser 0.0.1

package/src/ofd/svg-path.ts

@@ -0,0 +1,283 @@
+import { ResultData, LayerPageBlock } from '../core/ofd-core/index.d';
+import { getIntersection } from './ofd-utils';
+
+import {
+  formatSTBox,
+  converterDpi,
+  parseColor,
+  getDrawParam,
+  parseCtm,
+  parseAbbreviatedData,
+} from './ofd-utils';
+
+const renderPathObject = function (
+  pathObject: LayerPageBlock & { [k: string]: any },
+  data: ResultData,
+  content: HTMLElement,
+  drawLineWidth?: number,
+  drawFillColor?: string,
+  drawStrokeColor?: string,
+  isStampAnnot?: boolean,
+  compositeObjectAlpha?: any,
+  compositeObjectBoundary?: any,
+  compositeObjectCTM?: any,
+  //   isStampAnnot,
+  //   compositeObjectAlpha,
+  //   compositeObjectBoundary,
+  //   compositeObjectCTM
+) {
+  const {
+    Boundary,
+    AbbreviatedData,
+    CTM,
+    LineWidth: lineWidth,
+    DrawParam: pathDrawParam,
+    Clips,
+  } = pathObject;
+  if (Clips && Clips.clips) {
+    // @ts-ignore
+    const ar = Clips.clips.reduce((prevItem, nextItem) => {
+      const { Boundary: ClipBoundary } = prevItem.Area;
+      const { Boundary: NextClipBoundary } = nextItem.Area;
+      const [left, top, width, height] = ClipBoundary.split(' ');
+      const [nextLeft, nextTop, nextWidth, nextHeight] = NextClipBoundary.split(' ');
+      return getIntersection(
+        { left: Math.abs(left), top: Math.abs(top), width, height },
+        {
+          left: Math.abs(nextLeft),
+          top: Math.abs(nextTop),
+          width: nextWidth,
+          height: nextHeight,
+        },
+      );
+    });
+    const CliBoundaryArr: number[] = [];
+    Object.keys(ar).forEach(key => {
+      if (key === 'left') {
+        CliBoundaryArr[0] = ar[key];
+      }
+      if (key === 'top') {
+        CliBoundaryArr[1] = ar[key];
+      }
+      if (key === 'width') {
+        CliBoundaryArr[2] = ar[key];
+      }
+      if (key === 'height') {
+        CliBoundaryArr[3] = ar[key];
+      }
+    });
+    // @ts-ignore
+    Clips.clips.forEach((cItem, idx) => {
+      if (idx !== Clips.clips.length - 1) return;
+      renderPathObject(
+        {
+          ...pathObject,
+          ...cItem.Area,
+          Boundary: CliBoundaryArr?.length ? String(CliBoundaryArr).replace(/,/g, ' ') : Boundary,
+          Clips: undefined,
+          AbbreviatedData: { text: cItem.AbbreviatedData },
+        },
+        data,
+        content,
+        0.1,
+        drawFillColor,
+        drawStrokeColor,
+        isStampAnnot,
+        compositeObjectAlpha,
+        compositeObjectBoundary,
+        compositeObjectCTM,
+      );
+    });
+
+    return;
+  }
+
+  let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('version', '1.1');
+
+  if (!Boundary) return svg;
+  let boundary = formatSTBox(Boundary);
+
+  let defaultLineWith = drawLineWidth || 1;
+  let defaultStrokeColor = drawStrokeColor;
+  let defaultFillColor = drawFillColor;
+  let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  if (lineWidth) {
+    defaultLineWith = converterDpi(lineWidth);
+  }
+  let strokeColor = pathObject['StrokeColor'];
+  let fillColor = pathObject['FillColor'];
+  if (pathDrawParam) {
+    let dp = getDrawParam(data.Res, pathDrawParam);
+    if (dp?.LineWidth) {
+      defaultLineWith = converterDpi(dp.LineWidth);
+    }
+    if (dp?.StrokeColor?.Value) {
+      strokeColor = dp?.StrokeColor;
+    }
+    if (dp?.FillColor?.Value) {
+      fillColor = dp?.FillColor;
+    }
+  }
+  if (CTM) {
+    const [a, b, c, d, e, f] = String(CTM).split(' ');
+    path.setAttribute(
+      'transform',
+      `matrix(${a} ${b} ${c} ${d} ${converterDpi(e)} ${converterDpi(f)})`,
+    );
+  }
+  // let isStrokeAxialShd = false;
+  if (strokeColor) {
+    if (strokeColor['Value']) {
+      defaultStrokeColor = parseColor(strokeColor['Value']);
+    }
+    const AxialShd = strokeColor['AxialShd'];
+    if (AxialShd) {
+      // isStrokeAxialShd = true;
+      let linearGradient = document.createElement('linearGradient');
+      linearGradient.setAttribute('id', `${pathObject['ID']}`);
+      linearGradient.setAttribute('x1', '0%');
+      linearGradient.setAttribute('y1', '0%');
+      linearGradient.setAttribute('x2', '100%');
+      linearGradient.setAttribute('y2', '100%');
+      if (AxialShd['ofd:Segment']?.length) {
+        for (const segment of AxialShd['ofd:Segment']) {
+          if (segment) {
+            let stop = document.createElement('stop');
+            stop.setAttribute('offset', `${segment['Position'] * 100}%`);
+            stop.setAttribute(
+              'style',
+              `stop-color:${parseColor(segment['Color']['Value'])};stop-opacity:1`,
+            );
+            linearGradient.appendChild(stop);
+            defaultStrokeColor = parseColor(segment['ofd:Color']['@_Value']);
+          }
+        }
+      }
+      svg.appendChild(linearGradient);
+    }
+  }
+
+  // let isFillAxialShd = false;
+  if (fillColor) {
+    if (fillColor['Value']) {
+      defaultFillColor = parseColor(fillColor['Value']);
+    }
+    if (fillColor['Alpha'] && fillColor['Alpha'] == 0) {
+      defaultFillColor = 'none';
+    }
+    const AxialShd = fillColor['AxialShd'];
+    if (AxialShd) {
+      // isFillAxialShd = true;
+      let linearGradient = document.createElement('linearGradient');
+      linearGradient.setAttribute('id', `${pathObject['ID']}`);
+      linearGradient.setAttribute('x1', '0%');
+      linearGradient.setAttribute('y1', '0%');
+      linearGradient.setAttribute('x2', '100%');
+      linearGradient.setAttribute('y2', '100%');
+      if (AxialShd['ofd:Segment']?.length) {
+        for (const segment of AxialShd['ofd:Segment']) {
+          if (segment) {
+            let stop = document.createElement('stop');
+            stop.setAttribute('offset', `${segment['Position'] * 100}%`);
+            stop.setAttribute(
+              'style',
+              `stop-color:${parseColor(segment['Color']['Value'])};stop-opacity:1`,
+            );
+            linearGradient.appendChild(stop);
+            defaultFillColor = parseColor(segment['ofd:Color']['@_Value']);
+          }
+        }
+      }
+      svg.appendChild(linearGradient);
+    }
+  }
+  if (defaultLineWith > 0 && !defaultStrokeColor) {
+    defaultStrokeColor = defaultFillColor;
+    if (!defaultStrokeColor) {
+      defaultStrokeColor = 'rgb(0, 0, 0)';
+    }
+  }
+  if (compositeObjectAlpha) {
+    path.setAttribute('fill-opacity', `${compositeObjectAlpha / 255}`);
+  }
+  if (pathObject['Stroke']) {
+    path.setAttribute('stroke', `${defaultStrokeColor}`);
+    path.setAttribute('stroke-width', `${defaultLineWith}px`);
+  }
+  if (!pathObject['Fill']) {
+    path.setAttribute('fill', 'none');
+  } else {
+    path.setAttribute(
+      'fill',
+      `${isStampAnnot ? 'none' : defaultFillColor ? defaultFillColor : 'none'}`,
+    );
+    // console.log('isFillAxialShd:', isFillAxialShd);
+    // if (isFillAxialShd) {
+    //   path.setAttribute('fill', `url(#${pathObject['ID']})`);
+    // }
+  }
+  if (pathObject['Join']) {
+    path.setAttribute('stroke-linejoin', `${pathObject['Join']}`);
+  }
+  if (pathObject['Cap']) {
+    path.setAttribute('stroke-linecap', `${pathObject['Cap']}`);
+  }
+  if (pathObject['DashPattern']) {
+    let dash = pathObject['DashPattern'];
+    const dashs = parseCtm(dash);
+    let offset = 0;
+    if (pathObject['DashOffset']) {
+      offset = pathObject['DashOffset'];
+    }
+    if (dashs) {
+      path.setAttribute('stroke-dasharray', `${converterDpi(dashs[0])},${converterDpi(dashs[1])}`);
+    }
+    path.setAttribute('stroke-dashoffset', `${converterDpi(offset)}px`);
+  }
+  if (AbbreviatedData?.text && (!Clips || !Clips.clips?.length)) {
+    const abbreviatedData = parseAbbreviatedData(AbbreviatedData.text) as string;
+    path.setAttribute('d', abbreviatedData);
+  }
+  svg.appendChild(path);
+  let width = isStampAnnot ? boundary.width : Math.ceil(boundary.width);
+  let height = isStampAnnot ? boundary.height : Math.ceil(boundary.height);
+  let left = boundary.left;
+  let top = boundary.top;
+  svg.setAttribute(
+    'style',
+    `overflow:hidden;position:absolute;width:${width}px;height:${height}px;left:${left}px;top:${top}px;`,
+  );
+  if (compositeObjectBoundary) {
+    let comSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    comSvg.setAttribute('version', '1.1');
+
+    // let width = Math.ceil(boundary.width);
+    // let height = Math.ceil(boundary.height);
+    // let left = boundary.left;
+    // let top = boundary.top;
+    comSvg.setAttribute(
+      'style',
+      `overflow:hidden;position:absolute;width:${width}px;height:${height}px;left:${left}px;top:${top}px;`,
+    );
+    if (compositeObjectCTM) {
+      const ctms = parseCtm(compositeObjectCTM);
+      if (ctms) {
+        svg.setAttribute(
+          'transform',
+          `matrix(${ctms[0]} ${ctms[1]} ${ctms[2]} ${ctms[3]} ${converterDpi(
+            ctms[4],
+          )} ${converterDpi(ctms[5])})`,
+        );
+      }
+    }
+    comSvg.appendChild(svg);
+    return comSvg;
+  }
+  if (content) {
+    content.appendChild(svg);
+  }
+  return svg;
+};
+
+export default renderPathObject;

package/src/ofd/svg-text.ts

@@ -0,0 +1,272 @@
+import { ResultData, LayerPageBlock, Res } from '../core/ofd-core/index.d';
+import {
+  parseColor,
+  calTextPoint,
+  converterDpi,
+  getFont,
+  getDrawParam,
+  getFontFamily,
+  formatSTBox,
+} from './ofd-utils';
+import LoadFontType from '../lib/load-opentype';
+
+/**
+ * 绘制Text
+ */
+const renderTextObject = (
+  info: LayerPageBlock & { [k: string]: any },
+  data: ResultData,
+  content: HTMLElement,
+  drawFillColor?: string,
+  drawStrokeColor?: string,
+) => {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('version', '1.1');
+  const {
+    TextCode = {},
+    CTM,
+    Boundary = '',
+    ID,
+    Fill = true,
+    FillColor,
+    Size,
+    Font,
+    HScale,
+    CGTransform,
+    DrawParam,
+    Weight: weight,
+  } = info;
+  //
+  const boundary = formatSTBox(String(Boundary));
+
+  // // 字体大小
+  const size = converterDpi(String(Size || 0));
+  const fillColor = FillColor as null | { [k: string]: any };
+  let defaultFillColor = drawFillColor;
+  let defaultStrokeColor = drawStrokeColor;
+  let defaultFillOpacity = 1;
+  const textCodePointList = calTextPoint(TextCode, CGTransform, CTM, Boundary);
+  let hScale = Number(HScale);
+  let isAxialShd = false;
+  let drawParam = DrawParam;
+  if (drawParam) {
+    let dp = getDrawParam(data.Res, drawParam);
+    if (dp?.FillColor && dp?.FillColor?.Value) {
+      defaultFillColor = parseColor(dp['FillColor']['Value']);
+    }
+  }
+  if (fillColor) {
+    if (fillColor?.['Value']) {
+      defaultFillColor = parseColor(fillColor['Value']);
+    }
+    let alpha = parseFloat(fillColor['Alpha'] || '1');
+
+    const AxialShd = fillColor['AxialShd'] as null | { [k: string]: any };
+    if (alpha) {
+      defaultFillOpacity = alpha > 1 ? alpha / 255 : alpha;
+    }
+
+    if (!Fill) {
+      defaultFillOpacity = 0;
+    }
+
+    let xsize = size;
+    let ysize = size;
+
+    if (CTM) {
+      const [a, b, c, d] = String(CTM)
+        .split(' ')
+        .map(i => Number(i));
+      const sx = a > 0 ? Math.sign(a) * Math.sqrt(a * a + c * c) : Math.sqrt(a * a + c * c);
+      const sy = d > 0 ? Math.sign(d) * Math.sqrt(b * b + d * d) : Math.sqrt(b * b + d * d);
+      const angel = Math.atan2(-b, d);
+      if (!(angel == 0 && a != 0 && d == 1)) {
+        xsize = xsize * sx;
+        ysize = ysize * sy;
+      }
+      if (angel === 0) {
+        hScale = a / d;
+        if (hScale > 0) {
+          xsize = xsize * hScale;
+        }
+      }
+    }
+    // 颜色渐变
+    if (AxialShd) {
+      isAxialShd = true;
+      let linearGradient = document.createElement('linearGradient');
+      linearGradient.setAttribute('id', `${ID}`);
+      linearGradient.setAttribute('x1', '0%');
+      linearGradient.setAttribute('y1', '0%');
+      linearGradient.setAttribute('x2', '100%');
+      linearGradient.setAttribute('y2', '100%');
+      if (AxialShd['Segment']?.length) {
+        for (const segment of AxialShd['Segment']) {
+          if (segment) {
+            let stop = document.createElement('stop');
+            stop.setAttribute('offset', `${segment['Position'] * 100}%`);
+            stop.setAttribute(
+              'style',
+              `stop-color:${parseColor(segment['Color']['Value'])};stop-opacity:1`,
+            );
+            linearGradient.appendChild(stop);
+            defaultFillColor = parseColor(segment['Color']['Value']);
+          }
+        }
+      }
+      svg.appendChild(linearGradient);
+    }
+  }
+  // 字体处理
+  const fontObj = getFont(data.Res, Font);
+  // 内置字体文件
+  if (fontObj?.Path) {
+    LoadFontType.setFontFile(
+      fontObj.ID,
+      data.OFDElements[fontObj.Path] as unknown as ArrayBuffer,
+      res => {
+        if (res === true && textCodePointList.length) {
+          let str = '';
+          let fontTypeY = textCodePointList?.length ? textCodePointList[0].y : 0;
+          let fontTypeX = textCodePointList?.length ? textCodePointList[0].x : 0;
+          for (const textCodePoint of textCodePointList) {
+            str += textCodePoint.text;
+          }
+          const resultFont = LoadFontType.getFontFile(fontObj.ID, str, fontTypeX, fontTypeY, size);
+          let svgG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+          let transform = '';
+          if (CTM) {
+            const [a, b, c, d, e, f] = CTM.split(' ');
+            transform = `matrix(${a} ${b} ${c} ${d} ${converterDpi(e)} ${converterDpi(f)})`;
+          }
+
+          if (hScale) {
+            transform = `${transform} matrix(${hScale}, 0, 0, 1, ${(1 - hScale) * fontTypeX}, 0)`;
+          }
+          svgG.setAttribute('transform', transform);
+          if (isAxialShd && defaultFillColor) {
+            svgG.setAttribute('fill', defaultFillColor);
+          } else {
+            defaultStrokeColor && svgG.setAttribute('fill', defaultStrokeColor);
+            defaultFillColor && svgG.setAttribute('fill', defaultFillColor);
+            defaultFillOpacity && svgG.setAttribute('fill-opacity', `${defaultFillOpacity}`);
+          }
+          svgG.innerHTML = resultFont;
+          svgG.setAttribute('transform', transform);
+          if (isAxialShd && defaultFillColor) {
+            svgG.setAttribute('fill', defaultFillColor);
+          } else {
+            defaultStrokeColor && svgG.setAttribute('fill', defaultStrokeColor);
+            defaultFillColor && svgG.setAttribute('fill', defaultFillColor);
+            defaultFillOpacity && svgG.setAttribute('fill-opacity', `${defaultFillOpacity}`);
+          }
+          svgG.setAttribute(
+            'style',
+            `font-weight: ${weight};font-size:${size}px;font-family: ${getFontFamily(
+              fontObj as Res,
+            )};`,
+          );
+
+          svg.appendChild(svgG);
+        } else {
+          for (const textCodePoint of textCodePointList) {
+            let svgTxt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            svgTxt.innerHTML = textCodePoint.text;
+            svgTxt.setAttribute('x', textCodePoint.x);
+            svgTxt.setAttribute('y', textCodePoint.y);
+
+            let transform = '';
+            if (CTM) {
+              const [a, b, c, d, e, f] = CTM.split(' ');
+              transform = `matrix(${a} ${b} ${c} ${d} ${converterDpi(e)} ${converterDpi(f)})`;
+            }
+
+            if (hScale) {
+              transform = `${transform} matrix(${hScale}, 0, 0, 1, ${
+                (1 - hScale) * textCodePoint.x
+              }, 0)`;
+            }
+            svgTxt.setAttribute('transform', transform);
+            if (isAxialShd && defaultFillColor) {
+              svgTxt.setAttribute('fill', defaultFillColor);
+            } else {
+              defaultStrokeColor && svgTxt.setAttribute('fill', defaultStrokeColor);
+              defaultFillColor && svgTxt.setAttribute('fill', defaultFillColor);
+              defaultFillOpacity && svgTxt.setAttribute('fill-opacity', `${defaultFillOpacity}`);
+            }
+            svgTxt.setAttribute(
+              'style',
+              `font-weight: ${weight};font-size:${size}px;font-family: ${getFontFamily(
+                fontObj as Res,
+              )};`,
+            );
+
+            svg.appendChild(svgTxt);
+          }
+        }
+
+        const width = boundary.width;
+        const height = boundary.height;
+        const left = boundary.left;
+        const top = boundary.top;
+        svg.setAttribute(
+          'style',
+          `overflow:hidden;position:absolute;width:${width}px;height:${height}px;left:${left}px;top:${top}px;`,
+        );
+        if (content) {
+          content.appendChild(svg);
+        }
+      },
+    );
+    return;
+  }
+  for (const textCodePoint of textCodePointList) {
+    let text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    text.setAttribute('x', textCodePoint.x);
+    text.setAttribute('y', textCodePoint.y);
+    text.innerHTML = textCodePoint.text;
+    let transform = '';
+    if (CTM) {
+      const [a, b, c, d, e, f] = CTM.split(' ');
+      transform = `matrix(${a} ${b} ${c} ${d} ${converterDpi(e)} ${converterDpi(f)})`;
+    }
+    // if (compositeObjectCTM) {
+    //   transform = `${transform} matrix(${compositeObjectCTM.a} ${
+    //     compositeObjectCTM.b
+    //   } ${compositeObjectCTM.c} ${compositeObjectCTM.d} ${converterDpi(
+    //     compositeObjectCTM.e
+    //   )} ${converterDpi(compositeObjectCTM.f)})`;
+    // }
+    if (hScale) {
+      transform = `${transform} matrix(${hScale}, 0, 0, 1, ${(1 - hScale) * textCodePoint.x}, 0)`;
+    }
+    text.setAttribute('transform', transform);
+
+    if (isAxialShd && defaultFillColor) {
+      text.setAttribute('fill', defaultFillColor);
+    } else {
+      defaultStrokeColor && text.setAttribute('fill', defaultStrokeColor);
+      defaultFillColor && text.setAttribute('fill', defaultFillColor);
+      defaultFillOpacity && text.setAttribute('fill-opacity', `${defaultFillOpacity}`);
+    }
+    text.setAttribute(
+      'style',
+      `font-weight: ${weight};font-size:${size}px;font-family: ${getFontFamily(fontObj as Res)};`,
+    );
+    svg.appendChild(text);
+  }
+  const width = boundary.width;
+  const height = boundary.height;
+  const left = boundary.left;
+  const top = boundary.top;
+  svg.setAttribute(
+    'style',
+    `overflow:hidden;position:absolute;width:${width}px;height:${height}px;left:${left}px;top:${top}px;`,
+  );
+  // svg.innerText = String(TextCode);
+  if (content) {
+    content.appendChild(svg);
+  }
+};
+
+export default renderTextObject;

package/src/xml/index.ts

@@ -0,0 +1,3 @@
+export { default } from './xml';
+
+export { default as render } from './render';