@combeenation/2d-planning-utils v0.2.0
2D planning utils
This repository contains utils for implementing 2d planning editors in an Combeenation Configurator.
Dependency Documentations and Examples
Here are some useful links to the documentation of the used external packages:
Daybrush (the package owner of infinite viewer, moveable and selecto) has a very useful storybook which shows a lot of examples: Storybook Daybrush
Functionalities
Dataview Drag and Drop Handler
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
Create the
CbnDataviewDragManager
specifying the type of the custom drag data, thedataview
to drag items from, a selector for the target container (where items will be dropped into), and optionally the class of disabled dataview items.onDragStart
andonDrag
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
Infinite 2D Viewer Integration
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
- Create the
CbnInfiniteViewer
specifying the container element, and optionally CbnInfiniteViewerOptions for customization. See InfiniteViewerOption for detailed information.
See docs for more infos: CbnInfiniteViewer
Elements Moveable
and Selecto
manager
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
Create the
CbnMoveableSelectoManager
specifying theCbnInfiniteViewer
to use, selectors for the moveable items and the container, and optionally MoveableOptions.Overwrite the events you need. Using
onSelect
for selection handling andonDrag
for position handling is advised.
See docs for more infos: CbnMoveableSelectoManager
Various util methods and standardized functions
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:
Provided Types
You can view the exported and provided types in the documentation: Documentation - Types
Infinite Viewer, Moveable and Selecto types are re-exported.