2D planning utils
This repository contains utils for implementing 2d planning editors in an Combeenation Configurator.
API Documentation
Dependency Documentations and Examples
Here are some useful links to the documentation of the used external packages:
-
InfiniteViewer | Documentation
-
Moveable | Documentation
-
Selecto | Documentation
-
SVG.js | Documentation
Daybrush (the package owner of infinite viewer, moveable and selecto) has a very useful storybook which shows a lot of examples:
Storybook Daybrush
Functionalities
$3
This handler can be used to attach to a
Dataview component of the configurator.
It allows you to drag and drop from a
Dataview into a drop container and provides events to write custom behaviors.
#### Usage
1. Create the
CbnDataviewDragManager specifying the type of the custom drag data, the
dataview to drag items from, a selector for the target container (where items will be dropped into), and optionally the class of disabled dataview items.
2.
onDragStart and
onDrag need to be overwritten to set the drag data and handle the drop logic, respectively. Drag image creation, drag image positioning and drop zone detection are done by the handler.
Optionally,
onDragEnd can be overwritten for any post drag logic.
See docs for more infos:
CbnDataviewDragManager
$3
Provides a full infinite 2d viewer which can be used to control complex planning modes. In addition to the default features, it offers custom methods such as automatic viewport centering.
#### Usage
1. Create the
CbnInfiniteViewer specifying the container element, and optionally
CbnInfiniteViewerOptions for customization. See
InfiniteViewerOption for detailed information.
See docs for more infos:
CbnInfiniteViewer
$3
Can be used to make html elements moveable and draggable (and much more) inside the infinite viewer.
It provides a lot of functionality out-of-the-box and has been adapted with several Combeenation-specific methods.
All necessary events are exposed and can be fully customized.
#### Usage
1. Create the
CbnMoveableSelectoManager specifying the
CbnInfiniteViewer to use, selectors for the moveable items and the container, and optionally
MoveableOptions.
2. Overwrite the events you need. Using
onSelect for selection handling and
onDrag for position handling is advised.
See docs for more infos:
CbnMoveableSelectoManager
$3
Provides methods that are frequently used across various projects.
These methods cover a wide spectrum, from simple unit conversions to complex mathematical calculations, useful SVG manipulations, and much more.
See docs for more infos:
-
CbnMathUtils
-
CbnMiscUtils
-
CbnSvgUtils
$3
You can view the exported and provided types in the documentation:
Documentation - Types
Infinite Viewer,
Moveable and
Selecto types are re-exported.