Skip to content

Commit

Permalink
inspector data documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
kleber-swf committed Sep 20, 2021
1 parent c8ac759 commit ac46882
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 26 deletions.
64 changes: 47 additions & 17 deletions src/data/inspector-data.ts
Original file line number Diff line number Diff line change
@@ -1,52 +1,82 @@
export type InspectableTypes = 'string' | 'text' | 'number' | 'boolean' | 'point' | 'rect' | 'default';
export type InspectableType = 'string' | 'text' | 'number' | 'boolean' | 'point' | 'rect' | 'default';

export interface InspectorPropertyModel {
name: string;
typeHint: InspectableTypes;
typeHint: InspectableType;
data?: any;
label?: string;
}

export interface ObjectInspectorModel {
export interface ObjectPropertiesModel {
title: string;
properties: string[];
}


export class InspectorData {
private readonly editors: Partial<Record<InspectableTypes, string>> = {};
/** Editors for each type of data ({@link InspectableType}). */
private readonly typeEditors: Partial<Record<InspectableType, string>> = {};

public addEditors(editors: Partial<Record<InspectableTypes, string>>) {
Object.keys(editors).forEach(e => this.editors[e] = editors[e]);
/**
* Add editors for {@link InspectableType}.
* @param editors A map of editors for each {@link InspectableType}
*/
public addTypeEditors(editors: Partial<Record<InspectableType, string>>) {
Object.keys(editors).forEach(e => this.typeEditors[e] = editors[e]);
}

public getEditorFor(data: InspectorPropertyModel) {
return data.typeHint in this.editors
? this.editors[data.typeHint]
: this.editors.default;
/**
* Get the editor for the given {@link InspectableType}
* @param type The {@link InspectableType} to get the editor for
*/
public getEditorForType(type: InspectableType) {
return type in this.typeEditors
? this.typeEditors[type]
: this.typeEditors.default;
}

/** A register of properties from PIXI/Phaser objects that can be inspectable. */
private readonly inspectableProperties: Record<string, InspectorPropertyModel> = {};

/**
* Adds a list of inspectable properties from PIXI/Phaser objects.
* @param properties The list of properties to add.
*/
public addInspectableProperties(properties: InspectorPropertyModel[]) {
properties.forEach(prop => this.inspectableProperties[prop.name] = prop);
}

/**
* Gets the {@link InspectorPropertyModel} related to the given property name.
* @param name The name of the property to get the inspector for.
*/
public getInspectableProperty(name: string) {
if (name in this.inspectableProperties)
return this.inspectableProperties[name];
throw `Could not find inspectable editor for property ${name}`;
}

private readonly inspectorProperties: Record<string, ObjectInspectorModel[]> = {};

public addInspectorProperties(type: string, inspectors: ObjectInspectorModel[]) {
this.inspectorProperties[type] = inspectors;
/** Properties that should be inspected when an object of the related type is selected on the editor */
private readonly objectProperties: Record<string, ObjectPropertiesModel[]> = {};

/**
* Add properties to be shown in the Inspector when an object of the given type is selected on
* the editor.
* @param type The exact object type name to have the properties
* @param properties The properties to show in the Inspector
*/
public addObjectProperties(type: string, properties: ObjectPropertiesModel[]) {
this.objectProperties[type] = properties;
}

public getInspectorPropertiesForType(type: string) {
return type in this.inspectorProperties
? this.inspectorProperties[type]
: this.inspectorProperties.default;
/**
* Gets the properties that should be inspected for the given type.
* @param type The type to get the properties for
*/
public getObjectPropertiesForType(type: string) {
return type in this.objectProperties
? this.objectProperties[type]
: this.objectProperties.default;
}
}
4 changes: 2 additions & 2 deletions src/editor-view/properties/inspector/properties-inspector.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export class PropertiesInspector extends Inspector {
this.contentElement.style.visibility = 'visible';

const idata = Editor.inspectorData;
const propertyGroups = idata.getInspectorPropertiesForType(obj.__type)
const propertyGroups = idata.getObjectPropertiesForType(obj.__type)
propertyGroups.forEach(group => {
if (group.title) this.createTitleElement(group.title);
group.properties.forEach(prop => {
Expand All @@ -65,7 +65,7 @@ export class PropertiesInspector extends Inspector {

private createEditorForProperty(obj: PIXI.DisplayObject, prop: InspectorPropertyModel) {
if (!(prop.name in obj)) return;
const elementId = Editor.inspectorData.getEditorFor(prop);
const elementId = Editor.inspectorData.getEditorForType(prop.typeHint);
const editor = this.createPropertyEditor(prop, obj[prop.name], elementId);
this.editors[prop.name] = editor;
}
Expand Down
14 changes: 7 additions & 7 deletions src/editor.window.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export class EditorWindow {
}

private setupInspectorData() {
Editor.inspectorData.addEditors({
Editor.inspectorData.addTypeEditors({
// basic types
string: StringPropertyEditor.tagName,
text: TextPropertyEditor.tagName,
Expand Down Expand Up @@ -139,24 +139,24 @@ export class EditorWindow {
]
};

Editor.inspectorData.addInspectorProperties('default', [basicProperties]);
Editor.inspectorData.addObjectProperties('default', [basicProperties]);

Editor.inspectorData.addInspectorProperties('Phaser.Sprite', [
Editor.inspectorData.addObjectProperties('Phaser.Sprite', [
basicProperties,
{ title: 'Sprite', properties: ['key', 'frameName', 'blendMode', 'tint'] },
]);

Editor.inspectorData.addInspectorProperties('Phaser.Image', [
Editor.inspectorData.addObjectProperties('Phaser.Image', [
basicProperties,
{ title: 'Sprite', properties: ['key', 'frameName', 'blendMode', 'tint'] },
]);

Editor.inspectorData.addInspectorProperties('Phaser.Graphics', [
Editor.inspectorData.addObjectProperties('Phaser.Graphics', [
basicProperties,
{ title: 'Sprite', properties: ['blendMode', 'tint'] },
]);

Editor.inspectorData.addInspectorProperties('Phaser.Text', [
Editor.inspectorData.addObjectProperties('Phaser.Text', [
basicProperties,
{ title: 'Sprite', properties: ['blendMode', 'tint'] },
{
Expand All @@ -170,7 +170,7 @@ export class EditorWindow {
},
]);

Editor.inspectorData.addInspectorProperties('Phaser.BitmapText', [
Editor.inspectorData.addObjectProperties('Phaser.BitmapText', [
basicProperties,
{ title: 'Sprite', properties: ['tint'] },
{ title: 'Bitmap Text', properties: ['font', 'fontSize', 'align'] },
Expand Down

0 comments on commit ac46882

Please sign in to comment.