flowChartNode-behavior.html

<link rel="import" href="scripts-element.html"><script>
"use strict";
	var UIBehavior = {
		properties: {
			/** Helper for placing Nodes in Columns */
			placed: {
				type: Boolean,
				value: false
			},
			draggable: {
				value: "true",
				reflectToAttribute: true
			},
			nodeId: {
				type: Number
			},
			id: {
				computed: 'setId(type, nodeId)',
				reflectToAttribute: true
			},
			/** Direction in Drag and Drop events: from or to */
			direction: String,
			/** Parent Quest or Conversation Root Element, limits the range of selectNone() */
			parent_: Object
		},

		listeners: {
			'dragstart': 'onDragStart',
			'dragover': 'onDragOver',
			'dragenter': 'onDragEnter',
			'dragleave': 'onDragLeave',
			'drop': 'onDrop',
			'dragend': 'onDragEnd',
			'tap': 'fireSelectedEvent'
		},

		setId: function(type, nodeId) {
			return type + nodeId; // node id sollte unique bleiben, TODO enforce davon
		},

		factoryImpl: function(parent_) {
			this.parent_ = parent_;
		},


		fireSelectedEvent: function(event) {
			this.fire('iron-signal', {
				name: "flow-chart-node-selected",
				data: [this]
			});
			
			this.parent_.selectNone(this);
			if (this.$.dialoguenode !== undefined) {
				this.toggleClass("selected", true, this.$.dialoguenode.$.flowchartnode);
				this.$.dialoguenode.$.flowchartnode.selected = 4;	
			} else {
				this.toggleClass("selected", true, this.$.flowchartnode);
				this.$.flowchartnode.selected = 4;	
			}
			Object.keys(this.links).forEach(function(link) {
				if (this.links[link].startElement == this) { // die node selbst hat nur ausgehende links
					this.links[link].connect("#92eb68");
				}
			}, this);
		},

		setText: function(defaultText, femaleText) {
			this.defaultText = defaultText;
			this.femaleText = femaleText;
		},

		/** Add links between elements on attach of the node. Then the calculations of the links will work. */
		attached: function() {
			var links = this.links;
			if(typeof(this.links) == "function") {
				links = this.links();
			}
			Object.keys(links).forEach(function(link) {
				this.parentElement.parentElement.appendChild(links[link]);
			}, this);
		},


		//http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html Ja verdammt, drag and drop ist fürn arsch, und das wird auch in HTML 5.1 so bleiben
		onDragStart: function(event) {
			event.dataTransfer.effectsAllowed = 'link';
			//event.dataTransfer.setData(this.type, this.id); // type could be anything, as long as it is string, oh and data have to be string too …, haha! exeption IE there type MUST be 'text', so this yust dont work, great!
			event.dataTransfer.setData('text', this.type);
			localStorage.setItem(this.type, this.id);
			this.direction = "from";
		},

		onDragEnter: function(event) {
			var knownTypes = ["TalkNode", "PlayerResponseNode"]; // usw.
			var type = {val: 0};
			knownTypes.some(function(knownType) {
				this.val = localStorage.getItem(knownType);
				return this.val !== undefined;
			}, type);

//			if (type === this.type) { // nur gleiche typen lassen sich linken // todo questnode und objective node sind gleich
			if (type.val !== undefined) {
				event.preventDefault();
			}
		},

		onDragOver: function(event) {
			var knownTypes = ["TalkNode", "PlayerResponseNode"]; // usw.
			var type = {val: 0};
			knownTypes.some(function(knownType) {
				this.val = localStorage.getItem(knownType);
				return this.val !== undefined;
			}, type);

//			if (type === this.type) { // nur gleiche typen lassen sich linken
			if (type.val !== undefined) {
				event.preventDefault();
				event.dataTransfer.dropEffect = 'link';
				if (this.direction !== "from") {
					this.direction = "to";
				}
			}
		},

		onDragLeave: function(event) {
			if (this.direction !== "from") {
				this.direction = "";
			}
		},

		onDrop: function(event) {
			event.preventDefault();
			// todo: handling für verschiedene nodes, prototypisch für überhaupt links
			var type = event.dataTransfer.getData('text');
			var id = localStorage.getItem(type);
			localStorage.removeItem(type);
			if (id !== this.id) { // selbst linken ist nicht
				var from = document.getElementById(id);
				if (this.links[from.id] === undefined) { // links sind nur in eine richtung zu ziehen // todo sichtbar machen der richtung
					from.createLink(this);
				}
			}
			this.direction = ""; // drag target
		},

		onDragEnd: function(event) {
			console.log("Fin");
			this.direction = ""; // drag source
		}
	};

	var ChildNodeBehavior = {
		properties: {
			links: {
				type: Object,
				value: function() { return {}; }
			}
		}
	};

	var FlowChartNodeBehavior = {
		properties: {
			type: String,
			nodeId: { // no same name allowed
				type: Number, // benötigt iron-input >= 1.0.5
				notify: true,
			},
			comments: {
				type: Array,
				value: function() { return []; }
			},
			links: {
				type: Object,
				value: function() { return {}; }
			},
			enterScripts: { 
				type: Array,
				value: function() { return []; }
		   	},
			exitScripts: {
				type: Array, 
				value: function() { return []; }
			},
			conditions: {
				type: Array, 
				value: function() { return []; }
			},
			conditionCount: Number,
			editElements: {
				type: Array,
				value: function() { return []; }
			},
			// TODO language	
			/** String from Stringtable */
			defaultText: String,
			/** Female String from Stringtable */
			femaleText: String,

			linkXML: Object,

			/** Copy from UIBehavior, only for displaying in the template*/
			direction: String
		},

		addComment: function(event, eventDetail, text) {
			var comment = new Comment(this, this.comments.length + 1);
			if (text !== undefined)
				comment.setText(text);
			this.push("comments", comment);
			Polymer.dom(this.$$("comments")).appendChild(comment);
		},

		removeComment: function(index) {
			console.log("remove Comment");
			var comment = this.splice("comments", index - 1, 1)[0]; // splice liefert ein array
			Polymer.dom(this.$$("comments")).removeChild(comment); // die remove child erwartet eine node, deswegen über comment und nicht über id
		},

		addCondition: function(event, eventDetail) {
			var condition = new ConditionElement(0, false); // TODO
			// type = ?
			condition.fullFunction = PoeQuestEditor.Conditionals.get("Boolean IsActive(Guid)");
			this.push("conditions", condition);
		},

		toggleEdit: function() {
			this.$.editpanel.hidden = !this.$.editpanel.hidden;
		},

		toggleConditions: function() {
			this.$.conditions.hidden = !this.$.conditions.hidden;
			this.conditions.forEach(function(condition) {
				condition.show();
			});
		},		
		
		toggleEnterScripts: function() {
			this.$.enterScripts.hidden = !this.$.enterScripts.hidden;
			this.enterScripts.forEach(function(script) {
				script.show();
			});
		},		
		
		toggleExitScripts: function() {
			this.$.exitScripts.hidden = !this.$.exitScripts.hidden;
			this.exitScripts.forEach(function(script) {
				script.show();
			});
		},

		fromXML: function(xml) {
			if (xml.hasChildNodes()) {
				this.type = xml.attributes[0].value;
				var node;
				for (var x = 0; x < xml.childNodes.length; x++) {
					node = xml.childNodes[x];
					if (node.nodeName == "NodeID") {
						//this.nodeId = parseInt(node.textContent);
						this.nodeId = node.textContent;
					}
					if (node.nodeName == "Comments") {
						var _;
						for (var c = 0; c < node.childNodes.length; c++) {
							this.addComment(_, _, node.childNodes[c].textContent);
						}
					}
					if (node.nodeName == "Links") {
						this.linkXML = node;
					}
					if (node.nodeName == "Conditionals") {
						var conditionElement = new ConditionElement(0, true);
						this.conditionCount = conditionElement.fromXML(node);
						this.push('conditions', conditionElement);
						Polymer.dom(this.$$("conditions")).appendChild(conditionElement);
					}
					if (node.nodeName == "OnEnterScripts") {
						this.scriptsFromXML("enterScripts", node);
					}
					if (node.nodeName == "OnExitScripts") {
						this.scriptsFromXML("exitScripts", node);
					}
					// onUpdateScripts werden nicht verwendet
				}
			}
			return this.nodeId;
		},

		toXML: function(xmlstring) {
			var result = "<NodeID>" + this.nodeId + "</NodeID><Comments>";
			this.comments.forEach(function (comment) {
				result += comment.toXML();
			});
			result += "</Comments>";
			result += "<PackageID>1</PackageID>"; // siehe xsd, 1 steht für base game und ist momentan der Einzige sinnvolle Wert
			result += "<ContainerNodeID>-1</ContainerNodeID>"; // todo ?
			result += "<Links>";
			Object.keys(this.links).forEach(function (link) {
				result += this.links[link].toXML();
			}, this);
			result += "</Links>";
			result += "<ClassExtender><ExtendedProperties /></ClassExtender>";
			result += "<Conditionals>";
			this.conditions.forEach(function(condition) {
				result += condition.toXML(0);
			});
			result += "</Conditionals>";
			result += "<OnEnterScripts>";
			this.enterScripts.forEach(function(scriptCall) {
				result += "<ScriptCall>";
				result += scriptCall.functionCallToXML();
				result += "</ScriptCall>";
			});
			result += "</OnEnterScripts>";
			result += "<OnExitScripts>";
			this.exitScripts.forEach(function(scriptCall) {
				result += "<ScriptCall>";
				result += scriptCall.functionCallToXML();
				result += "</ScriptCall>";
			});
			result += "</OnExitScripts>";
			result += "<OnUpdateScripts />";
			return result + xmlstring;
		},

		/** @param target - Name of Variable enterScripts or exitScripts */
		scriptsFromXML: function(target, xml) {
			for (var s = 0; s < xml.childNodes.length; s++) {
				if (xml.childNodes[s].hasChildNodes()) {
					for (var d = 0; d < xml.childNodes[s].childNodes.length; d++) {
						var scriptElement = new ScriptElement();
						scriptElement.functionCallFromXML(xml.childNodes[s].childNodes[d]);
						this.push(target, scriptElement);
						Polymer.dom(this.$$(target)).appendChild(scriptElement);
					}
				}
			}
		},
	};
</script>