vaheqelyan/svelte-grid

A responsive, draggable and resizable grid layout, for Svelte.

svelte-grid

About

• 100% Svelte (or vanillajs) - no jQuery, no 3rd party dependencies
• Compatible with Sapper (SSR Svelte)
• Draggable widgets
• Resizable widgets
• Static widgets
• Layout can be serialized and restored
• Responsive breakpoints
• Limit the minimum and maximum width / height when resizing
• Provide helper functions
• Custom dragging
• Grid gap
• Soft autoscroll

Installation

via NPM

npm i svelte-grid --save-dev

svelte-grid's Issues

Mobile Safari - Unexpected token '...'. Expected a property name

For proper work should be transpiled without spread operators.

ParseError: Attributes need to be unique, on bind:items={items}

When I run the default usage example, I get the following error during compile.

Error: Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ParseError: Attributes need to be unique (45:32)

Is auto height impossible?

Articles are often very irregular in size depending on the
number of characters and are difficult to predict...

Couldn't i dynamically display a grid of texts that are difficult to predict in size?

Release notes?

Hi @vaheqelyan,

it's been a while since I have upgraded svelte-grid since v 1.11.0 and I found breaking changes in several points of my code.

The breaking changes at #43 seem to be incomplete. I also had a look at the releases but couldn't find any release notes...

Could you provide a list of changes, please?

Thanks,
F

prevent onmousedown on grid.items' content to drag item

Hi @vaheqelyan,

I want to prevent the onmousedown on the grid.items' content to drag item. In my use case, I have an editor which is contained by the grid item and can not select the text has it drags the item.

Or can I restrict event a specific area of the grid.items' content?

Many thanks,
F0

Error building www

Hi,

I'm trying to build the latest version of the www examples (with dev, build scripts) but unsuccessful with this type of error:

[!] Error: Could not resolve '../../components/svelte-grid/index.svelte' from src/routes/examples/min_max.svx Error: Could not resolve '../../components/svelte-grid/index.svelte' from src/routes/examples/min_max.svx at error (/Users/francisco/Documents/dev/MIMIC/svelte-grid-upstream/www/node_modules/rollup/dist/shared/rollup.js:5251:30) at ModuleLoader.handleResolveId (/Users/francisco/Documents/dev/MIMIC/svelte-grid-upstream/www/node_modules/rollup/dist/shared/rollup.js:18389:24) at /Users/francisco/Documents/dev/MIMIC/svelte-grid-upstream/www/node_modules/rollup/dist/shared/rollup.js:18358:22 at async Promise.all (index 1) at async ModuleLoader.fetchStaticDependencies (/Users/francisco/Documents/dev/MIMIC/svelte-grid-upstream/www/node_modules/rollup/dist/shared/rollup.js:18356:34) at async Promise.all (index 0) at async ModuleLoader.fetchModule (/Users/francisco/Documents/dev/MIMIC/svelte-grid-upstream/www/node_modules/rollup/dist/shared/rollup.js:18333:9) at async /Users/francisco/Documents/dev/MIMIC/svelte-grid-upstream/www/node_modules/rollup/dist/shared/rollup.js:18306:48 at async Promise.all (index 7) at async ModuleLoader.fetchDynamicDependencies (/Users/francisco/Documents/dev/MIMIC/svelte-grid-upstream/www/node_modules/rollup/dist/shared/rollup.js:18296:30)

svelte-grid isn't in '../../components/svelte-grid/index.svelte'.

I am missing anything?

Thanks,
F

Doesn't work in desktop Firefox because `TouchList` is not defined

Firefox supports TouchList but on desktop v68 it doesn't define the object on the window, so the code errors here and prevents it from working:

svelte-grid/src/utils/other.js

Line 12 in 1fe4313

const isTouch = ev.constructor === TouchList;

Very cool project!

Flash a grid cell

Struggling how to select a div from the grid and flash it.

Store for Grid Items with subcomponent hierarchies

Hi @vaheqelyan,

I was wondering if you could provide some insights about using stores for state management of the svelte-grid items list (or layout).

I'm considering a specific use case in which grid items encapsulate different types of subcomponent hierarchies. For instance, some grid-items encapsulate text-editor components, others have charts components.

The grid items are created dynamically and in a number determined by the user, and their subcomponents require state persistence in a store, and will be updated with a fast rate.

It's difficult to find good examples in Svelte of more complex store architecture with the hierarchical state... It is a bit strange to do it with single-level, flat stores. What would be the best approach given how the svelte-grid works?

