cuire / svelte-grid-extended Goto Github PK

Is it possible to have more control over moving and resizing of items?

My use case is a "window manager" where each item has a <Titlebar>. I want the contents of the "windows" to be fully interactive (not draggable), and to move a "window" you drag its titlebar. I also want to be able to resize any of the four corners.

Should I fork this great project, or could it be done through configuration and tricks?

Handling collisions is time consuming and it would be cool not to have to deal with them every tick. I know about this problem, but at the current stage I decided to leave everything as it is and release the new api without these.

The following assertion in your package does not make sense to me. I am setting the row number explicitly, so why is this assertion still triggering?

<Grid cols={0} rows={10} itemSize={{width: 400}} on:change={handlePinnedGridChange} collision="push" bind:controller={gridController}></Grid>

Is there any simple way to access the gridlines themselves so that I can add conditional CSS for making them visible when dragging or resizing the cells?

I want to change plugin api. The current version creates too many restrictions and is not intuitive in many ways.
My plan is to something like this:

<Grid cols={10} rows={10}>
	<GridItem x={0} y={0}>Content<GridItem />
	<GridItem x={1} y={1}>Content<GridItem />
	<GridItem>{ /* somehow calc insert position */}<GridItem />
</Grid>

This will allow users to control the creation of the grid themselves. This approach opens up many possibilities for customization, for example, custom logic for moving a single cell and much more.

