A planogram is a visual representation of a store's products or services, often used as a tool to maximize sales. GoJS can be used to build planogramming software for display (such as inventory monitoring) or interactive control and shelf layout.
How it works: Use the Palette on the left to drag and drop sodas (cans and bottles) onto vending machines in the main diagram area. Sodas are implemented as Nodes, while vending machines are Groups. When you drag a soda over a vending machine, valid drop zones are highlighted using invisible helper nodes (they then become visible to show the highlight), making sodas snap into the available slots.
Edit Mode & Duplicates: Use the HTML toggles under the palette to turn on and off Edit Mode and Allow Duplicate Sodas.
HTML Interaction: The controls and popups in this sample use custom HTML editors. Clicking shelf height buttons or add shelf buttons opens HTML input dialogs for editing. Right clicking on a soda shows an HTML button allowing you to fill the entire row with that particular type of soda.
This sample uses Geometry Path Strings to create the shapes of the highlights on the corners of parts of the vending machine. It also uses itemArray Panels to display a variable number of rows (shelves) in each vending machine, and another itemArray Panel in each shelf to display a variable number of columns.
This sample uses Animation to make the vending machines fall back down to the ground when you move them.
See also Northwoods Software's planogramming services: GoPlanogram.
Diagram Model saved in JSON format:row(s)
px tall
The Group class is used to treat a collection of Nodes and Links as if they were a single Node. Those nodes and links are members of the group; together they constitute a subgraph.
A subgraph is not another Diagram, so there is no separate HTML Div element for the subgraph of a group. All of the Parts that are members of a Group belong to the same Diagram as the Group. There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes. There can even be links between member nodes and the containing group itself.
More information can be found in the GoJS Intro.
A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.
More information can be found in the GoJS Intro.
GoJS Diagrams can be used alongside other HTML elements in a webapp. For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the HTMLInfo class.
More information can be found in the GoJS Intro.
A CommandHandler handles all default keyboard input events in a Diagram. There are many predefined methods on CommandHandler that implement common commands to operate on the Diagram or the current Diagram.selection>.
You can override CommandHandler.doKeyDown to handle additional keyboard shortcuts or to change which commands are invoked via the keyboard.
Your code can invoke a command by calling the appropriate method on the Diagram.commandHandler. Each command method has a corresponding can... predicate that your code can use to enable or disable any buttons that invoke the command. Your code can customize the behavior of a command by overriding the method on CommandHandler, or by setting properties on the CommandHandler or Diagram or Parts -- see GoJS Permissions.
There are several CommandHandler extensions that provide additional functionality.
More information can be found in the GoJS Intro.
GoJS offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.
The Diagram.animationManager handles animations within a Diagram. The AnimationManager automatically sets up and dispatches default animations, and has properties to customize and disable them. Custom animations are possible by creating instances of Animation or AnimationTrigger. More information can be found in the GoJS Intro.
GoJS defines several Panels for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels.
These predefined panels can be used as if they were Panel-derived classes in calls to GraphObject.build. They are implemented as simple visual trees of GraphObjects in Panels, with pre-set properties and event handlers.
More information can be found in the GoJS Intro.
The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.
One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.
More information can be found in the GoJS Intro.
It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array. In GoJS, this is simply achieved by binding (or setting) Panel.itemArray. The Panel will create an element in the panel for each value in the Array. More information can be found in the GoJS Intro.
The "Table" Panel, Panel.Table, arranges objects in rows and columns. Each object in a Table Panel is put into the cell indexed by the value of GraphObject.row and GraphObject.column. The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have. More information can be found in the GoJS Intro.
Tools handle all input events, such as mouse and keyboard interactions, in a Diagram. There are many kinds of predefined Tool classes that implement all of the common operations that users do.
For flexibility and simplicity, all input events are canonicalized as InputEvents and redirected by the diagram to go to the Diagram.currentTool. By default the Diagram.currentTool is an instance of ToolManager held as the Diagram.toolManager. The ToolManager implements support for all mode-less tools. The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool. This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished, at which time the diagram's current tool reverts back to the Diagram.defaultTool, which is normally the ToolManager, again.
More information can be found in the GoJS Intro.