wip properties

pixijs · Feb 9, 2024 · eb1bd47 · eb1bd47
1 parent 68e4a0d
commit eb1bd47
Show file tree

Hide file tree

Showing 11 changed files with 452 additions and 60 deletions.
diff --git a/src/lib/src/components/properties/Properties.tsx b/src/lib/src/components/properties/Properties.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import { usePixiStore } from '@lib/src/pages';
+import React from 'react';
 import { SectionContainer, SectionHeader, Title, TitleGroup } from '../Container';
+import CollapsibleComponent from '../collapsible/Collapsible';
 import './Properties.css';
 import { NumberInput, NumberProps } from './number/Number';
 import { Slider, SliderProps } from './slider/Slider';
 import { SwitchProps, Switcher } from './switch/Switch';
-import { usePixiStore } from '@lib/src/pages';
-import { getPropertiesOfNode } from './getPropertiesOfNode';
 
 export interface PropertyProps {
   type:
@@ -64,43 +64,66 @@ const Property: React.FC<PropertyProps> = ({ type, propertyProps }) => {
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface PropertiesProps {}
 const PropertiesComponent: React.FC<PropertiesProps> = () => {
-  const selectedNodes = usePixiStore((state) => state.selectedNodes);
+  const selectedNodeId = usePixiStore((state) => state.selectedNodeId);
+  const currentValues = usePixiStore((state) => state.selectedNodeValues);
+  const propertyPanel = usePixiStore((state) => state.selectedNodeProps);
+  const bridge = usePixiStore((state) => state.bridge);
 
-  // for each selected node, get the properties that are common to all of them
-  const commonProperties = getPropertiesOfNode(selectedNodes.map((node) => node.type));
-
-  console.log('commonProperties', commonProperties);
-  console.log('selectedNodes', selectedNodes);
+  if (selectedNodeId === null) {
+    return null;
+  }
 
-  const [properties, setProperties] = useState([
-    { label: 'Alpha', type: 'range', value: 1, property: 'alpha' },
-    { label: 'Visible', type: 'boolean', value: true, property: 'visible' },
-    { label: 'Position', type: 'number', value: 100, property: 'position' },
-    // Add more properties as needed
-  ] as const);
+  console.log('render props');
 
   const handlePropertyChange = (property: string, newValue: any) => {
-    // @ts-expect-error - sdf
-    setProperties((prevProperties) =>
-      prevProperties.map((prop) => (prop.property === property ? { ...prop, value: newValue } : prop))
-    );
-    console.log('Property changed:', property, newValue);
+    bridge(`
+      window.__PIXI_DEVTOOL_WRAPPER__.properties.setValue('${property}', ${newValue})
+    `);
   };
 
+  const sections: Record<string, PropertyProps[]> = {};
+
+  // loop through the propertyPanel and create the sections
+  propertyPanel.values.forEach((prop) => {
+    if (!sections[prop.section]) {
+      sections[prop.section] = [];
+    }
+
+    sections[prop.section].push({
+      type: prop.type,
+      propertyProps: {
+        ...prop.propertyProps,
+        value: currentValues[prop.property],
+        onChange: (newValue: any) => handlePropertyChange(prop.property, newValue),
+      },
+      property: prop.property,
+    });
+  });
+
   return (
     <SectionContainer className="tree">
       <SectionHeader style={{ padding: '15px 0' }}>
         <TitleGroup>
           <Title>Properties</Title>
         </TitleGroup>
       </SectionHeader>
-      {properties.map(({ label, type, value, property }) => (
-        <Property
-          key={property}
-          propertyProps={{ label, value, onChange: (newValue: any) => handlePropertyChange(property, newValue) }}
-          property={property}
-          type={type}
-        />
+      {Object.keys(sections).map((section) => (
+        <React.Fragment key={section}>
+          <CollapsibleComponent title={section}>
+            <>
+              {sections[section].map((property) => (
+                <Property
+                  key={property.property}
+                  propertyProps={{
+                    ...property.propertyProps,
+                  }}
+                  property={property.property}
+                  type={property.type}
+                />
+              ))}
+            </>
+          </CollapsibleComponent>
+        </React.Fragment>
       ))}
     </SectionContainer>
   );

diff --git a/src/lib/src/components/tree/TreeViewComponent.tsx b/src/lib/src/components/tree/TreeViewComponent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import TreeView, { flattenTree } from 'react-accessible-treeview';
 import {
   FaFileImage as SpriteIcon,
@@ -9,16 +9,46 @@ import { SectionContainer, SectionHeader, Title, TitleGroup } from '../Container
 
 import './TreeViewComponent.css';
 import { usePixiStore } from '@lib/src/pages';
-import { PixiMetadata } from '@lib/src/detection/devtool';
+
+type FlattenTreeData = ReturnType<typeof flattenTree>;
+
+function findParents(flattenTreeData: FlattenTreeData, selectedNode: FlattenTreeData[0]) {
+  if (!selectedNode) return [];
+  const parents = [] as FlattenTreeData;
+  let currentParentId = selectedNode.parent;
+
+  while (currentParentId) {
+    const parent = flattenTreeData.find((node) => node.id === currentParentId);
+    if (!parent) break;
+
+    parents.push(parent);
+    currentParentId = parent.parent;
+  }
+
+  return parents;
+}
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface TreeViewComponentProps {}
 const TreeViewComponent: React.FC<TreeViewComponentProps> = () => {
+  const bridge = usePixiStore((state) => state.bridge);
   const sceneGraph = usePixiStore((state) => state.sceneGraph);
-  const setSelectedNodes = usePixiStore((state) => state.setSelectedNodes);
-  const flattenTreeData = React.useMemo(() => flattenTree(sceneGraph), [sceneGraph]);
-  console.log('rendering tree');
+  const flattenTreeData = React.useMemo(() => flattenTree(sceneGraph as any), [sceneGraph]);
+  const selectedNodeId = usePixiStore((state) => state.selectedNodeId);
+
+  // find the node in the flattenTreeData that matches the selectedNodeId
+  const selectedNode = flattenTreeData.find((node) => node.metadata!.uid === selectedNodeId);
+  const parents = findParents(flattenTreeData, selectedNode!);
 
+  // const [treeId, setTreeId] = useState<number[] | null>([
+  //   selectedNode!.id as number,
+  //   ...parents.map((node) => node.id as number),
+  // ]);
+  const [treeId, setTreeId] = useState<number[] | null>(
+    selectedNode ? [selectedNode.id as number, ...parents.map((node) => node.id as number)] : null
+  );
+
+  console.log('rendering tree', selectedNodeId, treeId);
   return (
     <SectionContainer className="tree">
       <SectionHeader>
@@ -31,19 +61,30 @@ const TreeViewComponent: React.FC<TreeViewComponentProps> = () => {
               data={flattenTreeData}
               aria-label="directory tree"
               clickAction="EXCLUSIVE_SELECT"
-              multiSelect
+              multiSelect={false}
+              defaultExpandedIds={treeId!}
+              defaultSelectedIds={treeId ? [treeId[0]] : []}
               nodeRenderer={({ element, isBranch, isExpanded, getNodeProps, level }) => (
                 <div {...getNodeProps()} style={{ paddingLeft: 20 * (level - 1) }}>
                   {isBranch ? <FolderIcon isOpen={isExpanded} /> : <FileIcon filename={element.name} />}
                   {element.name}
                 </div>
               )}
-              onSelect={(node)=> {
+              onSelect={(node) => {
                 const selectedNodeIds = node.treeState.selectedIds;
                 // loop through the flattenTreeData and find the nodes that are selected
                 const selectedNodes = flattenTreeData.filter((node) => selectedNodeIds.has(node.id));
-                const metadata = selectedNodes.map((node) => node.metadata as unknown as PixiMetadata);
-                setSelectedNodes(metadata);
+                bridge(
+                  `window.__PIXI_DEVTOOL_WRAPPER__.properties.setSelectedNodeIds(${JSON.stringify(
+                    selectedNodes.map((node) => node.metadata!.uid)[0]
+                  )})`
+                );
+
+                // get the first id from the selectedNodeId
+                const id = [...selectedNodeIds][0];
+                if(!treeId || treeId[0] !== id) {
+                  setTreeId([id as number]);
+                }
               }}
             />
           </div>

diff --git a/src/lib/src/detection/devtool.ts b/src/lib/src/detection/devtool.ts
@@ -1,6 +1,8 @@
 import type { Application, Container, Renderer } from 'pixi.js';
 import type { flattenTree } from 'react-accessible-treeview';
 import { PixiSceneObjectType } from './utils/getPixiType';
+import { properties } from './properties/properties';
+import { Prop } from './properties/propertyTypes';
 
 export interface Pixi {
   app: () => Application | undefined;
@@ -10,6 +12,7 @@ export interface Pixi {
   state: () => PixiState;
   pixi: () => typeof import('pixi.js');
   version: () => string;
+  properties: ReturnType<typeof properties>;
 }
 
 let pixiWrapper: Pixi | null = null;
@@ -47,9 +50,10 @@ export function getPixiWrapper(): Pixi {
         return getPixiState();
       },
       pixi: () => {
-        return window.__PIXI__
+        return window.__PIXI__;
       },
-      version: ()=> window.__PIXI__.VERSION
+      version: () => window.__PIXI__.VERSION,
+      properties: properties(),
     };
 
     window.__PIXI_DEVTOOL_WRAPPER__ = pixiWrapper;
@@ -64,6 +68,11 @@ export interface PixiMetadata {
   isStage?: boolean;
 }
 
+type ChildSceneGraph = Omit<Parameters<typeof flattenTree>[0], 'metadata' | 'children'> & {
+  metadata: PixiMetadata;
+  children: ChildSceneGraph[];
+};
+
 export interface PixiState {
   version: string;
   sceneStats: {
@@ -77,13 +86,14 @@ export interface PixiState {
     bitmapText: number;
     htmlText: number;
   };
-  sceneGraph: Parameters<typeof flattenTree>[0] & {metadata: PixiMetadata}
-  selectedNodes: PixiMetadata[];
-  // selectedNodeData: 
+  sceneGraph: ChildSceneGraph;
   renderingStats: {
     fps: number;
     ms: number;
   };
+  selectedNodeId: string | null;
+  selectedNodeValues: Record<string, any>;
+  selectedNodeProps: { values: Prop[]; keys: string[] };
 }
 
 let pixiState: PixiState | null = null;
@@ -114,9 +124,11 @@ function getPixiState(): PixiState {
         metadata: {
           type: 'Container',
           uid: 'root',
-        }
+        },
       },
-      selectedNodes: [],
+      selectedNodeId: null,
+      selectedNodeValues: {},
+      selectedNodeProps: { values: [], keys: [] },
     };
   }
 

diff --git a/src/lib/src/detection/index.ts b/src/lib/src/detection/index.ts
@@ -40,6 +40,8 @@ window.addEventListener('message', (event) => {
           });
         }
 
+        pixiWrapper.properties.updateSelectedNodes();
+
         window.postMessage({ method: MessageType.StateUpdate, data: JSON.stringify(pixiWrapper.state()) }, '*');
         return res;
       },
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,6 +40,8 @@ window.addEventListener('message', (event) => { @@
               });
             }
+            pixiWrapper.properties.updateSelectedNodes();
             window.postMessage({ method: MessageType.StateUpdate, data: JSON.stringify(pixiWrapper.state()) }, '*');
             return res;
           },
@@ Expand Down @@