flowChartNode-elements.html

<link rel="import" href="../bower_components/iron-input/iron-input.html"><link rel="import" href="flowChartNode-behavior.html"><link rel="import" href="comment-element.html"><link rel="import" href="condition-element.html"><link rel="import" href="betterselect-element.html"><link rel="import" href="edit-element.html"><link rel="import" href="../bower_components/paper-material/paper-material.html"><dom-module id="flowchartnode-element"><template><style>
			:host {
				width: 280px;
				display: flex;
				flex-direction: column;
				margin: 10px;
				position: relative;
				height: 165px;
			}
			
			:host.selected paper-material.outer {
				background-color: var(--FlowChartNode-element-selected-color);
			}
			
			paper-material.outer {
				background-color: var(--FlowChartNode-element-background-color);
			}
			
			.direction {
				flex-basis: 40px;
			}
			
			wrapper {
				display: flex;
			}	
			
			.left, .right, .leftmiddle {
				width: 40px;
				padding: 10px 5px;
				background-color: var(--FlowChartNode-element-popup-target-color);
				position: relative;
				height: 113px;
			}
		
			.left {
				border-top-right-radius: 20px;
				border-bottom-right-radius: 20px;
				padding-right: 5px;
			}
		
			.right {
				border-top-left-radius: 20px;
				border-bottom-left-radius: 20px;
				padding-right: 5px;
			}
		
			.leftmiddle {
				border-radius: 20px;
				margin-left: 3px;
			}
			.center {
				margin: 10px;
				width: 99%; /* comments nehmen allen Platz ein der da ist, 100% macht in chrome nen Übertragsfehler */
			}
		
			.left > span, .leftmiddle > span {
			    position: absolute;
				transform: translate(0px, -12px) rotate(90deg);
			    transform-origin: left bottom 0;
				display: flex;
			}
		
			.leftmiddle > span {
				transform: translate(0px, -15px) rotate(90deg);
				display: flex;
			}
			
			.conditions, .conditions[hidden], .enterScripts, .enterScripts[hidden], .exitScripts, .exitScripts[hidden] {
				display: none;
				position: absolute;
				width: 800px;
				background-color: #a6fff7;
				z-index: 10;
				left: 25px;
				top: 30px;
				padding: 10px;
			}
			
			.conditions, .enterScripts, .exitScripts {
				display: block;
			}
		
			.right > span {
				position: absolute;
			    transform: translate(0px, 104px) rotate(270deg);
			    transform-origin: left top 0;
			}
		
			comments {
			}
		
			.editPanel {
				background-color: #A9D3FF;
				height: 400px;
				left: 0;
				position: absolute;
				width: 400px;
				z-index: 1;
			}
		
			.closeButton {
				position: absoulte;
				right: 0;
			}

			.xbutton {
				border-bottom: 1px solid blue;
				display: flex;
				justify-content: space-between;
				align-items: baseline;
			}

			.xbutton input {
				max-width: 27px; /* Platz für 3 stellige Zahlen */
			}

			.type {
			    max-width: 70px;
			    overflow: hidden;
			    text-overflow: ellipsis;
			}
		</style><paper-material elevation="{{selected}}" class="outer"><div class="xbutton">Type:&nbsp;<span class="type">{{type}}</span>&nbsp; ID:&nbsp;<input is="iron-input" bind-value="{{nodeId}}"> <span class="direction">{{direction}}</span> <button on-tap="removeSelf">x</button></div><wrapper><div class="left" on-tap="toggleConditions"><span>Conditions:&nbsp;<span>[[conditionCount]]</span></span></div><paper-material elevation="1" class="conditions" id="conditions" hidden=""><conditions><button on-tap="toggleConditions">close</button><button on-tap="addCondition">new</button></conditions></paper-material><div class="leftmiddle" on-tap="toggleEnterScripts"><span>Enter&nbsp;Scripts:&nbsp;<span>[[enterScripts.length]]</span></span></div><paper-material elevation="1" class="enterScripts" id="enterScripts" hidden=""><enterscripts><button on-tap="toggleEnterScripts">close</button><button on-tap="addEnterScript">new</button></enterscripts></paper-material><div class="center"><div>Comments: <button on-click="addComment">Add</button></div><comments></comments><div><button on-click="toggleEdit">edit</button></div></div><div class="right" on-tap="toggleExitScripts"><span>Exit&nbsp;Scripts:&nbsp;<span>[[exitScripts.length]]</span></span></div><paper-material elevation="1" class="exitScripts" id="exitScripts" hidden=""><exitscripts><button on-tap="toggleExitScripts">close</button><button on-tap="addExitScript">new</button></exitscripts></paper-material><div id="editpanel" class="editPanel" hidden=""><button class="closeButton" on-click="toggleEdit">close</button><template is="dom-repeat" items="{{editElements}}"><edit-element label="{{item.label}}" options="{{item.set}}" value="{{item.value}}" type="{{item.type}}" helptext="{{item.help}}"></edit-element></template></div></wrapper></paper-material></template></dom-module><dom-module id="questnode-element"><template><style>
			:host {
				--FlowChartNode-element-background-color: #96C5F7;
				--FlowChartNode-element-popup-target-color: #A9D3FF;
				--FlowChartNode-element-selected-color: #6782A7;
			}	
		</style><flowchartnode-element id="flowchartnode" node-id="{{nodeId}}" direction="{{direction}}" edit-elements="{{editElements}}"></flowchartnode-element></template></dom-module><dom-module id="objectivenode-element"><template><style>
			:host {
				--FlowChartNode-element-background-color: #96C5F7;
				--FlowChartNode-element-popup-target-color: #A9D3FF;
				--FlowChartNode-element-selected-color: #6782A7;
			}	
		</style><flowchartnode-element id="flowchartnode" node-id="{{nodeId}}" direction="{{direction}}" edit-elements="{{editElements}}"></flowchartnode-element></template></dom-module><dom-module id="globalquestnode-element"><template><style>
			:host {
				--FlowChartNode-element-background-color: #96C5F7;
				--FlowChartNode-element-popup-target-color: #A9D3FF;
				--FlowChartNode-element-selected-color: #6782A7;
			}	
		</style><flowchartnode-element id="flowchartnode" node-id="{{nodeId}}" direction="{{direction}}" edit-elements="{{editElements}}"></flowchartnode-element></template></dom-module><dom-module id="endstatenode-element"><template><style>
			:host {
				--FlowChartNode-element-background-color: #96C5F7;
				--FlowChartNode-element-popup-target-color: #A9D3FF;
				--FlowChartNode-element-selected-color: #6782A7;
			}	
		</style><flowchartnode-element id="flowchartnode" node-id="{{nodeId}}" direction="{{direction}}" edit-elements="{{editElements}}"></flowchartnode-element></template></dom-module><dom-module id="dialoguenode-element"><template><flowchartnode-element id="flowchartnode" node-id="{{nodeId}}" direction="{{direction}}" edit-elements="{{addEditControls(editElements)}}"></flowchartnode-element></template></dom-module><dom-module id="talknode-element"><template><style>
			:host {
				--FlowChartNode-element-background-color: #8FC0A9;
				--FlowChartNode-element-popup-target-color: #9FD8CB;
				--FlowChartNode-element-selected-color: #E2EB98;
			}	
		</style><dialoguenode-element id="dialoguenode" node-id="{{nodeId}}" direction="{{direction}}" edit-elements="{{editElements}}"></dialoguenode-element></template></dom-module><dom-module id="playerresponsenode-element"><template><style>
			:host {
				--FlowChartNode-element-background-color: #8FC0A9;
				--FlowChartNode-element-popup-target-color: #9FD8CB;
				--FlowChartNode-element-selected-color: #E2EB98;
			}	
		</style><dialoguenode-element id="dialoguenode" node-id="{{nodeId}}" direction="{{direction}}"></dialoguenode-element></template></dom-module><dom-module id="triggerconversationnode-element"><template><style>
			:host {
				--FlowChartNode-element-background-color: #8FC0A9;
				--FlowChartNode-element-popup-target-color: #9FD8CB;
				--FlowChartNode-element-selected-color: #E2EB98;
			}	
		</style><dialoguenode-element id="dialoguenode" node-id="{{nodeId}}" direction="{{direction}}" edit-elements="{{editElements}}"></dialoguenode-element></template></dom-module><dom-module id="banknode-element"><template><style>
			:host {
				--FlowChartNode-element-background-color: #8FC0A9;
				--FlowChartNode-element-popup-target-color: #9FD8CB;
				--FlowChartNode-element-selected-color: #E2EB98;
			}	
		</style><flowchartnode-element id="flowchartnode" node-id="{{nodeId}}" direction="{{direction}}" edit-elements="{{editElements}}"></flowchartnode-element><childnode-element id="childnode"></childnode-element></template></dom-module><dom-module id="scriptnode-element"><template><style>
			:host {
				--FlowChartNode-element-background-color: #8FC0A9;
				--FlowChartNode-element-popup-target-color: #9FD8CB;
				--FlowChartNode-element-selected-color: #E2EB98;
			}	
		</style><dialoguenode-element id="dialoguenode" node-id="{{nodeId}}" direction="{{direction}}"></dialoguenode-element></template></dom-module><script>
