vaheqelyan / svelte-grid Goto Github PK
View Code? Open in Web Editor NEWA responsive, draggable and resizable grid layout, for Svelte.
Home Page: https://svelte-grid.now.sh/
License: MIT License
A responsive, draggable and resizable grid layout, for Svelte.
Home Page: https://svelte-grid.now.sh/
License: MIT License
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.
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.
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.
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?
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
gap
which sets the gap in x and y directions.gap-x
and gap-y
... similar to what Tailwind does https://tailwindcss.com/docs/gap<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...
and here with gap={10}
, which looks better vertically but then wastes valuable screen realestate horizontally
layer in layer would be nice
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.
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
What new ?
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
"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
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
Very cool project!
How to make Grid from different Components.svelte
Hi, I'm trying to nest the grid in another grid, but not succeeding. Is this something that should work? Thanks
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
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.
Demo link in repo description is wrong :(
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
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! 😍
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?
Major version 2 means much cleaner source code
Feature
Breaking change
useTransform
will be removed, blocks will be moved using translate
onlyFixes (Issues you probably won't see in the 'Issues' section)
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
Hi, is it possible to drag items between two or more grids ?
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
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.
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)
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 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.
Struggling how to select a div from the grid and flash it.
Would be excellent if there's an example :-)
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;
}
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>
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?
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?
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
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.
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/.
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?
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
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 !!!
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>
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
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.
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.
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
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/
For proper work should be transpiled without spread operators.
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?
- Layout can be serialized and restored
There is no single example of how to do this...
Is there a way to bind 2 panes together so when one resizes the other responds automatically to +/- the changed dimension?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.