SelectionInspector.ts 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744
  1. //
  2. // Copyright (c) 2014-2016 THUNDERBEAST GAMES LLC
  3. //
  4. // Permission is hereby granted, free of charge, to any person obtaining a copy
  5. // of this software and associated documentation files (the "Software"), to deal
  6. // in the Software without restriction, including without limitation the rights
  7. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  8. // copies of the Software, and to permit persons to whom the Software is
  9. // furnished to do so, subject to the following conditions:
  10. //
  11. // The above copyright notice and this permission notice shall be included in
  12. // all copies or substantial portions of the Software.
  13. //
  14. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  19. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  20. // THE SOFTWARE.
  21. //
  22. import EditorUI = require("../../EditorUI");
  23. import CreateComponentButton = require("./CreateComponentButton");
  24. import ScriptWidget = require("ui/ScriptWidget");
  25. import EditorEvents = require("editor/EditorEvents");
  26. import SerializableEditType = require("./SerializableEditType");
  27. import SelectionSection = require("./SelectionSection");
  28. import SelectionPrefabWidget = require("./SelectionPrefabWidget");
  29. import AttributeInfoEdit = require("./AttributeInfoEdit");
  30. class NodeSection extends SelectionSection {
  31. prefabWidget: SelectionPrefabWidget;
  32. transformEdits: AttributeInfoEdit[] = [];
  33. updateDelta: number = 0.0;
  34. constructor(editType: SerializableEditType) {
  35. super(editType);
  36. this.prefabWidget = new SelectionPrefabWidget();
  37. this.attrLayout.addChild(this.prefabWidget);
  38. this.transformEdits.push(this.attrEdits["Position"]);
  39. this.transformEdits.push(this.attrEdits["Rotation"]);
  40. this.transformEdits.push(this.attrEdits["Scale"]);
  41. this.subscribeToEvent("Update", (ev) => this.handleUpdate(ev));
  42. }
  43. handleUpdate(ev) {
  44. this.updateDelta -= ev.timeStep;
  45. if (this.updateDelta < 0.0) {
  46. this.updateDelta = 0.1;
  47. Atomic.ui.blockChangedEvents = true;
  48. for (var i in this.transformEdits) {
  49. this.transformEdits[i].refresh();
  50. }
  51. Atomic.ui.blockChangedEvents = false;
  52. }
  53. }
  54. }
  55. class ComponentSection extends SelectionSection {
  56. constructor(editType: SerializableEditType, inspector: SelectionInspector) {
  57. super(editType);
  58. var deleteButton = new Atomic.UIButton();
  59. deleteButton.text = "Delete Component";
  60. deleteButton.fontDescription = SelectionSection.fontDesc;
  61. deleteButton.onClick = () => {
  62. inspector.onComponentDelete(editType);
  63. return true;
  64. };
  65. this.attrLayout.addChild(deleteButton);
  66. }
  67. }
  68. class SceneSection extends SelectionSection {
  69. constructor(editType: SerializableEditType) {
  70. super(editType);
  71. }
  72. }
  73. interface AttributeEditResourceChangedEvent {
  74. attrInfoEdit: AttributeInfoEdit;
  75. resource: Atomic.Resource;
  76. }
  77. class JSComponentSection extends ComponentSection {
  78. constructor(editType: SerializableEditType, inspector: SelectionInspector) {
  79. super(editType, inspector);
  80. this.hasDynamicAttr = true;
  81. this.subscribeToEvent(this, "AttributeEditResourceChanged", (ev) => this.handleAttributeEditResourceChanged(ev));
  82. }
  83. private handleAttributeEditResourceChanged(ev: AttributeEditResourceChangedEvent) {
  84. var jsc = <Atomic.JSComponent>this.editType.getFirstObject();
  85. if (!jsc)
  86. return;
  87. var attrInfos = jsc.getAttributes();
  88. this.updateDynamicAttrInfos(attrInfos);
  89. }
  90. }
  91. // Node Inspector + Component Inspectors
  92. class SelectionInspector extends ScriptWidget {
  93. constructor(sceneEditor: Editor.SceneEditor3D) {
  94. super();
  95. this.sceneEditor = sceneEditor;
  96. var mainLayout = this.mainLayout = new Atomic.UILayout();
  97. mainLayout.spacing = 4;
  98. var lp = new Atomic.UILayoutParams();
  99. lp.width = 304;
  100. mainLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
  101. mainLayout.layoutPosition = Atomic.UI_LAYOUT_POSITION_LEFT_TOP;
  102. mainLayout.layoutParams = lp;
  103. mainLayout.axis = Atomic.UI_AXIS_Y;
  104. this.addChild(mainLayout);
  105. var noticeLayout = this.multipleSelectNotice = new Atomic.UILayout();
  106. noticeLayout.axis = Atomic.UI_AXIS_Y;
  107. noticeLayout.layoutParams = lp;
  108. var noticeText = new Atomic.UITextField();
  109. noticeText.textAlign = Atomic.UI_TEXT_ALIGN_CENTER;
  110. noticeText.skinBg = "InspectorTextAttrName";
  111. noticeText.text = "Multiple Selection - Some components are hidden";
  112. noticeText.fontDescription = SelectionSection.fontDesc;
  113. noticeText.gravity = Atomic.UI_GRAVITY_LEFT_RIGHT;
  114. noticeText.layoutParams = lp;
  115. noticeLayout.addChild(noticeText);
  116. noticeLayout.visibility = Atomic.UI_WIDGET_VISIBILITY_GONE;
  117. mainLayout.addChild(noticeLayout);
  118. this.createComponentButton = new CreateComponentButton();
  119. mainLayout.addChild(this.createComponentButton);
  120. this.subscribeToEvent(sceneEditor.scene, "SceneEditStateChangesBegin", (data) => this.handleSceneEditStateChangesBeginEvent());
  121. this.subscribeToEvent("SceneEditStateChange", (data) => this.handleSceneEditStateChangeEvent(data));
  122. this.subscribeToEvent(sceneEditor.scene, "SceneEditStateChangesEnd", (data) => this.handleSceneEditStateChangesEndEvent());
  123. this.subscribeToEvent(sceneEditor.scene, "SceneEditNodeRemoved", (ev: Editor.SceneEditNodeRemovedEvent) => this.handleSceneEditNodeRemoved(ev));
  124. this.subscribeToEvent(sceneEditor.scene, "SceneEditComponentAddedRemoved", (ev) => this.handleSceneEditComponentAddedRemovedEvent(ev));
  125. this.subscribeToEvent(this.createComponentButton, "SelectionCreateComponent", (data) => this.handleSelectionCreateComponent(data));
  126. }
  127. pruneSections() {
  128. var remove: SelectionSection[] = [];
  129. for (var i in this.sections) {
  130. var section = this.sections[i];
  131. var editType = section.editType;
  132. if (editType.typeName == "Node") {
  133. continue;
  134. }
  135. if (editType.typeName == "Scene") {
  136. var gotone = false;
  137. for (var j in this.nodes) {
  138. if (this.nodes[j].typeName == "Scene") {
  139. gotone = true;
  140. break;
  141. }
  142. }
  143. if (gotone)
  144. continue;
  145. }
  146. if (!editType.nodes.length) {
  147. remove.push(section);
  148. }
  149. }
  150. if (remove.length) {
  151. for (var i in remove) {
  152. var section = remove[i];
  153. this.removeSection(section);
  154. }
  155. this.suppressSections();
  156. }
  157. }
  158. suppressSections() {
  159. this.multipleSelectNotice.visibility = Atomic.UI_WIDGET_VISIBILITY_GONE;
  160. for (var i in this.sections) {
  161. var section = this.sections[i];
  162. var editType = section.editType;
  163. if (editType.typeName == "Node" || editType.typeName == "Scene") {
  164. continue;
  165. }
  166. var suppressed = false;
  167. for (var j in this.nodes) {
  168. if (editType.nodes.indexOf(this.nodes[j]) == -1) {
  169. suppressed = true;
  170. break;
  171. }
  172. }
  173. if (suppressed)
  174. this.multipleSelectNotice.visibility = Atomic.UI_WIDGET_VISIBILITY_VISIBLE;
  175. section.suppress(suppressed);
  176. }
  177. }
  178. refresh() {
  179. Atomic.ui.blockChangedEvents = true;
  180. this.pruneSections();
  181. this.suppressSections();
  182. for (var i in this.sections) {
  183. this.sections[i].refresh();
  184. }
  185. if (this.nodeSection) {
  186. this.nodeSection.prefabWidget.updateSelection(this.nodes);
  187. }
  188. Atomic.ui.blockChangedEvents = false;
  189. }
  190. addSection(editType: SerializableEditType) {
  191. var section: SelectionSection;
  192. if (editType.typeName == "Node") {
  193. this.nodeSection = new NodeSection(editType);
  194. section = this.nodeSection;
  195. } else if (editType.typeName == "Scene") {
  196. section = new SceneSection(editType);
  197. } else if (editType.typeName == "JSComponent") {
  198. section = new JSComponentSection(editType, this);
  199. }
  200. else {
  201. section = new ComponentSection(editType, this);
  202. }
  203. section.value = SelectionInspector.sectionStates[editType.typeName] ? 1 : 0;
  204. this.mainLayout.removeChild(this.createComponentButton, false);
  205. this.mainLayout.removeChild(this.multipleSelectNotice, false);
  206. // sort it in alphabetically
  207. this.sections.push(section);
  208. this.sections.sort(function(a, b) {
  209. if (a.editType.typeName == "Node" && b.editType.typeName == "Scene")
  210. return -1;
  211. if (a.editType.typeName == "Scene" && b.editType.typeName == "Node")
  212. return 1;
  213. if (a.editType.typeName == "Node" || a.editType.typeName == "Scene")
  214. return -1;
  215. if (b.editType.typeName == "Node" || b.editType.typeName == "Scene")
  216. return 1;
  217. return a.editType.typeName.localeCompare(b.editType.typeName);
  218. });
  219. var idx = this.sections.indexOf(section);
  220. if (idx == 0) {
  221. if (this.sections.length == 1) {
  222. this.mainLayout.addChild(section);
  223. } else {
  224. this.mainLayout.addChildBefore(section, this.sections[1]);
  225. }
  226. }
  227. else if (idx == this.sections.length - 1) {
  228. this.mainLayout.addChild(section);
  229. }
  230. else {
  231. this.mainLayout.addChildAfter(section, this.sections[idx - 1]);
  232. }
  233. // move the create component button down
  234. this.mainLayout.addChild(this.multipleSelectNotice);
  235. this.mainLayout.addChild(this.createComponentButton);
  236. }
  237. removeSection(section: SelectionSection) {
  238. SelectionInspector.sectionStates[section.editType.typeName] = section.value ? true : false;
  239. var index = this.sections.indexOf(section);
  240. this.sections.splice(index, 1);
  241. this.mainLayout.removeChild(section);
  242. }
  243. removeSerializable(serial: Atomic.Serializable) {
  244. for (var i in this.sections) {
  245. var section = this.sections[i];
  246. var e = section.editType;
  247. var index = e.objects.indexOf(serial);
  248. if (index != -1) {
  249. e.objects.splice(index, 1);
  250. }
  251. if (serial.typeName == "Node") {
  252. index = e.nodes.indexOf(<Atomic.Node>serial);
  253. if (index != -1) {
  254. e.nodes.splice(index, 1);
  255. }
  256. }
  257. }
  258. }
  259. addSerializable(serial: Atomic.Serializable): SerializableEditType {
  260. var editType = this.getEditType(serial);
  261. // does it already exist?
  262. for (var i in this.sections) {
  263. var section = this.sections[i];
  264. var e = section.editType;
  265. if (e.compareTypes(editType, this.nodes.length > 1)) {
  266. e.addSerializable(serial);
  267. return e;
  268. }
  269. }
  270. this.addSection(editType);
  271. return editType;
  272. }
  273. getEditType(serial: Atomic.Serializable): SerializableEditType {
  274. var typeName = serial.typeName;
  275. if (SelectionInspector._editTypes[typeName]) {
  276. return new SelectionInspector._editTypes[typeName](serial);
  277. }
  278. return new SerializableEditType(serial);
  279. }
  280. addNode(node: Atomic.Node) {
  281. var index = this.nodes.indexOf(node);
  282. if (index == -1) {
  283. this.nodes.push(node);
  284. this.addSerializable(node);
  285. var components = node.getComponents();
  286. for (var i in components) {
  287. if (this.filterComponent(components[i]))
  288. continue;
  289. var editType = this.addSerializable(components[i]);
  290. editType.addNode(node);
  291. }
  292. this.refresh();
  293. }
  294. }
  295. removeNode(node: Atomic.Node) {
  296. var index = this.nodes.indexOf(node);
  297. if (index != -1) {
  298. this.nodes.splice(index, 1);
  299. this.removeSerializable(node);
  300. var components = node.getComponents();
  301. for (var i in components) {
  302. if (this.filterComponent(components[i]))
  303. continue;
  304. this.removeSerializable(components[i]);
  305. }
  306. this.refresh();
  307. }
  308. // save node section state
  309. if (!this.nodes.length && this.nodeSection)
  310. SelectionInspector.sectionStates["Node"] = this.nodeSection.value ? true : false;
  311. }
  312. handleSceneEditStateChangesBeginEvent() {
  313. this.stateChangesInProgress = true;
  314. }
  315. handleSceneEditNodeRemoved(ev: Editor.SceneEditNodeRemovedEvent) {
  316. this.removeNode(ev.node);
  317. }
  318. handleSceneEditComponentAddedRemovedEvent(ev: Editor.SceneEditComponentAddedRemovedEvent) {
  319. if (this.filterComponent(ev.component)) {
  320. // still refresh as may affect UI (for example PrefabComponents)
  321. this.refresh();
  322. return;
  323. }
  324. var editType;
  325. if (!ev.removed) {
  326. editType = this.addSerializable(ev.component);
  327. editType.addNode(ev.node);
  328. } else {
  329. for (var i in this.sections) {
  330. var section = this.sections[i];
  331. editType = section.editType;
  332. var index = editType.objects.indexOf(ev.component);
  333. if (index != -1) {
  334. editType.objects.splice(index, 1);
  335. index = editType.nodes.indexOf(ev.node);
  336. if (index != -1) {
  337. editType.nodes.splice(index, 1);
  338. }
  339. break;
  340. }
  341. }
  342. }
  343. this.refresh();
  344. }
  345. onComponentDelete(editType: SerializableEditType) {
  346. var removed: Atomic.Component[] = [];
  347. for (var i in editType.objects) {
  348. var c = <Atomic.Component>editType.objects[i];
  349. removed.push(c);
  350. }
  351. for (var i in removed) {
  352. var c = removed[i];
  353. var node = c.node;
  354. c.remove();
  355. this.removeSerializable(removed[i]);
  356. var index = editType.nodes.indexOf(node);
  357. if (index != -1) {
  358. editType.nodes.splice(index, 1);
  359. }
  360. }
  361. if (removed.length) {
  362. this.sceneEditor.scene.sendEvent("SceneEditEnd");
  363. this.refresh();
  364. }
  365. }
  366. handleSelectionCreateComponent(ev) {
  367. var valid = true;
  368. if (ev.componentTypeName != "JSComponent") {
  369. for (var i in this.nodes) {
  370. var node = this.nodes[i];
  371. if (node.getComponent(ev.componentTypeName, false)) {
  372. valid = false;
  373. break;
  374. }
  375. }
  376. }
  377. if (!valid) {
  378. EditorUI.showModalError("Component Create", "Unable to create component, a node with an existing " + ev.componentTypeName + " component is selected");
  379. return;
  380. }
  381. for (var i in this.nodes) {
  382. var node = this.nodes[i];
  383. var c = node.createComponent(ev.componentTypeName);
  384. if (!c) {
  385. console.log("ERROR: unable to create component ", ev.componentTypeName);
  386. return;
  387. }
  388. var editType = this.addSerializable(c);
  389. editType.addNode(node);
  390. for (var i in this.sections) {
  391. if (this.sections[i].editType == editType) {
  392. this.sections[i].value = 1;
  393. break;
  394. }
  395. }
  396. }
  397. this.refresh();
  398. }
  399. handleSceneEditStateChangeEvent(ev: Editor.SceneEditStateChangeEvent) {
  400. if (!this.stateChangesInProgress)
  401. return;
  402. if (this.stateChanges.indexOf(ev.serializable) == -1) {
  403. this.stateChanges.push(ev.serializable);
  404. }
  405. }
  406. getPrefabComponent(node: Atomic.Node): Atomic.PrefabComponent {
  407. if (node.getComponent("PrefabComponent"))
  408. return <Atomic.PrefabComponent>node.getComponent("PrefabComponent");
  409. if (node.parent)
  410. return this.getPrefabComponent(node.parent);
  411. return null;
  412. }
  413. filterComponent(component: Atomic.Component): boolean {
  414. if (component.typeName == "PrefabComponent") {
  415. return true;
  416. }
  417. return false;
  418. }
  419. handleSceneEditStateChangesEndEvent() {
  420. Atomic.ui.blockChangedEvents = true;
  421. var sections: SelectionSection[] = [];
  422. for (var i in this.stateChanges) {
  423. var serial = this.stateChanges[i];
  424. for (var j in this.sections) {
  425. var section = this.sections[j];
  426. if (sections.indexOf(section) != -1)
  427. continue;
  428. if (section.editType.objects.indexOf(serial) != -1) {
  429. sections.push(section);
  430. if (section.hasDynamicAttr) {
  431. var object = section.editType.getFirstObject();
  432. if (object) {
  433. var attrInfos = object.getAttributes();
  434. section.updateDynamicAttrInfos(attrInfos);
  435. }
  436. }
  437. section.refresh();
  438. }
  439. }
  440. }
  441. Atomic.ui.blockChangedEvents = false;
  442. this.stateChanges = [];
  443. this.stateChangesInProgress = false;
  444. }
  445. mainLayout: Atomic.UILayout;
  446. multipleSelectNotice: Atomic.UILayout;
  447. sceneEditor: Editor.SceneEditor3D;
  448. nodes: Atomic.Node[] = [];
  449. sections: SelectionSection[] = [];
  450. createComponentButton: CreateComponentButton;
  451. nodeSection: NodeSection;
  452. stateChangesInProgress: boolean = false;
  453. stateChanges: Atomic.Serializable[] = [];
  454. // ------------------------------------
  455. static registerEditType(typeName: string, type: typeof SerializableEditType) {
  456. SelectionInspector._editTypes[typeName] = type;
  457. }
  458. private static sectionStates: { [typeName: string]: boolean } = {};
  459. private static _editTypes: { [typeName: string]: typeof SerializableEditType } = {};
  460. private static Ctor = (() => {
  461. SelectionInspector.sectionStates["Node"] = true;
  462. })();
  463. }
  464. export = SelectionInspector;