Merge pull request #33 from NarraLeaf/dev_nomen

narraleaf-react-0.0.5
NarraLeaf · Oct 6, 2024 · 7fce33f · 7fce33f
2 parents 928b42a + 7c4f75c
commit 7fce33f
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 14 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.0.5] - 2024/10/06
+
+### Fixed
+
+- Image animation does not work correctly when using `yoffset` and `invertY
+
 ## [0.0.5-beta.1] - 2024/10/04
 
 ### Fixed

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "narraleaf-react",
-  "version": "0.0.5-beta.1",
+  "version": "0.0.5",
   "description": "A React visual novel player framework",
   "main": "./dist/main.js",
   "types": "./dist/index.d.ts",

diff --git a/src/game/nlcore/elements/transform/position.ts b/src/game/nlcore/elements/transform/position.ts
@@ -80,10 +80,10 @@ export class PositionUtils {
             return "auto";
         }
         if (offset === undefined || PositionUtils.isUnknown(offset)) {
-            return `${pos}`;
+            return `calc(${pos} + 0px)`;
         }
         const left = typeof pos === "number" ? `${pos}px` : pos;
-        return `calc(${left} + ${offset}px)`;
+        return `calc(${left} + (${offset}px))`;
     }
 
     static toCoord2D(pos: IPosition | D2Position): Coord2D {

diff --git a/src/game/nlcore/elements/transform/transform.ts b/src/game/nlcore/elements/transform/transform.ts
@@ -184,6 +184,8 @@ export class Transform<T extends TransformDefinitions.Types = TransformDefinitio
                         );
                         this.setControl(animation);
 
+                        gameState.logger.debug("Animating", this.propToCSS(gameState, image.state as any, overwrites));
+
                         if (options?.sync === false) {
                             animation.then(() => {
                                 Object.assign(current["style"], this.propToCSS(gameState, image.state as any, overwrites));

diff --git a/src/game/player/elements/image/Image.tsx b/src/game/player/elements/image/Image.tsx
@@ -131,15 +131,6 @@ export default function Image({
             {
                 type: GameImage.EventTypes["event:image.flushComponent"],
                 listener: image.events.on(GameImage.EventTypes["event:image.flushComponent"], async () => {
-                    // state.stage.update();
-                    // await new Promise<void>(resolve => {
-                    //     // It is hard to explain why this is needed, but it is needed
-                    //     // react does not flush between some microtasks
-                    //     // So we need to wait for the next microtask
-                    //     setTimeout(() => {
-                    //         resolve();
-                    //     }, 10);
-                    // });
                     return true;
                 })
             }
@@ -229,7 +220,6 @@ export default function Image({
             } : {})
         },
     };
-    state.logger.debug("image props", defaultProps, image.state, image.state.src);
 
     return (
         <Isolated className={"absolute overflow-hidden"}>
@@ -266,8 +256,9 @@ export default function Image({
                     <m.img
                         alt={"image"}
                         key={"last"}
-                        {...(defaultProps as any)}
+                        {...deepMerge<any>(defaultProps, {})}
                         onLoad={handleLoad}
+                        layout
                     />
                 )}
                 {(() => {