@stanko/kaplay-inspector 0.1.0 → 0.1.2

package/README.md

@@ -52,6 +52,12 @@ if (
 }
 ```
 
+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';
+```
+
 ### Options
 
 You can pass options object to the init method as a second parameter:
@@ -127,4 +133,3 @@ Same as with colors, be sure to have a higher specificity selector if inspector'
 * [ ] Filter/search
 * [ ] Persist search in URL or local storage
 * [ ] Collapse/Expand all button
-* [ ] Clean up `inspect-comps.tsx`

package/dist/components/boolean-comp.d.ts

@@ -0,0 +1,11 @@
+import type { GameObj } from "kaplay";
+type CheckboxCompProps = {
+    obj: GameObj;
+    propName: string;
+};
+export declare const useObjectBoolean: (obj: GameObj, propName: string) => {
+    checked: any;
+    onChange: (checked: boolean) => void;
+};
+export declare const BooleanComp: ({ obj, propName }: CheckboxCompProps) => import("preact").JSX.Element;
+export {};

package/dist/components/boolean-comp.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+export const useObjectBoolean = (obj, propName) => {
+    const [checked, setChecked] = useState(obj[propName]);
+    useEffect(() => {
+        setChecked(obj[propName]);
+    }, [obj[propName]]);
+    const onChange = (checked) => {
+        setChecked(checked);
+        obj[propName] = checked;
+    };
+    return {
+        checked,
+        onChange,
+    };
+};
+export const BooleanComp = ({ obj, propName }) => {
+    const id = `${propName}-${obj.id}`;
+    const { checked, onChange } = useObjectBoolean(obj, propName);
+    return (_jsxs("div", { class: "game-object__comps-row", children: [_jsx("label", { for: id, children: _jsx("b", { children: propName }) }), _jsx("div", { children: _jsx("input", { id: id, type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked) }) })] }));
+};

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/color-controls.d.ts

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

package/dist/components/color-controls.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
+import { cx } from "../lib/cx";
+const ColorSlider = ({ onChange, value, channel }) => {
+    const handleChange = (e) => {
+        const target = e.target;
+        onChange(channel, parseInt(target.value));
+    };
+    return (_jsx("input", { className: cx("color-controls__slider-input", `color-controls__slider-input--${channel}`), type: "range", min: "0", max: "255", value: value, onInput: handleChange }));
+};
+export const Color = ({ obj }) => {
+    const object = obj;
+    const { r, g, b } = object.color;
+    const [color, setColor] = useState({ r, g, b });
+    useEffect(() => {
+        setColor({ r, g, b });
+    }, [r, g, b]);
+    const updateColor = (channel, value) => {
+        const newColor = { ...color, [channel]: value };
+        setColor(newColor);
+        object.color[channel] = value;
+    };
+    return (_jsxs("div", { class: "color-controls", children: [_jsx("div", { class: "color-controls__swatch", style: { background: `rgb(${color.r} ${color.g} ${color.b})` } }), _jsxs("div", { children: [_jsx(ColorSlider, { value: color.r, onChange: updateColor, channel: "r" }), _jsx(ColorSlider, { value: color.g, onChange: updateColor, channel: "g" }), _jsx(ColorSlider, { value: color.b, onChange: updateColor, channel: "b" })] }), _jsxs("div", { children: ["rgb(", color.r, ", ", color.g, ", ", color.b, ")"] })] }));
+};

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

@@ -5,6 +5,7 @@ import { cx } from "../lib/cx";
 import { drawBoundingBox } from "../lib/draw-bbox";
 import { getObjectInfo } from "../lib/get-object-info";
 import { Breadcrumbs } from "./breadcrumbs";
