xmp metadata

inspector/src/components/actionTabs/actionTabs.scss

@@ -299,6 +299,31 @@ $line-padding-left: 2px;
                     display: grid;
                     grid-template-columns: 1fr auto;
 
+                    &.indented {
+                        grid-template-columns: 100%;
+
+                        .link-value {
+                            grid-column: 1;                            
+                            text-align: start;
+                            margin-left: 20px;
+                            opacity: 0.6;
+                            max-width: unset;
+                        }
+
+                        .value {
+                            grid-column: 1;                            
+                            text-align: start;
+                            margin-left: 20px;
+                            opacity: 0.6;
+                            max-width: unset;
+                        }
+                    }         
+                    
+                    &.reduced-opacity {
+                        opacity: 0.6;
+                        padding-left: 25px;
+                    }
+
                     .label {
                         grid-column: 1;
                         display: flex;
@@ -313,7 +338,7 @@ $line-padding-left: 2px;
                         text-align: end;
                         opacity: 0.8;
                         margin:5px;
-                        margin-top: 6px;
+                        margin-top: 7px;
                         max-width: 140px;
                         text-decoration: underline;
                         cursor: pointer;
@@ -327,7 +352,7 @@ $line-padding-left: 2px;
                         text-align: end;
                         opacity: 0.8;
                         margin:5px;
-                        margin-top: 6px;
+                        margin-top: 7px;
                         max-width: 200px;
                         -webkit-user-select: text; 
                         -moz-user-select: text;   

inspector/src/components/actionTabs/lines/indentedTextLineComponent.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+interface IIndentedTextLineComponentProps {
+    value?: string;
+    color?: string;
+    underline?: boolean;
+    onLink?: () => void;
+    url?: string;
+    additionalClass?: string;
+}
+
+export class IndentedTextLineComponent extends React.Component<IIndentedTextLineComponentProps> {
+    constructor(props: IIndentedTextLineComponentProps) {
+        super(props);
+    }
+
+    onLink() {
+        if (this.props.url) {
+            window.open(this.props.url, '_blank');
+            return;
+        }
+        if (!this.props.onLink) {
+            return;
+        }
+
+        this.props.onLink();
+    }
+
+    renderContent() {
+        if (this.props.onLink || this.props.url) {
+            return (
+                <div className="link-value" title={this.props.value} onClick={() => this.onLink()}>
+                    {this.props.url ? "doc" : (this.props.value || "no name")}
+                </div>
+            )
+        }
+        return (
+            <div className="value" title={this.props.value} style={{ color: this.props.color ? this.props.color : "" }}>
+                {this.props.value || "no name"}
+            </div>
+        )
+    }
+
+    render() {
+        return (
+            <div className={"indented " + (this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : ""))}>
+                {this.renderContent()}
+            </div>
+        );
+    }
+}

inspector/src/components/actionTabs/lines/textLineComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 interface ITextLineComponentProps {
-    label: string;
+    label?: string;
     value?: string;
     color?: string;
     underline?: boolean;
@@ -51,7 +51,7 @@ export class TextLineComponent extends React.Component<ITextLineComponentProps>
         return (
             <div className={this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : "")}>
                 <div className="label">
-                    {this.props.label}
+                    {this.props.label ?? ""}
                 </div>
                 {this.renderContent()}
             </div>

inspector/src/components/actionTabs/tabs/propertyGrids/commonPropertyGridComponent.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+
+import { Observable } from "babylonjs/Misc/observable";
+
+import { PropertyChangedEvent } from "../../../propertyChangedEvent";
+import { LineContainerComponent } from "../../lineContainerComponent";
+import { LockObject } from "./lockObject";
+import { GlobalState } from "../../../globalState";
+import { TextLineComponent } from '../../lines/textLineComponent';
+import { IndentedTextLineComponent } from '../../lines/indentedtextLineComponent';
+
+interface ICommonPropertyGridComponentProps {
+    globalState: GlobalState;
+    host: { metadata: any};
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+}
+
+export class CommonPropertyGridComponent extends React.Component<ICommonPropertyGridComponentProps> {
+    constructor(props: ICommonPropertyGridComponentProps) {
+        super(props);
+    }
+
+    renderLevel(jsonObject: any) {
+        let components = [];
+
+        for (var data in jsonObject) {
+            let value = jsonObject[data];
+            let type = Object.prototype.toString.call(value);
+
+            switch(type) {
+                case '[object String]':
+                    components.push(
+                        <TextLineComponent key={data} label={data} ignoreValue={true}/>
+                    );
+                    components.push(
+                        <IndentedTextLineComponent key={data + value} value={value}/>
+                    );
+                    break;
+                case '[object Array]':
+                    components.push(
+                        <TextLineComponent key={data}  label={data} ignoreValue={true}/>
+                    );
+                    for (var entry of value) {
+                        components.push(
+                            <IndentedTextLineComponent key={data + entry} value={entry}/>
+                        );    
+                    }
+                    break;
+                case '[object Object]':
+                        components.push(
+                            <TextLineComponent key={data}  label={data} ignoreValue={true}/>
+                        );
+                        for (var entryKey in value) {
+                            components.push(
+                                <TextLineComponent key={data + entry} label={entryKey} value={value[entryKey]} additionalClass="reduced-opacity"/>
+                            );    
+                        }
+                        break;                    
+            }
+        }
+
+        return components;
+    }
+
+    render() {
+        if (!this.props.host.metadata) {
+            return null;
+        }
+
+        if (!this.props.host.metadata.xmp) {
+            return null;
+        }
+
+        return (
+            <div>
+                <LineContainerComponent globalState={this.props.globalState} title="XMP METADA">
+                    {
+                        this.renderLevel(this.props.host.metadata.xmp)                        
+                    }
+                </LineContainerComponent>
+            </div>
+        );
+    }
+}

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent.tsx

@@ -30,6 +30,7 @@ import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
 import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
 import { AnimationGridComponent } from '../animations/animationPropertyGridComponent';
 import { RenderingManager } from 'babylonjs/Rendering/renderingManager';
+import { CommonPropertyGridComponent } from '../commonPropertyGridComponent';
 
 interface IMeshPropertyGridComponentProps {
     globalState: GlobalState;
@@ -355,6 +356,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                         this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
                     }} />
                 </LineContainerComponent>
+                <CommonPropertyGridComponent host={mesh} lockObject={this.props.lockObject} globalState={this.props.globalState} />
                 <LineContainerComponent globalState={this.props.globalState} title="TRANSFORMS">
                     <Vector3LineComponent label="Position" target={mesh} propertyName="position" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/transformNodePropertyGridComponent.tsx

@@ -15,6 +15,7 @@ import { CustomPropertyGridComponent } from '../customPropertyGridComponent';
 import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
 import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
 import { AnimationGridComponent } from '../animations/animationPropertyGridComponent';
+import { CommonPropertyGridComponent } from '../commonPropertyGridComponent';
 
 interface ITransformNodePropertyGridComponentProps {
     globalState: GlobalState;
@@ -50,7 +51,8 @@ export class TransformNodePropertyGridComponent extends React.Component<ITransfo
                         transformNode.dispose();
                         this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
                     }} />              
-                </LineContainerComponent>
+                </LineContainerComponent>                
+                <CommonPropertyGridComponent host={transformNode} lockObject={this.props.lockObject} globalState={this.props.globalState} />
                 <LineContainerComponent globalState={this.props.globalState} title="TRANSFORMATIONS">
                     <Vector3LineComponent label="Position" target={transformNode} propertyName="position" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {