fix: 修复大部分单路径识别的问题

Author: arvinxx

example/components/Icon.tsx

@@ -754,7 +754,6 @@ const IconSymbol: FC = () => {
       {/*<RestOutlined />*/}
       {/*<RobotOutlined />*/}
       {/*<RocketOutlined />*/}
-
       {/*<SafetyCertificateOutlined />*/}
       {/*<SafetyOutlined />*/}
       {/*<ScanOutlined />*/}
@@ -803,8 +802,11 @@ const IconSymbol: FC = () => {
       {/*<VideoCameraOutlined />*/}
       {/*<WalletOutlined />*/}
       {/*<WifiOutlined />*/}
+      {/*<BorderlessTableOutlined />*/}
       {/*<WomanOutlined />*/}
-
+      {/*<BehanceOutlined />*/}
+      {/*<DropboxOutlined />*/}
+      {/*<DeploymentUnitOutlined />*/}
       {/* 有错误的 SVG */}
       {/*<UpCircleOutlined />*/}
       {/*<DownCircleOutlined />*/}
@@ -834,11 +836,8 @@ const IconSymbol: FC = () => {
       {/*<YoutubeOutlined />*/}
       {/*<CodepenCircleOutlined />*/}
       {/*<AliyunOutlined />*/}
-      {/*<BehanceOutlined />*/}
-      <DropboxOutlined />
       {/*<LinkedinOutlined />*/}
       {/*<AimOutlined />*/}
-      {/*  <BorderlessTableOutlined />*/}
       {/*<BugOutlined />*/}
       {/*<CloudDownloadOutlined />*/}
       {/*<CloudServerOutlined />*/}
@@ -847,7 +846,6 @@ const IconSymbol: FC = () => {
       {/*  <CommentOutlined />*/}
       {/*  <ConsoleSqlOutlined />*/}
       {/*<EyeInvisibleOutlined />*/}
-      {/*<DeploymentUnitOutlined /> 报错*/}
       {/*  <FileGifOutlined />*/}
       {/*<DeliveredProcedureOutlined />*/}
       {/*<FieldTimeOutlined />*/}
@@ -866,7 +864,6 @@ const IconSymbol: FC = () => {
       {/*<VerifiedOutlined />*/}
       {/*<VideoCameraAddOutlined />*/}
       {/*<WhatsAppOutlined />*/}
-
       {/*</Col>*/}
     </Row>
   );

src/function/nodeToSketchLayers.ts

@@ -1,6 +1,6 @@
 import { defaultNodeStyle } from '../model/utils';
 
-import transferToSvg from '../parser/svg';
+import parserToSvg from '../parser/svg';
 import transferToShape from '../parser/shape';
 import transferToText from '../parser/text';
 import parserPseudo from '../parser/pseudo';
@@ -98,7 +98,7 @@ const nodeToSketchLayers = (node: Element): AnyLayer[] => {
 
   // 转换为 SVG
   if (isSVG) {
-    const svg = transferToSvg(node);
+    const svg = parserToSvg(node);
     console.log('转换为 Svg: ', svg);
     layers.push(svg);
 

src/helpers/svg.ts

@@ -82,7 +82,7 @@ const SVG_STYLE_PROPERTIES = [
   ['writing-mode', 'horizontal-tb'],
 ];
 
-function inlineStyles(node) {
+export function inlineStyles(node) {
   const styles = getComputedStyle(node);
 
   SVG_STYLE_PROPERTIES.forEach((prop) => {
@@ -100,7 +100,7 @@ function inlineStyles(node) {
   });
 }
 
-function getUseReplacement(node) {
+export function getUseReplacement(node) {
   const href = node.href.baseVal;
   // TODO this will only work for internal references
   let refNode = null;
@@ -132,37 +132,3 @@ function getUseReplacement(node) {
 
   return resultNode;
 }
-
-// NOTE: this code modifies the original node by inlining all styles
-// this is not ideal and probably fixable
-export function getSVGString(svgNode: Element): string {
-  const queue = Array.from(svgNode.children);
-
-  while (queue.length) {
-    const node = queue.pop();
-
-    if (
-      !(node instanceof SVGElement) ||
-      node instanceof SVGDefsElement ||
-      node instanceof SVGTitleElement
-    ) {
-      continue;
-    }
-
-    if (node instanceof SVGUseElement) {
-      const replacement = getUseReplacement(node);
-
-      if (replacement) {
-        node.parentNode!.replaceChild(replacement, node);
-        queue.push(replacement);
-      }
-      continue;
-    }
-
-    inlineStyles(node);
-
-    Array.from(node.children).forEach((child) => queue.push(child));
-  }
-
-  return svgNode.outerHTML;
-}

src/model/Layer/ShapePath.ts

@@ -55,6 +55,7 @@ class ShapePath extends Base {
    */
   booleanOperation: SketchFormat.BooleanOperation =
     SketchFormat.BooleanOperation.NA;
+
   /**
    * 转为 Sketch JSON 文件
    */
@@ -104,36 +105,38 @@ class ShapePath extends Base {
     let curveFromPoint: { x: number; y: number } = point;
     let curveToPoint: { x: number; y: number } = point;
 
+    // 判断 CurveTo
     // 如果自身点是 Curve 点
     if (thisPoint.type === SVGPathData.CURVE_TO) {
       curveToPoint = { x: thisPoint.x2, y: thisPoint.y2 };
       hasCurveTo = true;
     }
 
+    // 判断 CurveFrom
+
     // 如果下一个点是 Curve 点
     if (nextPoint.type === SVGPathData.CURVE_TO) {
       hasCurveFrom = true;
       curveFromPoint = { x: nextPoint.x1, y: nextPoint.y1 };
     }
 
     // 确认曲线模式
-    const curveMode =
-      // 既有前 也有后 就不对称
-      hasCurveFrom && hasCurveTo
-        ? SketchFormat.CurveMode.Asymmetric
-        : // 否则 有前或有后 就是弯的
-        hasCurveFrom || hasCurveTo
-        ? SketchFormat.CurveMode.Disconnected
-        : // 不然就是直的
-          SketchFormat.CurveMode.Straight;
+    const curveMode = this.judgeCurveMode({
+      hasCurveFrom,
+      hasCurveTo,
+      curveFromPoint,
+      curveToPoint,
+      thisPoint,
+    });
 
     const firstPoint = this.points[0];
     if (
       // 如果是闭合路径
       this.isClosed &&
       // 且最后一个点和起点点一样
       index === this.points.length - 1 &&
-      (point.x === firstPoint.x && point.y === firstPoint.y)
+      (point.x.toFixed(8) === firstPoint.x.toFixed(8) &&
+        point.y.toFixed(8) === firstPoint.y.toFixed(8))
     )
       // 则过滤最后一个点
       return;
@@ -150,6 +153,58 @@ class ShapePath extends Base {
     };
   };
 
+  /**
+   * 判断点是否在同一条线上
+   * @param q 当前点
+   * @param p1 上一个点
+   * @param p2 下一个点
+   */
+  private judgeIsOnSameLine = (
+    q: BezierPoint,
+    p1: BezierPoint,
+    p2: BezierPoint
+  ) => {
+    return (
+      q.x >= Math.min(p1.x, p2.x) &&
+      q.x <= Math.max(p1.x, p2.x) &&
+      (q.y >= Math.min(p1.y, p2.y) && q.y <= Math.max(p1.y, p2.y))
+    );
+  };
+
+  /**
+   * 判断曲线模型
+   * @param hasCurveFrom 是否有前置曲线
+   * @param hasCurveTo 是否有后置曲线
+   * @param curveFromPoint 前置曲线点
+   * @param curveToPoint 后置曲线点
+   * @param thisPoint 自己这个点
+   */
+  private judgeCurveMode = ({
+    hasCurveFrom,
+    hasCurveTo,
+    curveFromPoint,
+    curveToPoint,
+    thisPoint,
+  }): SketchFormat.CurveMode => {
+    // 既有前 也有后
+    if (hasCurveFrom && hasCurveTo) {
+      // 则是曲线
+      // 再判断是否在同一条直线上
+      if (this.judgeIsOnSameLine(thisPoint, curveFromPoint, curveToPoint)) {
+        // 是的话则是不对称
+        return SketchFormat.CurveMode.Asymmetric;
+      }
+      // 否则就是分离
+      else return SketchFormat.CurveMode.Disconnected;
+    } else if (hasCurveFrom || hasCurveTo) {
+      // 否则 有前或有后 就是弯的
+      return SketchFormat.CurveMode.Disconnected;
+    }
+
+    // 不然就是直的
+    else return SketchFormat.CurveMode.Straight;
+  };
+
   /**
    * 获取上下文的点
    * @param index

src/model/Layer/Svg.ts

@@ -6,6 +6,7 @@ import { BaseLayerParams } from './Base';
 
 import ShapeGroup, { ShapeGroupType } from './ShapeGroup';
 import ShapePath from './ShapePath';
+import { getUseReplacement, inlineStyles } from '../../helpers/svg';
 
 export type SVG = {
   _class: 'svg';
@@ -40,18 +41,19 @@ export type BezierPoint = StartPoint | CurvePoint | LinePoint;
 
 interface SvgInitParams extends BaseLayerParams {
   path: string;
+  svgString?: string;
 }
 
 /**
  * SVG 对象
  */
 class Svg extends ShapeGroup {
-  constructor({ x, y, width, height, path }: SvgInitParams) {
+  constructor({ x, y, width, height, path, svgString }: SvgInitParams) {
     super({ height, width, y, x });
     this.class = 'svg';
 
     this.name = 'svg';
-    this.rawSVGString = path;
+    this.rawSVGString = svgString;
 
     const { shapes, frame: innerFrame } = Svg.svgPathToShapeGroup(path);
 
@@ -162,6 +164,44 @@ class Svg extends ShapeGroup {
       frame: groupFrame,
     };
   };
+
+  /**
+   * 将 Svg Node 转为 SvgString
+   * @param svgNode
+   */
+  static getSVGString = (svgNode: Element): string => {
+    // NOTE: this code modifies the original node by inlining all styles
+    // this is not ideal and probably fixable
+    const queue = Array.from(svgNode.children);
+
+    while (queue.length) {
+      const node = queue.pop();
+
+      if (
+        !(node instanceof SVGElement) ||
+        node instanceof SVGDefsElement ||
+        node instanceof SVGTitleElement
+      ) {
+        continue;
+      }
+
+      if (node instanceof SVGUseElement) {
+        const replacement = getUseReplacement(node);
+
+        if (replacement) {
+          node.parentNode!.replaceChild(replacement, node);
+          queue.push(replacement);
+        }
+        continue;
+      }
+
+      inlineStyles(node);
+
+      Array.from(node.children).forEach((child) => queue.push(child));
+    }
+
+    return svgNode.outerHTML;
+  };
 }
 
 export default Svg;