fix: skip postprocess localposition if transform exists

antvis · Feb 8, 2023 · 2761996 · 2761996
1 parent ae4bb24
commit 2761996
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 8 deletions.
diff --git a/packages/g-lite/src/css/CSSProperty.ts b/packages/g-lite/src/css/CSSProperty.ts
@@ -2,7 +2,9 @@ import type { DisplayObject } from '../display-objects';
 import type { IElement } from '../dom';
 import type { StyleValueRegistry } from './interfaces';
 
-export type CSSPropertySyntaxFactory = <P, U>(syntax: string) => CSSProperty<P, U>;
+export type CSSPropertySyntaxFactory = <P, U>(
+  syntax: string,
+) => CSSProperty<P, U>;
 
 export type Interpolatable = number | boolean | number[] | boolean[];
 type CSSPropertyMixer<Parsed = any, T extends Interpolatable = any> = (
@@ -11,7 +13,10 @@ type CSSPropertyMixer<Parsed = any, T extends Interpolatable = any> = (
   displayObject: IElement | null,
 ) => [T, T, (i: T) => string | any] | undefined;
 
-type CSSPropertyParser<Parsed> = (value: string | any, object: DisplayObject) => Parsed;
+type CSSPropertyParser<Parsed> = (
+  value: string | any,
+  object: DisplayObject,
+) => Parsed;
 
 type CSSPropertyCalculator<Parsed, Used> = (
   name: string,
@@ -56,5 +61,5 @@ export interface CSSProperty<Parsed, Used> {
   /**
    * eg. update local position after x/y/z caculated
    */
-  postProcessor: (object: IElement) => void;
+  postProcessor: (object: IElement, attributes: string[]) => void;
 }
diff --git a/packages/g-lite/src/css/StyleValueRegistry.ts b/packages/g-lite/src/css/StyleValueRegistry.ts
@@ -745,7 +745,7 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
 
     attributeNames.forEach((name) => {
       if (name in object.parsedStyle) {
-        this.postProcessProperty(name as string, object);
+        this.postProcessProperty(name as string, object, attributeNames);
       }
     });
 
@@ -876,7 +876,11 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
     return used;
   }
 
-  postProcessProperty(name: string, object: DisplayObject) {
+  postProcessProperty(
+    name: string,
+    object: DisplayObject,
+    attributes: string[],
+  ) {
     const metadata = propertyMetadataCache[name];
 
     if (metadata && metadata.syntax) {
@@ -885,7 +889,7 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
       const propertyHandler = handler;
 
       if (propertyHandler && propertyHandler.postProcessor) {
-        propertyHandler.postProcessor(object);
+        propertyHandler.postProcessor(object, attributes);
       }
     }
   }

diff --git a/packages/g-lite/src/css/properties/CSSPropertyLocalPosition.ts b/packages/g-lite/src/css/properties/CSSPropertyLocalPosition.ts
@@ -16,7 +16,7 @@ export class CSSPropertyLocalPosition
   /**
    * update local position
    */
-  postProcessor(object: DisplayObject) {
+  postProcessor(object: DisplayObject, attributes: string[]) {
     let x: number;
     let y: number;
     let z: number;
@@ -67,7 +67,8 @@ export class CSSPropertyLocalPosition
     }
 
     const needResetLocalPosition = !isNil(x) || !isNil(y) || !isNil(z);
-    if (needResetLocalPosition) {
+    // only if `transform` won't be processed later
+    if (needResetLocalPosition && attributes.indexOf('transform') === -1) {
       // account for current transform if needed
       const { transform } = object.parsedStyle as ParsedBaseStyleProps;
       if (transform && transform.length) {

diff --git a/site/examples/event/event-others/demo/meta.json b/site/examples/event/event-others/demo/meta.json
@@ -45,6 +45,13 @@
         "zh": "TouchEvents",
         "en": "TouchEvents"
       }
+    },
+    {
+      "filename": "pointerupoutside.js",
+      "title": {
+        "zh": "pointerupoutside 事件",
+        "en": "pointerupoutside"
+      }
     }
   ]
 }
diff --git a/site/examples/event/event-others/demo/pointerupoutside.js b/site/examples/event/event-others/demo/pointerupoutside.js
@@ -0,0 +1,41 @@
+import { Canvas, CanvasEvent, Circle } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+
+/**
+ * Trigger pointerdown on circle then trigger pointerupoutside on canvas.
+ */
+
+// create a renderer
+const canvasRenderer = new CanvasRenderer();
+
+// create a canvas
+const canvas = new Canvas({
+  container: 'container',
+  width: 600,
+  height: 500,
+  renderer: canvasRenderer,
+});
+
+// create a circle
+const circle = new Circle({
+  style: {
+    cx: 300,
+    cy: 200,
+    r: 100,
+    fill: '#1890FF',
+    stroke: '#F04864',
+    lineWidth: 4,
+    shadowColor: 'black',
+    shadowBlur: 20,
+    cursor: 'pointer',
+  },
+});
+
+canvas.addEventListener(CanvasEvent.READY, () => {
+  // add a circle to canvas
+  canvas.appendChild(circle);
+});
+
+circle.addEventListener('pointerupoutside', () => {
+  console.log('pointerupoutside');
+});