@stanko/kaplay-inspector 0.1.1 → 0.1.3

package/README.md

@@ -11,8 +11,9 @@ A dev tool for [Kaplay](https://kaplayjs.com/) which allows you to explore and i
 - Hover an object to draw it's area, anchor and bounding box
 - Inspect object's component and custom props
 - Log an object to console
-- Tweak position and text
-- Pause an object
+- Tweak position, text or color
+- Pause objects
+- Hide objects
 - Dark theme (is this a feature?)
 
 The layout is made with desktop in mind. That said, it is somewhat usable on phones.
@@ -52,7 +53,7 @@ if (
 }
 ```
 
-If typescript is complaining about importing CSS files, you probably need to add this to one of your `.d.ts` files.
+If typescript is complaining about importing CSS files, you probably need to add this to `declaration.d.ts` file in you project's root.
 
 ```ts
 declare module '*.scss';

package/dist/components/breadcrumbs.js

@@ -13,5 +13,15 @@ export const Breadcrumbs = ({ obj, setRenderRoot }) => {
         });
         parent = parent.parent;
     }
+    // TODO for destroyed objects always add root as a breadcrumb
+    // if (breadcrumbs.length === 0) {
+    //   const root = k.getTreeRoot()
+    //   breadcrumbs.push({
+    //     id: root.id,
+    //     tags: root.tags,
+    //     compsLabel: root.compsLabel,
+    //     object: root,
+    //   });
+    // }
     return (_jsxs("div", { class: "breadcrumbs", children: ["Back to", breadcrumbs.map((breadcrumb) => (_jsxs("button", { class: "ki-btn", onClick: () => setRenderRoot(breadcrumb.object), children: ["ID ", breadcrumb.id, ": ", breadcrumb.tags || breadcrumb.compsLabel] })))] }));
 };

package/dist/components/child-object.d.ts

@@ -0,0 +1,6 @@
+import type { GameObj } from "kaplay";
+export interface ChildObjectProps {
+    className?: string;
+    obj: GameObj;
+}
+export declare const ChildObject: ({ className, obj }: ChildObjectProps) => import("preact").JSX.Element;

package/dist/components/child-object.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+export const ChildObject = ({ className = "", obj }) => {
+    return (_jsxs("div", { class: className, children: ["game object", " ", _jsx("button", { class: "ki-btn", onClick: () => console.log(obj), children: "log" })] }));
+};

package/dist/components/game-object.d.ts

@@ -9,4 +9,4 @@ export interface GameObjectProps {
     shouldDrawInspect: boolean;
     k: KAPLAYCtxType;
 }
-export declare const GameObject: ({ obj, className, isExpanded: isExpandedExternal, isRenderRoot, setRenderRoot, shouldDrawInspect, k, }: GameObjectProps) => import("preact").JSX.Element;
+export declare const GameObject: ({ obj, className, isExpanded: isExpandedExternal, isRenderRoot, setRenderRoot, shouldDrawInspect, k, }: GameObjectProps) => import("preact").JSX.Element | null;

package/dist/components/game-object.js

@@ -14,24 +14,20 @@ export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal
     const isObjectDestroyed = !obj.exists() && !isRootObject;
     const showExpandTree = obj.children.length > 0;
     const hasChildren = obj.children.length > 0;
+    const hasSize = typeof obj.width === "number" && typeof obj.height === "number";
+    const isDrawController = compsData.length === 1 && compsData[0].tag === "draw";
     const isInspecting = isRenderRoot && obj.id !== 0;
     const cancelUpdateControllers = useCallback(() => {
         updateControllers.current.forEach((controller) => controller.cancel());
         updateControllers.current = [];
     }, []);