"use strict";
	var ChildNode = new Polymer({
		is: "childnode-element",
		behaviors: [ChildNodeBehavior],

		properties: {
			parent_: Object,
			logicalParent: Object,
			selected: {
				type: Number,
				value: 1
			}
		},

		activateChildLinks: function(node, nodesMap) {
			if(node.childNodeIds.length > 0) {
				for(var i = 0; i < node.childNodeIds.length; i++) {
					var link = new ChildLink();
					link.fromId(node.childNodeIds[i], node, nodesMap);
					this.links[link.endElement.id] = link;
				}
			}
		}
	});

	var FlowChartNode = new Polymer({
		is: "flowchartnode-element",
		behaviors: [FlowChartNodeBehavior],
		properties: {
			/* Umschließende Node */
			parent_: Object,

			/* Logischer Root Data Elements Punkt */
			logicalParent: Object,

			/* Paper material Elevation */
			selected: {
				type: Number,
				value: 1
			}
		},

		/** Create Links via Drag and Drop */
		createLink: function(to, orginalThis) {
			if (orginalThis === undefined) {
				orginalThis = this;
			}
			if (!(to.id in this.links)) {
				if(this.parent_.parent_.is == "questdata-element") {
					this.links[to.id] = new QuestLink(orginalThis, to);
				} else {
					this.links[to.id] = new DialogueLink(orginalThis, to);
				}
				// orginalen wrapper finden, 
				var parentElement;
				if(this.parentElement.id == this.type + this.nodeId) {
					// 1 level
					parentElement = this.parentElement;
				} else {
					// 2 level
					parentElement = this.parentElement.parentElement;
				}
				this.logicalParent.appendChild(this.links[to.id]);
			}
		},

		activateLinks: function(nodesMap) { // linkXML in echte links überführen
			if (this.linkXML.hasChildNodes()) {
				var node;
				for (var x = 0; x < this.linkXML.childNodes.length; x++) {
					node = this.linkXML.childNodes[x];
					if (node.nodeName == "FlowChartLink") {
						var link;
						switch(this.type) {
							case "BankNode":
							case "TalkNode":
							case "PlayerResponseNode":
							case "TriggerConversationNode":
							case "ScriptNode": link = new DialogueLink();
									link.fromXML(node, nodesMap);
									break;
							case "QuestNode":
							case "ObjectiveNode":
							case "GlobalQuestNode":
							case "EndStateNode":
									link = new QuestLink();
									link.fromXML(node, nodesMap);
									break;
						}
						this.links[link.endElement.id] = link;
					}
				}
			}
		},

		addCondition: function() {

		},

		addEnterScript: function() {
			var scriptElement = new ScriptElement();
			scriptElement.fullFunction = PoeQuestEditor.Scripts.get("Int32 GetPlayerMoney()"); // beliebiger Platzhalter
			this.push("enterScripts", scriptElement);
			Polymer.dom(this.$$("enterScripts")).appendChild(scriptElement);
			scriptElement.show();	
		},

		addExitScript: function() {
			var scriptElement = new ScriptElement();
			scriptElement.fullFunction = PoeQuestEditor.Scripts.get("Int32 GetPlayerMoney()"); // beliebiger Platzhalter
			this.push("exitScripts", scriptElement);
			Polymer.dom(this.$$("exitScripts")).appendChild(scriptElement);
			scriptElement.show();	
		},

		removeSelf: function() {
			// orginalen wrapper finden, 
			var parentElement;
			if(this.parentElement.id == this.type + this.nodeId) {
				// 1 level
				parentElement = this.parentElement;
			} else {
				// 2 level
				parentElement = this.parentElement.parentElement;
			}
			this.removeLinkTo(parentElement);	
			Polymer.dom(parentElement.parentElement).removeChild(parentElement);
			this.logicalParent.node.parentElement.removeNode(parentElement);
		},

		removeLinkTo: function(toElement) {
			var parent_;
			Object.keys(this.links).forEach(function(link) {	
				if(this.links[link].startElement == toElement) {
					// ausgehender link auf das gegebene ziel -> entfernen
					var l = this.links[link];
					delete this.links[link];
					this.logicalParent.node.removeChild(l); // TODO find out why node is necesarry
				}
			}, this);
			// eingehender link wird nicht von der node selbst verwaltet
			this.logicalParent.node.parentElement.removeAllIncommingLinks(toElement);
		}
	});

	var QuestNode = new Polymer({
		is: "questnode-element",
		behaviors: [UIBehavior],
		
		properties: {
			endStates: {
				type: Array,
				value: function() { return []; }
			},
			experienceType: {
				type: Object, // String
				value: function() {
					return {label: "Experience Type", value: PoeQuestEditor.ExperienceType[0], set: PoeQuestEditor.ExperienceType, type: 'select', help: 'Used to weight how much total experience will be handed out when objectives complete.'};
				}
			},
			experienceLevel: {
				type: Object, // Number
				value: function() {
					return {label: "Experience Level", value: 0, type: 'input', help: 'The average character level for this quest. This determines what experience pool this quest will award experience from.'};
				}
			},

			description: String, // female gibt es einfach nicht

			type: {
				value: 'QuestNode'
			},

			editElements: {
				type: Array,
				value: function() { return []; }
			}
		},
		
		factoryImpl: function(parent_) {
			this.parent_ = parent_;
			this.links = this.$.flowchartnode.links;
			this.$.flowchartnode.type = this.type;
			this.$.flowchartnode.parent_ = this;
			this.push("editElements", this.experienceType);
			this.push("editElements", this.experienceLevel);
		},

		attached: function() {
			this.$.flowchartnode.logicalParent = this.parent_.logicalParent;
		}, 
		
		createLink: function(to) {
			this.$.flowchartnode.createLink(to, this);
		},

		setText: function(text, femaleText, textType, id) {
			if(textType == "title") {
				this.defaultText = text;
				this.femaleText = femaleText;
			}
			if(textType == "description") {
				this.description = text;
			}
			if(textType == "endState") {
				Object.keys(this.endStates).forEach(function(endstate) { 
					if(this.endStates[endstate].id == id) { this.endStates[endstate].text = text; }
				}, this);
			}
		},
		
		fromXML: function(xml) {
			this.nodeId = this.$.flowchartnode.fromXML(xml);
			if (xml.hasChildNodes()) {
				var node;
				for (var x = 0; x < xml.childNodes.length; x++) {
					node = xml.childNodes[x];
					if (node.nodeName == "IsTempText") {} // ignore
					if (node.nodeName == "LinkEvaluation") {} // ignore
					if (node.nodeName == "EndStates") {
						if(node.hasChildNodes()) {
							var state;
							for(var i = 0; i < node.childNodes.length; i++) {
								state = node.childNodes[i];
								if(state.hasChildNodes()) {
									var endStateId = parseInt(state.childNodes[0].textContent);
									var displayName = "";
									var packageId;
									if(state.childNodes[1].nodeName == "DisplayName") {
										displayName = state.childNodes[1].textContent;
										packageId = state.childNodes[2].textContent;
									} else {
										 packageId = state.childNodes[1].textContent;
									}
									this.endStates.push({id: endStateId, 'displayName': displayName, 'packageId': packageId});
								}
							}
						}
					}
					if (node.nodeName == "AlternateDescriptionIDs") {
						// Dont care, all empty, not true in 3.04
						if(node.hasChildNodes()) {
							for(var i = 0; i < nodes.childNodes.length; i++) {
								this.alternateDescriptionIds.push(node.childNodes[i].textContent);
							}
						}
					}
					if (node.nodeName == "ExperienceType") {
						this.experienceType.value = node.textContent;
					}
					if (node.nodeName == "ExperienceLevel") {
						this.experienceLevel.value = node.textContent;
					}
				}
			}
		},

		toXML: function() {
			var xml = '<IsTempText>false</IsTempText>';
			if(PoeQuestEditor.gameVersion > 1.4) {
				xml += '<LinkEvaluation>FirstLinkThatPasses</LinkEvaluation>';
			}
			xml += '<EndStates>';
			for(var i = 0; i < this.endStates.length; i++) {
				xml += '<QuestEndState>';
				xml += '<EndStateID>' + this.endStates[i].id + '</EndStateID>';
				xml += '<DisplayName>' + this.endStates[i].displayName + '</DisplayName>';
				xml += '<PackageID>' + this.endStates[i].packageId + '</PackageID>';
				xml += '</QuestEndState>';
			}
			xml += '</EndStates>';
			if(PoeQuestEditor.gameVersion > 1.4) {
				xml += '<AlternateDescriptionIDs />';
			}
			if(PoeQuestEditor.gameVersion > 3) {
				xml += '<AlternateDescriptionIDs>';
				for(var i = 0; i < this.alternateDescriptionIds.size(); i++) {
					xml += '<int>' + this.alternateDescriptionIds[i] + '</int>';
				}
				xml += '</AlternateDescriptionIDs>';
			}
			xml += '<ExperienceType>' + this.experienceType.value + '</ExperienceType>';
			xml += '<ExperienceLevel>' + this.experienceLevel.value + '</ExperienceLevel>';
			return '<FlowChartNode xsi:type="' + this.type + '">' + this.$.flowchartnode.toXML(xml) + '</FlowChartNode>';
		}
	});

	var ObjectiveNode = new Polymer({
		is: "Objectivenode-element",
		behaviors: [UIBehavior],

		properties: {
			addendumIds: {
				type: Array,
				value: function() { return []; }
			},
			experienceWeight: {
				type: Object, // Number
				value: function() {
					return {label: "Experience Weight", value: 0, type: 'input', help: 'The average character level for this quest. This determines what experience pool this quest will award experience from.'};
				}
			},
			description: String,

			type: {
				value: 'ObjectiveNode'
			},

			editElements: {
				type: Array,
				value: function() { return []; }
			}
		},

		factoryImpl: function(parent_) {
			this.parent_ = parent_;
			this.links = this.$.flowchartnode.links;
			this.$.flowchartnode.type = this.type;
			this.$.flowchartnode.parent_ = this;
			this.push("editElements", this.experienceWeight);
		},

		attached: function() {
			this.$.flowchartnode.logicalParent = this.parent_.logicalParent;
		},

		createLink: function(to) {
			this.$.flowchartnode.createLink(to, this);
		},

		// TODO linktypen vereinheitlichen
		
		setText: function(text, femaleText, textType, id) {
			if(textType == "title") {
				this.defaultText = text;
				this.femaleText = femaleText;
			}
			if(textType == "description") {
				this.description = text;
			}
			if(textType == "addendum") {
				Object.keys(this.addendumIds).forEach(function(addendum) { 
					if(this.addendumIds[addendum].id == id) { this.addendumIds[addendum].text = text; }
				}, this);
			}
		},

		fromXML: function(xml) {
			this.nodeId = this.$.flowchartnode.fromXML(xml);
			if (xml.hasChildNodes()) {
				var node;
				for (var x = 0; x < xml.childNodes.length; x++) {
					node = xml.childNodes[x];
					if (node.nodeName == "IsTempText") {} // ignore
					if (node.nodeName == "LinkEvaluation") {} // ignore
					if (node.nodeName == "AddendumIDs") {
						var addendum = node.childNodes;
						for(var i = 0; i < addendum.length; i++) {
							var id = parseInt(addendum[i].textContent);
							this.addendumIds.push({id:id});
						}
					}
					if (node.nodeName == "ExperienceWeight") {
						this.experienceWeight.value = node.textContent;
					}
					if (node.nodeName == "DisplayType") {} // ignore
					if (node.nodeName == "SortGroup") {} // ignore
				}
			}
		},

		toXML: function() {
			var xml = '<IsTempText>false</IsTempText>';
			if(PoeQuestEditor.gameVersion > 1.4) {
				xml += '<LinkEvaluation>FirstLinkThatPasses</LinkEvaluation>';
			}
			xml += '<AddendumIDs>';
			this.addendumIds.forEach(function(addendum) {
				xml += '<int>' + addendum.id + '</int>';
			});
			xml += '</AddendumIDs>';
			xml += '<ExperienceWeight>' + this.experienceWeight.value + '</ExperienceWeight>';
			if(PoeQuestEditor.gameVersion > 1.4) {
				xml += '<DisplayType>None</DisplayType><SortGroup>0</SortGroup>';
			}
			return '<FlowChartNode xsi:type="' + this.type + '">' + this.$.flowchartnode.toXML(xml) + '</FlowChartNode>';
		}
	});

	var GlobalQuestNode = new Polymer({
		is: "globalquestnode-element",
		behaviors: [UIBehavior],

		properties: {
			type: {
				value: 'GlobalQuestNode'
			}
		},
		
		factoryImpl: function(parent_) {
			this.parent_ = parent_;
			this.links = this.$.flowchartnode.links;
			this.$.flowchartnode.type = this.type;
			this.$.flowchartnode.parent_ = this;
		},

		attached: function() {
			this.$.flowchartnode.logicalParent = this.parent_.logicalParent;
		}, 
		
		createLink: function(to) {
			this.$.flowchartnode.createLink(to, this);
		},

		fromXML: function(xml) {
			this.nodeId = this.$.flowchartnode.fromXML(xml);
		},

		toXML: function() {
			return '<FlowChartNode xsi:type="' + this.type + '">' + this.$.flowchartnode.toXML("") + '</FlowChartNode>';
		}
	});

	var EndStateNode = new Polymer({
		is: "endstatenode-element",
		behaviors: [UIBehavior],

		properties: {
			type: {
				value: 'EndStateNode'
			},

			description: String,

			failed: {
				type: Object, // Boolean
				value: function() {
					return {label: "Quest Failed on this node?", value: false, type: 'input', help: 'If true, treat this node as failing the quest.'};
				}
			},

			endStateId: {
				type: Object, // Number
				value: function() {
					return {label: "Use Text from", value: 0, type: 'input', help: '?'};
				}
			},
			
			editElements: {
				type: Array,
				value: function() { return []; }
			}
		},
		
		factoryImpl: function(parent_) {
			this.parent_ = parent_;
			this.links = this.$.flowchartnode.links;
			this.$.flowchartnode.type = this.type;
			this.$.flowchartnode.parent_ = this;
			this.push("editElements", this.failed);
			this.push("editElements", this.endStateId);
		},

		attached: function() {
			this.$.flowchartnode.logicalParent = this.parent_.logicalParent;
		}, 
		
		createLink: function(to) {
			this.$.flowchartnode.createLink(to, this);
		},

		setText: function(text, femaleText, textType, id) {
			if(textType == "title") {
				this.defaultText = text;
				this.femaleText = femaleText;
			}
			if(textType == "description") {
				this.description = text;
			}
		},

		fromXML: function(xml) {
			this.nodeId = this.$.flowchartnode.fromXML(xml);
			if (xml.hasChildNodes()) {
				var node;
				for (var x = 0; x < xml.childNodes.length; x++) {
					node = xml.childNodes[x];
					if (node.nodeName == "Failed") {
						this.failed.value = node.textContent;
					}
					if (node.nodeName == "EndStateID") {
						this.endStateId.value = node.textContent;
					}
				}
			}
		},

		toXML: function() {
			var xml = '<Failed>' + this.failed.value + '</Failed>';
			xml += '<EndStateID>' + this.endStateId.value + '</EndStateID>';
			return '<FlowChartNode xsi:type="' + this.type + '">' + this.$.flowchartnode.toXML(xml) + '</FlowChartNode>';
		}
	});

	var DialogueNode = new Polymer({
		is: "dialoguenode-element",

		properties: {
			// elements of DialogueNode, all Strings for now
			notSkippable: String,
			isQuestionNode: String,
			isTempText: String,
			playVOAs3DSound: String,
			playType: {
				type: Object,
				value: function() { 
					return {'label': 'Play Type', 'value': PoeQuestEditor.PlayType[0], 'set': PoeQuestEditor.PlayType, 'type': 'select', 'help': 'The way the dialogue node selects which child node to play.'};
				}
			},
			persistence: {
				type: Object,
				value: function() {
					return { 'label': 'Persistence', 'value': PoeQuestEditor.Persistence[0], 'set': PoeQuestEditor.Persistence, 'type': 'select', 'help': 'Set how the play status is remembered.'};
				}
			},
			noPlayRandomWeight: String,
			displayType: {
				type: Object,
				value: function() {
					return {'label': 'Display Type', 'value': PoeQuestEditor.DisplayType[0], 'set': PoeQuestEditor.DisplayType,'type': 'select', 'help': 'How the node will be displayed to the player.'};
				}
			},

			editElements: {
				type: Array,
				value: function() { return []; }, 
			}
		},
		
		createLink: function(to, orginalThis) {
			if(orginalThis === undefined) {
				orginalThis = this;
			}
			this.$.flowchartnode.createLink(to, orginalThis);
		},

		addEditControls: function(editElements) {
			this.editElements = editElements;
			this.push("editElements", this.playType);
			this.push("editElements", this.persistence);
			this.push("editElements", this.displayType);
			return this.editElements;
		},

		/** Can be called via change events, on sub components, which are not attached directly to this. */
		setPropertieCallback: function(propertyName, newValue, orginalThis) {
			orginalThis[propertyName] = newValue;
		},

		fromXML: function(xml) {
			this.nodeId = this.$.flowchartnode.fromXML(xml);
			if(xml.hasChildNodes()) {
				var node;
				for (var x = 0; x < xml.childNodes.length; x++) {
					node = xml.childNodes[x];
					if (node.nodeName == "NotSkippable") {
						this.notSkippable = node.textContent;
					}
					if (node.nodeName == "IsQuestionNode") {
						this.isQuestionNode = node.textContent;
					}
					if (node.nodeName == "HideSpeaker") {} // ignore
					if (node.nodeName == "IsTempText") {
						this.isTempText = node.textContent;
					}
					if (node.nodeName == "IsMultiline") {} // ignore
					if (node.nodeName == "PlayVOAs3DSound") {
						this.playVOAs3DSound = node.textContent;
					}
					if (node.nodeName == "PlayType") {
						this.playType.value = node.textContent;
					}
					if (node.nodeName == "Persistence") {
						this.persistence.value = node.textContent;
					}
					if (node.nodeName == "NoPlayRandomWeight") {
						this.noPlayRandomWeight = node.textContent;
					}
					if (node.nodeName == "DisplayType") {
						this.displayType.value = node.textContent;
					}
					// other tags of type DialogueNode are allways empty.
				}
			}
			return this.nodeId;
		},

		toXML: function(xmlstring) {
			var xml = "";
			xml += '<NotSkippable>' + this.notSkippable + '</NotSkippable>';
			xml += '<IsQuestionNode>' + this.isQuestionNode + '</IsQuestionNode>';
			if(PoeQuestEditor.gameVersion > 1.4) {
				xml += '<HideSpeaker>false</HideSpeaker>';
			}
			xml += '<IsTempText>' + this.isTempText + '</IsTempText>';
			xml += '<PlayVOAs3DSound>' + this.playVOAs3DSound + '</PlayVOAs3DSound>';
			xml += '<PlayType>' + this.playType.value + '</PlayType>';
			xml += '<Persistence>' + this.persistence.value + '</Persistence>';
			xml += '<NoPlayRandomWeight>' + this.noPlayRandomWeight + '</NoPlayRandomWeight>';
			xml += '<DisplayType>' + this.displayType.value + '</DisplayType>';
			// Allways empty, just here to stay valid against the xsd
			xml += '<VOFilename /><VoiceType /><ExcludedSpeakerClasses /><ExcludedListenerClasses />  <IncludedSpeakerClasses /><IncludedListenerClasses />';
			xml += xmlstring;
			return this.$.flowchartnode.toXML(xml);
		}
	});


	var TalkNode = new Polymer({
		is: 'talknode-element',
		
		behaviors: [UIBehavior],
		properties: {
			actorDirection: String, // not exposing, as its not for ingame stuff but for voice over
			speakerGuid: {
				type: Object,
				value: function() {
					return {label: "Speaker", value: "", set: PoeQuestEditor.GUIDS, type: "text", help: 'Guid of speaking Unit. Should be the same as in Character mappings for this character.'};
				}
			},
			listenerGuid: {
				type: Object,
				value: function() {
					return {label: "Listener", value: "", set: PoeQuestEditor.GUIDS, type: "text", help: 'In Obsidian quests it\'s mostly the player character listening.'};
				}
			},

			type: {
				value: 'TalkNode'
			},

			editElements: {
				type: Array,
				value: function() { return []; }
			}
		},
		// hoffentlich ist das nen pointer
		factoryImpl: function(parent_) {
			this.parent_ = parent_; // da das den UIBehavior konstruktor überschreibt, und man über this.behaviors nicht gehen kann
			this.links = this.$.dialoguenode.$.flowchartnode.links;
			this.$.dialoguenode.$.flowchartnode.type = this.type;
			this.$.dialoguenode.$.flowchartnode.parent_ = this;
			this.push("editElements", this.speakerGuid);
			this.push("editElements", this.listenerGuid);
		},

		attached: function() {
			this.$.dialoguenode.$.flowchartnode.logicalParent = this.parent_.logicalParent;
		},

		createLink: function(to) {
			this.$.dialoguenode.createLink(to, this);
		},

		fromXML: function(xml) {
			this.nodeId = this.$.dialoguenode.fromXML(xml);
			if(xml.hasChildNodes()) {
				var node;
				for (var x = 0; x < xml.childNodes.length; x++) {
					node = xml.childNodes[x];
					if (node.nodeName == "ActorDirection") {
						this.actorDirection = node.textContent;
					}
					if(node.nodeName == "SpeakerGuid") {
						this.speakerGuid.value = node.textContent;
					}
					if(node.nodeName == "ListenerGuid") {
						this.listenerGuid.value = node.textContent;
					}
				}
			}
		},

		toXML: function() {
			var xml = "";
			xml += '<ActorDirection>' + this.actorDirection + '</ActorDirection>';
			xml += '<SpeakerGuid>' + this.speakerGuid.value + '</SpeakerGuid>';
			xml += '<ListenerGuid>' + this.listenerGuid.value + '</ListenerGuid>';
			return '<FlowChartNode xsi:type="' + this.type + '">' + this.$.dialoguenode.toXML(xml) + '</FlowChartNode>';
		}
	});

	var PlayerResponseNode = new Polymer({
		is: 'playerresponsenode-element',
		behaviors: [UIBehavior],

		properties: {
			type: {
				value: 'PlayerResponseNode'
			}
		},

		factoryImpl: function(parent_) {
			this.parent_ = parent_;
			this.links = this.$.dialoguenode.$.flowchartnode.links;
			this.$.dialoguenode.$.flowchartnode.parent_ = this;
			this.$.dialoguenode.$.flowchartnode.type = this.type;
		},

		attached: function() {
			this.$.dialoguenode.$.flowchartnode.logicalParent = this.parent_.logicalParent;
		},

		createLink: function(to) {
			this.$.dialoguenode.createLink(to, this);
		},
		
		fromXML: function(xml) {
			this.nodeId = this.$.dialoguenode.fromXML(xml);
		},

		toXML: function() {
			return '<FlowChartNode xsi:type="' + this.type + '">' + this.$.dialoguenode.toXML("") + '</FlowChartNode>';
		}
	});

	var TriggerConversationNode = new Polymer({
		is: 'triggerconversationnode-element',
		behaviors: [UIBehavior],

		properties: {
			conversationFilename: {
				type: Object, // String
				value: function() {
					return {label: 'Filename', value: '', type: 'input', help: 'sorry no text'};
				}
			},
			startNodeId: {
				type: Object, // Number
				value: function() {
					return {label: 'Start nodeId', value: 0, type: 'input', help: 'sorry no text'};
				}
			},

			type: {
				value: 'TriggerConversationNode'
			},

			editElements: {
				type: Array,
				value: function() { return []; }
			}
		},

		factoryImpl: function(parent_) {
			this.parent_ = parent_;
			this.links = this.$.dialoguenode.$.flowchartnode.links;
			this.$.dialoguenode.$.flowchartnode.type = this.type;
			this.$.dialoguenode.$.flowchartnode.parent_ = this;
			this.push("editElements", this.conversationFilename);
			this.push("editElements", this.startNodeId);
		},
		
		attached: function() {
			this.$.dialoguenode.$.flowchartnode.logicalParent = this.parent_.logicalParent;
		},

		createLink: function(to) {
			this.$.dialoguenode.$.flowchartnode.createLink(to, this);
		},

		fromXML: function(xml) {
			this.nodeId = this.$.dialoguenode.fromXML(xml);
			if(xml.hasChildNodes()) {
				var node;
				for (var x = 0; x < xml.childNodes.length; x++) {
					node = xml.childNodes[x];
					if (node.nodeName == "ConversationFilename") {
						this.conversationFilename.value = node.textContent;
					}
					if(node.nodeName == "StartNodeID") {
						this.startNodeId.value = node.textContent;
					}
				}
			}
		},

		toXML: function() {
			var xml = '<ConversationFilename>' + this.conversationFilename.value + '</ConversationFilename>';
			xml += '<StartNodeID>' + this.startNodeId.value + '</StartNodeID>';
			return '<FlowChartNode xsi:type="' + this.type + '">' + this.$.dialoguenode.toXML(xml) + '</FlowChartNode>';
		}
	});

	var BankNode = new Polymer({
		is: 'banknode-element',

		behaviors: [UIBehavior],

		properties: {
			bankNodePlayType: {
				type: Object, // String
				value: function() {
					return {label: "BankNode play type", value: PoeQuestEditor.BankNodePlayType[0], set: PoeQuestEditor.BankNodePlayType, type: 'select', help: 'Specifies how nodes within the bank will be played.'};
				}
			},
			childNodeIds: {
				type: Array, // TODO
				value: function() { return []; }
			},
			type: {
				value: 'BankNode'
			},

			editElements: {
				type: Array,
				value: function() { return []; }
			}
		},
		
		factoryImpl: function(parent_) {
			this.parent_ = parent_;
			this.links = function() { return Object.assign(this.$.flowchartnode.links, this.$.childnode.links); };
			this.$.flowchartnode.type = this.type;
			this.$.flowchartnode.parent_ = this;
			this.push("editElements", this.bankNodePlayType);
		},

		attached: function() {
			this.$.flowchartnode.logicalParent = this.parent_.logicalParent;
		},

		createLink: function(to) {
			this.$.flowchartnode.createLink(to, this);
		},
		
		fromXML: function(xml) {
			this.nodeId = this.$.flowchartnode.fromXML(xml);
			if(xml.hasChildNodes()) {
				var node;
				for (var x = 0; x < xml.childNodes.length; x++) {
					node = xml.childNodes[x];
					if (node.nodeName == "BankNodePlayType") {
						this.bankNodePlayType.value = node.textContent;
					}
					if(node.nodeName == "ChildNodeIDs") {
						for(var i = 0; i < node.childNodes.length; i++) {
							this.push('childNodeIds', node.childNodes[i].textContent); 
						}
					}
				}
			}
		},

		toXML: function() {
			var xml = '<BankNodePlayType>' + this.bankNodePlayType.value + '</BankNodePlayType>';
			xml += '<ChildNodeIDs>';
			this.childNodeIds.forEach(function(node) {
				xml += '<int>' + node + '</int>';
			});
			xml += '</ChildNodesIDs>';
			return '<FlowChartNode xsi:type="' + this.type + '">' + this.$.flowchartnode.toXML(xml) + '</FlowChartNode>';
		}
	});

	var ScriptNode = new Polymer({
		is: 'scriptnode-element',

		behaviors: [UIBehavior],

		properties: {
			type: {
				value: 'ScriptNode'
			}
		},
		
		factoryImpl: function(parent_) {
			this.parent_ = parent_;	
			this.links = this.$.dialoguenode.$.flowchartnode.links;
			this.$.dialoguenode.$.flowchartnode.parent_ = this;
			this.$.dialoguenode.$.flowchartnode.type = this.type;
		},
		
		attached: function() {
			this.$.dialoguenode.$.flowchartnode.logicalParent = this.parent_.logicalParent;
		}, 
		
		createLink: function(to) {
			this.$.dialoguenode.createLink(to, this);
		},

		fromXML: function(xml) {
			this.nodeId = this.$.dialoguenode.fromXML(xml);
		},

		toXML: function() {
			return '<FlowChartNode xsi:type="' + this.type + '">' + this.$.dialoguenode.toXML("") + '</FlowChartNode>';
		}
	});
</script>