├── src
    ├── BlankTile.svelte
    ├── main.js
    ├── stores.js
    ├── layout.js
    ├── App.svelte
    ├── GridControl.svelte
    ├── GridTiles.svelte
    └── Tile.svelte
└── README.md


/src/BlankTile.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 | </script>
3 | 
4 | <div>
5 | </div>
6 | 
7 | <style>
8 | </style>
9 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import App from './App.svelte';
 2 | 
 3 | const app = new App({
 4 | 	target: document.body,
 5 | 	props: {
 6 | 	}
 7 | });
 8 | 
 9 | export default app;
10 | 


--------------------------------------------------------------------------------
/src/stores.js:
--------------------------------------------------------------------------------
 1 | import { writable } from 'svelte/store';
 2 | 
 3 | export let unlockTiles = writable(false);
 4 | export let showDrops = writable(false);
 5 | export let activeTile = writable(null);
 6 | export let dropTarget = writable(null);
 7 | export let dragOrigin = writable(null);
 8 | 
 9 | export let currentLayout = writable([]);
10 | 


--------------------------------------------------------------------------------
/src/layout.js:
--------------------------------------------------------------------------------
 1 | import BlankTile from "./BlankTile.svelte";
 2 | // import GridControl from "./GridControl.svelte";
 3 | //add your components here
 4 | 
 5 | export let tileTypes = [
 6 |   { name: 'blank tile', component: BlankTile}
 7 |   //add your components here if you want to be able to add them from the toolbar
 8 | ]
 9 | 
10 | export let layout = [
11 |   // { "key": 1,
12 |   //   "type": GridControl,
13 |   //   "position": {"colStart": 1, "colEnd": 8, "rowStart": 1, "rowEnd": 3, "zIndex": 2005}
14 |   // },
15 |   { "key": 2,
16 |     "type": BlankTile,
17 |     "position": {"colStart": 4, "colEnd": 36, "rowStart": 2, "rowEnd": 5, "zIndex": 2000}
18 |   },
19 |   { "key": 4,
20 |     "type": BlankTile,
21 |     "position": {"colStart": 10, "colEnd": 16, "rowStart": 12, "rowEnd": 17, "zIndex": 2000}
22 |   }
23 | ]
24 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import GridTiles from "./GridTiles.svelte";
 3 | 	import GridControl from "./GridControl.svelte";
 4 | </script>
 5 | 
 6 | <div id="grid1">
 7 | 	<div id="toolbar">
 8 | 		<svelte:component this={GridControl} />
 9 | 	</div>
10 | 	<!-- <div id="grid2"> -->
11 | 	<div id="gridTiles">
12 | 		<GridTiles />
13 | 	</div>
14 | 	<!-- </div> -->
15 | </div>
16 | 
17 | <style>
18 | 	#grid1 {
19 | 		box-sizing: border-box;
20 | 		height: calc(100vh - 16px); /* using default body margin of 8px*/
21 | 		/* width: 300vw; */
22 | 		position: relative;
23 | 		display: grid;
24 | 		grid-template-rows: min-content 1fr;
25 | 		gap: 0.5em;
26 | 		background: linen;
27 | 		padding: 0.5em;
28 | 	}
29 | 
30 | 	#toolbar {
31 | 		display: flex;
32 | 		gap: 1em;
33 | 		flex-direction: row-reverse;
34 | 	}
35 | 
36 | 	/* #grid2 {
37 | 		grid-row-start: 2;
38 | 		display: grid;
39 | 		grid-template-columns: 1fr 7fr;
40 | 		background: forestgreen;
41 | 	} */
42 | 
43 | 	#gridTiles {
44 | 		height: 100%;
45 | 		grid-row: 2 / -1;
46 | 		background: linen;
47 | 	}
48 | </style>
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-GridTiles
 2 | Drag and drop resizable tiles on a responsive grid
 3 | 
 4 | -------------------
 5 | 
 6 | - add a GridTiles component to your page<br>
 7 | - import your components in the layout.js file<br>
 8 | - hard code a startup layout or build one from an optional toolbar once the page loads<br>
 9 | - allow users to add particular components from the drop down, if you want
