Add transform to control.ts and unit tests #13

neverbiasu · 2024-04-02T11:15:20Z

This PR implemented 2 of css 2D transform-function(rotate and translateX), and also provided unit tests and integration tests.

CT_ch2 CT_ch3 CT_ch4

neverbiasu

some format issues

neverbiasu · 2024-05-17T04:27:27Z

fixtures/html-in-spatial/basic.xsml

@@ -5,9 +5,18 @@
      @material liteblue {
        diffuse-color: blue;
      }
+      @keyframes rotateSelf {


neverbiasu · 2024-05-17T04:28:48Z

pages/impl-babylonjs.ts

-        loadBuiltinPanel(
-          'spatial-devtools/console.xsml', nativeDocument, new BABYLON.Vector3(0, -0.8, -2)),
-      ]);
+      // panels = await Promise.all([


remove comments

neverbiasu · 2024-05-17T04:29:11Z

src/living/helpers/babylonjs/InteractiveDynamicTexture.test.ts

+
+    expect(result).toEqual(expectedMatrix);
+  });
+});


Suggested change

});

});

neverbiasu · 2024-05-17T04:34:07Z

src/living/helpers/babylonjs/InteractiveDynamicTexture.ts

@@ -311,6 +315,25 @@ export class InteractiveDynamicTexture extends BABYLON.DynamicTexture {
      isDirtyAfterRendering = control.isDirty();
    } else {
      layout = currentElementOrControl._control.layoutNode.getLayout();
+      const control =  currentElementOrControl._control;
+      const style = control._style;
+      // console.log('style', style);


remove comments

neverbiasu · 2024-05-17T04:34:43Z

src/living/helpers/babylonjs/test.html

+            <div class="inner-rect"></div>
+        </div>
+    </body>
+</html>


Suggested change

</html>

</html>

neverbiasu · 2024-05-17T05:23:48Z

src/living/helpers/gui2d/control.ts

@@ -370,7 +392,7 @@ export class Control2D {
    const canvasContext = this._renderingContext;
    const boxRect = new DOMRectImpl(x, y, width, height);
    const hasTextChildren = this._isElementOwnsInnerText();
-
+    


Suggested change

neverbiasu · 2024-05-17T05:24:13Z

src/living/nodes/HTMLImageElement.ts

@@ -135,6 +135,7 @@ export default class HTMLImageElementImpl extends HTMLContentElement implements

  private async _resizeImageData() {
    if (this._enableResizing && this._imageBitmap) {
+      console.log('height', this.height);


remove comments

neverbiasu · 2024-05-17T05:25:04Z

fixtures/css/css-transform.xsml

+      </script>
+    </space>
+  </xsml>
+


Suggested change

fixtures/css/css-transform.xsml

neverbiasu · 2024-05-17T05:25:46Z

fixtures/css/css-transform.xsml

+      </style>
+    </head>
+    <space>
+      <plane id="plane1"> 


Suggested change

<plane id="plane1">

<plane>

neverbiasu · 2024-05-17T06:01:52Z

src/living/helpers/gui2d/control.test.ts

+                    this.transform = new DOMMatrix(args);
+                } else if (args.length === 1 && typeof args[0] === 'object') {
+                    const transformInit: DOMMatrix2DInit = args[0];
+                    this.transform = new DOMMatrix([transformInit.m11, transformInit.m12, 0, 0,     transformInit.m21, transformInit.m22, 0, 0,     0, 0, 1, 0,     transformInit.m41, transformInit.m42, 0, 1]); // change m32 m33 to pass the test


Suggested change

this.transform = new DOMMatrix([transformInit.m11, transformInit.m12, 0, 0, transformInit.m21, transformInit.m22, 0, 0, 0, 0, 1, 0, transformInit.m41, transformInit.m42, 0, 1]); // change m32 m33 to pass the test

this.transform = new DOMMatrix([

transformInit.m11, transformInit.m12, 0, 0,

transformInit.m21, transformInit.m22, 0, 0,

0, 0, 1, 0,

transformInit.m41, transformInit.m42, 0, 1

]);

reviseCode

reviseFormat

neverbiasu · 2024-05-17T06:20:27Z

fixtures/css/css-transform.xsml

+          console.log('mouseY', mouseY);
+          const x = Math.round(mouseX);
+          img.style.transform = `translateX(${x - 512}px)`;
+


Suggested change

neverbiasu · 2024-05-17T06:21:19Z

src/living/helpers/babylonjs/InteractiveDynamicTexture.ts

+        ]);
+        matrix = postMultiply(matrix, translateMatrix);
+      }
+


Suggested change

neverbiasu · 2024-05-17T06:22:04Z

src/living/helpers/gui2d/control.test.ts

+      this._renderingContext = mockContext as any;
+  }
+  prepareTransformMatrix(matrix: DOMMatrix) {
+      this.transform = matrix;


Suggested change

this.transform = matrix;

this.transform = matrix;

neverbiasu · 2024-05-17T06:23:03Z

src/living/helpers/gui2d/control.test.ts

+      this.transform = matrix;
+  }
+  expect(matrix: DOMMatrix) {
+      expect(this._renderingContext.getTransform()).toEqual(matrix);


Suggested change

expect(this._renderingContext.getTransform()).toEqual(matrix);

expect(this._renderingContext.getTransform()).toEqual(matrix);

yorkie · 2024-05-17T06:33:27Z

fixtures/css/css-transform.xsml

+          }
+        </style>
+        <div>
+          <img src="./texture.jpg">


