SelectionInspector.ts 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811
  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. var copyButton = new Atomic.UIButton();
  66. copyButton.text = "Copy Settings";
  67. copyButton.onClick = () => {
  68. inspector.onComponentCopy(editType);
  69. return true;
  70. };
  71. var pasteButton = new Atomic.UIButton();
  72. pasteButton.text = "Paste Settings";
  73. pasteButton.onClick = () => {
  74. inspector.onComponentPaste(editType);
  75. return true;
  76. };
  77. this.attrLayout.addChild(deleteButton);
  78. this.attrLayout.addChild(copyButton);
  79. this.attrLayout.addChild(pasteButton);
  80. }
  81. }
  82. class SceneSection extends SelectionSection {
  83. constructor(editType: SerializableEditType) {
  84. super(editType);
  85. }
  86. }
  87. interface AttributeEditResourceChangedEvent {
  88. attrInfoEdit: AttributeInfoEdit;
  89. resource: Atomic.Resource;
  90. }
  91. class JSComponentSection extends ComponentSection {
  92. constructor(editType: SerializableEditType, inspector: SelectionInspector) {
  93. super(editType, inspector);
  94. this.hasDynamicAttr = true;
  95. this.subscribeToEvent(this, "AttributeEditResourceChanged", (ev) => this.handleAttributeEditResourceChanged(ev));
  96. }
  97. private handleAttributeEditResourceChanged(ev: AttributeEditResourceChangedEvent) {
  98. var jsc = <Atomic.JSComponent>this.editType.getFirstObject();
  99. if (!jsc)
  100. return;
  101. var attrInfos = jsc.getAttributes();
  102. this.updateDynamicAttrInfos(attrInfos);
  103. }
  104. }
  105. // Node Inspector + Component Inspectors
  106. class SelectionInspector extends ScriptWidget {
  107. component: Atomic.Component;
  108. constructor(sceneEditor: Editor.SceneEditor3D) {
  109. super();
  110. this.sceneEditor = sceneEditor;
  111. var mainLayout = this.mainLayout = new Atomic.UILayout();
  112. mainLayout.spacing = 4;
  113. var lp = new Atomic.UILayoutParams();
  114. lp.width = 304;
  115. mainLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
  116. mainLayout.layoutPosition = Atomic.UI_LAYOUT_POSITION_LEFT_TOP;
  117. mainLayout.layoutParams = lp;
  118. mainLayout.axis = Atomic.UI_AXIS_Y;
  119. this.addChild(mainLayout);
  120. var noticeLayout = this.multipleSelectNotice = new Atomic.UILayout();
  121. noticeLayout.axis = Atomic.UI_AXIS_Y;
  122. noticeLayout.layoutParams = lp;
  123. var noticeText = new Atomic.UITextField();
  124. noticeText.textAlign = Atomic.UI_TEXT_ALIGN_CENTER;
  125. noticeText.skinBg = "InspectorTextAttrName";
  126. noticeText.text = "Multiple Selection - Some components are hidden";
  127. noticeText.fontDescription = SelectionSection.fontDesc;
  128. noticeText.gravity = Atomic.UI_GRAVITY_LEFT_RIGHT;
  129. noticeText.layoutParams = lp;
  130. noticeLayout.addChild(noticeText);
  131. noticeLayout.visibility = Atomic.UI_WIDGET_VISIBILITY_GONE;
  132. mainLayout.addChild(noticeLayout);
  133. this.createComponentButton = new CreateComponentButton();
  134. mainLayout.addChild(this.createComponentButton);
  135. this.subscribeToEvent(sceneEditor.scene, "SceneEditStateChangesBegin", (data) => this.handleSceneEditStateChangesBeginEvent());
  136. this.subscribeToEvent("SceneEditStateChange", (data) => this.handleSceneEditStateChangeEvent(data));
  137. this.subscribeToEvent(sceneEditor.scene, "SceneEditStateChangesEnd", (data) => this.handleSceneEditStateChangesEndEvent());
  138. this.subscribeToEvent(sceneEditor.scene, "SceneEditNodeRemoved", (ev: Editor.SceneEditNodeRemovedEvent) => this.handleSceneEditNodeRemoved(ev));
  139. this.subscribeToEvent(sceneEditor.scene, "SceneEditComponentAddedRemoved", (ev) => this.handleSceneEditComponentAddedRemovedEvent(ev));
  140. this.subscribeToEvent(this.createComponentButton, "SelectionCreateComponent", (data) => this.handleSelectionCreateComponent(data));
  141. }
  142. pruneSections() {
  143. var remove: SelectionSection[] = [];
  144. for (var i in this.sections) {
  145. var section = this.sections[i];
  146. var editType = section.editType;
  147. if (editType.typeName == "Node") {
  148. continue;
  149. }
  150. if (editType.typeName == "Scene") {
  151. var gotone = false;
  152. for (var j in this.nodes) {
  153. if (this.nodes[j].typeName == "Scene") {
  154. gotone = true;
  155. break;
  156. }
  157. }
  158. if (gotone)
  159. continue;
  160. }
  161. if (!editType.nodes.length) {
  162. remove.push(section);
  163. }
  164. }
  165. if (remove.length) {
  166. for (var i in remove) {
  167. var section = remove[i];
  168. this.removeSection(section);
  169. }
  170. this.suppressSections();
  171. }
  172. }
  173. suppressSections() {
  174. this.multipleSelectNotice.visibility = Atomic.UI_WIDGET_VISIBILITY_GONE;
  175. for (var i in this.sections) {
  176. var section = this.sections[i];
  177. var editType = section.editType;
  178. if (editType.typeName == "Node" || editType.typeName == "Scene") {
  179. continue;
  180. }
  181. var suppressed = false;
  182. for (var j in this.nodes) {
  183. if (editType.nodes.indexOf(this.nodes[j]) == -1) {
  184. suppressed = true;
  185. break;
  186. }
  187. }
  188. if (suppressed)
  189. this.multipleSelectNotice.visibility = Atomic.UI_WIDGET_VISIBILITY_VISIBLE;
  190. section.suppress(suppressed);
  191. }
  192. }
  193. refresh() {
  194. Atomic.ui.blockChangedEvents = true;
  195. this.pruneSections();
  196. this.suppressSections();
  197. for (var i in this.sections) {
  198. this.sections[i].refresh();
  199. }
  200. if (this.nodeSection) {
  201. this.nodeSection.prefabWidget.updateSelection(this.nodes);
  202. }
  203. Atomic.ui.blockChangedEvents = false;
  204. }
  205. addSection(editType: SerializableEditType) {
  206. var section: SelectionSection;
  207. if (editType.typeName == "Node") {
  208. this.nodeSection = new NodeSection(editType);
  209. section = this.nodeSection;
  210. } else if (editType.typeName == "Scene") {
  211. section = new SceneSection(editType);
  212. } else if (editType.typeName == "JSComponent") {
  213. section = new JSComponentSection(editType, this);
  214. }
  215. else {
  216. section = new ComponentSection(editType, this);
  217. }
  218. section.value = SelectionInspector.sectionStates[editType.typeName] ? 1 : 0;
  219. this.mainLayout.removeChild(this.createComponentButton, false);
  220. this.mainLayout.removeChild(this.multipleSelectNotice, false);
  221. // sort it in alphabetically
  222. this.sections.push(section);
  223. this.sections.sort(function(a, b) {
  224. if (a.editType.typeName == "Node" && b.editType.typeName == "Scene")
  225. return -1;
  226. if (a.editType.typeName == "Scene" && b.editType.typeName == "Node")
  227. return 1;
  228. if (a.editType.typeName == "Node" || a.editType.typeName == "Scene")
  229. return -1;
  230. if (b.editType.typeName == "Node" || b.editType.typeName == "Scene")
  231. return 1;
  232. return a.editType.typeName.localeCompare(b.editType.typeName);
  233. });
  234. var idx = this.sections.indexOf(section);
  235. if (idx == 0) {
  236. if (this.sections.length == 1) {
  237. this.mainLayout.addChild(section);
  238. } else {
  239. this.mainLayout.addChildBefore(section, this.sections[1]);
  240. }
  241. }
  242. else if (idx == this.sections.length - 1) {
  243. this.mainLayout.addChild(section);
  244. }
  245. else {
  246. this.mainLayout.addChildAfter(section, this.sections[idx - 1]);
  247. }
  248. // move the create component button down
  249. this.mainLayout.addChild(this.multipleSelectNotice);
  250. this.mainLayout.addChild(this.createComponentButton);
  251. }
  252. removeSection(section: SelectionSection) {
  253. SelectionInspector.sectionStates[section.editType.typeName] = section.value ? true : false;
  254. var index = this.sections.indexOf(section);
  255. this.sections.splice(index, 1);
  256. this.mainLayout.removeChild(section);
  257. }
  258. removeSerializable(serial: Atomic.Serializable) {
  259. for (var i in this.sections) {
  260. var section = this.sections[i];
  261. var e = section.editType;
  262. var index = e.objects.indexOf(serial);
  263. if (index != -1) {
  264. e.objects.splice(index, 1);
  265. }
  266. if (serial.typeName == "Node") {
  267. index = e.nodes.indexOf(<Atomic.Node>serial);
  268. if (index != -1) {
  269. e.nodes.splice(index, 1);
  270. }
  271. }
  272. }
  273. }
  274. addSerializable(serial: Atomic.Serializable): SerializableEditType {
  275. var editType = this.getEditType(serial);
  276. // does it already exist?
  277. for (var i in this.sections) {
  278. var section = this.sections[i];
  279. var e = section.editType;
  280. if (e.compareTypes(editType, this.nodes.length > 1)) {
  281. e.addSerializable(serial);
  282. return e;
  283. }
  284. }
  285. this.addSection(editType);
  286. return editType;
  287. }
  288. getEditType(serial: Atomic.Serializable): SerializableEditType {
  289. var typeName = serial.typeName;
  290. if (SelectionInspector._editTypes[typeName]) {
  291. return new SelectionInspector._editTypes[typeName](serial);
  292. }
  293. return new SerializableEditType(serial);
  294. }
  295. addNode(node: Atomic.Node) {
  296. var index = this.nodes.indexOf(node);
  297. if (index == -1) {
  298. this.nodes.push(node);
  299. this.addSerializable(node);
  300. var components = node.getComponents();
  301. for (var i in components) {
  302. if (this.filterComponent(components[i]))
  303. continue;
  304. var editType = this.addSerializable(components[i]);
  305. editType.addNode(node);
  306. }
  307. this.refresh();
  308. }
  309. }
  310. removeNode(node: Atomic.Node) {
  311. var index = this.nodes.indexOf(node);
  312. if (index != -1) {
  313. this.nodes.splice(index, 1);
  314. this.removeSerializable(node);
  315. var components = node.getComponents();
  316. for (var i in components) {
  317. if (this.filterComponent(components[i]))
  318. continue;
  319. this.removeSerializable(components[i]);
  320. }
  321. this.refresh();
  322. }
  323. // save node section state
  324. if (!this.nodes.length && this.nodeSection)
  325. SelectionInspector.sectionStates["Node"] = this.nodeSection.value ? true : false;
  326. }
  327. handleSceneEditStateChangesBeginEvent() {
  328. this.stateChangesInProgress = true;
  329. }
  330. handleSceneEditNodeRemoved(ev: Editor.SceneEditNodeRemovedEvent) {
  331. this.removeNode(ev.node);
  332. }
  333. handleSceneEditComponentAddedRemovedEvent(ev: Editor.SceneEditComponentAddedRemovedEvent) {
  334. if (this.filterComponent(ev.component)) {
  335. // still refresh as may affect UI (for example PrefabComponents)
  336. this.refresh();
  337. return;
  338. }
  339. var editType;
  340. if (!ev.removed) {
  341. editType = this.addSerializable(ev.component);
  342. editType.addNode(ev.node);
  343. } else {
  344. for (var i in this.sections) {
  345. var section = this.sections[i];
  346. editType = section.editType;
  347. var index = editType.objects.indexOf(ev.component);
  348. if (index != -1) {
  349. editType.objects.splice(index, 1);
  350. index = editType.nodes.indexOf(ev.node);
  351. if (index != -1) {
  352. editType.nodes.splice(index, 1);
  353. }
  354. break;
  355. }
  356. }
  357. }
  358. this.refresh();
  359. }
  360. onComponentDelete(editType: SerializableEditType) {
  361. var removed: Atomic.Component[] = [];
  362. for (var i in editType.objects) {
  363. var c = <Atomic.Component>editType.objects[i];
  364. removed.push(c);
  365. }
  366. for (var i in removed) {
  367. var c = removed[i];
  368. var node = c.node;
  369. c.remove();
  370. this.removeSerializable(removed[i]);
  371. var index = editType.nodes.indexOf(node);
  372. if (index != -1) {
  373. editType.nodes.splice(index, 1);
  374. }
  375. }
  376. if (removed.length) {
  377. this.sceneEditor.scene.sendEvent("SceneEditEnd");
  378. this.refresh();
  379. }
  380. }
  381. onComponentCopy(editType: SerializableEditType) {
  382. var copy: Atomic.Component[] = [];
  383. for (var i in editType.objects) {
  384. var c = <Atomic.Component>editType.objects[i];
  385. copy.push(c);
  386. }
  387. for (var i in copy) {
  388. var c = copy[i];
  389. this.component = c;
  390. this.sceneEditor.scene.sendEvent("SceneEditComponentCopy", { component: this.component });
  391. this.refresh();
  392. }
  393. }
  394. onComponentPaste(editType: SerializableEditType) {
  395. var paste: Atomic.Component[] = [];
  396. for (var i in editType.objects) {
  397. var c = <Atomic.Component>editType.objects[i];
  398. paste.push(c);
  399. }
  400. for (var i in paste) {
  401. var c = paste[i];
  402. this.component = c;
  403. this.sceneEditor.scene.sendEvent("SceneEditComponentPaste", { component: this.component });
  404. this.refresh();
  405. }
  406. }
  407. handleSelectionCreateComponent(ev) {
  408. var valid = true;
  409. if (ev.componentTypeName != "JSComponent") {
  410. for (var i in this.nodes) {
  411. var node = this.nodes[i];
  412. if (node.getComponent(ev.componentTypeName, false)) {
  413. valid = false;
  414. break;
  415. }
  416. }
  417. }
  418. if (!valid) {
  419. EditorUI.showModalError("Component Create", "Unable to create component, a node with an existing " + ev.componentTypeName + " component is selected");
  420. return;
  421. }
  422. for (var i in this.nodes) {
  423. var node = this.nodes[i];
  424. var c = node.createComponent(ev.componentTypeName);
  425. if (!c) {
  426. console.log("ERROR: unable to create component ", ev.componentTypeName);
  427. return;
  428. }
  429. var editType = this.addSerializable(c);
  430. editType.addNode(node);
  431. for (var i in this.sections) {
  432. if (this.sections[i].editType == editType) {
  433. this.sections[i].value = 1;
  434. break;
  435. }
  436. }
  437. }
  438. this.refresh();
  439. }
  440. handleSceneEditStateChangeEvent(ev: Editor.SceneEditStateChangeEvent) {
  441. if (!this.stateChangesInProgress)
  442. return;
  443. if (this.stateChanges.indexOf(ev.serializable) == -1) {
  444. this.stateChanges.push(ev.serializable);
  445. }
  446. }
  447. getPrefabComponent(node: Atomic.Node): Atomic.PrefabComponent {
  448. if (node.getComponent("PrefabComponent"))
  449. return <Atomic.PrefabComponent>node.getComponent("PrefabComponent");
  450. if (node.parent)
  451. return this.getPrefabComponent(node.parent);
  452. return null;
  453. }
  454. filterComponent(component: Atomic.Component): boolean {
  455. if (component.typeName == "PrefabComponent") {
  456. return true;
  457. }
  458. return false;
  459. }
  460. handleSceneEditStateChangesEndEvent() {
  461. Atomic.ui.blockChangedEvents = true;
  462. var sections: SelectionSection[] = [];
  463. for (var i in this.stateChanges) {
  464. var serial = this.stateChanges[i];
  465. for (var j in this.sections) {
  466. var section = this.sections[j];
  467. if (sections.indexOf(section) != -1)
  468. continue;
  469. if (section.editType.objects.indexOf(serial) != -1) {
  470. sections.push(section);
  471. if (section.hasDynamicAttr) {
  472. var object = section.editType.getFirstObject();
  473. if (object) {
  474. var attrInfos = object.getAttributes();
  475. section.updateDynamicAttrInfos(attrInfos);
  476. }
  477. }
  478. section.refresh();
  479. }
  480. }
  481. }
  482. Atomic.ui.blockChangedEvents = false;
  483. this.stateChanges = [];
  484. this.stateChangesInProgress = false;
  485. }
  486. mainLayout: Atomic.UILayout;
  487. multipleSelectNotice: Atomic.UILayout;
  488. sceneEditor: Editor.SceneEditor3D;
  489. nodes: Atomic.Node[] = [];
  490. sections: SelectionSection[] = [];
  491. createComponentButton: CreateComponentButton;
  492. nodeSection: NodeSection;
  493. stateChangesInProgress: boolean = false;
  494. stateChanges: Atomic.Serializable[] = [];
  495. // ------------------------------------
  496. static registerEditType(typeName: string, type: typeof SerializableEditType) {
  497. SelectionInspector._editTypes[typeName] = type;
  498. }
  499. private static sectionStates: { [typeName: string]: boolean } = {};
  500. private static _editTypes: { [typeName: string]: typeof SerializableEditType } = {};
  501. private static Ctor = (() => {
  502. SelectionInspector.sectionStates["Node"] = true;
  503. })();
  504. }
  505. export = SelectionInspector;