Skip to content

Commit

Permalink
refactor: optimize display-object, style-value-registry
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aarebecca
Aarebecca committed Oct 17, 2024
1 parent abd828e commit d391923
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 67 deletions.
2 changes: 1 addition & 1 deletion packages/g-lite/src/css/CSSProperty.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,5 +61,5 @@ export interface CSSProperty<Parsed, Used> {
/**
* eg. update local position after x/y/z caculated
*/
postProcessor: (object: IElement, attributes: string[]) => void;
postProcessor: (object: IElement) => void;
}
64 changes: 32 additions & 32 deletions packages/g-lite/src/css/StyleValueRegistry.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { isNil, isUndefined } from '@antv/util';
import { vec3 } from 'gl-matrix';
import { GeometryAABBUpdater } from '..';
import type { DisplayObject } from '../display-objects';
import { EMPTY_PARSED_PATH } from '../display-objects/constants';
import type { GlobalRuntime } from '../global-runtime';
import { GeometryAABBUpdater } from '../services';
import { AABB } from '../shapes';
import type {
BaseStyleProps,
Expand Down Expand Up @@ -660,22 +660,20 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
},
) {
Object.assign(object.attributes, attributes);
const attributeNames = Object.keys(attributes);

// clipPath
const oldClipPath = object.parsedStyle.clipPath;
const oldOffsetPath = object.parsedStyle.offsetPath;

object.parsedStyle = Object.assign(object.parsedStyle, attributes);
Object.assign(object.parsedStyle, attributes);

let needUpdateGeometry = !!options.forceUpdateGeometry;
if (!needUpdateGeometry) {
for (let i = 0; i < GEOMETRY_ATTRIBUTE_NAMES.length; i++) {
if (GEOMETRY_ATTRIBUTE_NAMES[i] in attributes) {
needUpdateGeometry = true;
break;
}
}

if (
!needUpdateGeometry &&
GEOMETRY_ATTRIBUTE_NAMES.some((name) => name in attributes)
) {
needUpdateGeometry = true;
}

if (attributes.fill) {
Expand Down Expand Up @@ -728,7 +726,9 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
}
// Text
if (attributes.textTransform) {
this.runtime.CSSPropertySyntaxFactory['<text-transform>'].calculator(
this.runtime.CSSPropertySyntaxFactory[
PropertySyntax.TEXT_TRANSFORM
].calculator(
null,
null,
{ value: attributes.textTransform },
Expand All @@ -737,7 +737,9 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
);
}
if (!isUndefined(attributes.clipPath)) {
this.runtime.CSSPropertySyntaxFactory['<defined-path>'].calculator(
this.runtime.CSSPropertySyntaxFactory[
PropertySyntax.DEFINED_PATH
].calculator(
'clipPath',
oldClipPath,
attributes.clipPath,
Expand All @@ -746,7 +748,9 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
);
}
if (attributes.offsetPath) {
this.runtime.CSSPropertySyntaxFactory['<defined-path>'].calculator(
this.runtime.CSSPropertySyntaxFactory[
PropertySyntax.DEFINED_PATH
].calculator(
'offsetPath',
oldOffsetPath,
attributes.offsetPath,
Expand All @@ -766,7 +770,7 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
// @ts-ignore
if (attributes.markerStart) {
object.parsedStyle.markerStart = this.runtime.CSSPropertySyntaxFactory[
'<marker>'
PropertySyntax.MARKER
].calculator(
null,
// @ts-ignore
Expand All @@ -780,7 +784,7 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
// @ts-ignore
if (attributes.markerEnd) {
object.parsedStyle.markerEnd = this.runtime.CSSPropertySyntaxFactory[
'<marker>'
PropertySyntax.MARKER
].calculator(
null,
// @ts-ignore
Expand All @@ -794,7 +798,7 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
// @ts-ignore
if (attributes.markerMid) {
object.parsedStyle.markerMid = this.runtime.CSSPropertySyntaxFactory[
'<marker>'
PropertySyntax.MARKER
].calculator(
'',
// @ts-ignore
Expand All @@ -807,28 +811,24 @@ export class DefaultStyleValueRegistry implements StyleValueRegistry {
}

if (!isNil(attributes.zIndex)) {
this.runtime.CSSPropertySyntaxFactory['<z-index>'].postProcessor(
object,
attributeNames,
);
this.runtime.CSSPropertySyntaxFactory[
PropertySyntax.Z_INDEX
].postProcessor(object);
}
if (!isNil(attributes.offsetDistance)) {
this.runtime.CSSPropertySyntaxFactory['<offset-distance>'].postProcessor(
object,
attributeNames,
);
this.runtime.CSSPropertySyntaxFactory[
PropertySyntax.OFFSET_DISTANCE
].postProcessor(object);
}
if (attributes.transform) {
this.runtime.CSSPropertySyntaxFactory['<transform>'].postProcessor(
object,
attributeNames,
);
this.runtime.CSSPropertySyntaxFactory[
PropertySyntax.TRANSFORM
].postProcessor(object);
}
if (attributes.transformOrigin) {
this.runtime.CSSPropertySyntaxFactory['<transform-origin>'].postProcessor(
object,
attributeNames,
);
this.runtime.CSSPropertySyntaxFactory[
PropertySyntax.TRANSFORM_ORIGIN
].postProcessor(object);
}

if (needUpdateGeometry) {
Expand Down
70 changes: 36 additions & 34 deletions packages/g-lite/src/display-objects/DisplayObject.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ const mutationEvent: MutationEvent = new MutationEvent(
null,
);

const $vec3 = vec3.create();
const $quat = quat.create();

/**
* prototype chains: DisplayObject -> Element -> Node -> EventTarget
*
Expand Down Expand Up @@ -82,15 +85,6 @@ export class DisplayObject<
*/
private activeAnimations: IAnimation[] = [];

/**
* Use data-* attribute.
* @see https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
* @example
* group.dataset.prop1 = 1;
* group.getAttribute('data-prop1'); // 1
*/
dataset: any;

constructor(config: DisplayObjectConfig<StyleProps>) {
super();

Expand All @@ -99,23 +93,19 @@ export class DisplayObject<
this.config = config;

// init scene graph node
this.id = this.config.id || '';
this.name = this.config.name || '';
if (this.config.className || this.config.class) {
this.className = this.config.className || this.config.class;
this.id = config.id || '';
this.name = config.name || '';
if (config.className || config.class) {
this.className = config.className || config.class;
}
this.nodeName = this.config.type || Shape.GROUP;
this.nodeName = config.type || Shape.GROUP;

if (this.config.initialParsedStyle) {
Object.assign(
this.parsedStyle,
// DEFAULT_PARSED_STYLE_PROPS_CSS_DISABLED,
this.config.initialParsedStyle,
);
if (config.initialParsedStyle) {
Object.assign(this.parsedStyle, config.initialParsedStyle);
}

// start to process attributes
this.initAttributes(this.config.style);
this.initAttributes(config.style);

if (runtime.enableStyleSyntax) {
this.style = new Proxy<StyleProps & ICSSStyleDeclaration<StyleProps>>(
Expand Down Expand Up @@ -313,7 +303,10 @@ export class DisplayObject<
}

setOrigin(position: vec3 | vec2 | number, y = 0, z = 0) {
runtime.sceneGraphService.setOrigin(this, createVec3(position, y, z));
runtime.sceneGraphService.setOrigin(
this,
createVec3(position, y, z, false),
);
return this;
}

Expand All @@ -325,7 +318,10 @@ export class DisplayObject<
* set position in world space
*/
setPosition(position: vec3 | vec2 | number, y = 0, z = 0) {
runtime.sceneGraphService.setPosition(this, createVec3(position, y, z));
runtime.sceneGraphService.setPosition(
this,
createVec3(position, y, z, false),
);
return this;
}

Expand All @@ -335,7 +331,7 @@ export class DisplayObject<
setLocalPosition(position: vec3 | vec2 | number, y = 0, z = 0) {
runtime.sceneGraphService.setLocalPosition(
this,
createVec3(position, y, z),
createVec3(position, y, z, false),
);
return this;
}
Expand All @@ -344,15 +340,21 @@ export class DisplayObject<
* translate in world space
*/
translate(position: vec3 | vec2 | number, y = 0, z = 0) {
runtime.sceneGraphService.translate(this, createVec3(position, y, z));
runtime.sceneGraphService.translate(
this,
createVec3(position, y, z, false),
);
return this;
}

/**
* translate in local space
*/
translateLocal(position: vec3 | vec2 | number, y = 0, z = 0) {
runtime.sceneGraphService.translateLocal(this, createVec3(position, y, z));
runtime.sceneGraphService.translateLocal(
this,
createVec3(position, y, z, false),
);
return this;
}

Expand All @@ -379,7 +381,7 @@ export class DisplayObject<
if (typeof scaling === 'number') {
y = y || scaling;
z = z || scaling;
scaling = createVec3(scaling, y, z);
scaling = createVec3(scaling, y, z, false);
}
runtime.sceneGraphService.scaleLocal(this, scaling);
return this;
Expand All @@ -392,7 +394,7 @@ export class DisplayObject<
if (typeof scaling === 'number') {
y = y || scaling;
z = z || scaling;
scaling = createVec3(scaling, y, z);
scaling = createVec3(scaling, y, z, false);
}

runtime.sceneGraphService.setLocalScale(this, scaling);
Expand All @@ -418,7 +420,7 @@ export class DisplayObject<
*/
getEulerAngles() {
const [, , ez] = getEuler(
vec3.create(),
$vec3,
runtime.sceneGraphService.getWorldTransform(this),
);
return rad2deg(ez);
Expand All @@ -429,7 +431,7 @@ export class DisplayObject<
*/
getLocalEulerAngles() {
const [, , ez] = getEuler(
vec3.create(),
$vec3,
runtime.sceneGraphService.getLocalRotation(this),
);
return rad2deg(ez);
Expand Down Expand Up @@ -652,10 +654,10 @@ export class DisplayObject<
*/
getMatrix(transformMat4?: mat4): mat3 {
const transform = transformMat4 || this.getWorldTransform();
const [tx, ty] = mat4.getTranslation(vec3.create(), transform);
const [sx, sy] = mat4.getScaling(vec3.create(), transform);
const rotation = mat4.getRotation(quat.create(), transform);
const [eux, , euz] = getEuler(vec3.create(), rotation);
const [tx, ty] = mat4.getTranslation($vec3, transform);
const [sx, sy] = mat4.getScaling($vec3, transform);
const rotation = mat4.getRotation($quat, transform);
const [eux, , euz] = getEuler($vec3, rotation);
// gimbal lock at 90 degrees
return fromRotationTranslationScale(eux || euz, tx, ty, sx, sy);
}
Expand Down

0 comments on commit d391923

Please sign in to comment.