Graphite 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. Graphite keeps an eye on your model, major purpose of this framework is editing your model graphically. To support this effectively, Graphite is composed of MVC. Graphite View takes charge for View and Graphite Editor is for Controller. Graphite Editor is now in developing.
Graphite View takes the responsibility for Widget's rendering. The advantage of using Graphite Widget is it's flexibility. Graphite 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.
require(['path/to/graphite'],function(graphite){varGraphiteShell=graphite.view.system.GraphiteShell;varDiv=graphite.view.widget.html.Div;varshell=newGraphiteShell('container');vardiv=newDiv();shell.contents(div);});require(['path/to/graphite'],function(graphite){varGraphiteShell=graphite.view.system.GraphiteShell;varDiv=graphite.view.widget.html.Div;varshell=newGraphiteShell('container');varroot=newDiv();shell.contents(root);vardiv1=newDiv();div1.cursor('help').css({'margin': '20px'}).bounds(30,30,100,100).bgColor('skyblue');root.append(div1);});
require(['path/to/graphite'],function(graphite){varGraphiteShell=graphite.view.system.GraphiteShell;varSvg=graphite.view.widget.svg.Svg;varRect=graphite.view.widget.svg.Rect;varshell=newGraphiteShell('container');varsvg=newSvg();shell.contents(svg);varrect1=newRect();rect1.cursor('move').border(10,'salmon').bgColor('moccasin').bounds(100,100,100,100);svg.append(rect1);});
require(['path/to/graphite'],function(graphite){varGraphiteShell=graphite.view.system.GraphiteShell;varConnection=graphite.view.widget.connection.Connection;varCardinalAnchor=graphite.view.widget.connection.anchor.CardinalAnchor;varRect=graphite.view.widget.svg.Rect;varCircle=graphite.view.widget.svg.Circle;varSvg=graphite.view.widget.svg.Svg;varshell=newGraphiteShell('container');varsvg=newSvg();shell.contents(svg);varr1=newRect();r1.cursor('move').border(1,'salmon').bgColor('moccasin').bounds(100,100,100,100);svg.append(r1);varr2=newRect();r2.cursor('move').border(1,'salmon').bgColor('moccasin').bounds(300,100,100,100);svg.append(r2);varr3=newCircle();r3.cursor('move').border(1,'salmon').bgColor('moccasin').bounds(100,300,100,100);svg.append(r3);varconn1=newConnection();conn1.sourceAnchor(newCardinalAnchor(r1,{pos: 'E'}));conn1.targetAnchor(newCardinalAnchor(r2,{pos: 'W'}));svg.append(conn1);varconn2=newConnection();conn2.sourceAnchor(newCardinalAnchor(r1,{pos: 'S'}));conn2.targetAnchor(newCardinalAnchor(r3,{pos: 'N'}));svg.append(conn2);});
If your constructor inherits from graphite.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 checkgraphite.view.system.GraphiteShell,graphite.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}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
Just load your app url with #mode=debug
http://localhost/examples/intersection/main.html#mode=debug
This module is for WYSIWYG editor for graphical model. (now working ...)
<!DOCTYPE html><htmllang="en"><head><metacharset=utf-8/><title>graphite</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><divid='palette'></div><divid='viewer'></div><scriptsrc="../../../external/requirejs/require.js"></script><scriptsrc="configs/requirejs-config.js"></script><scriptsrc="main.js"></script></body></html>require(['graphite/graphite','./controller/DiagramController','./controller/ShapeController','./menu/ContextMenu','./model/Diagram','./model/DiagramModelFactory','./model/Shape'],function(graphite,DiagramController,ShapeController,ContextMenu,Diagram,DiagramModelFactory,Shape){varDomain=graphite.editor.system.Domain;varTool=graphite.editor.tool.Tool;varGraphicEditor=graphite.editor.system.GraphicEditor;varGraphicViewer=graphite.editor.system.GraphicViewer;varGraphiteShell=graphite.view.system.GraphiteShell;vareditor=newGraphicEditor();editor.create({'viewer': 'viewer','palette': 'palette','model-factory': DiagramModelFactory,'viewer-factory-rule': [[Diagram,DiagramController],[Shape,ShapeController]],'context-menu': ContextMenu});});