10 | - your components appear inside the Tiles!<br>
11 | - svelte is awesome!<br>
12 | 
13 | - works in Firefox, Chrome, and Epiphany, so should work in Safari too
14 | - TODO: allow saving of custom layouts
15 | - TODO: enable touch interaction, currently mouse only
16 | 
17 | check it out:<br>
18 | at the REPL:
19 | https://svelte.dev/repl/b993c8f5fa9f4105aa9a246321025166?version=3.46.4
20 | 
21 | or by getting yourself a svelte template:
22 | 
23 | ```bash
24 | npx degit sveltejs/template my-svelte-project
25 | cd my-svelte-project
26 | npm install
27 | ```
28 | then plop the files from this GridTiles repo into your new /src folder and run:<br>
29 | ```bash
30 | npm run dev
31 | ```
32 | 
33 | [![screenshot_GridTiles](https://user-images.githubusercontent.com/98979350/152649391-5fcce1cf-8976-4eba-9f16-47e5347ad29f.png "screenshot_GridTiles")](https://user-images.githubusercontent.com/98979350/152649391-5fcce1cf-8976-4eba-9f16-47e5347ad29f.png "screenshot_GridTiles")
34 | 


--------------------------------------------------------------------------------
/src/GridControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { unlockTiles, currentLayout } from "./stores.js";
 3 |   import { tileTypes } from "./layout.js";
 4 | 
 5 |   let tileToAdd = null;
 6 | 
 7 |   function toggleLock() {
 8 |     unlockTiles.set(!$unlockTiles);
 9 |   }
10 | 
11 |   function addTile() {
12 |     let newKey =
13 |       $currentLayout.reduce((l, d) => {
14 |         return d.key > l ? d.key : l;
15 |       }, 0) + 1;
16 |     if (tileToAdd) {
17 |       $currentLayout = [
18 |         ...$currentLayout,
19 |         {
20 |           key: newKey,
21 |           type: tileToAdd,
22 |           position: {
23 |             colStart: 1,
24 |             colEnd: 6,
25 |             rowStart: 3,
26 |             rowEnd: 9,
27 |             zIndex: 2000,
28 |           },
29 |         },
30 |       ];
31 |       if (!$unlockTiles) toggleLock();
32 |     }
33 |   }
34 | </script>
35 | 
36 | <div>
37 |   <button id="lock" on:click={toggleLock}
38 |     >{$unlockTiles ? "lock" : "unlock"}</button
39 |   >
40 | </div>
41 | <div>
42 |   <button on:click={addTile}>add Tile</button>
43 |   <select id="addTile" bind:value={tileToAdd}>
44 |     <option value={null}>--choose tile type--</option>
45 |     {#each tileTypes as { name, component }}
46 |       <option value={component}>{name}</option>
47 |     {/each}
48 |   </select>
49 | </div>
50 | 
51 | <style>
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/GridTiles.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 	import Tile from "./Tile.svelte";
  3 | 	import { layout } from "./layout.js";
  4 | 	import {
  5 | 		unlockTiles,
  6 | 		showDrops,
  7 | 		dropTarget,
  8 | 		currentLayout,
  9 | 		dragOrigin,
 10 | 	} from "./stores.js";
 11 | 	import { fade } from "svelte/transition";
 12 | 
 13 | 	currentLayout.set(layout);
 14 | 
 15 | 	let totalHeight;
 16 | 	let totalWidth;
 17 | 
 18 | 	export let cols = 20;
 19 | 	export let rows = 20;
 20 | 	export let gap = 0.4; //in percent
 21 | 
 22 | 	$: cssStyleGrid = `grid-template-columns: repeat(${cols}, ${
 23 | 		(100 - cols * gap) / cols
 24 | 	}%);
 25 | 										 grid-template-rows: repeat(${rows}, ${
 26 | 		(100 - rows * gap) / rows
 27 | 	}%); gap: ${gap}%`;
 28 | 
 29 | 	//create arrays of valid drop spots for drag and drop
 30 | 	$: colArray = Array.from({ length: cols }, (v, i) => i + 1); //Array.from('0'.repeat(cols))
 31 | 	$: rowArray = Array.from({ length: rows }, (v, i) => i + 1); //Array.from('0'.repeat(rows))
 32 | 	let colLooper = colArray;
 33 | 	let rowLooper = rowArray;
 34 | 	$: if ($showDrops) {
 35 | 		if ($showDrops[0] === "move") {
 36 | 			colLooper = colArray.slice(0, cols - $showDrops[1][1] + 1);
 37 | 			rowLooper = rowArray.slice(0, rows - $showDrops[1][0] + 1);
 38 | 		} else if ($showDrops[0] === "resizeLeft") {
 39 | 			colLooper = colArray.slice(0, $showDrops[1][1] - 2);
 40 | 			rowLooper = rowArray.slice($showDrops[1][0]);
 41 | 		} else if ($showDrops[0] === "resizeRight") {
 42 | 			colLooper = colArray.slice($showDrops[1][1]);
 43 | 			rowLooper = rowArray.slice($showDrops[1][0]);
 44 | 		}
 45 | 	}
 46 | 
 47 | 	function handleDrop({ target }) {
 48 | 		if (target.nodeName === "svg") {
 49 | 			//occasionally it reports the outer element
 50 | 			target = target.firstChild;
 51 | 		}
 52 | 		target.setAttribute("fill", "white");
 53 | 		dropTarget.set(target.id);
 54 | 	}
 55 | 
 56 | 	function closeTile(key) {
 57 | 		let newLayout = $currentLayout.filter((d) => {
 58 | 			return d.key != key;
 59 | 		});
 60 | 		currentLayout.set(newLayout);
 61 | 	}
 62 | 
 63 | 	function adjustTile(e, key) {
 64 | 		let index = $currentLayout.findIndex((d) => {
 65 | 			if (d.key == key) return true;
 66 | 		});
 67 | 		$currentLayout[index].position = e.detail;
 68 | 	}
 69 | </script>
 70 | 
 71 | <!-- why does this still work if we're not the full size of the window? -->
 72 | <svelte:window bind:innerHeight={totalHeight} bind:innerWidth={totalWidth} />
 73 | 
 74 | <div id="tileGrid" style={cssStyleGrid}>
 75 | 	<!-- <div id="tileGrid" style={cssStyleGrid} bind:clientHeight={totalHeight} bind:clientWidth={totalWidth}> -->
 76 | 	{#if $unlockTiles && $showDrops}
 77 | 		{#each rowLooper as r}
 78 | 			{#each colLooper as c}
 79 | 				{#if $dragOrigin != r + "-" + c}
 80 | 					<div
 81 | 						class="dropDiv"
 82 | 						style={`grid-column-start: ${c}; grid-row-start: ${r};`}
 83 | 					>
 84 | 						<svg
 85 | 							class={"drop " + $showDrops[0]}
 86 | 							height="12"
 87 | 							width="12"
 88 | 							transition:fade
 89 | 						>
 90 | 							<circle
 91 | 								id={r + "-" + c}
 92 | 								on:drop={handleDrop}
 93 | 								on:dragenter={({ target }) =>
 94 | 									target.setAttribute("fill", "black")}
 95 | 								on:dragover|preventDefault={({ target }) =>
 96 | 									target.setAttribute("fill", "black")}
 97 | 								on:dragleave={({ target }) =>
 98 | 									target.setAttribute("fill", "white")}
 99 | 								on:mouseup={() => {
100 | 									showDrops.set(false);
101 | 								}}
102 | 								cx="6"
103 | 								cy="6"
104 | 								r="5"
105 | 								stroke="grey"
106 | 								stroke-width="1"
107 | 								fill="white"
108 | 							/>
109 | 						</svg>
110 | 					</div>
111 | 				{/if}
112 | 			{/each}
113 | 		{/each}
114 | 	{/if}
115 | 	{#each $currentLayout as tile (tile.key)}
116 | 		<!-- {...tile.position} -->
117 | 		<Tile
118 | 			colStart={tile.position.colStart}
119 | 			rowStart={tile.position.rowStart}
120 | 			colEnd={tile.position.colEnd > cols ? -1 : tile.position.colEnd}
121 | 			rowEnd={tile.position.rowEnd > rows ? -1 : tile.position.rowEnd}
122 | 			zIndex={tile.position.zIndex}
123 | 			on:destroy={() => closeTile(tile.key)}
124 | 			on:adjust={(e) => adjustTile(e, tile.key)}
125 | 		>
126 | 			<svelte:component this={tile.type} />
127 | 		</Tile>
128 | 	{/each}
129 | </div>
130 | 
131 | <style>
132 | 	#tileGrid {
133 | 		width: 100%;
134 | 		height: 100%;
135 | 		position: relative;
136 | 		display: grid;
137 | 		background: linen;
138 | 	}
139 | 
140 | 	.dropDiv {
141 | 		z-index: 3000;
142 | 		position: relative;
143 | 	}
144 | 
145 | 	.drop {
146 | 		position: absolute;
147 | 	}
148 | 
149 | 	.drop.move {
150 | 		top: 2px;
151 | 		left: 2px;
152 | 	}
153 | 
154 | 	.drop.resizeLeft {
155 | 		bottom: 2px;
156 | 		left: 2px;
157 | 	}
158 | 
159 | 	.drop.resizeRight {
160 | 		bottom: 2px;
161 | 		right: 2px;
162 | 	}
163 | </style>
164 | 


--------------------------------------------------------------------------------
/src/Tile.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import {
  3 |     unlockTiles,
  4 |     showDrops,
  5 |     activeTile,
  6 |     dropTarget,
  7 |     dragOrigin,
  8 |   } from "./stores.js";
  9 |   import { fade } from "svelte/transition";
 10 |   import { createEventDispatcher } from "svelte";
 11 | 
 12 |   const dispatch = createEventDispatcher();
 13 | 
 14 |   function closeTile() {
 15 |     dispatch("destroy");
 16 |   }
 17 | 
 18 |   let thisTile;
 19 | 
 20 |   export let colStart = 12;
 21 |   export let colEnd = 18;
 22 |   export let rowStart = 8;
 23 |   export let rowEnd = 14;
 24 |   export let zIndex = 2000;
 25 | 
 26 |   let moveThis = false;
 27 |   let resizeThis = false;
 28 |   $: draggable = $unlockTiles && moveThis;
 29 |   $: $dropTarget, adjustTile();
 30 | 
 31 |   function adjustTile() {
 32 |     if (thisTile === $activeTile) {
 33 |       let x = $dropTarget.split("-");
 34 |       let c = +x[1];
 35 |       let r = +x[0];
 36 |       if (resizeThis) {
 37 |         rowEnd = r + 1;
 38 |         if (resizeThis === "resizeRight") {
 39 |           colEnd = c + 1;
 40 |         } else {
 41 |           colStart = c;
 42 |         }
 43 |       } else if (moveThis) {
 44 |         colEnd = colEnd - colStart + c;
 45 |         colStart = c;
 46 |         rowEnd = rowEnd - rowStart + r;
 47 |         rowStart = r;
 48 |       }
 49 |       dropTarget.set(null);
 50 |       activeTile.set(null);
 51 |       showDrops.set(false);
 52 |       dispatch("adjust", {
 53 |         colStart: colStart,
 54 |         colEnd: colEnd,
 55 |         rowStart: rowStart,
 56 |         rowEnd: rowEnd,
 57 |         zIndex: zIndex,
 58 |       });
 59 |     }
 60 |   }
 61 | 
 62 |   function reportDragging({ button }) {
 63 |     if (button != 0) return;
 64 |     moveThis = true;
 65 |     resizeThis = false; //keep this: quick click bug
 66 |     activeTile.set(thisTile);
 67 |     showDrops.set(["move", [rowEnd - rowStart, colEnd - colStart]]);
 68 |     dragOrigin.set(rowStart + "-" + colStart);
 69 |   }
 70 | 
 71 |   function reportResize(button, whichCorner) {
 72 |     if (button != 0) return;
 73 |     moveThis = false; //keep this: quick click bug
 74 |     resizeThis = whichCorner;
 75 |     activeTile.set(thisTile);
 76 |     if (whichCorner === "resizeLeft") {
 77 |       dragOrigin.set(rowEnd - 1 + "-" + colStart);
 78 |       showDrops.set([whichCorner, [rowStart, colEnd]]);
 79 |     } else if (whichCorner === "resizeRight") {
 80 |       dragOrigin.set(rowEnd - 1 + "-" + (colEnd - 1));
 81 |       showDrops.set([whichCorner, [rowStart, colStart]]);
 82 |     }
 83 |   }
 84 | 
 85 |   function moveEnd() {
 86 |     moveThis = false;
 87 |     if (!resizeThis) {
 88 |       activeTile.set(null);
 89 |       showDrops.set(false);
 90 |       dragOrigin.set(null);
 91 |     }
 92 |   }
 93 | 
 94 |   function resizeEnd() {
 95 |     moveThis = false;
 96 |     resizeThis = false;
 97 |     activeTile.set(null);
 98 |     showDrops.set(false);
 99 |     dragOrigin.set(null);
100 |   }
101 | 
102 |   function handle_dragStart(e) {
103 |     e.dataTransfer.setData("text", e.target.id);
104 |     if (/WebKit/.test(navigator.userAgent))
105 |       e.dataTransfer.setDragImage(e.target.firstChild, 0, 0);
106 |   }
107 | 
108 |   function handle_zAdjust(d) {
109 |     zIndex += d;
110 |     dispatch("adjust", {
111 |       colStart: colStart,
112 |       colEnd: colEnd,
113 |       rowStart: rowStart,
114 |       rowEnd: rowEnd,
115 |       zIndex: zIndex,
116 |     });
117 |   }
118 | </script>
119 | 
120 | <div
121 |   class="tile"
122 |   bind:this={thisTile}
123 |   {draggable}
124 |   on:dragstart={handle_dragStart}
125 |   on:dragend={moveEnd}
126 |   on:click={moveEnd}
127 |   style:grid-column-start={colStart}
128 |   style:grid-column-end={colEnd}
129 |   style:grid-row-start={rowStart}
130 |   style:grid-row-end={rowEnd}
131 |   style:z-index={zIndex}
132 | >
133 |   {#if $unlockTiles}
134 |     <div id="dragBar" transition:fade>
135 |       <div>
136 |         <svg height="12" width="12">
137 |           <circle
138 |             class="grabBlob"
139 |             cx="6"
140 |             cy="6"
141 |             r="5"
142 |             fill="orange"
143 |             on:mousedown={reportDragging}
144 |           />
145 |         </svg><span>move</span>
146 |       </div>
147 |       <div>
148 |         <svg height="12" width="12">
149 |           <circle
150 |             class="pointBlob"
151 |             cx="6"
152 |             cy="6"
153 |             r="5"
154 |             fill="linen"
155 |             on:click={() => handle_zAdjust(1)}
156 |           />
157 |         </svg><span>raise</span>
158 |       </div>
159 |       <div>
160 |         <svg height="12" width="12">
161 |           <circle
162 |             class="pointBlob"
163 |             cx="6"
164 |             cy="6"
165 |             r="5"
166 |             fill="grey"
167 |             on:click={() => handle_zAdjust(-1)}
168 |           />
169 |         </svg><span>lower (z={zIndex})</span>
170 |       </div>
171 |     </div>
172 |     <div class="resizeBlob topRight" transition:fade>
173 |       <span>close</span>
174 |       <svg height="12" width="12">
175 |         <circle
176 |           class="pointBlob"
177 |           cx="6"
178 |           cy="6"
179 |           r="5"
180 |           fill="red"
181 |           on:click={closeTile}
182 |         />
183 |       </svg>
184 |     </div>
185 |     <div
186 |       class="resizeBlob resizeLeft"
187 |       draggable="true"
188 |       on:dragstart={handle_dragStart}
189 |       on:mousedown={({ button }) => reportResize(button, "resizeLeft")}
190 |       on:dragend={resizeEnd}
191 |       on:click={resizeEnd}
192 |       transition:fade
193 |     >
194 |       <svg height="12" width="12">
195 |         <circle cx="6" cy="6" r="5" fill="green" />
196 |       </svg><span>resize</span>
197 |     </div>
198 |     <div
199 |       class="resizeBlob resizeRight"
200 |       draggable="true"
201 |       on:dragstart={handle_dragStart}
202 |       on:mousedown={({ button }) => reportResize(button, "resizeRight")}
203 |       on:dragend={resizeEnd}
204 |       on:click={resizeEnd}
205 |       transition:fade
206 |     >
207 |       <span>resize</span>
208 |       <svg height="12" width="12">
209 |         <circle cx="6" cy="6" r="5" fill="green" />
210 |       </svg>
211 |     </div>
212 |   {/if}
213 |   <slot />
214 | </div>
215 | 
216 | <style>
217 |   circle {
218 |     stroke: grey;
219 |     stroke-width: 1;
220 |   }
221 | 
222 |   .tile {
223 |     position: relative;
224 |     /* overflow: hidden; */
225 |     display: grid;
226 |     place-items: center;
227 |     border: 1px solid grey;
228 |     border-radius: 5px;
229 |     box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
230 |     background: white;
231 |   }
232 | 
233 |   #dragBar {
234 |     z-index: 1000;
235 |     display: flex;
236 |     flex-direction: column;
237 |     position: absolute;
238 |     top: 2px;
239 |     left: 2px;
240 |     border-radius: 5px;
241 |     background: linen;
242 |     opacity: 0.8;
243 |     font-family: Ubuntu, Comfortaa, -apple-system, BlinkMacSystemFont,
244 |       "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif;
245 |     font-size: 0.8em;
246 |   }
247 | 
248 |   #dragBar span {
249 |     vertical-align: top;
250 |     user-select: none;
251 |   }
252 | 
253 |   .grabBlob {
254 |     cursor: grab;
255 |   }
256 | 
257 |   .pointBlob {
258 |     cursor: pointer;
259 |   }
260 | 
261 |   .resizeBlob {
262 |     z-index: 2000;
263 |     font-family: Ubuntu, Comfortaa, -apple-system, BlinkMacSystemFont,
264 |       "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif;
265 |     font-size: 0.8em;
266 |     color: grey;
267 |     user-select: none;
268 |   }
269 | 
270 |   .resizeBlob.topRight {
271 |     position: absolute;
272 |     top: 2px;
273 |     right: 1px;
274 |     vertical-align: top;
275 |   }
276 | 
277 |   .resizeBlob.resizeLeft {
278 |     position: absolute;
279 |     bottom: -2px;
280 |     left: 1px;
281 |     vertical-align: bottom;
282 |     cursor: nesw-resize;
283 |   }
284 | 
285 |   .resizeBlob.resizeRight {
286 |     position: absolute;
287 |     bottom: -2px;
288 |     right: 1px;
289 |     vertical-align: bottom;
290 |     cursor: nwse-resize;
291 |   }
292 | </style>
293 | 


--------------------------------------------------------------------------------