mirror of
https://github.com/tengge1/ShadowEditor.git
synced 2026-01-25 15:08:11 +00:00
325 lines
8.6 KiB
JavaScript
325 lines
8.6 KiB
JavaScript
import Boolean from './Boolean';
|
||
import Break from './Break';
|
||
import Button from './Button';
|
||
import Checkbox from './Checkbox';
|
||
import CloseButton from './CloseButton';
|
||
import Color from './Color';
|
||
import Container from './Container';
|
||
import Control from './Control';
|
||
import Div from './Div';
|
||
import HorizontalRule from './HorizontalRule';
|
||
import Html from './Html';
|
||
import IconButton from './IconButton';
|
||
import Input from './Input';
|
||
import Integer from './Integer';
|
||
import Label from './Label';
|
||
import Modal from './Modal';
|
||
import Number from './Number';
|
||
import Row from './Row';
|
||
import Select from './Select';
|
||
import Span from './Span';
|
||
import Text from './Text';
|
||
import TextArea from './TextArea';
|
||
import Texture from './Texture';
|
||
import Window from './Window';
|
||
import Image from './Image';
|
||
import ImageList from './ImageList';
|
||
import MessageBox from './MessageBox';
|
||
import Table from './Table';
|
||
import TableHead from './TableHead';
|
||
import TableBody from './TableBody';
|
||
import TableRow from './TableRow';
|
||
import TableData from './TableData';
|
||
import Alert from './Alert';
|
||
import Confirm from './Confirm';
|
||
import Prompt from './Prompt';
|
||
import SearchField from './SearchField';
|
||
import ToolbarFiller from './ToolbarFiller';
|
||
import Canvas from './Canvas';
|
||
import Timeline from './Timeline';
|
||
import LinkButton from './LinkButton';
|
||
|
||
/**
|
||
* UI类
|
||
* @author tengge / https://github.com/tengge1
|
||
*/
|
||
function UICls() {
|
||
this.xtypes = {};
|
||
this.objects = {};
|
||
}
|
||
|
||
/**
|
||
* 添加xtype
|
||
* @param {*} name xtype字符串
|
||
* @param {*} cls xtype对应类
|
||
*/
|
||
UICls.prototype.addXType = function (name, cls) {
|
||
if (this.xtypes[name] === undefined) {
|
||
this.xtypes[name] = cls;
|
||
} else {
|
||
console.warn(`UICls: xtype named ${name} has already been added.`);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 删除xtype
|
||
* @param {*} name xtype字符串
|
||
*/
|
||
UICls.prototype.removeXType = function (name) {
|
||
if (this.xtypes[name] !== undefined) {
|
||
delete this.xtypes[name];
|
||
} else {
|
||
console.warn(`UICls: xtype named ${name} is not defined.`);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 获取xtype
|
||
* @param {*} name xtype字符串
|
||
*/
|
||
UICls.prototype.getXType = function (name) {
|
||
if (this.xtypes[name] === undefined) {
|
||
console.warn(`UICls: xtype named ${name} is not defined.`);
|
||
}
|
||
return this.xtypes[name];
|
||
};
|
||
|
||
/**
|
||
* 添加一个对象到缓存
|
||
* @param {*} id 对象id
|
||
* @param {*} obj 对象
|
||
* @param {*} scope 对象作用域（默认为global）
|
||
*/
|
||
UICls.prototype.add = function (id, obj, scope = "global") {
|
||
var key = `${scope}:${id}`;
|
||
if (this.objects[key] !== undefined) {
|
||
console.warn(`UICls: object named ${id} has already been added.`);
|
||
}
|
||
this.objects[key] = obj;
|
||
};
|
||
|
||
/**
|
||
* 从缓存中移除一个对象
|
||
* @param {*} id 对象id
|
||
* @param {*} scope 对象作用域（默认为global）
|
||
*/
|
||
UICls.prototype.remove = function (id, scope = 'global') {
|
||
var key = `${scope}:${id}`;
|
||
if (this.objects[key] != undefined) {
|
||
delete this.objects[key];
|
||
} else {
|
||
console.warn(`UICls: object named ${id} is not defined.`);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 从缓存中获取一个对象
|
||
* @param {*} id 控件id
|
||
* @param {*} scope 对象作用域（默认为global）
|
||
*/
|
||
UICls.prototype.get = function (id, scope = 'global') {
|
||
var key = `${scope}:${id}`;
|
||
// 经常需要通过该方法判断是否已经注册某个元素，所以不能产生警告。
|
||
// if (this.objects[key] === undefined) {
|
||
// console.warn(`UICls: object named ${id} is not defined.`);
|
||
// }
|
||
return this.objects[key];
|
||
};
|
||
|
||
/**
|
||
* 通过json配置创建UI实例，并自动将包含id的控件添加到缓存
|
||
* @param {*} config xtype配置
|
||
*/
|
||
UICls.prototype.create = function (config) {
|
||
if (config instanceof Control) { // config是Control实例
|
||
return config;
|
||
}
|
||
|
||
// config是json配置
|
||
if (config == null || config.xtype == null) {
|
||
throw 'UICls: config is undefined.';
|
||
}
|
||
|
||
if (config.xtype === undefined) {
|
||
throw 'UICls: config.xtype is undefined.';
|
||
}
|
||
|
||
var cls = this.xtypes[config.xtype];
|
||
if (cls == null) {
|
||
throw `UICls: xtype named ${config.xtype} is undefined.`;
|
||
}
|
||
|
||
return new cls(config);
|
||
};
|
||
|
||
/**
|
||
* UICls唯一一个实例
|
||
*/
|
||
const UI = new UICls();
|
||
|
||
// 添加所有控件
|
||
Object.assign(UI, {
|
||
Boolean: Boolean,
|
||
Break: Break,
|
||
Button: Button,
|
||
Checkbox: Checkbox,
|
||
CloseButton: CloseButton,
|
||
Color: Color,
|
||
Container: Container,
|
||
Control: Control,
|
||
Div: Div,
|
||
HorizontalRule: HorizontalRule,
|
||
Html: Html,
|
||
IconButton: IconButton,
|
||
Input: Input,
|
||
Integer: Integer,
|
||
Label: Label,
|
||
Modal: Modal,
|
||
Number: Number,
|
||
Row: Row,
|
||
Select: Select,
|
||
Span: Span,
|
||
Text: Text,
|
||
TextArea: TextArea,
|
||
Texture: Texture,
|
||
Window: Window,
|
||
Image: Image,
|
||
ImageList: ImageList,
|
||
MessageBox: MessageBox,
|
||
Table: Table,
|
||
TableHead: TableHead,
|
||
TableBody: TableBody,
|
||
TableRow: TableRow,
|
||
TableData: TableData,
|
||
Alert: Alert,
|
||
Confirm: Confirm,
|
||
Prompt: Prompt,
|
||
SearchField: SearchField,
|
||
ToolbarFiller: ToolbarFiller,
|
||
Canvas: Canvas,
|
||
Timeline: Timeline,
|
||
LinkButton: LinkButton
|
||
});
|
||
|
||
// 添加所有控件的XType
|
||
UI.addXType('boolean', Boolean);
|
||
UI.addXType('br', Break);
|
||
UI.addXType('button', Button);
|
||
UI.addXType('checkbox', Checkbox);
|
||
UI.addXType('closebutton', CloseButton);
|
||
UI.addXType('color', Color);
|
||
UI.addXType('container', Container);
|
||
UI.addXType('control', Control);
|
||
UI.addXType('div', Div);
|
||
UI.addXType('hr', HorizontalRule);
|
||
UI.addXType('html', Html);
|
||
UI.addXType('iconbutton', IconButton);
|
||
UI.addXType('input', Input);
|
||
UI.addXType('int', Integer);
|
||
UI.addXType('label', Label);
|
||
UI.addXType('modal', Modal);
|
||
UI.addXType('number', Number);
|
||
UI.addXType('row', Row);
|
||
UI.addXType('select', Select);
|
||
UI.addXType('span', Span);
|
||
UI.addXType('text', Text);
|
||
UI.addXType('textarea', TextArea);
|
||
UI.addXType('texture', Texture);
|
||
UI.addXType('window', Window);
|
||
UI.addXType('image', Image);
|
||
UI.addXType('imagelist', ImageList);
|
||
UI.addXType('msg', MessageBox);
|
||
UI.addXType('table', Table);
|
||
UI.addXType('thead', TableHead);
|
||
UI.addXType('tbody', TableBody);
|
||
UI.addXType('tr', TableRow);
|
||
UI.addXType('td', TableData);
|
||
UI.addXType('alert', Alert);
|
||
UI.addXType('confirm', Confirm);
|
||
UI.addXType('prompt', Prompt);
|
||
UI.addXType('searchfield', SearchField);
|
||
UI.addXType('toolbarfiller', ToolbarFiller);
|
||
UI.addXType('canvas', Canvas);
|
||
UI.addXType('timeline', Timeline);
|
||
UI.addXType('linkbutton', LinkButton);
|
||
|
||
// 添加一些实用功能
|
||
Object.assign(UI, {
|
||
msg: function (text) { // 简洁消息提示框，5秒自动消息并销毁dom
|
||
var msg = UI.create({ xtype: 'msg' });
|
||
msg.render();
|
||
msg.show(text);
|
||
},
|
||
|
||
alert: function (title, content, callback) { // 消息框，点击确认/关闭窗口后自动销毁dom
|
||
var alert = UI.create({
|
||
xtype: 'alert',
|
||
title: title,
|
||
content: content,
|
||
callback: function (event) {
|
||
var result = true;
|
||
|
||
if (callback) {
|
||
result = callback(event);
|
||
}
|
||
|
||
if (result !== false) {
|
||
this.destroy(); // 销毁dom
|
||
}
|
||
|
||
return result; // 返回true关闭窗口，返回false不关闭窗口
|
||
}
|
||
});
|
||
alert.render();
|
||
alert.show();
|
||
},
|
||
|
||
confirm: function (title, content, callback) { // 询问对话框，点击确认/取消/关闭后自动销毁dom
|
||
var confirm = UI.create({
|
||
xtype: 'confirm',
|
||
title: title,
|
||
content: content,
|
||
callback: function (event, btn) {
|
||
var result = true;
|
||
|
||
if (callback) {
|
||
result = callback(event, btn);
|
||
}
|
||
|
||
if (result !== false) {
|
||
this.destroy(); // 销毁dom
|
||
}
|
||
|
||
return result; // 返回true关闭窗口，返回false不关闭窗口
|
||
}
|
||
});
|
||
confirm.render();
|
||
confirm.show();
|
||
},
|
||
|
||
prompt: function (title, label, value, callback) {
|
||
var prompt = UI.create({
|
||
xtype: 'prompt',
|
||
title: title,
|
||
label: label,
|
||
value: value,
|
||
callback: function (event, value) {
|
||
var result = true;
|
||
|
||
if (callback) {
|
||
result = callback(event, value);
|
||
}
|
||
|
||
if (result !== false) {
|
||
this.destroy(); // 销毁dom
|
||
}
|
||
|
||
return result; // 返回true关闭窗口，返回false不关闭窗口
|
||
}
|
||
});
|
||
prompt.render();
|
||
prompt.show();
|
||
}
|
||
});
|
||
|
||
export default UI; |