+import { BooleanComp } from "./boolean-comp";
 export const GameObject = ({ obj, className = "", isExpanded: isExpandedExternal = false, isRenderRoot, setRenderRoot, shouldDrawInspect, k, }) => {
     const [isExpanded, setIsExpanded] = useState(isExpandedExternal);
     const updateControllers = useRef([]);
@@ -13,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(() => {
@@ -47,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: [_jsx("span", { class: "game-object__expand-icon", children: isExpanded ? _jsx(MinusIcon, {}) : _jsx(PlusIcon, {}) }), _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: [_jsxs("div", { class: "game-object__comps-row", children: [_jsx("label", { for: `paused-${obj.id}`, children: _jsx("b", { children: "paused" }) }), _jsx("div", { children: _jsx("input", { id: `paused-${obj.id}`, type: "checkbox", defaultChecked: obj.paused, onChange: () => (obj.paused = !obj.paused) }) })] }), _jsxs("div", { class: "game-object__comps-row", children: [_jsx("label", { for: `hidden-${obj.id}`, children: _jsx("b", { children: "hidden" }) }), _jsx("div", { children: _jsx("input", { id: `hidden-${obj.id}`, type: "checkbox", defaultChecked: obj.hidden, onChange: () => (obj.hidden = !obj.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/components/hold-button.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from "preact/jsx-runtime";
+export type HoldButtonProps = {
+    children?: JSX.Element | string | number;
+    className?: string;
+    onClickAndHold: () => void;
+    interval?: number;
+    startRepeatingDelay?: number;
+};
+export declare const HoldButton: ({ children, className, onClickAndHold, interval, startRepeatingDelay, }: HoldButtonProps) => JSX.Element;

package/dist/components/hold-button.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { useEffect, useRef, useState } from "preact/hooks";
+export const HoldButton = ({ children, className, onClickAndHold, interval = 50, startRepeatingDelay = 200, }) => {
+    const intervalRef = useRef();
+    const timeoutRef = useRef();
+    const [isMouseDown, setIsMouseDown] = useState(false);
+    useEffect(() => {
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            clearTimeout(timeoutRef.current);
+            clearInterval(intervalRef.current);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, []);
+    useEffect(() => {
+        clearTimeout(timeoutRef.current);
+        clearInterval(intervalRef.current);
+        if (isMouseDown) {
+            timeoutRef.current = setTimeout(() => {
+                intervalRef.current = setInterval(() => {
+                    onClickAndHold();
+                }, interval);
+            }, startRepeatingDelay);
+        }
+    }, [isMouseDown]);
+    const handleMouseDown = () => {
+        setIsMouseDown(true);
+    };
+    const handleMouseUp = () => {
+        setIsMouseDown(false);
+    };
+    return (_jsx("button", { className: className, onMouseDown: handleMouseDown, onClick: onClickAndHold, children: children }));
+};

package/dist/components/icons.d.ts

@@ -1,6 +1,10 @@
-export declare const PlusIcon: () => import("preact").JSX.Element;
-export declare const MinusIcon: () => import("preact").JSX.Element;
-export declare const ArrowUpIcon: () => import("preact").JSX.Element;
-export declare const ArrowDownIcon: () => import("preact").JSX.Element;
-export declare const ArrowLeftIcon: () => import("preact").JSX.Element;
-export declare const ArrowRightIcon: () => import("preact").JSX.Element;
+type IconProps = {
+    className?: string;
+};
+export declare const PlusIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const MinusIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowUpIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowDownIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowLeftIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export declare const ArrowRightIcon: ({ className }: IconProps) => import("preact").JSX.Element;
+export {};

package/dist/components/icons.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-export const PlusIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 8 4 V 12 M 4 8 H12" })] }) }));
+export const PlusIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 8 4 V 12 M 4 8 H12" })] }) }));
 };
-export const MinusIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 4 8 H 12" })] }) }));
+export const MinusIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsxs("g", { fill: "none", "stroke-width": "1.25", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: [_jsx("rect", { width: "14", height: "14", x: "1", y: "1", rx: "4" }), _jsx("path", { d: "M 4 8 H 12" })] }) }));
 };
-export const ArrowUpIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 10 L 8 6 L 13 10" }) }) }));
+export const ArrowUpIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 10 L 8 6 L 13 10" }) }) }));
 };
-export const ArrowDownIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 6 L 8 10 L 13 6" }) }) }));
+export const ArrowDownIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 3 6 L 8 10 L 13 6" }) }) }));
 };
-export const ArrowLeftIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 10 3 L 6 8 L 10 13" }) }) }));
+export const ArrowLeftIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 10 3 L 6 8 L 10 13" }) }) }));
 };
-export const ArrowRightIcon = () => {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 6 3 L 10 8 L 6 13" }) }) }));
+export const ArrowRightIcon = ({ className = "" }) => {
+    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className, children: _jsx("g", { fill: "none", stroke: "currentColor", "stroke-linejoin": "round", "stroke-linecap": "round", children: _jsx("path", { d: "M 6 3 L 10 8 L 6 13" }) }) }));
 };

package/dist/components/inspector.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useEffect, useState } from "preact/hooks";
 import { GameObject } from "./game-object";
+import { useObjectBoolean } from "./boolean-comp";
 const INTERVAL_OPTIONS = [
     { value: 100, label: "100ms" },
     { value: 250, label: "250ms" },
@@ -13,6 +14,7 @@ export const Inspector = ({ initUpdateTimeout = 250, isVisibleOnLoad = true, ini
     const [root, setRoot] = useState(k.getTreeRoot());
     const [renderIndex, setRenderIndex] = useState(0);
     const [isVisible, setIsVisible] = useState(isVisibleOnLoad);
+    const paused = useObjectBoolean(k.getTreeRoot(), "paused");
     // Force re-render every updateTimeout milliseconds
     useEffect(() => {
         const interval = setInterval(() => {
@@ -20,15 +22,15 @@ export const Inspector = ({ initUpdateTimeout = 250, isVisibleOnLoad = true, ini
         }, updateTimeout);
         return () => clearInterval(interval);
     }, [renderIndex, updateTimeout]);
-    const handlePauseClick = () => {
-        const root = k.getTreeRoot();
-        root.paused = !root.paused;
-    };
+    // const handlePauseClick = () => {
+    //   const root = k.getTreeRoot();
+    //   root.paused = !root.paused;
+    // };
     const toggleVisibility = () => {
         setIsVisible(!isVisible);
     };
     if (!isVisible) {
         return (_jsx("button", { class: "ki-btn k-inspector__show", onClick: toggleVisibility, children: "Show Inspector" }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "k-inspector__header", children: [_jsx("button", { class: "ki-btn", onClick: handlePauseClick, children: "Pause/Resume" }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] }), "\u2022", _jsxs("div", { class: "k-inspector__interval", children: ["Update:", INTERVAL_OPTIONS.map((option) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: "interval", value: option.value, checked: updateTimeout === option.value, onChange: () => setUpdateTimeout(option.value) }), option.label] }, option.value)))] }), "\u2022", _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: shouldDrawInspect, onChange: () => setShouldDrawInspect(!shouldDrawInspect) }), "Draw bbox on hover"] }), _jsx("button", { class: "ki-btn k-inspector__hide", onClick: toggleVisibility, children: "Hide" })] }), _jsx("div", { class: "k-inspector__objects", children: _jsx(GameObject, { k: k, className: "game-object--root", obj: root, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect, isExpanded: true, isRenderRoot: true }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "k-inspector__header", children: [_jsx("button", { class: "ki-btn", onClick: () => paused.onChange(!paused.checked), children: paused.checked ? "Resume Game" : "Pause Game" }), "\u2022", _jsxs("div", { children: [k.get("*", { recursive: true }).length, " objects"] }), "\u2022", _jsxs("div", { children: [Math.round(k.debug.fps()), " fps"] }), "\u2022", _jsxs("div", { class: "k-inspector__interval", children: ["Update:", INTERVAL_OPTIONS.map((option) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: "interval", value: option.value, checked: updateTimeout === option.value, onChange: () => setUpdateTimeout(option.value) }), option.label] }, option.value)))] }), "\u2022", _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: shouldDrawInspect, onChange: () => setShouldDrawInspect(!shouldDrawInspect) }), "Draw bbox on hover"] }), _jsx("button", { class: "ki-btn k-inspector__hide", onClick: toggleVisibility, children: "Hide" })] }), _jsx("div", { class: "k-inspector__objects", children: _jsx(GameObject, { k: k, className: "game-object--root", obj: root, setRenderRoot: setRoot, shouldDrawInspect: shouldDrawInspect, isExpanded: true, isRenderRoot: true }) })] }));
 };