The texture file should moved to fixtures/textures directory.

yorkie · 2024-05-17T06:34:42Z

fixtures/css/css-transform.xsml

+          <img src="./texture.jpg">
+        </div>
+      </plane>
+      <cube class="m_cube" />


What does this cube for? It seems not related with CSS transform :(

yorkie · 2024-05-17T06:36:14Z

src/living/helpers/babylonjs/InteractiveDynamicTexture.test.ts

@@ -0,0 +1,30 @@
+import { InteractiveDynamicTexture } from './InteractiveDynamicTexture';
+import DOMMatrix from '../../geometry/DOMMatrix'


Suggested change

import DOMMatrix from '../../geometry/DOMMatrix'

import DOMMatrix from '../../geometry/DOMMatrix';

yorkie · 2024-05-17T06:36:21Z

src/living/helpers/babylonjs/InteractiveDynamicTexture.test.ts

@@ -0,0 +1,30 @@
+import { InteractiveDynamicTexture } from './InteractiveDynamicTexture';
+import DOMMatrix from '../../geometry/DOMMatrix'
+import { describe, it, expect } from '@jest/globals'


Suggested change

import { describe, it, expect } from '@jest/globals'

import { describe, it, expect } from '@jest/globals';

yorkie · 2024-05-17T06:36:34Z

src/living/helpers/babylonjs/InteractiveDynamicTexture.test.ts

+
+describe('InteractiveDynamicTexture', () => {
+  it('should return correct matrix', () => {
+    const transformStr = "rotate(90deg) translateX(10px)"


Suggested change

const transformStr = "rotate(90deg) translateX(10px)"

const transformStr = 'rotate(90deg) translateX(10px)';

yorkie · 2024-05-17T06:37:05Z

src/living/helpers/babylonjs/InteractiveDynamicTexture.test.ts

+    expect(result).toEqual(expectedMatrix);
+  })
+  it('should return identity matrix when no transform is applied', () => {
+    const transformStr = " "


Suggested change

const transformStr = " "

const transformStr = ' ';

yorkie · 2024-05-17T08:15:19Z

src/living/helpers/gui2d/control.ts

  private _overwriteHeight: number;
  private _overwriteWidth: number;
-  private _imageData: ImageDataImpl;
+  private _imageData: ImageBitmap;


Private field should be a *impl type

The name should be _imageBitmap if its type is ImageBitmap*

yorkie · 2024-05-17T08:15:57Z

src/living/helpers/gui2d/control.ts

@@ -164,12 +163,13 @@ export class Control2D {
  private _lastRect: DOMRectReadOnlyImpl;
  private _lastCursor: BABYLON.Vector2;
  private _isCursorInside = false;
-  private _renderingContext: CanvasRenderingContext2D;
+  protected _renderingContext: CanvasRenderingContext2D; // for unit test


Please remove the comments that is unrelated.

yorkie · 2024-05-17T08:16:57Z

src/living/helpers/gui2d/control.ts

  private _isDirty = true;
-
+  private _transform: DOMMatrix;
+  private _currentTransform: DOMMatrix;


Ditto, for the above 2 fields.

yorkie · 2024-05-17T08:17:23Z

src/living/helpers/gui2d/control.ts

@@ -197,7 +197,7 @@ export class Control2D {
    }
  }

-  setImageData(data: ImageDataImpl) {
+  setImageData(data: ImageBitmap) {


Suggested change

setImageData(data: ImageBitmap) {

setImageBitmap(bitmap: ImageBitmap) {

yorkie · 2024-05-17T08:22:46Z

src/living/helpers/gui2d/control.ts

  }
-
+
+  _updateTransform(renderingContext: CanvasRenderingContext2D = this._renderingContext) {


No need to pass an argument of renderingContext, because it always be this._renderingContext, feel free to correct me if I'm wrong :)

yorkie · 2024-05-17T08:30:58Z

src/living/helpers/babylonjs/InteractiveDynamicTexture.ts

@@ -337,6 +356,48 @@ export class InteractiveDynamicTexture extends BABYLON.DynamicTexture {
    return isDirtyAfterRendering;
  }

+  // cannot call it in `render()`, cuz it cost too much.
+  static _parserTransform(transformStr: string): DOMMatrix {


The CSS property parsing should not be a rendering-related source file, please do this work in CSS-related files.

yorkie · 2024-05-17T08:31:32Z

src/living/helpers/babylonjs/InteractiveDynamicTexture.ts

@@ -337,6 +356,48 @@ export class InteractiveDynamicTexture extends BABYLON.DynamicTexture {
    return isDirtyAfterRendering;
  }

+  // cannot call it in `render()`, cuz it cost too much.


Actually you does call this function in render() :(

src/living/helpers/gui2d/control.test.ts

yorkie · 2024-05-17T08:34:38Z

src/living/helpers/gui2d/control.test.ts

+    ]);
+    control.prepareTransformMatrix(matrix);
+    control._updateTransform();
+    control.expect(matrix);


Mock class should do mocking only, expectation is not the scope of mock.

yorkie · 2024-05-17T08:37:41Z

src/living/helpers/babylonjs/InteractiveDynamicTexture.test.ts

+      0, 0, 1, 0,  
+      0, 10, 0, 1
+    ]);
+    const result = InteractiveDynamicTexture._parserTransform(transformStr);


Ditto, InteractiveDynamicTexture should not contain a function that does parsing, you have to finish it in CSS parsing stage in this project.

src/living/helpers/gui2d/control.ts

yorkie · 2024-06-13T05:44:42Z

src/living/helpers/transform-functions.ts

@@ -0,0 +1,24 @@
+import DOMMatrixImpl from '../geometry/DOMMatrix';


These 2 functions seems to be moved in matrix-functions.ts.

Or change this source filename to "matrix-transform-functions.ts".

yorkie · 2024-06-13T05:46:09Z

src/living/cssom/parsers/index.test.ts

+  it('should process input function name error correctly', () => {
+    const result = parsers.parseTransform('translateM(10px)');
+    expect(result).toEqual([]);
+  })


Suggested change

})

});

yorkie · 2024-06-13T05:46:17Z

src/living/cssom/parsers/index.test.ts

+  it('should process input values error correctly', () => {
+    const result = parsers.parseTransform('translateX(10py)');
+    expect(result).toEqual([]);
+  })


Suggested change

})

});