-    const drawInspect = useCallback((obj, isChild = false) => {
+    const drawInspect = useCallback((obj) => {
         if (!obj.hidden) {
-            const updateController = obj.onDraw(() => {
-                // Kaplay calls drawInspect on all of the children, no need to call it again
-                if (!isChild) {
-                    obj.drawInspect();
-                }
+            const updateController = k.onDraw(() => {
                 drawBoundingBox(obj, k);
+                obj.drawInspect();
             });
             updateControllers.current.push(updateController);
-            obj.children.forEach((child) => {
-                drawInspect(child, true);
-            });
         }
     }, []);
     useEffect(() => {
@@ -48,12 +44,15 @@ export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal
             drawInspect(obj);
         }
     };
-    const handleMouseLeave = () => {
-        cancelUpdateControllers();
-    };
+    // In Kaplay, onDraw and onUpdate are also game objects
+    // For now, I disabled displaying draw objects,
+    // mostly because inspector is adding them on hover, making the list jump around
+    if (isDrawController) {
+        return null;
+    }
     return (_jsxs("div", { class: cx("game-object", className, {
             "game-object--no-children": !hasChildren,
-        }), children: [isInspecting && _jsx(Breadcrumbs, { setRenderRoot: setRenderRoot, obj: obj }), _jsxs("div", { class: "game-object__content", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs("button", { class: cx("game-object__header", {
+        }), children: [isInspecting && _jsx(Breadcrumbs, { setRenderRoot: setRenderRoot, obj: obj }), _jsxs("div", { class: "game-object__content", onMouseEnter: handleMouseEnter, onMouseLeave: cancelUpdateControllers, children: [_jsxs("button", { class: cx("game-object__header", {
                             "game-object__header--expandable": showExpandTree,
-                        }), onClick: handleToggleClick, children: [isExpanded ? (_jsx(MinusIcon, { className: "game-object__expand-icon" })) : (_jsx(PlusIcon, { className: "game-object__expand-icon" })), _jsxs("div", { class: "game-object__id", children: ["ID ", obj.id, ":"] }), tags ? (_jsx("div", { class: "game-object__tags", children: isRootObject ? "Root" : tags })) : (_jsx("div", { class: "game-object__comp-names", children: compsLabel })), obj.children.length > 0 && _jsxs("div", { children: ["(", obj.children.length, ")"] }), isObjectDestroyed && (_jsx("div", { class: "game-object__destroyed", children: "DESTROYED" }))] }), _jsxs("div", { class: "game-object__buttons", children: [!isRenderRoot && (_jsx("button", { class: "ki-btn", onClick: () => setRenderRoot(obj), children: "inspect" })), _jsx("button", { class: "ki-btn ", onClick: () => console.log(obj), children: "log" })] }), isExpanded && (_jsx("div", { class: "game-object__comps-wrapper", children: _jsxs("div", { class: "game-object__comps", children: [_jsx(BooleanComp, { obj: obj, propName: "paused" }), _jsx(BooleanComp, { obj: obj, propName: "hidden" }), compsData.map((comp) => (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("div", { children: _jsx("b", { children: comp.tag }) }), _jsx("div", { children: comp.value })] }, comp.tag)))] }) }))] }), isExpanded && hasChildren && (_jsx("div", { class: "game-object__children", style: { display: isExpanded ? "block" : "none" }, children: obj.children.map((child) => (_jsx(GameObject, { k: k, obj: child, setRenderRoot: setRenderRoot, shouldDrawInspect: shouldDrawInspect }, child.id))) }))] }, obj.id));
+                        }), onClick: handleToggleClick, children: [isExpanded ? (_jsx(MinusIcon, { className: "game-object__expand-icon" })) : (_jsx(PlusIcon, { className: "game-object__expand-icon" })), _jsxs("div", { class: "game-object__id", children: ["ID ", obj.id, ":"] }), tags ? (_jsx("div", { class: "game-object__tags", children: isRootObject ? "Root" : tags })) : (_jsx("div", { class: "game-object__comp-names", children: compsLabel })), obj.children.length > 0 && _jsxs("div", { children: ["(", obj.children.length, ")"] }), isObjectDestroyed && (_jsx("div", { class: "game-object__destroyed", children: "DESTROYED" }))] }), _jsxs("div", { class: "game-object__buttons", children: [!isRenderRoot && (_jsx("button", { class: "ki-btn", onClick: () => setRenderRoot(obj), children: "inspect" })), _jsx("button", { class: "ki-btn ", onClick: () => console.log(obj), children: "log" })] }), isExpanded && (_jsx("div", { class: "game-object__comps-wrapper", children: _jsxs("div", { class: "game-object__comps", children: [_jsx(BooleanComp, { obj: obj, propName: "paused" }), _jsx(BooleanComp, { obj: obj, propName: "hidden" }), hasSize && (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("b", { children: "size" }), _jsxs("div", { children: [obj.width, " x ", obj.height] })] })), compsData.map((comp) => (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("b", { children: comp.tag }), _jsx("div", { children: comp.value })] }, comp.tag)))] }) }))] }), isExpanded && hasChildren && (_jsx("div", { class: "game-object__children", style: { display: isExpanded ? "block" : "none" }, children: obj.children.map((child) => (_jsx(GameObject, { k: k, obj: child, setRenderRoot: setRenderRoot, shouldDrawInspect: shouldDrawInspect }, child.id))) }))] }, obj.id));
 };

package/dist/lib/draw-bbox.js

