Skip to content

Commit

Permalink
letting editor setup its initial inspector data
Browse files Browse the repository at this point in the history
  • Loading branch information
@kleber-swf
kleber-swf committed Sep 23, 2021
1 parent 079cf51 commit ffb9e12
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 102 deletions.
105 changes: 104 additions & 1 deletion src/core/editor.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ComponentTags } from 'component-tags';
import { EditorData } from 'data/editor-data';
import { InspectorData } from 'data/inspector-data';
import { PhaserMeta } from 'data/phaser-meta';
Expand All @@ -18,14 +19,116 @@ class EditorClass {

public init(clearPrefs: boolean) {
this.data = new EditorData();
this.inspectorData = new InspectorData();
this.inspectorData = this.createInspectorData();
this.meta = new PhaserMeta();

this.actions = new ActionHandler();
this.history = new History(this.data);
this.prefs = new Preferences(clearPrefs);
}

private createInspectorData() {
const data = new InspectorData();
data.addTypeEditors({
// basic types
string: ComponentTags.StringPropertyEditor,
text: ComponentTags.TextPropertyEditor,
number: ComponentTags.NumberPropertyEditor,
boolean: ComponentTags.BooleanPropertyEditor,

// PIXI/Phaser types
point: ComponentTags.PointPropertyEditor,
rect: ComponentTags.RectPropertyEditor,

// default
default: ComponentTags.StringPropertyEditor,
});

data.addInspectableProperties([
{ name: '__type', label: 'type', typeHint: 'string', data: { readonly: true } },
{ name: 'name', typeHint: 'string' },
{ name: 'position', typeHint: 'point' },
{ name: 'scale', typeHint: 'point', data: { step: 0.1 } },
{ name: 'pivot', typeHint: 'point' },
{ name: 'anchor', typeHint: 'point', data: { step: 0.1 } },
{ name: 'alpha', typeHint: 'number', data: { min: 0, max: 1, step: 0.1 } },
{ name: 'visible', typeHint: 'boolean' },
{ name: 'angle', typeHint: 'number', data: { readonly: true } },
{ name: '_bounds', label: 'bounds', typeHint: 'rect', data: { readonly: true } },

// Sprite
{ name: 'key', typeHint: 'string' },
{ name: 'frameName', label: 'frame', typeHint: 'string' },
{ name: 'blendMode', typeHint: 'number' },
{ name: 'tint', typeHint: 'number', data: { min: 0, max: 0xFFFFFF } },

// Text
{ name: 'text', typeHint: 'text', data: { rows: 3 } },
{ name: 'font', typeHint: 'string' },
{ name: 'fontSize', typeHint: 'number', data: { min: 0, step: 1 } },
{ name: 'fontStyle', typeHint: 'string' },
{ name: 'fontVariant', typeHint: 'string' },
{ name: 'fontWeight', typeHint: 'string' },
{ name: 'autoRound', typeHint: 'boolean' },
{ name: 'align', typeHint: 'string' },
{ name: 'wordWrap', typeHint: 'boolean' },
{ name: 'wordWrapWidth', typeHint: 'number', data: { min: 0, step: 1 } },
{ name: 'useAdvancedWordWrap', typeHint: 'boolean' },
{ name: 'padding', typeHint: 'point' },
// { name: 'textBounds', typeHint: 'rect' }, // TODO waiting for null checking on rect editor
{ name: 'boundsAlignH', typeHint: 'string' },
{ name: 'boundsAlignV', typeHint: 'string' },

]);

const basicProperties = {
title: '', properties: [
'__type', 'name', 'position', 'scale', 'pivot', 'anchor',
'alpha', 'visible', 'angle', '_bounds'
]
};

data.addObjectProperties('default', [basicProperties]);

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

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

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

data.addObjectProperties('Phaser.Text', [
basicProperties,
{ title: 'Sprite', properties: ['blendMode', 'tint'] },
{
title: 'Text',
properties: [
'text', 'font', 'fontSize', 'fontStyle', 'fontVariant', 'fontWeight', 'autoRound',
'divider',
'align', 'wordWrap', 'wordWrapWidth', 'useAdvancedWordWrap',
'divider',
'padding', /*'textBounds', */'boundsAlignH', 'boundsAlignV']
},
]);

data.addObjectProperties('Phaser.BitmapText', [
basicProperties,
{ title: 'Sprite', properties: ['tint'] },
{ title: 'Bitmap Text', properties: ['font', 'fontSize', 'align'] },
]);

return data;
}


public enable() {
this.actions.enable();
}
Expand Down
101 changes: 0 additions & 101 deletions src/editor.window.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,7 @@ export class EditorWindow {

private init() {
this._initialized = true;

Editor.init(this.config.clearPrefs);
this.setupInspectorData();

this.sceneView = new SceneView(this.game);
this.editorView = document.createElement(ComponentTags.EditorView) as EditorView;
Expand Down Expand Up @@ -68,105 +66,6 @@ export class EditorWindow {
if (this.onhide) this.onhide();
}

private setupInspectorData() {
Editor.inspectorData.addTypeEditors({
// basic types
string: ComponentTags.StringPropertyEditor,
text: ComponentTags.TextPropertyEditor,
number: ComponentTags.NumberPropertyEditor,
boolean: ComponentTags.BooleanPropertyEditor,

// PIXI/Phaser types
point: ComponentTags.PointPropertyEditor,
rect: ComponentTags.RectPropertyEditor,

// default
default: ComponentTags.StringPropertyEditor,
});

Editor.inspectorData.addInspectableProperties([
{ name: '__type', label: 'type', typeHint: 'string', data: { readonly: true } },
{ name: 'name', typeHint: 'string' },
{ name: 'position', typeHint: 'point' },
{ name: 'scale', typeHint: 'point', data: { step: 0.1 } },
{ name: 'pivot', typeHint: 'point' },
{ name: 'anchor', typeHint: 'point', data: { step: 0.1 } },
{ name: 'alpha', typeHint: 'number', data: { min: 0, max: 1, step: 0.1 } },
{ name: 'visible', typeHint: 'boolean' },
{ name: 'angle', typeHint: 'number', data: { readonly: true } },
{ name: '_bounds', label: 'bounds', typeHint: 'rect', data: { readonly: true } },

// Sprite
{ name: 'key', typeHint: 'string' },
{ name: 'frameName', label: 'frame', typeHint: 'string' },
{ name: 'blendMode', typeHint: 'number' },
{ name: 'tint', typeHint: 'number', data: { min: 0, max: 0xFFFFFF } },

// Text
{ name: 'text', typeHint: 'text', data: { rows: 3 } },
{ name: 'font', typeHint: 'string' },
{ name: 'fontSize', typeHint: 'number', data: { min: 0, step: 1 } },
{ name: 'fontStyle', typeHint: 'string' },
{ name: 'fontVariant', typeHint: 'string' },
{ name: 'fontWeight', typeHint: 'string' },
{ name: 'autoRound', typeHint: 'boolean' },
{ name: 'align', typeHint: 'string' },
{ name: 'wordWrap', typeHint: 'boolean' },
{ name: 'wordWrapWidth', typeHint: 'number', data: { min: 0, step: 1 } },
{ name: 'useAdvancedWordWrap', typeHint: 'boolean' },
{ name: 'padding', typeHint: 'point' },
// { name: 'textBounds', typeHint: 'rect' }, // TODO waiting for null checking on rect editor
{ name: 'boundsAlignH', typeHint: 'string' },
{ name: 'boundsAlignV', typeHint: 'string' },

]);

const basicProperties = {
title: '', properties: [
'__type', 'name', 'position', 'scale', 'pivot', 'anchor',
'alpha', 'visible', 'angle', '_bounds'
]
};

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

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

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

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

Editor.inspectorData.addObjectProperties('Phaser.Text', [
basicProperties,
{ title: 'Sprite', properties: ['blendMode', 'tint'] },
{
title: 'Text',
properties: [
'text', 'font', 'fontSize', 'fontStyle', 'fontVariant', 'fontWeight', 'autoRound',
'divider',
'align', 'wordWrap', 'wordWrapWidth', 'useAdvancedWordWrap',
'divider',
'padding', /*'textBounds', */'boundsAlignH', 'boundsAlignV']
},
]);

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

}

private setupActions(scene: SceneView) {
const { history, prefs } = Editor;
Editor.actions.add(
Expand Down

0 comments on commit ffb9e12

Please sign in to comment.