✨Css transform (#30)

* ✨ feat: Add matrix parsing

Author: arvinxx

src/model/Base/BaseLayer.ts

@@ -148,6 +148,15 @@ abstract class BaseLayer {
     this.frame.left = left;
   }
 
+  get rotation() {
+    return this.frame.rotation;
+  }
+
+  set rotation(deg) {
+    console.log(deg);
+    this.frame.rotation = deg;
+  }
+
   setFixedWidthAndHeight() {
     this.setResizingConstraint(
       ResizingConstraint.Width,

src/model/Base/Frame.ts

@@ -24,6 +24,11 @@ class Frame {
 
   height: number = 0;
 
+  /**
+   * 旋转角度
+   */
+  rotation: number = 0;
+
   get right() {
     return this.x + this.width;
   }

src/model/Layer/Rectangle.ts

@@ -73,7 +73,7 @@ class Rectangle extends BaseLayer {
       layerListExpandedType: 0,
       nameIsFixed: false,
       resizingType: 0,
-      rotation: 0,
+      rotation: this.rotation,
       shouldBreakMaskChain: false,
       clippingMaskMode: 0,
       isLocked: false,

src/parser/pseudoShape.ts

@@ -1,6 +1,7 @@
 import { Rectangle, Frame } from '../model';
 import { parseToShape } from './shape';
 import { isVisibleShape } from '../utils/visibility';
+import { matrixToRotation } from '../utils/matrix';
 
 /**
  * 解析图形类伪类
@@ -25,6 +26,9 @@ export const parsePseudoToShape = async (
   if (pseudoEl.position === 'absolute') {
     x += parseFloat(pseudoEl.left);
     y += parseFloat(pseudoEl.top);
+    const { borderTopWidth, borderLeftWidth } = getComputedStyle(node);
+    x += parseFloat(borderLeftWidth);
+    y += parseFloat(borderTopWidth);
   }
 
   rect.frame = new Frame({
@@ -38,12 +42,24 @@ export const parsePseudoToShape = async (
 
   const { transform } = pseudoEl;
   if (transform !== 'none') {
-    // TODO 如何使用 将 transform 转换到 对象的 frame 上 ?
     // transform: rotate(45deg) scale(1) translate(-50%, -50%);
     // ↓↓↓
     // matrix(0.707107, 0.707107, -0.707107, 0.707107, 1.41421, -4.94975)
     // ↓↓↓
-    // ???
+    const params = /matrix\((.*)\)/.exec(transform)?.[1].split(',');
+
+    // 将 transform 转换到对象的 frame 上
+    if (params) {
+      const [a, b, c, d, e, f] = params.map(parseFloat);
+      // 偏移 X 和 Y
+      rect.x += e;
+      rect.y += f;
+      // 解析旋转角度
+      const rotation = matrixToRotation(a, b, c, d);
+      // TODO 有待研究
+      // 很奇怪 这里需要用负才能转成正的值
+      rect.rotation = -rotation;
+    }
   }
 
   if (isVisibleShape(<Rectangle>rect)) return rect;

src/utils/matrix.ts

@@ -0,0 +1,30 @@
+/*
+ * 解析matrix矩阵，0°-360°，返回旋转角度
+ * 当a=b||-a=b,0<=deg<=180
+ * 当-a+b=180,180<=deg<=270
+ * 当a+b=180,270<=deg<=360
+ *
+ * 当0<=deg<=180,deg=d;
+ * 当180<deg<=270,deg=180+c;
+ * 当270<deg<=360,deg=360-(c||d);
+ * */
+export const matrixToRotation = (
+  a: number,
+  b: number,
+  c: number,
+  d: number,
+) => {
+  const aa = Math.round((180 * Math.asin(a)) / Math.PI);
+  const bb = Math.round((180 * Math.acos(b)) / Math.PI);
+  const cc = Math.round((180 * Math.asin(c)) / Math.PI);
+  const dd = Math.round((180 * Math.acos(d)) / Math.PI);
+  let deg = 0;
+  if (aa === bb || -aa === bb) {
+    deg = dd;
+  } else if (-aa + bb === 180) {
+    deg = 180 + cc;
+  } else if (aa + bb === 180) {
+    deg = 360 - cc || 360 - dd;
+  }
+  return deg >= 360 ? 0 : deg;
+};