Thanks in advance,
Francisco

Is it does not support other Bundler besides Rollup?

when i bundle the basic this modules example with rollup, it works.
but it looks like a does not work on parcel or webpack .
(i have set the relevant Svelte bundling modules for each bundler.)

Error Example:

Uncaught (in promise) TypeError: Cannot read property 'getBoundingClientRect' of undefined

Uncaught TypeError: Cannot read property 'x' of undefined

Static item can be force moved

Hi Vahe,

I found another issue which can be reproduced using your static example page.

Basically dragging the 'left/1st' item to the right hand side of the 'right/3rd' item forces the static 'central/2nd' item to move into the left most position. You can also drag the first item above the static item which will move it down. It looks like the 'back shadow' is causing the issue but I didn't really investigate it further.

Svelte-grid v2 ?

Major version 2 means much cleaner source code

Changes

Feature

• Autoscroll
• Faster for touch screens (Probably micro optimization)
• Any user interaction will be disabled while resizing or dragging
• Breakpoints for items.

Breaking change

• useTransform will be removed, blocks will be moved using translate only
• ~

Fixes (Issues you probably won't see in the 'Issues' section)

• If the minimum width is not set to 1, then your widget will simply disappear.
• If you set breakpoints for your grid.... it will not match the provided coordinates

Refactoring
A new component will be created that will be responsible for moving and resizing the element
Dragging and resizing will be organized using Pointer events
So we'll get rid of these ugly lines

<div on:mousedown={item.draggable ? dragOnMouseDown.bind(this, item.id) : null}
        on:touchstart={item.draggable ? dragOnMouseDown.bind(this, item.id) : null}>
{...}
</div>

instead we will have this

<div on:pointerdown={pointerdown} 

With that accomplished, I'll start working on refactoring the ./utils/matrix.js and ./utils/item.js files. There is nothing wrong with these files and their implementation

v2 is more about refactoring and code clean up

Feature : free position option

Could there be a way to prevent it from moving the existing widgets and aligning them top -left ?

this happens mostly since the click event as far as i could see in the code, really advanced thinking by the way, couldn't grasp allot of what's done there

thank you so much, i love this component !!!

How to serialise and restore?

Would be excellent if there's an example :-)

How serialize and restore ?

• Layout can be serialized and restored

There is no single example of how to do this...

Unable to use svelte-grid within web componemnt

When imported inside a svelte web component template I get the following error when compiling;

(!) Plugin svelte: No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/> node_modules/svelte-grid/src/index.svelte
1: <style>
^ 2: :global(body) {
3: overflow: scroll;

Do I need to do something to use nested components?

gap don't working

Hello! Thanks for this repo!

I wanted to put spaces between the tiles, but when I set the “gap” property, the tile flies off the screen when moving.

Multiple grids interactions ?

Hi, is it possible to drag items between two or more grids ?

Disabling the initial load animation?

Thanks for putting this component together. I have a question about the grid loading animation..

When the grid is initialised, all the cards animate from {x: 0, y: 0} into their respective positions. Which part of the codebase is responsible for this, and is it possible to provide a different animation via a prop, or disable it altogether?

Grid from Components

How to make Grid from different Components.svelte

getItem / getItems in order to store the position of the elements

Be able to get item or items to store items position so when users refresh the app or load the page again render everything as they left it before.

Webpage crashes

When I try to use the code from basic example as a svelte component the web page crashes.

I tried using sapper and the same thing happened.

It does not give any error either in npm terminal or in the browser.

Error with latest svelte-grid in Sapper.

The new version of svelte-grid is giving me the following error in Sapper.

webpack:///./node_modules/svelte-grid/src/index.svelte?:1
throw new Error("Module parse failed: Unexpected token (134:36)\nFile was processed with these loaders:\n * ./node_modules/svelte-loader/index.js\nYou may need an additional loader to handle the result of these loaders.\n| \t\t\tid: item.id,\n| \t\t\tindex: i,\n> \t\t\tresizable: item[getComputedCols]?.resizable,\n| \t\t\tdraggable: item[getComputedCols]?.draggable,\n| \t\t\txPerPx,");
^

Error: Module parse failed: Unexpected token (134:36)
File was processed with these loaders:
 * ./node_modules/svelte-loader/index.js
You may need an additional loader to handle the result of these loaders.

Grid items should not have background color

This is a very minor issue, however, I think it's too opinionated for the library to decide what background color grid items should be. It makes sense for grid items to be grey in the demo, but not in the code that's shipped with the library.

To override this I have this in my code:

:global(.svlt-grid-item) {
  background: transparent !important;
}

Set grid container height limit/rows

I would like to suggest a feature: adding a containerHeightLimit or specify a maximum number of rows so the grid can have a limited height when moving widgets.
I'm happy to work on PR. Would like to get your thoughts on this.

v1.11 npm package broken?

Hi, the latest version of the npm package won't build for some reason - although it works fine using the version from this repo.

Is it possible don't sort blocks after move

Hello, im building site structure with this grid tool and admin panel.
Everything works okay except sorting which is called each time we translate block, for example, from the center of the grid. Now everything is restructuring and moving. Is it possible now to ignore this and leave just a hole?
You can find such logic here: https://dsmorse.github.io/gridster.js/

Reactive movement?

Is it possible to reposition other elements reactively while dragging or resizing an element?

Example: https://strml.github.io/react-grid-layout/examples/0-showcase.html

I looked through the docs and examples, but couldn't find anything relating to this.

Not working in Svelte 3.17.0+

See https://svelte.dev/repl/35a506b9456d463ab441841859e1bb9f?version=3.17.0

The grid components are not scrolling(on mobile).

I want to use grid but still adjust object size or change object position, so that I can just scroll through it.
However, grid components seem to receive all touchmove events only internally. Can't i make the page scroll when you scroll through the grid component?

What is the reason that `getContainerHeight` return at least twice as yPerPx?

Why is container.js implemented as Math.max(getRowsCount(items), 2) * yPerPx rather than Math.max(getRowsCount(items), 1) * yPerPx? Why is the 1-row case special so that the container's height is not the row height?

layer in layer would be nice

layer in layer would be nice

Z-index/stacking order of items

What is the best way to adjust the stacking order/z-index of grid items?

I have a grid item that opens a dropdown from within the item. This dropdown is displayed behind the other grid items depending on which order they are generated from the items array.

Changing the z-index of the dropdown doesn't fix the issue.

Any advice would be greatly appreciated.

Uncaught RangeError: Invalid array length

I'm getting this error from the code below

<script>
  import Grid from 'svelte-grid'
  import gridHelp from 'svelte-grid/build/helper/index.mjs'
  import { customAlphabet } from 'nanoid/non-secure'

  const nanoid = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz', 30)

  let items = [
    gridHelp.item({
      x: 0,
      y: 0,
      w: 2,
      h: 2,
      id: nanoid(),
    }),
    gridHelp.item({
      x: 2,
      y: 0,
      w: 2,
      h: 2,
      id: nanoid(),

    }),
  ]
</script>

    <div>
      <Grid bind:items={items} let:item={item} let:index gap={10} cols={10} >
        <div class="content"">
          <div>{ index }</div>
          <div>{ item.id.slice(0, 4) }</div>
        </div>
      </Grid>
    </div>

If I also apply a rowHeight={70} property, the error goes away i.e. <Grid bind:items={items} let:item={item} let:index gap={10} cols={10} rowHeight={70}> works. However, I don't want the row height to be static but rather adjust based on grid items height and its contents 😊

The same can be seen with this REPL... remove the rowHeight and it stops working https://svelte.dev/repl/35a506b9456d463ab441841859e1bb9f?version=3.29.4

gap-x / gap-y

• svelte-grid currently has gap which sets the gap in x and y directions.
• It would be great to have the ability to distinctively set x and y directions using e.g. gap-x and gap-y... similar to what Tailwind does https://tailwindcss.com/docs/gap
• Use case: I'd like to optimize for small screens e.g. mobile phones. There I'd like to have less gap horizontally than vertically so I'd set

<Grid let:item let:index { breakpoints } gap-x={ 5 } gap-y={ 10 }>

Currently I can only choose to have the same gap in both directions which makes the layout look bad in cases of overlapping absolutely positioned badges on the grid items for example...

here with gap={5}

and here with gap={10}, which looks better vertically but then wastes valuable screen realestate horizontally

Possible style issues

Hello! Thanks for the cool component.

I have two 'issues' with it.

First is:

:global(body) {
    overflow: scroll;
}

That causes some scrollbar visual issues in my container element. It draws a little white rectangle at the bottom right (sorry, I didn't take a screenshot). The only way to fix this is to disable and remove svelte-grid. Trying to override in my component or at my scss page level doesn't work. My app background is a darker color and the little white rectangle showing up is not something I can have.

Second is how to pin the svelte-grid component to my element that contains the grid? I was able to do this after my component (that contains svelte-grid) mounted and I did the document hight calcs manually. But when I move a grid item and the drop it, the grid container resizes.
My use for this is not to have a scrolling grid so much as it is to allow moving around of items in a fixed height scenario.

Thanks again.

Svelte-grid v3

What new ?

• The way you provide your items has changed, now you have to specify which column the item belongs to

v2

const items = [
  gridHelp.item({/***/}),
  gridHelp.item({/***/}),
]

v3

const { item } = gridHelp;
const items = [
  {
    id: id(),
    5: item({
      x: 0,
      y: 0,
      w: 2,
      h: 2,
    }),
    3: item({ x: 0, w: 2, h: 2, y: 0 }),
    1: item({ x: 0, y: 0, w: 1, h: 2 }),
  },
];

• breakpoints removed, you need to specify it using cols

v2

<script>
const breakpoints = [
  [1500, 5],
  [1024, 3],
  [500, 1],
];
</script>
<Grid breakpoints={breakpoints} />

v3

<script>
const breakpoints = [
  [1500, 5],
  [1024, 3],
  [500, 1],
];
</script>
<Grid cols={breakpoints} />

• Easier serialization for adaptive grid (#44)
  Example https://github.com/vaheqelyan/svelte-grid/blob/master/www/src/routes/examples/responsive-local-storage.svx

• will-change: transform replaced with will-change: auto

v2 Result

v3 Result

• "Custom dragger" By setting the ‘custom’ property to true, you can specify the element to which the drag event will be assigned, example https://svelte-grid.now.sh/examples/custom-dragger (#25)

• Gap for x and y axes (#52), example https://svelte-grid.now.sh/examples/gap

---

No changelog, sorry (Will work on it later #50), hope all repls are up to date, the big upcoming deal will be auto-scrolling, outdated packages updated to the latest version

Dynamically changing items 'static' property

Hi Vahe,

I have a requirement to make an item static based on the users interaction. Basically allow them to 'pin' an item into place. The use case is that they would add a chart to my page then position it within the other charts before pinning it into place where it would remain as a static item.

I have tried changing the static property using the following code with no luck:-

 function pinItemContainer(item) {
    item.static = !item.static; 
    gridHelp.resizeItems(items, cols);   
  }

Is dynamically changing the static attribute possible?

Demo does not work

Demo link in repo description is wrong :(

repl & source for examples/events

Hi, looking at all the examples at https://svelte-grid.now.sh/examples I was wondering why there's no source or repl for https://svelte-grid.now.sh/examples/events ?

What do you mean by events? Page just says This particular example has dragging and resizing turned off.

I plan on coupling svelte-grid via GunDB or firebase firestore and build a distributed kanban where people can collaborate and which updates in real-time via p2p... starting from the localstorage example, not writing stuff to local storage though but rather directly into firestore or GunDB 🤓

However, last things, that's why this issue... I'd like to grok what you mean by 'events' on context of svelte-grid?

Other than that, this is amazing work, I love it! 😍

Make the resizer a slottable element

Currently my grid items are set up so that they scale when pressed. Because the resizer is inside the svelte-grid source code, I don't have a lot of control over it, and as a result it doesn't scale with the rest of the content in the grid item.

It'd be great if it were possible to pass my own resizer element into the grid via a slot. The existing resizer could be extracted into a component that is exported by svelte-grid so that if I were to use the resizer provided by svelte-grid I just import it from svelte-grid, and add it via slot.

Example:

<script>
import Resizer from 'svelte-grid';
thingIsTrue = false;
</script>

<Grid cols={3} bind:items={items} let:item={item}>
  <div>{item.id}</div>
  <Resizer class:my-custom-class={thingIsTrue} />
</Grid>

<style>
.my-custom-class {
}
</style>

useTransform slows down

When I use the "useTransform" property and the style for the "transition: transform 0.2s" tile, it moves with a long delay when moving it.

If you do the same for .svlt-shadow-shadow, then the shadow moves pretty well, but not like in the example on the main page of the site https://svelte-grid.now.sh/.

Bug: It's possible to resize items outside the bounds of the grid

If the right edge is on the edge of the grid, and the item is sized below it's maximum width then it's possible to resize the item outside of the grid boundary:

Experiencing this in 3.5.0.

Error in Breakpoints

I have made a component which uses the grid layout, but I get an error creating the breakpoints for responsiveness.

item.js:10 Uncaught TypeError: Cannot read property '10' of undefined
    at item.js:10
    at Array.map (<anonymous>)
    at responsiveItems (item.js:9)
    at ResizeObserver.<anonymous> (index.svelte:107)

<script context="module">
	import { API, graphqlOperation } from 'aws-amplify';
	import { listPosts } from '../graphql/queries';

	import PostLink from './PostLink.svelte';
	import Grid from "svelte-grid";
	import gridHelp from "svelte-grid/build/helper/index.mjs";
	import map from 'lodash.map';

	let items;
	let breakpoints = [[1100, 5], [800, 4], [530, 1]];
	let cols = 10;

	export async function preload(page, session) {
		let { posts } = session;

		if (undefined === posts) {
			const res = await API.graphql(graphqlOperation(listPosts));
			posts = res.data.listPosts.items;
			session.posts = posts;
		}

		// Just generate messy layout
		let layout = generateLayout(posts);
		// Helper function which normalize. you need to pass items and columns
		items = gridHelp.normalize(layout, cols);

		return items;
	}

	function generateLayout(posts) {
		return map(new Array(Object.keys(posts).length), function(item, i) {
			return gridHelp.item({
				x: 0,
				y: 0,
				w: 2,
				h: 6,
				resizable: false,
				draggable: false,
				id: posts[i].id,
				post: posts[i],
			});
		});
	}
</script>

<Grid {breakpoints} items={items} {cols} let:item={item} rowHeight={100} gap={10} dynamic>
	<PostLink post={item.post} />
</Grid>

Grid not initialised to the available screen size when loaded as SPA using svelte-spa-router

Hi Vahe,

Thank you for your excellent code which is perfect to replace the ResizeObservable which I was using (which doesn't yet have great browser support).

I do have a number of queries if you would be so kind:-

Could you clarify how to serialize and de-serialize the grid as this doesn't seem to be covered in the examples and I can't see any reference within the source code. I would guess I just need to JSON serialize the items collections but thought I would ask for the correct approach to be sure.

I also have a strange issue but suspect it is due to either my usage of the grid or my lack of experience with Svelte (I have only been using it for about a month but I do totally love it)

Basically the grid not initializing to the available screen size when loaded using routes. To see the issue in action go to the following prototype and then click on the hamburger and select the 'VIEWS' section. This will change to a page containing the grid and you will notice that the grid doesn't take the available width in the browser. Resizing the browser triggers a re-flow and the space is then used. Loading the page directly or refreshing the page does not have the issue.

I suspect this is an issue with my css styling in my page but if you have any idea as to why it is behaving like this or can suggest any possible fixes that would be appreciated.

Thank you again for the cool component.

Split panes?

Is there a way to bind 2 panes together so when one resizes the other responds automatically to +/- the changed dimension?

Static height not set

In this demo the height is not set during first load if zoom is 110% or below. To fix it you have to zoom in and out again any ideas on this issue?
https://svelte-grid.now.sh/examples/responsive

Z-Index on grid-items conflicts with MDC_Dialog / @SMUI Dialog

Hi Vahe,

I have hit an issue with the default z-index being applied to grid-items i.e.

.svlt-grid-item {
  touch-action:none;
  word-break: break-all;
  position: absolute;
  z-index: 1000; 
}

is causing the content of the grid items to be displayed in front of dialog content:-

I am not sure why you are using 1000 as the default starting z-index and then resetting this to 100 after dragging / resizing events:-

z-index: {item.drag.dragging || item.resize.resizing ? 1000 : 100};

but removing the style:-

.svlt-grid-item {
  touch-action:none;
  word-break: break-all;
  position: absolute;
}

and changing the inline behavior to revert back to being unset:-

z-index: {item.drag.dragging || item.resize.resizing ? 1000 : 'unset'};

resolves the issue for me and doesn't seem to change or break the drag / resize behavior of the grid-items.

Can you advise on the why the z-index for grid-items is currently being toggled so high?
Thanks

Nested grid

Hi, I'm trying to nest the grid in another grid, but not succeeding. Is this something that should work? Thanks

Resize grid item programmatically (with a function)

Is there a way to adjust the size of a grid item programmatically (i.e. with a function on button click) that will also adjust surrounding grid items to compensate for the new size?

With my current method, the grid item overlaps adjacent items.

Please see included REPL for example.
https://svelte.dev/repl/cbf42de2ed464534ab5af5d8031d4ae2?version=3.29.0