From b805f5a10d7cf822b17cfb08816e70d69027569f Mon Sep 17 00:00:00 2001 From: Mirko Pecora Date: Wed, 13 Nov 2024 16:36:01 +0100 Subject: [PATCH 1/4] fix(inspector): top left calculated with mount --- src/main-api/Inspector.ts | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/main-api/Inspector.ts b/src/main-api/Inspector.ts index 38e29be0..85d36156 100644 --- a/src/main-api/Inspector.ts +++ b/src/main-api/Inspector.ts @@ -239,6 +239,7 @@ export class Inspector { // really typescript? really? key as keyof CoreNodeProps, properties[key as keyof CoreNodeProps], + properties, ); } @@ -295,6 +296,7 @@ export class Inspector { div, property as keyof CoreNodeProps | keyof CoreTextNodeProps, value, + node.props, ); }, configurable: true, @@ -344,6 +346,7 @@ export class Inspector { property: keyof CoreNodeProps | keyof CoreTextNodeProps, // eslint-disable-next-line @typescript-eslint/no-explicit-any value: any, + props: CoreNodeProps | CoreTextNodeProps, ) { if (this.root === null || value === undefined || value === null) { return; @@ -407,10 +410,23 @@ export class Inspector { } if (typeof mappedStyleResponse === 'object') { - div.style.setProperty( - mappedStyleResponse.prop, - mappedStyleResponse.value, - ); + let value = mappedStyleResponse.value; + if (property === 'x') { + const mount = props.mountX || props.mount; + const width = props.width; + + if (mount) { + value = `${parseInt(value) - width * mount}px`; + } + } else if (property === 'y') { + const mount = props.mountY || props.mount; + const height = props.height; + + if (mount) { + value = `${parseInt(value) - height * mount}px`; + } + } + div.style.setProperty(mappedStyleResponse.prop, value); } return; @@ -466,13 +482,16 @@ export class Inspector { rotation = 0, scale = 1, color, + mount, + mountX, + mountY, } = props; // ignoring loops and repeats for now, as that might be a bit too much for the inspector function animate() { setTimeout(() => { - div.style.top = `${y}px`; - div.style.left = `${x}px`; + div.style.top = `${y - height * (mountY || mount)}px`; + div.style.left = `${x + (width - (mountX || mount))}px`; div.style.width = `${width}px`; div.style.height = `${height}px`; div.style.opacity = `${alpha}`; From 11423e43b9b66acec39a5bde98ea41a4a37b05d1 Mon Sep 17 00:00:00 2001 From: Mirko Pecora Date: Wed, 13 Nov 2024 16:37:05 +0100 Subject: [PATCH 2/4] fix: typo --- src/main-api/Inspector.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main-api/Inspector.ts b/src/main-api/Inspector.ts index 85d36156..95f3672e 100644 --- a/src/main-api/Inspector.ts +++ b/src/main-api/Inspector.ts @@ -491,7 +491,7 @@ export class Inspector { function animate() { setTimeout(() => { div.style.top = `${y - height * (mountY || mount)}px`; - div.style.left = `${x + (width - (mountX || mount))}px`; + div.style.left = `${x - width * (mountX || mount)}px`; div.style.width = `${width}px`; div.style.height = `${height}px`; div.style.opacity = `${alpha}`; From 653ede32cc07120fd0fe1ad50d3ca53f1ebde0a6 Mon Sep 17 00:00:00 2001 From: Mirko Pecora Date: Thu, 14 Nov 2024 12:30:19 +0100 Subject: [PATCH 3/4] fix: removed unnecessary mount prop --- src/main-api/Inspector.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/main-api/Inspector.ts b/src/main-api/Inspector.ts index 95f3672e..a2824db1 100644 --- a/src/main-api/Inspector.ts +++ b/src/main-api/Inspector.ts @@ -248,8 +248,8 @@ export class Inspector { createNode(node: CoreNode): CoreNode { const div = this.createDiv(node.id, node.props); - (div as any).node = node; - (node as any).div = div; + (div as HTMLElement & { node: CoreNode }).node = node; + (node as CoreNode & { div: HTMLElement }).div = div; node.on('inViewport', () => div.setAttribute('state', 'inViewport')); node.on('inBounds', () => div.setAttribute('state', 'inBounds')); @@ -261,8 +261,8 @@ export class Inspector { createTextNode(node: CoreNode): CoreTextNode { const div = this.createDiv(node.id, node.props); - (div as any).node = node; - (node as any).div = div; + (div as HTMLElement & { node: CoreNode }).node = node; + (node as CoreNode & { div: HTMLElement }).div = div; return this.createProxy(node, div) as CoreTextNode; } @@ -412,14 +412,14 @@ export class Inspector { if (typeof mappedStyleResponse === 'object') { let value = mappedStyleResponse.value; if (property === 'x') { - const mount = props.mountX || props.mount; + const mount = props.mountX; const width = props.width; if (mount) { value = `${parseInt(value) - width * mount}px`; } } else if (property === 'y') { - const mount = props.mountY || props.mount; + const mount = props.mountY; const height = props.height; if (mount) { @@ -482,7 +482,6 @@ export class Inspector { rotation = 0, scale = 1, color, - mount, mountX, mountY, } = props; @@ -490,8 +489,8 @@ export class Inspector { // ignoring loops and repeats for now, as that might be a bit too much for the inspector function animate() { setTimeout(() => { - div.style.top = `${y - height * (mountY || mount)}px`; - div.style.left = `${x - width * (mountX || mount)}px`; + div.style.top = `${y - height * mountY}px`; + div.style.left = `${x - width * mountX}px`; div.style.width = `${width}px`; div.style.height = `${height}px`; div.style.opacity = `${alpha}`; From fa88c9d4b2e28a05c4c647d3d5278016c2316ded Mon Sep 17 00:00:00 2001 From: Mirko Pecora Date: Thu, 14 Nov 2024 12:40:28 +0100 Subject: [PATCH 4/4] fix: z-index --- src/main-api/Inspector.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main-api/Inspector.ts b/src/main-api/Inspector.ts index a2824db1..3120f02f 100644 --- a/src/main-api/Inspector.ts +++ b/src/main-api/Inspector.ts @@ -62,7 +62,7 @@ const stylePropertyMap: { return { prop: 'height', value: `${h}px` }; }, - zIndex: () => 'zIndex', + zIndex: () => 'z-index', fontFamily: () => 'font-family', fontSize: () => 'font-size', fontStyle: () => 'font-style',