A planogram is a visual representation of a store's products or services, often used as a tool to maximize sales.
Drag-and-drop "items" from the Palette onto "racks" in the Diagram. "Items" are implemented as Nodes; "racks" are implemented as Groups. Once items have been placed on a rack, they can be resized, if necessary. The DraggingTool.isGridSnapEnabled and ResizingTool.isGridSnapEnabled are both set to true to allow for snapping to the background grid. Node and Group templates both use dragging functions to allow for highlighting so the user knows which rack an item will belong to.
A pure CSS Accordion is used to create the four collapsible Palettes.
See also Northwoods Software's planogramming services: GoPlanogram.
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 provides functionality to display a grid of lines drawn at regular intervals. Grid Panels can also force dragged parts to be aligned on grid points, and resize parts to be multiples of the grid cell size.
Grids are implemented using a type of Panel, Panel.Grid. Grid Panels, like most other types of Panels, can be used within Nodes or any other kind of Part. However when they are used as the Diagram.grid, they are effectively infinite in extent.
More information can be found in the GoJS Intro.
GoJS is intended to run in any environment that executes JavaScript. This includes on browsers and within browser frameworks, and also in headless contexts such as Node.js.
We maintain examples for common frameworks:
More information, including usage on frameworks including Electron, Blazor, and node.js, can be found at the GoJS Intro.