Also, this approach will allow you to use slots for modifications (#21).

<Grid cols={10} rows={10}>
	<GridItem x={0} y={0}>
		<div slot="dragHandle">Drag Me</div>
		<p>Content</p>
	<GridItem />
</Grid>

I will probably start working on it in 2 weeks. Stay tuned 💖

I don't know how to word this, but I would like the drag to be based on the current item height/width. For example, how https://bento.me/ works.

I found your project because i was looking for alternatives to svelte-grid since I am not sure if it's still maintained.

What are your plans with this library? do you think your api will be compatible with svelte-grid? do you have any timeline?

Thanks in advance! 🙌

Hey, as the title states i am struggling with this currently. I have a static grid and when resizing the item the page scrolls to the top of the page immediately. What could cause this?

This is my general setup:
Main component:
<Grid rows={20} cols={10} gap={8} class="w-full h-full grid-container z-10" bind:controller={gridController} > {#each items as item, id} <GridTypeItem {item} /> {/each} </Grid>

GridTypeItem component (simplified):
Script:
`function moveStart() {
console.log("moveStart");
document.body.classList.add("disable-selection");
}

function moveEnd() {
console.log("moveEnd");
document.body.classList.remove("disable-selection");
}`

`<GridItem
class="grid-item hover:bg-black/10 transition-colors rounded-md hover:dark:bg-slate-100/10"
id={item.id.toString()}
bind:x={item.x}
bind:y={item.y}
bind:w={item.w}
bind:h={item.h}
on:previewchange={moveStart}
on:change={moveEnd}
previewClass="bg-black/20 rounded-md"

• Commented content -

Is there anything known that could cause this?

When changing size of the container during resize/move pointermove event difference between initialPositon and current pointer position is becomes invalid.
Should add resizeObserver to pointerdown callback functions and somehow calc dif. 😵😵😵😵😵

Сurrent version of collisions is experemental and forces vertical compression of items. I want to add new compress: 'vertical' | 'horizontal | 'none' prop, that used to determine how grid should resolve these conflicts.
The tricky part is how to rearrange the elements when they shouldn't be compressed.

Add an utility or helper class that can return an available position within the grid given a new potential item (only w and h) and current items. This helper could provide the x and y coordinates where the new item can be placed within the items.

The function could be based on getAvailablePosition

Currently we are limited to classes only, but I would like to dynamically change the GridItem background and right now its not possible, unless I make class for every color imaginable.

Please add GridItem prop to pass and merge style property.

That compression is terrible!!!!!!

It would be super helpful to enable custom attributes on items.
For example to enable dragging and dropping custom components to a grid like this:

<script>
import DataTable from "..."
const items = [{
       { id: '0', x: 0, y: 0, w: 1, h: 1, component:{type: DataTable, properties:{ ... } } }
}]
</script>

<Grid {items} cols={10} rows={10} let:item>
       <svelte:component this={item.component.type} {...item.component.properties} />
</Grid>

Hi,
Can you please advise us when responsibility will be added? That is the only thing what blocking me to use this nice package..

Thx a lot

When dragging an item A, if this item overlaps with another item B. Then item B should be moved to the first place where it fits.

Please set it to auto in order to accommodate mobile users

...

Hi, thanks for this lib.
I have a performance issue with this code

<button on:click={resetGrid}> Reset</button>
		<Grid collision="compress" {itemSize} cols={10} gap={20} bind:controller={gridController}>
			{#each widgetsGrid as value, i (i)}
				<div transition:fade={{ duration: 300 }}>
					<GridItem
						class="grid-item"
						activeClass="grid-item-active"
						previewClass="bg-green-500 rounded"
						id={value.name}
						bind:x={value.x}
						bind:y={value.y}
						bind:w={value.w}
						bind:h={value.h}
					>
						<a href={getRoutePath(value.name)}>
							<span>
								<i
									class="fa-light text-xl font-semibold {value.icon}"
									aria-hidden="true"
								/>
							</span>
							<span>{$t(camelCase(value.name))}</span>
						</a>
					</GridItem>
				</div>
			{/each}
		</Grid>

I need to long press an element an release to drag'n'drop and it's not smooth .. I don't understand why

I used an Array with

{
	name: 'test',
	icon: 'fa-steering-wheel',
	w: 2,
	h: 1
}

And I create the final object for my grid with :

let widgetsGrid: Widget[] = widgets.map((widget: Widget, i: number) => ({
		...widget,
		x: (i % 5) * widget.w,
		y: Math.floor(i / 5)
	}));

To create a grid with element of width 2

When the 'Compress' collision is activated, removing an item should cause the remaining items to compress and fill any gaps. Currently, this is not occurring, resulting in empty spaces.

REPL - https://svelte.dev/repl/3007bb68636e4fa4b9270b9cf60d298d?version=4.2.1

When building with vite the following warning is shown:

12:03:22 [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Maybe is related to:
https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition

I have a store that's an array of objects representing items in the grid.

It would be really nice to be able to do just this and have the grid reflect any changes reactively:

<script>
  import Thing from './Thing.svelte'
  import { things } from '../stores/things'
  let items = derived(things, mapThingsToItems)
</script>

<Grid {items} cols={10} rows={10} let:item>
  <Thing data={item.data} />
</Grid>

• Add ability to resize in different directions and config to customize it
• Add way to style it.
• Think about passing custom dom element or svelte component to override default resize handle.

#52 broke the style of an internal app. the grid no longer consider the total height and width of all items as a container 🥹 @cuire Is it possible to rollback? or any other way to add those styles on client side?

I think the deletion of this is what causes the style bug now.

$: if ($gridSettings.itemSize) containerWidth = _cols * ($gridSettings.itemSize.width + gap + 1);
$: if ($gridSettings.itemSize) containerHeight = _rows * ($gridSettings.itemSize.height + gap + 1);

REPL working on 1.1.1 https://svelte.dev/repl/09ea1a4b3f964f209d22c9ebe6d3b82c?version=4.2.1 (not working correctly with 1.1.2 / 1.1.3)

Remove global styles where its possible, and move all global styles to css stylesheet file

╰(°▽°)╯ o(￣▽￣)ブ

When cols or rows are objects and contain 0, the assert function does not work.

Broken lines:

// ./utils/assert.ts
(typeof cols === 'object' && Object.values(cols).includes(0)) ||
(typeof rows === 'object' && Object.values(rows).includes(0) && itemSize === undefined)

Hi,

can you please add some examples with localstorage.?

Thx

There is a bug in the library where specifying a grid cols value different from the grid gap value results in extra space on the right end of the grid. Specifically, this extra space equals the specified grid cols value.

Library Version: 1.2.0
Reproducible Sandbox: Repl

Steps to Reproduce:

1. Set the cols prop on the Grid to a value different from the default Grid gap value (10).
2. Observe the right-hand side of the grid horizontally. The grid items do not occupy all the space. If the grid gap is set to 10, the right-hand padding of the grid will not be 10px but rather the value of the cols in px.

Expected Behavior:

The grid items should occupy the entire grid space evenly, with the right-hand padding matching the specified Grid gap value.

Actual Behavior:

The right-hand padding of the grid equals the specified grid cols value instead of the grid gap value, resulting in extra space.

Examples:

Cols: 10 | Gap: 10

Cols: 14 | Gap: 10

Cols: 24 | Gap: 10

I would like to have something like dragStart and dragEnd for events.

REPL showing bug

When compress collision is active and one item move other items, the moved y position of items are not updated. To replicate, from repl move item "0" to position 2,0. pos Y is not updated for moved items.

When collision is active, when trying to move an element it can only be moved to certain spaces not everywhere.

Reproduction: Can't drag on this repl element "0" down (y axis). Only works if collision is false.

After version 0.3 when i try to run repl is now throwing error "Cannot import "svelte-grid-extended": could not find entry point in "undefined/package.json"."

Maybe you could have a preview during move/resize of how items will be rearranged after drop/release but if the pane is then dropped/released back at its original position or the escape key is pressed during drag, it restores the original arrangement.

...

Setting the width and height prevents resize observer calls. And itemSize is not updated.

style={`width: ${containerWidth ? `${containerWidth}px` : '100%'}; 
		height: ${containerHeight ? `${containerHeight}px` : '100%'};`}

That can be useful to render grid edited by another person.

Discussed in #60

These lines cause that bug:
https://github.com/cuire/svelte-grid-extended/blob/6a245403995a36f84b8e85013e1b3be772cfaddd/src/lib/utils/item.ts#L8C9-L8C55

TBH, I dont remember why this it so, but right now its seams like a bug

According to the documentation, there is supposed to be a compress method available on the grid controller. However, upon attempting to use it in a real-world scenario, it appears that the compress method is not actually present on the grid controller object.

Version Information:

Library Version: 1.1.4
Reproducible Example: Repl link

Steps to Reproduce:

1. Use the latest version (1.1.4) of svelte-grid-extended.
2. Attempt to access the compress method on the grid controller object.

Expected Behavior:

The compress method should be available and functional as described in the documentation.

Actual Behavior:

The compress method is not available on the grid controller object, leading to errors or unexpected behavior when attempting to use it.

I'd like to add, for instance, Like and Remove buttons attached to each GridItem. What is the recommended approach to incorporating these additional behaviors in an implementation?

The compress collision strategy causes the Grid to break.

Version Information:

Library Version: 1.1.4
Reproducible Example: Repl link

Steps to Reproduce:

1. Use the latest version (1.2.0) of svelte-grid-extended.
2. Attempt to set the collision strategy on a Grid to compress.
3. The Grid is broken.
   3.1 Check the developer console.

Hey, thanks for the awesome work in this library. Im trying to create a drag and drop feature where i have a list of components that my user will be able to tap, hold, and drag into the grid. Looking through the demos and past issues, there doesn't seem to be a clear cut way of how to handle this behaviour.

Would you mind pointing me in the direction so that I can achieve that sort of behaviour? Thank you!

Have optional prop on:change (receives a function). Triggered when an element is moved or resized.