Home

Graphite View

Major Classes

GraphicContainer

• GraphicContainer wraps and manages a given HTMLElement which will contain graphical contents.

    interface GraphicContainer {
        void setElement(HTMLElement element);
        HTMLElement getElement();
        void setContents(Widget contents);
        Widget getContents();
        void setGraphicContextFactory(GraphicContextFactory Factory);
        GraphicContextFactory getGraphicContextFactory();
        GraphicContext graphicContext();
    };

   GraphicContainer knows

   1. What element contains(wraps) graphical contents
   2. How to append user's content
   3. How to construct graphical context(layers)
   4. How to get graphical context

    <div id='container'></div>

    //Pseudo code.
    var element = document.getElementById('container');
    var container = new GraphicContainer(element, GraphicContextFactory);

• GraphicContainer provides a way to add user's content root.

    //Pseudo code.
    var userContentRoot = new SomeWidget();
    container.setContents(userContentRoot);

• GraphicContainer should create and return GraphicContext.

    //Pseudo code.
    var graphicContext = container.getGraphicContext();

GraphicContext

• GraphicContext is a place which user's contents will be painted.

    interface GraphicContext {
        void setLayer(String id, Layer layer);
        Layer getLayer(String id);
        void root(Widget contextRoot);
        Widget root();
        void setEventReceiver(HTMLElement receiver);
        HTMLElement getEventReceiver();
        void setContents(Widget contents);
        void setContentsMapRule(Map rule);
    };

• GraphicContext provides ways to access specific graphic contexts such as svg, document, connection, grid, feedback, guide, handle, mask, viewport and any user defined graphic context.

    var svgLayer = graphicContext.getLayer('SVG_LAYER');
    var rect = new Rect();
    svgLayer.append(rect);

• getEventReceiver() method returns HTML Element, which receives all the events occurred on GraphicContext.

    //Pseudo code.
    var receiver = context.getEventReceiver();
    receiver.addEventListener();
    //This is just an example, you don't need to do this,
    //graphite automatically listens events from receiver.

• GraphicContext can be configured by user defined GraphicContextFactory. Without user defined GraphicContextFactory, GraphicContainer makes default contexts(layers) using DefaultGraphicContextFactory.

GraphicContextFactory

• GraphicContextFactory constructs a structure for GraphicContext.

    interface GraphicContextFactory {
        GraphicContext createGraphicContext();
    };

• Basically and internally, DefaultGraphicContextFactory will be used.
• If you need custom layer structure for GraphicContext, you can make your own GraphicContextFactory.

    var shell = new GraphiteShell('container', SomeGraphicContextFactory);

• GraphicContextFactory should inherits GraphicContextFactory abstract constructor.