@@ -1,35 +1,35 @@
+const anchorMap = {
+    topleft: [-1, -1],
+    top: [0, -1],
+    topright: [1, -1],
+    left: [-1, 0],
+    center: [0, 0],
+    right: [1, 0],
+    botleft: [-1, 1],
+    bot: [0, 1],
+    botright: [1, 1],
+};
 export const drawBoundingBox = (obj, k) => {
     if (obj.renderArea) {
-        const rect = obj.renderArea().bbox();
-        const anchor = obj.anchor || "topleft";
-        const offset = k.vec2(0);
-        if (typeof anchor === "string") {
-            if (anchor.includes("left")) {
-                offset.x = 0;
-            }
-            else if (anchor.includes("right")) {
-                offset.x = rect.width;
-            }
-            else {
-                offset.x = rect.width / 2;
-            }
-            if (anchor.includes("top")) {
-                offset.y = 0;
-            }
-            else if (anchor.includes("bot")) {
-                offset.y = rect.height;
-            }
-            else {
-                offset.y = rect.height / 2;
+        const localArea = obj.renderArea();
+        const transform = obj.transform.clone();
+        let anchor = obj.anchor || "topleft";
+        if (localArea && obj.anchor !== "topleft") {
+            if (typeof anchor === "string") {
+                const coords = anchorMap[anchor];
+                anchor = new k.Vec2(coords[0], coords[1]);
             }
+            const offset = anchor
+                .add(1, 1)
+                .scale(-0.5 * localArea.width, -0.5 * localArea.height);
+            transform.translateSelfV(offset);
         }
-        else {
-            offset.x = (anchor.x * rect.width + 1) / 2 + rect.width / 2;
-            offset.y = (anchor.y * rect.height + 1) / 2 + rect.height / 2;
-        }
-        rect.pos = rect.pos.sub(offset);
+        const worldArea = localArea.transform(transform);
+        const worldBBox = worldArea.bbox();
         k.drawRect({
-            ...rect,
+            pos: worldBBox.pos,
+            width: worldBBox.width,
+            height: worldBBox.height,
             fill: false,
             outline: {
                 width: 1,
@@ -38,4 +38,9 @@ export const drawBoundingBox = (obj, k) => {
             },
         });
     }
+    obj.children.forEach((child) => {
+        if (!child.hidden) {
+            drawBoundingBox(child, k);
+        }
+    });
 };

package/dist/lib/inspect-comps.js

@@ -4,6 +4,8 @@ import { PositionControls } from "../components/position-controls";
 import { TextControls } from "../components/text-controls";
 import { SpriteControls } from "../components/sprite-controls";
 import { Color } from "../components/color-controls";
+import { ChildObject } from "../components/child-object";
+import { isGameObj } from "./is-game-obj";
 const componentMap = {
     pos: PositionControls,
     text: TextControls,
@@ -57,6 +59,12 @@ export const inspectComps = (obj) => {
                     value: "function",
                 });
             }
+            else if (isGameObj(value)) {
+                data.push({
+                    tag: key,
+                    value: _jsx(ChildObject, { obj: value }),
+                });
+            }
             else if (typeof value === "object") {
                 data.push({
                     tag: key,

package/dist/lib/is-game-obj.d.ts

@@ -0,0 +1,2 @@
+import type { GameObj } from "kaplay";
+export declare const isGameObj: (obj: any) => obj is GameObj;

package/dist/lib/is-game-obj.js

@@ -0,0 +1,5 @@
+export const isGameObj = (obj) => {
+    // I selected isAncestorOf as a property to check for
+    // it is really unlikely that a non-game object would have this property
+    return typeof obj === "object" && obj !== null && "isAncestorOf" in obj;
+};

package/dist/lib/stringify.js

@@ -1,5 +1,6 @@
+import { isGameObj } from "./is-game-obj";
 export const stringify = (obj, maxDepth = 1, currentDepth = 0) => {
-    if (typeof obj !== "object" || obj === null) {
+    if (typeof obj !== "object") {
         return JSON.stringify(obj);
     }
     const lines = Object.entries(obj).map(([key, value]) => {
@@ -7,11 +8,14 @@ export const stringify = (obj, maxDepth = 1, currentDepth = 0) => {
             return `${key}: function`;
         }
         else if (typeof value === "object") {
+            if (isGameObj(value)) {
+                return `${key}: [GameObj]`;
+            }
             if (currentDepth < maxDepth) {
                 return `${key}: ${stringify(value, maxDepth, currentDepth + 1)}`;
             }
             else {
-                return `${key}: [Object object]`;
+                return `${key}: [Object]`;
             }
         }
         else {

package/dist/styles.css

@@ -197,6 +197,11 @@
     width: calc(100% + 0.25rem);
     border-radius: 4px;
     outline-offset: 0;
+    position: sticky;
+    /* TODO add sticky header and sticky side buttons */
+    /*z-index: 1;
+    top: 2.625rem;
+    background-color: var(--ki-bg);*/
 
     svg rect {
       fill: var(--ki-bg);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stanko/kaplay-inspector",
   "description": "A dev tool for Kaplay which allows you to explore and inspect the game object tree real time.",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "main": "./dist/init.js",
   "types": "./dist/init.d.ts",