gram.js v0.1.2

gram.js

Gram.js is the Graphical Editing Framework. With this framework you can easily build your own WYSIWYG graphical editor such as flow-chart, prototype tool, ui builder and modeling tool. Gram.js keeps an eye on your model, major purpose of this framework is editing your model graphically. To support this effectively, Gram.js is composed of MVC. Gram View takes charge for View and Gram Editor is for Controller. Gram Editor is now in developing.

Gram View

Gram View takes the responsibility for Widget's rendering. The advantage of using Gram Widget is it's flexibility. Gram Widget implements it's drawing as not only HTML and SVG, but also Canvas(There is no widget implementaion for canvas yet) because it has it's own bound calculation and layout algorithm. This means you can easily reuse existing code to similar but different context such as HTML Project to SVG Project.

Including gram

require(['path/to/gram'], function(gram){
  var GramShell = gram.view.system.GramShell;
  var Div = gram.view.widget.html.Div;
  
  var shell = new GramShell('container');
  var div = new Div();
  shell.contents(div);
});

Making div

require(['path/to/gram'], function(gram){
  var GramShell = gram.view.system.GramShell;
  var Div = gram.view.widget.html.Div;
  
  var shell = new GramShell('container');
  var root = new Div();
  shell.contents(root);
  
  var div1 = new Div();
  div1.cursor('help').css({'margin': '20px'}).bounds(30, 30, 100, 100).bgColor('skyblue');
  root.append(div1);
});

Making svg rect

require(['path/to/gram'], function(gram){
  var GramShell = gram.view.system.GramShell;
  var Svg = gram.view.widget.svg.Svg;
  var Rect = gram.view.widget.svg.Rect;
  
  var shell = new GramShell('container');
  var svg = new Svg();
  shell.contents(svg);
  
  var rect1 = new Rect();
  rect1.cursor('move')
      .border(10, 'salmon')
      .bgColor('moccasin')
      .bounds(100, 100, 100, 100);
  svg.append(rect1);
});

Making connection

require(['path/to/gram'], function(gram) {
    var GramShell = gram.view.system.GramShell;
    var Connection = gram.view.widget.connection.Connection;
    var CardinalAnchor = gram.view.widget.connection.anchor.CardinalAnchor;
    var Rect = gram.view.widget.svg.Rect;
    var Circle = gram.view.widget.svg.Circle;
    var Svg = gram.view.widget.svg.Svg;

    var shell = new GramShell('container');
    var svg = new Svg();
    shell.contents(svg);

    var r1 = new Rect();
    r1.cursor('move').border(1, 'salmon').bgColor('moccasin').bounds(100, 100, 100, 100);
    svg.append(r1);

    var r2 = new Rect();
    r2.cursor('move').border(1, 'salmon').bgColor('moccasin').bounds(300, 100, 100, 100);
    svg.append(r2);

    var r3 = new Circle();
    r3.cursor('move').border(1, 'salmon').bgColor('moccasin').bounds(100, 300, 100, 100);
    svg.append(r3);

    var conn1 = new Connection();
    conn1.sourceAnchor(new CardinalAnchor(r1, {pos: 'E'}));
    conn1.targetAnchor(new CardinalAnchor(r2, {pos: 'W'}));
    svg.append(conn1);

    var conn2 = new Connection();
    conn2.sourceAnchor(new CardinalAnchor(r1, {pos: 'S'}));
    conn2.targetAnchor(new CardinalAnchor(r3, {pos: 'N'}));
    svg.append(conn2);
});

Developing Environment

Using Logger

If your constructor inherits from gram.base.Base constructor, you can use following methods.

this.desc('methodName', arguments);
this.log('some log');
this.info('some info');
this.warn('some warn');
this.error('some error');
//this.trace(); //will be supported soon :)

And then, if you want show them in the developer console window, use like this.

Debugger.log([
    //Modules you want check
    gram.view.system.GramShell,
    gram.view.updateManager,
    Rect
], Debugger.LOG_LEVEL.ALL);

Debugger.LOG_LEVEL

Debugger.LOG_LEVEL = {
  OFF: 0,
  LOG: 1,
  INFO: 2,
  WARN: 4,
  ERROR: 8,
  TRACE: 16,
  ALL: 31
}

Setting up Logger level

Load your app url with #loglevel=number. You can use bit mask number using Debugger.LOG_LEVEL. To show LOG|INFO use 3.

http://localhost/examples/intersection/main.html#loglevel=31

Setting up debug mode

Just load your app url with #mode=debug

http://localhost/examples/intersection/main.html#mode=debug

Gram Editor

This module is for WYSIWYG editor for graphical model. (now working ...)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset=utf-8 />
		<title>gram</title>
		<style>
			body {
				margin: 20px;
				padding: 20px;
			}
			#palette {
				background-color: #eee;
				border-radius: 5px;
				width: 500px;
				height: 50px;
			}
			#viewer {
				border: 1px solid #ccc;
				width: 500px;
				height: 500px;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id='palette'></div>
		<div id='viewer'></div>
		<script src="../../../external/requirejs/require.js"></script>
		<script src="configs/requirejs-config.js"></script>
		<script src="main.js"></script>
	</body>
</html>

require([
    'gram/gram',
    './controller/DiagramController',
    './controller/ShapeController',
    './menu/ContextMenu',
    './model/Diagram',
    './model/DiagramModelFactory',
    './model/Shape'
], function(
    gram,
    DiagramController,
    ShapeController,
    ContextMenu,
    Diagram,
    DiagramModelFactory,
    Shape
) {

    var Domain = gram.editor.system.Domain;
    var Tool = gram.editor.tool.Tool;
    var GraphicEditor = gram.editor.system.GraphicEditor;
    var GraphicViewer = gram.editor.system.GraphicViewer;
    var GramShell = gram.view.system.GramShell;

    var editor = new GraphicEditor();
    editor.create({
        'viewer': 'viewer',
        'palette': 'palette',
        'model-factory': DiagramModelFactory,
        'viewer-factory-rule': [
            [Diagram, DiagramController],
            [Shape, ShapeController]
        ],
        'context-menu': ContextMenu
    });
});