package/dist/components/position-controls.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { roundToDecimal } from "../lib/round-to-decimal";
+import { HoldButton } from "./hold-button";
 import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, } from "./icons";
 export const PositionControls = ({ obj }) => {
     if (!obj.pos) {
         return null;
     }
-    return (_jsxs("div", { class: "pos-controls", children: [_jsx("button", { class: "ki-btn", onClick: () => (obj.pos.x -= 1), children: _jsx(ArrowLeftIcon, {}) }), _jsx("button", { class: "ki-btn", onClick: () => (obj.pos.x += 1), children: _jsx(ArrowRightIcon, {}) }), _jsxs("div", { class: "pos-controls__value", children: ["x: ", roundToDecimal(obj.pos.x, 2)] }), _jsxs("div", { class: "pos-controls__value", children: ["y: ", roundToDecimal(obj.pos.y, 2)] }), _jsx("button", { class: "ki-btn", onClick: () => (obj.pos.y -= 1), children: _jsx(ArrowUpIcon, {}) }), _jsx("button", { class: "ki-btn", onClick: () => (obj.pos.y += 1), children: _jsx(ArrowDownIcon, {}) })] }));
+    return (_jsxs("div", { class: "pos-controls", children: [_jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => (obj.pos.x -= 1), children: _jsx(ArrowLeftIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => (obj.pos.x += 1), children: _jsx(ArrowRightIcon, {}) }), _jsxs("div", { class: "pos-controls__value", children: ["x: ", roundToDecimal(obj.pos.x, 2)] }), _jsxs("div", { class: "pos-controls__value", children: ["y: ", roundToDecimal(obj.pos.y, 2)] }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => (obj.pos.y -= 1), children: _jsx(ArrowUpIcon, {}) }), _jsx(HoldButton, { className: "ki-btn", onClickAndHold: () => (obj.pos.y += 1), children: _jsx(ArrowDownIcon, {}) })] }));
 };

package/dist/components/sprite-controls.d.ts

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