yorkie · 2024-06-13T05:49:56Z

src/living/cssom/parsers/index.ts

@@ -18,6 +18,7 @@ const calcRegEx = /^calc\(([^)]*)\)$/;
 const colorRegEx4 =
  /^hsla?\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*(,\s*(-?\d+|-?\d*.\d+)\s*)?\)/;
 const angleRegEx = /^([-+]?[0-9]*\.?[0-9]+)(deg|grad|rad)$/;
+const transformFunctionRegEx = /(\w+)\((\w+)\)/g;


Suggested change

const transformFunctionRegEx = /(\w+)$(\w+)$/g;

const css3TransformFunctionNames = [

'translate',

'translateX',

'translateY',

...

];

const transformFunctionRegEx = new RegExp(`(${css3TransformFunctionNames.join('|')})$\w+$`, 'g');

yorkie · 2024-06-13T05:52:31Z

src/living/cssom/parsers/index.ts

+
+export class TranslationTransformFunction extends TransformFunction<PropertyLengthValue> {
+  constructor(name: string, args: string[]) {
+    const values = processArgs(args, toLengthStr) as PropertyLengthValue[];


Suggested change

const values = processArgs(args, toLengthStr) as PropertyLengthValue[];

const values = super.processArgs(args, toLengthStr);

yorkie · 2024-06-13T06:52:41Z

src/living/helpers/gui2d/control.ts

+  }
+
+  calculateTransformMatrix(transformFunctions: UnionTransformFunction[]): DOMMatrixImpl {
+    let transformMatrix = new DOMMatrixImpl([


Suggested change

let transformMatrix = new DOMMatrixImpl([

let transformMatrix: DOMMatrix = new DOMMatrixImpl([

yorkie · 2024-06-13T11:05:28Z

src/living/cssom/parsers/index.ts

@@ -950,3 +989,110 @@ export function shorthandSetter(
    }
  };
 }
+
+function createAndAddTransformFunctionTo(
+  parsedTransformFunctions: UnionTransformFunction[],


Suggested change

parsedTransformFunctions: UnionTransformFunction[],

list: UnionTransformFunction[],

yorkie · 2024-06-18T04:44:36Z

src/living/cssom/parsers/index.ts

+    this.values = values;
+  }
+
+  static processArgs(


Suggested change

static processArgs(

static ProcessArgs(

yorkie · 2024-06-18T04:54:08Z

src/living/helpers/gui2d/control.ts

@@ -370,11 +372,10 @@ export class Control2D {
    const canvasContext = this._renderingContext;
    const boxRect = new DOMRectImpl(x, y, width, height);
    const hasTextChildren = this._isElementOwnsInnerText();
-
    /**
     * Check if this node is an image or has text children, if yes, we need to fix the size by the image or text.


Suggested change

* Check if this node is an image or has text children, if yes, we need to fix the size by the image or text.

* 1. Check if this node is an image or has text children, if yes, we need to fix the size by the image or text.

yorkie · 2024-06-18T04:59:10Z

src/living/helpers/gui2d/control.ts

+    const transformStr = style.transform;
+    const parentElement = element.parentElement;
+    const transformFunctions = parseTransform(transformStr);
+    const transformMatrix = this.calculateTransformMatrix(transformFunctions);


Suggested change

const transformMatrix = this.calculateTransformMatrix(transformFunctions);

const transformMatrix = this.calculateTransformMatrix(parseTransform(transformStr));

yorkie · 2024-06-18T05:05:34Z

src/living/helpers/matrix-functions.ts

@@ -15,7 +15,7 @@ export function postMultiply(self: DOMMatrix, other: DOMMatrix): DOMMatrix {
  return new DOMMatrixImpl(resElements);
 }

-export function preMultiply(other: DOMMatrix, self: DOMMatrix): DOMMatrix { 
+export function preMultiply(other: DOMMatrix, self: DOMMatrix): DOMMatrix{ 


Suggested change

export function preMultiply(other: DOMMatrix, self: DOMMatrix): DOMMatrix{

export function preMultiply(other: DOMMatrix, self: DOMMatrix): DOMMatrix {

yorkie · 2024-06-18T09:02:33Z

src/living/helpers/gui2d/control.ts

@@ -739,9 +755,56 @@ export class Control2D {
      element.width = rect.width;
      element.height = rect.height;
    });
-    renderingContext.putImageData(this._imageData, rect.x, rect.y, 0, 0, rect.width, rect.height);
+    /**
+     * NOTE|feichi|: `putImageData` paints image onto canvas without transform,


Suggested change

* NOTE|feichi|: `putImageData` paints image onto canvas without transform,

* NOTE(feichi): `putImageData` paints image onto canvas without transform,

neverbiasu · 2024-06-18T12:39:49Z

src/living/helpers/gui2d/control.ts

+    const parentElement = element.parentElement;
+    const transformMatrix = this.calculateTransformMatrix(parseTransform(transformStr));
+    /**
+     * If the parentElement is the direct childNodes of ShadowRoot, it will be null.


add an example to explain

neverbiasu · 2024-06-18T12:40:02Z

src/living/helpers/gui2d/control.ts

@@ -739,9 +755,60 @@ export class Control2D {
      element.width = rect.width;
      element.height = rect.height;
    });
-    renderingContext.putImageData(this._imageData, rect.x, rect.y, 0, 0, rect.width, rect.height);
+    /**
+     * NOTE(feichi): `putImageData` paints image onto canvas without transform,


not clear enough

yorkie

LGTM

neverbiasu force-pushed the css branch 3 times, most recently from a32f52c to 3a3ecb8 Compare April 16, 2024 06:15

neverbiasu force-pushed the css branch 2 times, most recently from 2dbc4b5 to 0ae2b23 Compare May 17, 2024 04:01

neverbiasu added 7 commits May 17, 2024 12:41

CT_ch1

af7be45

CT_ch2 CT_ch3 CT_ch4

fixErr

bbe2a8e

fixErr

0370881

fixUpdateTransform

7f6fad6

initDemo

31fe753

removeComments

c020a91

fixBug

f53fe72

neverbiasu force-pushed the css branch from dd42fe3 to f53fe72 Compare May 17, 2024 04:41

neverbiasu commented May 17, 2024

View reviewed changes

reviseFormat

5ac0474

neverbiasu commented May 17, 2024

View reviewed changes

reviseCode

1217e41

reviseCode

neverbiasu force-pushed the css branch from c2f6334 to 1217e41 Compare May 17, 2024 06:13

reviseFormat

a057228

reviseFormat

neverbiasu force-pushed the css branch from a007297 to a057228 Compare May 17, 2024 06:19

neverbiasu commented May 17, 2024

View reviewed changes

reviseFormat

6eb1e67

yorkie requested changes May 17, 2024

View reviewed changes

neverbiasu added 2 commits May 17, 2024 14:52

reviseCode

b140028

fixBug

6f0c4b9

yorkie requested changes May 17, 2024

View reviewed changes

neverbiasu added 3 commits May 17, 2024 18:26

reviseDemo

fd41db2

formatCode

3cf3fb7

removeImport

fcaa449

neverbiasu commented May 22, 2024

View reviewed changes

src/living/helpers/gui2d/control.ts Outdated Show resolved Hide resolved

yorkie reviewed Jun 13, 2024

View reviewed changes

neverbiasu added 2 commits June 13, 2024 18:15

solve the questions in review

0bbd8f3

revise the type function

0b6a22a

yorkie reviewed Jun 13, 2024

View reviewed changes

revise the name of function and variable

ab8b6e8

neverbiasu force-pushed the css branch from 926fe5a to ab8b6e8 Compare June 18, 2024 03:40

yorkie requested changes Jun 18, 2024

View reviewed changes

neverbiasu added 2 commits June 18, 2024 15:29

refactor code

312bfa7

refactor code

9a597f0

yorkie reviewed Jun 18, 2024

View reviewed changes

neverbiasu added 2 commits June 18, 2024 18:54

refactor code

9826a64

refactor code

7761651

neverbiasu commented Jun 18, 2024

View reviewed changes

neverbiasu added 8 commits June 20, 2024 12:01

refactor code

49635df

refactor code

ad2dd40

revise comments

3f1c1da

revise comments

a1395c1

revise comments

fb34df9

revise comments

88d51a7

revise unit test

ca92e22

revise comments

a348227

neverbiasu force-pushed the css branch from 50e53ca to a348227 Compare June 20, 2024 06:35

revise comments

385f93b

yorkie approved these changes Jun 20, 2024

View reviewed changes

yorkie merged commit 02172a0 into M-CreativeLab:main Jun 20, 2024
4 checks passed

	expect(this._renderingContext.getTransform()).toEqual(matrix);
	expect(this._renderingContext.getTransform()).toEqual(matrix);

		@@ -0,0 +1,30 @@
		import { InteractiveDynamicTexture } from './InteractiveDynamicTexture';
		import DOMMatrix from '../../geometry/DOMMatrix'

	import { describe, it, expect } from '@jest/globals'
	import { describe, it, expect } from '@jest/globals';

	const transformStr = "rotate(90deg) translateX(10px)"
	const transformStr = 'rotate(90deg) translateX(10px)';

	setImageData(data: ImageBitmap) {
	setImageBitmap(bitmap: ImageBitmap) {

		}


		_updateTransform(renderingContext: CanvasRenderingContext2D = this._renderingContext) {

		@@ -0,0 +1,24 @@
		import DOMMatrixImpl from '../geometry/DOMMatrix';

-const transformFunctionRegEx = /(\w+)\((\w+)\)/g;
+const css3TransformFunctionNames = [
+  'translate',
+  'translateX',
+  'translateY',
+  ...
+];
+const transformFunctionRegEx = new RegExp(`(${css3TransformFunctionNames.join('|')})\(\w+\)`, 'g');

	const values = processArgs(args, toLengthStr) as PropertyLengthValue[];
	const values = super.processArgs(args, toLengthStr);

	let transformMatrix = new DOMMatrixImpl([
	let transformMatrix: DOMMatrix = new DOMMatrixImpl([

	parsedTransformFunctions: UnionTransformFunction[],
	list: UnionTransformFunction[],

	* Check if this node is an image or has text children, if yes, we need to fix the size by the image or text.
	* 1. Check if this node is an image or has text children, if yes, we need to fix the size by the image or text.

	const transformMatrix = this.calculateTransformMatrix(transformFunctions);
	const transformMatrix = this.calculateTransformMatrix(parseTransform(transformStr));

	export function preMultiply(other: DOMMatrix, self: DOMMatrix): DOMMatrix{
	export function preMultiply(other: DOMMatrix, self: DOMMatrix): DOMMatrix {

	* NOTE\|feichi\|: `putImageData` paints image onto canvas without transform,
	* NOTE(feichi): `putImageData` paints image onto canvas without transform,

Add transform to control.ts and unit tests #13

Add transform to control.ts and unit tests #13

Conversation

neverbiasu commented Apr 2, 2024 • edited Loading

neverbiasu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yorkie left a comment

Choose a reason for hiding this comment

neverbiasu commented Apr 2, 2024 •

edited

Loading