concrete 0.2.0

data/CHANGELOG

@@ -0,0 +1,32 @@
+=0.1.0 (February 3rd, 2010)
+
+* First public release
+
+=0.2.0 (June 14th, 2010)
+
+* Added higher level "workbench" editor support
+* Added Ruby/RGen backend support
+* Added model info hovers which share the popup window used for error descriptions
+* Added fold button support 
+* Added read only mode of editor widget
+* Added float datatype support
+* Added support for table based element layouts 
+* Added metamodel editor examples showing box based and table based layouts
+* Added support for feature sort function and element icons in TemplateProvider
+* Added external identifier support
+* Added "always hide" strategy for features
+* Added selector option "cursorEdgeOnly", fixed non-edge-only mode
+* Added "white" theme
+* Added helper for iterating through model elements in depth first order
+* Added button to open Concrete Users Guide
+* The empty element/value placeholder shows the feature name
+* Constraint checks run asynchronously in the background
+* Several performance improvements for larger models
+* Elements can be created in collapsed state
+* Concrete can be distributed as a Ruby gem
+* Fixed scrolling to selected element to also work in scroll containers
+* Fixed error hovers to be only shown for focused editor
+* Fixed Scriptaculous bugs: do not scroll page while moving in autocompletion box, do not hide autocompletion box when scrollbar is operated
+* Fixed marker (cursor) positioning for editor nodes with offset
+* Fixed exception in case fold control nodes are not present
+

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2010 Martin Thiede
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,87 @@
+= Concrete Model Editor 
+
+Concrete is a lightweight, web-based model editor which can be configured for different DSLs (Domain Specific Languages). 
+
+The basic idea is to make use of the browser's document object model (DOM) to represent models and it's rendering engine to create the graphical represenation. DSLs are defined by metamodels (abstract syntax) and DOM templates combined with CSS (concrete syntax). 
+
+Concrete is a Javascript widget based on Prototype and Scriptaculous. It exchanges model data in JSON format and can be integrated easily using Ajax.
+
+Besides the pure editor widget Concrete now also contains additional support for building larger editors. There is Javascript code implementing a simple "workbench" with an index view and edit view and search and replace functionality. In addition, there is Ruby code implementing the server side counterpart for loading and storing data with a local file system. As an example, check out the separate "mmedit" project on github. 
+
+Note that Concrete can also be used with non-Ruby backends.
+
+Concrete has been tested sucessfully with Firefox and Chrome.
+
+
+== Screencast
+
+See Concrete in action by watching the screencast[http://vimeo.com/9164866].
+
+
+== Download
+
+You can get the latest version from github.
+
+
+== Installation
+
+Concrete is not a standalone editor but needs to be integrated into a (web) application. For more information how to do this, see the developers guide and the examples included.
+
+Ruby users can install Concrete as a gem:
+
+> gem install concrete
+
+The Ruby based functionality of Concrete requires the "rgen" modelling framework and the little "andand" gem which should be installed automatically. Otherwise it can be installed using: 
+
+> gem install andand rgen
+
+RGen is also available on github.
+
+The Ruby part of Concrete should work with any Ruby version starting with Ruby 1.8.6. The Ruby installers can be downloaded from:
+
+http://ruby-lang.org
+
+
+== Documentation
+
+There is a Users Guide and a Developers Guide in the doc folder. The Users Guide explains the usage of the editor independant of any specific DSL. The Developers Guide describes how to create own DSLs and how to integrate Concrete.
+
+
+== Examples
+
+Currently, the examples folder contains: 
+* A metamodel editor which can be used to create and edit Concrete metamodels
+* A simple formula editor which shows some more math like graphical representation
+* A simple statechart editor, featuring graphical representation of states
+
+To use the examples, just open the HTML file in your browser (currently it should be Firefox). You can start from scratch or load a given model in JSON format. To do so just paste it into the clipboard box visible on each example page, then focus the editor and paste again using Ctrl-V. To store an example model, select it in the editor using Ctrl-A, copy it to the internal clipboard using Ctrl-C and then copy the JSON from the clipboard area to where you need it.
+	
+The metamodel editor comes in 3 flavours demonstrating text based, table based and box based layouts.
+
+In the metamodel example, there is also a little Ruby program which shows server interaction with Ajax. You can run the edit.rb with a JSON file as argument and it will fire up the browser, load the model, let you edit it and write it back to the file when you click the "Save" button. There is a folder "example_data" which contains the plain metamodels of the examples, they are basically the same as what is embedded in the respective example HTML files.
+
+To edit the statemachine example metamodel, you would do:
+
+  example/metamodel_editor> ruby edit.rb example_data/statemachine_metamodel.json
+
+If you want to try the respective editor with the changed metamodel, you have to put it into the HTML file. It will not load the metamodel from the "example_data" folder.
+
+A much more sophisticated example metamodel editor is "mmedit" which is available as a separate gem on github.
+
+
+== License
+
+Concrete is licensed under the terms of the MIT license, see the included MIT-LICENSE file.
+
+
+== Credits
+
+Concrete is based on the great Prototype Javascript framework which makes Javascript feel much more like Ruby:
+http://www.prototypejs.org
+
+For auto completion and some visual effects, as well as the unit test framework, thanks go to Scriptaculous:
+http://script.aculo.us
+
+Almost all of the icons are taken from the Tango icon theme:
+http://tango.freedesktop.org
+

data/concrete/basic_inline_editor.js

@@ -0,0 +1,73 @@
+// Concrete Model Editor
+//
+// Copyright (c) 2010 Martin Thiede
+//
+// Concrete is freely distributable under the terms of an MIT-style license.
+
+Concrete.BasicInlineEditor = Class.create({
+	
+	show: function(element, initialText, partial, completionOptions) {
+		if (this.element) {
+			// edit still in progress, cancel
+			this.hide();
+		}
+		this.element = element;
+    if (element.parentNode.tagName.toUpperCase() == "TBODY") {
+      cols = element.up("table").select("tr").max(function(r) { return r.childElements().select(function(c) {return c.tagName.toUpperCase() == "TD";}).size(); });
+      Element.insert(element, { after: 
+        "<tr><td colspan='"+cols+"'>" +
+        "<div class='ct_inline_editor' style='display: inline'>" +
+          "<input type='text' size='"+initialText.length+"' value='"+initialText+"'/>" +
+          "<div style='display: none; position: absolute;	border: 1px solid grey; background-color: white;'></div>" + 
+        "</div>" +
+        "</td></tr>"
+      });
+      input = element.next().down().down().down();
+    }
+    else {
+      Element.insert(element, { after: 
+        "<div class='ct_inline_editor' style='display: inline'>" +
+          "<input type='text' size='"+initialText.length+"' value='"+initialText+"'/>" +
+          "<div style='display: none; position: absolute;	border: 1px solid grey; background-color: white;'></div>" + 
+        "</div>"
+      });
+      input = element.next().down();
+    }
+		element.hide();
+		this.input = input
+		input.select();
+    this._interval = window.setInterval(function() { 
+      // set size one larger than the text, otherwise the first char is shifted out left when new chars are added at the right
+      input.size = input.value.length + 1;
+    }, 50);
+		new Autocompleter.Local(input, input.next(), completionOptions, {partialSearch: partial, fullSearch: partial, minChars: 0, partialChars: 0, onShow:
+      function(element, update){
+        if(!update.style.position || update.style.position=='absolute') {
+          update.style.position = 'absolute';
+          Position.clone(element, update, {
+            setHeight: false,
+            setWidth: false, // in contrast to the original built-in default, do not set width
+            offsetTop: element.offsetHeight
+          });
+        }
+        Effect.Appear(update,{duration:0.15});
+      }
+    })
+	},
+	
+	getText: function() {
+		return this.input.value;
+	},
+	
+	setError: function() {
+		this.element.next().addClassName("ct_error");		
+	},
+	
+	hide: function() {
+    if (this._interval) window.clearInterval(this._interval);
+		this.element.show();
+		this.element.next().remove();
+		this.element = undefined;
+	}
+	
+})

data/concrete/clipboard.js

@@ -0,0 +1,72 @@
+// Concrete Model Editor
+//
+// Copyright (c) 2010 Martin Thiede
+//
+// Concrete is freely distributable under the terms of an MIT-style license.
+
+Concrete.Clipboard = Class.create({
+
+	// if a storageElement is specified, the data is stored as textContent of this element	
+	initialize: function(storageElement) {
+		this.element = storageElement;
+		this.kind = undefined;
+	},
+	
+	read: function() {
+		var data = this._readRaw();
+		if (data && Object.isString(data) && data.isJSON()) {
+			return data.evalJSON();
+		}
+		else {
+			return data;
+		}
+	},
+	
+	write: function(data) {
+		if (data instanceof Object) {
+			this._writeRaw(Concrete.Helper.prettyPrintJSON(Object.toJSON(data)));
+		}
+		else {
+			this._writeRaw(data);
+		}
+	},
+	
+	containsElement: function() {
+		var data = this._readRaw();
+		return data && Object.isString(data) && data.isJSON();
+	},
+	
+	containsValue: function() {
+		var data = this._readRaw();
+		return data && Object.isString(data) && !data.isJSON();
+	},
+	
+	_readRaw: function() {
+		if (this.element) {
+			if (this.element.tagName == "TEXTAREA") {
+				return this.element.value;
+			}
+			else {
+				return this.element.innerHTML;	
+			}
+		}
+		else {
+			return this.data;		
+		}		
+	},
+
+	_writeRaw: function(data) {
+		if (this.element) {
+			if (this.element.tagName == "TEXTAREA") {
+				this.element.value = data;
+			}
+			else {
+				this.element.innerHTML = data;
+			}
+		}
+		else {
+			this.data = data;
+		}		
+	}
+		
+});

data/concrete/concrete.js

@@ -0,0 +1,58 @@
+// Concrete Model Editor
+//
+// Copyright (c) 2010 Martin Thiede
+// 
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+// 
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+// 
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+var Concrete = {
+  Version: '0.1.0',
+	require: function(r) {
+		document.write('<script type="text/javascript" src="'+r+'"><\/script>');
+	},
+  load: function() {
+  	// TODO: check prototype and scriptaculous version
+    var js = /concrete\.js(\?.*)?$/;
+    $$('head script[src]').findAll(function(s) {
+      return s.src.match(js);
+    }).each(function(s) {
+      var path = s.src.replace(js, '');
+      [
+				'editor',
+				'selector',
+				'scroller',
+				'element_extension',
+				'basic_inline_editor',
+				'inline_editor',
+				'template_provider',
+				'model_interface',
+				'metamodel_provider',
+				'identifier_provider',
+				'external_identifier_provider',
+				'constraint_checker',
+				'clipboard',
+				'helper'
+      ].each( function(include) { 
+      	Concrete.require(path + include + '.js');
+    	});
+		});
+	}
+}
+
+Concrete.load();

data/concrete/constraint_checker.js

@@ -0,0 +1,297 @@
+// Concrete Model Editor
+//
+// Copyright (c) 2010 Martin Thiede
+//
+// Concrete is freely distributable under the terms of an MIT-style license.
+
+Concrete.ConstraintChecker = Class.create({
+	
+  // Options:
+  //   externalIdentifierProvider: external identifier provider, default: none
+  //   externalModule: name of the current module within external index, default: none 
+  //   allowDuplicates: classes of which instances with same indentifier may exist, default: none
+  //   automaticChecking: if set to false, do not run constraint checks when model changes, default: true
+  //
+	initialize: function(rootClasses, identifierProvider, options) {
+    this.options = options || {};
+    this.options.allowDuplicates = this.options.allowDuplicates || [];
+		this.rootClasses = rootClasses;	
+		this.identifierProvider = identifierProvider;
+		this.externalIdentifierProvider = this.options.externalIdentifierProvider;
+		this.featureConstraints = {};
+    this._automaticChecking = (this.options.automaticChecking == undefined) ? true : this.options.automaticChecking;
+	},
+
+  // model root must be set for the checker to work
+  setModelRoot: function(modelRoot) {
+		this.modelRoot = modelRoot;
+  },
+
+	addConstraint: function(constraint) {
+		if (constraint instanceof Concrete.ConstraintChecker.FeatureValueConstraint) {
+			this.featureConstraints[constraint.class()] = this.featureConstraints[constraint.class()] || {}
+			this.featureConstraints[constraint.class()][constraint.feature()] = this.featureConstraints[constraint.class()][constraint.feature()] || [];
+			this.featureConstraints[constraint.class()][constraint.feature()].push(constraint);
+		}
+	},
+	
+	// ModelChangeListener Interface
+	
+	elementAdded: function(element) {
+	},
+
+	elementChanged: function(element, feature) {
+	},
+
+	elementRemoved: function(element) {
+	},
+	
+	rootChanged: function(root) {
+	},
+
+	commitChanges: function() {
+    if (this._automaticChecking) {
+      this.updateAllProblems();
+    }
+	},
+
+	// ModelChangeListener End
+	
+	isValidInstance: function(type, element) {
+    this._allowedTypes = this._allowedTypes || {};
+    this._allowedTypes[type.name] = this._allowedTypes[type.name] || type.allSubTypes().concat(type);
+		return this._allowedTypes[type.name].include(element.mmClass);
+	},
+	
+	isValidValue: function(mmFeature, value) {
+		var opts = this.attributeOptions(mmFeature);
+		return (!(opts instanceof RegExp) || opts.test(value)) &&
+			((opts instanceof RegExp) || opts == undefined || opts.include(value));
+	},
+	
+	attributeOptions: function(mmFeature) {
+		if (mmFeature.type.isEnum()) {
+			// enum
+			return mmFeature.type.literals;
+		}
+		else if (mmFeature.type.isBoolean()) {
+			return ["true", "false"];
+		}
+		else if (mmFeature.type.isInteger()) {
+			return /^(-?[1-9]\d*|0)$/;
+		}
+		else if (mmFeature.type.isFloat()) {
+			return /^(-?[1-9]\d*|0)(\.\d+)?$/;
+		}
+		else {
+			return undefined;
+		}			
+	},
+	
+	elementOptions: function(slot) {
+		if (slot.hasClassName("ct_root")) {
+			return this.rootClasses.reject(function(t){return t.abstract}).collect(function(c){ return c.name});
+		}
+		else {
+			var type = slot.mmFeature().type;
+			return type.allSubTypes().concat(type).reject(function(t){return t.abstract}).collect(function(t){ return t.name});
+		}
+	},
+
+  // enable and disable automatic checking
+  setAutomaticChecking: function(checking) {
+    this._automaticChecking = checking;
+  },
+
+  // run all constraint checks and update the error annotations
+  // this method must be called explicitly if automatic checking is disabled
+  //
+	updateAllProblems: function() {
+    var element = this.modelRoot.childElements().first();
+    // in case the first element is an empty element, skip to next
+    if (element && !element.isElement()) element = element.next();
+    if (!element) return;
+    var stack = [];
+    if (this._intervalTimer) window.clearInterval(this._intervalTimer);
+    this._intervalTimer = window.setInterval(function() {
+      var i;
+      for (i=0; i<100; i++) {
+        this._updateElementProblems(element);
+        element = Concrete.ModelInterface.Helper.nextElement(element, stack);
+        if (!element) {
+          window.clearInterval(this._intervalTimer);
+          this._intervalTimer = undefined;
+          break;
+        }
+      }
+    }.bind(this), 0.01);
+	},
+
+  // private
+			
+	_updateElementProblems: function(element) {
+		if (!element || !element.isElement()) return [];
+		this._removeErrors(element);
+		this._checkElement(element).each(function(p) { this._addError(element, p); }, this);
+		element.features.each(function(f) {
+			this._removeErrors(f);
+			this._checkFeature(element, f).each(function(p) { this._addError(f, p); }, this);
+		}, this);
+	},
+		
+	_checkElement: function(element) {
+		var problems = [];
+		if (element.parentNode.hasClassName("ct_root")) {
+			if (!this.rootClasses.include(element.mmClass)) {
+				problems.push("element of class '"+element.mmClass.name+"' not allowed");				
+			}			
+		}
+		else {
+			if (!this.isValidInstance(element.mmFeature("ct_containment").type, element)) {
+				problems.push("element of class '"+element.mmClass.name+"' not allowed");				
+			}
+		}		
+		if (element.mmClass.abstract) {
+			problems.push("class '"+element.mmClass.name+"' is abstract");
+		}
+    if (!this.options.allowDuplicates.include(element.mmClass)) {
+      var ident = this.identifierProvider.getIdentifier(element);
+      if (this.identifierProvider.getElement(ident) instanceof Array) {
+        problems.push("duplicate identifier '"+ident+"'");
+      }	
+      else if (this.externalIdentifierProvider) {
+        var ei = this.externalIdentifierProvider.getElementInfo(ident, {ignoreModule: this.options.externalModule});
+        if (ei) {
+          var loc = Object.isString(ei.module) ? ei.module : "external module";
+          problems.push("duplicate identifier '"+ident+"', also defined in "+loc);
+        }
+      }
+    }
+		return problems;
+	},
+	
+	_checkFeature: function(element, feature) {
+		var problems = [];
+		var mmf = feature.mmFeature;
+		var children = feature.slot.childElements().select(function(c) { return !c.hasClassName("ct_empty"); });
+		var featureConstraints = this._featureConstraints(element, feature);
+		if (mmf.upperLimit > -1 && children.size() > mmf.upperLimit) {
+			if (mmf.upperLimit == 1) {
+				if (mmf.isContainment()) {
+					problems.push("only one element may be specified as '"+mmf.name+"'");
+				}
+				else {
+					problems.push("only one value may be specified as '"+mmf.name+"'");					
+				}
+			}
+			problems.push("above upper limit of '"+mmf.upperLimit+"'");	
+		}
+		if (mmf.lowerLimit > 0 && children.size() < mmf.lowerLimit) {
+			if (mmf.lowerLimit == 1) {
+				problems.push("'"+mmf.name+"' must be specified");	
+			}
+			else {
+				problems.push("below lower limit of '"+mmf.upperLimit+"'");					
+			}
+		}
+		if (mmf.isContainment()) {
+			// correct element type is checked for each element
+			children.each(function(c) {
+				this._checkFeatureConstraints(featureConstraints, element, c, problems);
+			}, this);
+		}
+		else if (mmf.isReference()) {
+			children.each(function(c) {				
+				var targets = this.identifierProvider.getElement(c.value);
+        if (!(targets instanceof Array)) targets = [targets].compact();
+        if (this.externalIdentifierProvider) {
+          var ei = this.externalIdentifierProvider.getElementInfo(c.value, {ignoreModule: this.options.externalModule});
+          if (ei) {
+            // here we add a type instead of an element
+            targets = targets.concat(ei.type);
+          }
+        }
+				if (targets.size() == 0) {
+					problems.push("can not resolve reference");
+        }
+        else if (targets.size() > 1) {
+					problems.push("multiple targets for reference");
+        }
+        else {
+          var type = targets[0].mmClass ? targets[0].mmClass : targets[0];
+					if (!(mmf.type.allSubTypes().concat(mmf.type).include(type))) {
+						problems.push("reference to class '"+type.name+"' not allowed");				
+          }
+          else if (targets[0].mmClass) {
+            // if target is an element, i.e. is local
+						this._checkFeatureConstraints(featureConstraints, element, targets[0], problems);
+					}
+				}
+			}, this);			
+		}
+		else {
+			children.each(function(c) {
+				if (!this.isValidValue(mmf, c.value)) {
+					problems.push("value not allowed");
+				}
+				else {
+					this._checkFeatureConstraints(featureConstraints, element, c.value, problems);
+				}
+			}, this);
+		}
+		return problems.uniq();
+	},
+	
+	_featureConstraints: function(element, feature) {
+		var byFeature = this.featureConstraints[element.mmClass.name]
+		return (byFeature && byFeature[feature.mmFeature.name]) || [];		
+	},
+
+	_checkFeatureConstraints: function(constraints, element, value, problems) {
+		constraints.each(function(c) {
+			if (!c.check(element, value)) {
+				problems.push(c.message(element));
+			}
+		});
+	},
+		
+	_addError: function(node, text) {
+    if (!node._errorDescriptions) {
+      node._errorDescriptions = [];
+      node.addClassName("ct_error");
+    }
+    var desc = Concrete.Helper.createDOMNode("div", {class: "ct_error_description", style: "display: none"}, text);
+		node.appendChild(desc);	
+    node._errorDescriptions.push(desc);
+	},
+	
+	_removeErrors: function(node) {
+    if (node._errorDescriptions) {
+      node._errorDescriptions.each(function(d) {
+        d.remove();
+      });
+			node.removeClassName("ct_error");
+      node._errorDescriptions = undefined;
+    }
+	}
+	
+});
+
+Concrete.ConstraintChecker.FeatureValueConstraint = Class.create({
+	initialize: function(options) {
+		this.options = options;		
+	},
+	class: function() {
+		return this.options.class;
+	},
+	feature: function() {
+		return this.options.feature;
+	},
+	check: function(element, value) {
+		return this.options.checker(element, value);
+	},
+	message: function(element) {
+		var msg = this.options.message;
+		return Object.isFunction(msg) ? msg(element) : msg;
+	}
+});