package/dist/components/sprite-controls.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+export const SpriteControls = ({ obj }) => {
+    const object = obj;
+    const animation = object.getCurAnim();
+    return (_jsxs("div", { class: "sprite-controls", children: [_jsx("b", { children: object.sprite }), _jsxs("div", { children: ["frame: ", object.frame] }), animation && (_jsxs(_Fragment, { children: [_jsxs("div", { children: ["animation: ", animation.name] }), _jsxs("div", { children: ["animation frame: ", animation?.frameIndex] })] }))] }));
+};

package/dist/components/text-controls.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
+import { useEffect, useState } from "preact/hooks";
 export const TextControls = ({ obj }) => {
+    const [text, setText] = useState(obj.text);
+    useEffect(() => {
+        setText(obj.text);
+    }, [obj.text]);
     if (typeof obj.text !== "string") {
         return null;
     }
-    return (_jsx("div", { class: "text-controls", children: _jsx("input", { class: "text-controls__input", type: "text", placeholder: "Enter text", defaultValue: obj.text, onInput: (e) => {
-                obj.text = e.target.value;
-            } }) }));
+    const handleInput = (e) => {
+        obj.text = e.target.value;
+        setText(text);
+    };
+    return (_jsx("div", { class: "text-controls", children: _jsx("input", { class: "text-controls__input", type: "text", placeholder: "Enter text", value: text, onInput: handleInput }) }));
 };

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

@@ -2,11 +2,15 @@ import { jsx as _jsx } from "preact/jsx-runtime";
 import { stringify } from "./stringify";
 import { PositionControls } from "../components/position-controls";
 import { TextControls } from "../components/text-controls";
-import { Sprite } from "../components/sprite";
+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,
-    sprite: Sprite,
+    sprite: SpriteControls,
+    color: Color,
 };
 export const inspectComps = (obj) => {
     const object = obj;
@@ -30,6 +34,15 @@ export const inspectComps = (obj) => {
                 value: value ? value.replace(`${tag}: `, "") : "",
             });
         }
+        else {
+            data.push({
+                tag,
+                // Commented out on purpose
+                // For now, only the name of the component is shown,
+                // until I try it out and figure if it would be useful to display the full component state
+                // value: stringify(comp),
+            });
+        }
     }
     for (const [i, comp] of object._anonymousCompStates.entries()) {
         if (comp.inspect) {
@@ -46,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,17 +1,21 @@
+import { isGameObj } from "./is-game-obj";
 export const stringify = (obj, maxDepth = 1, currentDepth = 0) => {
-    if (typeof obj !== "object" || obj === null) {
-        return obj.toString();
+    if (typeof obj !== "object") {
+        return JSON.stringify(obj);
     }
     const lines = Object.entries(obj).map(([key, value]) => {
         if (typeof value === "function") {
             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);
@@ -326,14 +331,49 @@
     outline: none;
     border-color: var(--ki-primary);
   }
-}
 
-/* Breadcrumbs */
+  /* Color */
+
+  .color-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: fit-content;
+    min-width: 12rem;
+  }
+
+  .color-controls__swatch {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 8px;
+    border: 1px solid var(--ki-border-light);
+  }
+
+  .color-controls__slider {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .color-controls__slider-input--r {
+    accent-color: red;
+  }
+
+  .color-controls__slider-input--g {
+    accent-color: green;
+  }
 
-.breadcrumbs {
-  font-size: 0.75rem;
-  display: flex;
-  margin-bottom: 0.5rem;
-  gap: 0.5rem;
-  align-items: center;
+  .color-controls__slider-input--b {
+    accent-color: blue;
+  }
+
+  /* Breadcrumbs */
+
+  .breadcrumbs {
+    font-size: 0.75rem;
+    display: flex;
+    margin-bottom: 0.5rem;
+    gap: 0.5rem;
+    align-items: center;
+  }
 }

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.0",
+  "version": "0.1.2",
   "type": "module",
   "main": "./dist/init.js",
   "types": "./dist/init.d.ts",
@@ -21,7 +21,7 @@
     "prepublish": "npm run build-lib"
   },
   "peerDependencies": {
-    "kaplay": "^4000.0.0-alpha.20"
+    "kaplay": "^4000.0.0-alpha.24"
   },
   "dependencies": {
     "preact": "^10.28.0"

package/dist/components/sprite.d.ts

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

package/dist/components/sprite.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
-export const Sprite = ({ obj }) => {
-    const object = obj;
-    const animation = object.getCurAnim();
-    return (_jsxs("div", { class: "sprite", children: [_jsx("b", { children: object.sprite }), _jsxs("div", { children: ["frame: ", object.frame] }), animation && (_jsxs(_Fragment, { children: [_jsxs("div", { children: ["animation: ", animation.name] }), _jsxs("div", { children: ["animation frame: ", animation?.frameIndex] })] }))] }));
-};