Home

Graphite View

Major Classes

GraphicContainer

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

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

   GraphicContainer knows

   1. What element receives user event
   2. What element contains(wraps) graphical contents
   3. How to append user's content
   4. How to construct graphical context(layers)
   5. 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();

• GraphicContainer has an attribute mask, which receives all the events occurred on GraphicContainer.

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

GraphicContext

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

    interface GraphicContext {
        Layer getLayer(String id);
        Widget getContextRoot();
        void setContents(Widget contents);
        void setContentsMapRule(Object 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);

• 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.