LimberGridView

Try it out!

View this example code plugged in using React

For API reference and documentation, please refer to this page.

Installation

npm install @sharma-subendra-kr/limber-grid-view

Instantiate

// Import CSS as per your directory structure
import "../node_modules/@sharma-subendra-kr/limber-grid-view/dist/index.css";

import LimberGridView from "@sharma-subendra-kr/limber-grid-view";

/*
	el is an element with fixed height and width where LimberGridView is rendered
	
	positionData is an array with position data in format 
	[{x1: number, x2: number, y1: number, y2: number}, ....]
	OR
	[{x: number, y: number, width: number, height: number}, ....]
	OR
	[{}, {}, {}, ....] // here squares are rendered
	
	Please read the wiki for details about all the callbacks
*/
const limberGridView = new LimberGridView({
	el: el.current,
	itemMouseDownMoveCheck: itemMouseDownMoveCheck,
	callbacks: {
		renderContent: renderContent,
		renderComplete: renderComplete,
		resizeComplete: resizeComplete,
		moveComplete: moveComplete,
		addComplete: addComplete,
		removeComplete: removeComplete,
		cutSpaceComplete: cutSpaceComplete,
		renderPlugin: renderPlugin,
		removePlugin: removePlugin,
		getArrangeTime: getArrangeTime,
		getLogMessage: getLogMessage,
	},
	publicConstants: {
		showBottomLeftResizeGuide: true,
		autoScrollForMouse: true,
		deskInteractionMode: "CUTSPACE",
		latchMovedItem: true,
	},
	positionData: positionData,
});

Current version LimberGridView 1.0.0-beta.14.

LimberGridView, a powerful JavaScript Library using Computational Geometry to render movable, dynamically resizable, and auto-arranging grids. Written in vanilla JavaScript, it can be plugged into most frameworks, plus it has a plugin for React applications. It gives users the most optimal arrangements using its highly efficient and fine-tuned algorithm.

This is a beta release. This version might be unstable.

Although many issues were identified and resolved in this current release, you might sometimes encounter unusual behavior.

Improvements in the arrange algorithm are made in patches. I try to make sure it doesn't affect any APIs.

Features:

• Built-in Intersection Observed
• Built-in Resize Observer
• Undo-Redo
• Touch support for tablets
• Mobile view
• Plugins for React. LimberGridView has "renderPlugin" and "removePlugin", these are callbacks, that pass the element which is the item itself. ReactDOM.render and ReactDOM.unmountComponentAtNode should be called in "renderPlugin" and "removePlugin" respectively.

To get tips on how to use LimberGridView, head over to this link.

Contact

If you encounter any problems, you can contact me by emailing me to the email address mentioned on any file on the license header.

License

Copyright © 2018-2022, Subendra Kumar Sharma. All rights reserved.

This file is part of LimberGridView.

LimberGridView is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

LimberGridView is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with LimberGridView. If not, see https://www.gnu.org/licenses/.

Written by Subendra Kumar Sharma.