return html `

{"x":0,"y":0,"w":12,"h":1,"id":"a_igtqmtp1u","children":[

{"x":1,"y":0,"w":5,"h":1,"id":"a2_igtfu"},

{"x":7,"y":0,"w":4,"h":1,"id":"a3_igtfu"}

]},

{"x":0,"y":1,"w":7,"h":7,"id":"b2_igtu"},

{"x":11,"y":1,"w":5,"h":7,"id":"c3_igtfu"},

{"x":7,"y":1,"w":4,"h":7,"id":"d4_igtfu"}

const button = html`<button>Fullscreen`;

button.onclick = () => {

//let el = button.parentElement.nextElementSibling

//el.className ="full"

let el = d3.selectAll("#content")

el.classed("custom-fullscreen",true)

el.node().requestFullscreen();

}

return button;

//let margin = 2

console.log(did)

let div = d3.selectAll("#"+did)

div.classed("container", true)

let height = parseInt(div.style("height"))

let wd = parseInt(div.style("width"))

let content = d3.select("#"+did+"> .owncontent")

console.log("content",content,content.size() )

div.style("background-size",wd/w+"px "+height/h+"px")

if (content.size() > 0) {

div=content.html("")

} else {

div = div.append("div").style("height","100%")

.style("width","100%")

.classed("owncontent", true)

}

//div.classed("full",false)

//const height = Math.floor(width * screen.height / screen.width)

console.log(div,height,wd)

div.style("background-size",wd/w+"px "+height/h+"px;")

div.on("dblclick", newitem)

for (let i in its) {

let item = div.append("div").attr("style", "height:"+parseInt(height/h*its[i].h)+"px;"

+"width:"+parseInt(wd/w*its[i].w)+"px;" +"left:"+parseInt(wd/w*its[i].x)+"px;"+"top:"+parseInt(height/h*its[i].y)+"px;")

//+"line-height: "+parseInt(height/h*its[i].h)+"px;")

.attr("data-i", i).attr("id", its[i].id)

.classed("grid-item",true)

item.text(its[i].id)

item.on("click", upitem)

item.on("dblclick", nitem)

let mover = item.append("div").classed("mover",true)

let resizer = item.append("div").classed("resizer",true)

let deleter = item.append("div").classed("deleter",true).attr("data-i", i)

if (its[i].children){

gridit(its[i].id,its[i].children, w,h,s)

}

mover.call(d3.drag().on("start", dstarted).on("drag",ddrag).on("end", dend));

resizer.call(d3.drag().on("start", estarted).on("drag",edrag).on("end", dend));

deleter.on("click", function(){

let e = d3.event

let i = d3.select(this).attr("data-i")

let it = its.splice(i,1)

console.log(e, i, it)

//mutable items.splice(i,1)

e.stopPropagation()

return gridit(did, its, w, h, s)

})

}

function dstarted(e){

console.log(this,e)

let coords = d3.event

console.log(coords)

this.container= {container: this.parentNode, grand:this.parentNode.parentNode.parentNode, coords: d3.mouse(this.parentNode.parentNode.parentNode)}

}

function ddrag(){

console.log(this)

let e = d3.event

console.log(e)

//let p = this.container()

let p = d3.select(this.container.container)

let coords = d3.mouse(this.container.grand) // p

//let coords0 = d3.mouse(this.container.container)

console.log(p,coords)

p.style("left",coords[0]+"px").style("top",coords[1]+"px")

}

function dend(e){

console.log(this, this.container.container)

let p = d3.select(this.container.container)

let i = p.attr("data-i")

its[i].x = Math.round(parseInt(p.style("left"))/width*w)

its[i].y = Math.round(parseInt(p.style("top"))/height*h)

its[i].w = Math.round(parseInt(p.style("width"))/width*w)

its[i].h = Math.round(parseInt(p.style("height"))/height*h)

return gridit(did, its, w, h, s)

}

function estarted(e){

console.log(this,e)

let coords = d3.event

console.log(coords)

this.container= {container: this.parentNode, grand:this.parentNode.parentNode.parentNode, coords: d3.mouse(this.parentNode.parentNode.parentNode)}

console.log(this.parentNode, this.parentNode.parentNode.parentNode)

}

function edrag(){

console.log(this)

let e = d3.event

console.log(e)

//let p = this.container()

let p = d3.select(this.container.container)

let coords = d3.mouse(this.container.grand) // p

//console.log(p,coords, parseInt(p.style("width")), parseInt(p.style("left")), p.width)

//let w = parseInt(p.style("width"))

let x = parseInt(p.style("left"))

let y = parseInt(p.style("top"))

p.style("width",(coords[0]-x)+"px").style("height",(coords[1]-y)+"px")

}

function newitem(){

let coords = d3.mouse(this)

console.log(this)

its.push({"x":Math.floor(parseInt(coords[0])/width*w),"y":Math.floor(parseInt(coords[1])/height*h),"w":1,"h":1,"id":id()})

return gridit(did, its, w, h, s)

}

const id = () =>

"_" +

Math.random()

.toString(36)

.substr(2, 9);

function upitem(){

let e = d3.event

e.stopPropagation()

d3.selectAll("#"+did+" > div").style("z-index", "100");

let d = d3.select(this)

d.style("z-index", "1000");

//let coords = d3.mouse(this)

console.log(this)

//items.push({"drag":{"top":null,"left":null,"dragging":false},"resize":{"width":null,"height":null,"resizing":false},"responsive":{"valueW":0},"static":false,"resizable":true,"draggable":true,"min":{},"max":{},"x":Math.round(parseInt(coords[0])/width*w),"y":Math.round(parseInt(coords[1])/height*h),"w":1,"h":1,"id":"_igtfu"})

//return gridit(did, items, w, h, s)

}

function nitem(){

let e = d3.event

e.stopPropagation()

d3.selectAll("#"+did+" > div").style("z-index", "100");

let d = d3.select(this)

d.style("z-index", "1000");

//let coords = d3.mouse(this)

console.log(this)

//items.push({"drag":{"top":null,"left":null,"dragging":false},"resize":{"width":null,"height":null,"resizing":false},"responsive":{"valueW":0},"static":false,"resizable":true,"draggable":true,"min":{},"max":{},"x":Math.round(parseInt(coords[0])/width*w),"y":Math.round(parseInt(coords[1])/height*h),"w":1,"h":1,"id":"_igtfu"})

//return gridit(did, items, w, h, s)

}

}

const height = Math.floor(width * screen.height / screen.width)

let area = $('#advanced-grid')

area.css("background-color", "white")

.css("height", height+"px")

area.gridstack();

/* App.svelte generated by Svelte v3.7.1 */

function add_css() {

var style = element("style");

style.id = 'svelte-jw8zba-style';

style.textContent = ".content.svelte-jw8zba{width:100%;height:100%;color:black;display:flex;justify-content:center;align-items:center;font-size:large}.svlt-grid-shadow{background:pink}.svlt-grid-container{background:#eee}";

append(document.head, style);

function create_default_slot(ctx) {

var div, t_value = ctx.item.id, t;

return {

c() {

div = element("div");

t = text(t_value);

attr(div, "class", "content svelte-jw8zba");

set_style(div, "background", "#ccc");

set_style(div, "border", "1px solid black");

},

m(target, anchor) {

insert(target, div, anchor);

append(div, t);

},

p(changed, ctx) {

if ((changed.item) && t_value !== (t_value = ctx.item.id)) {

set_data(t, t_value);

}

},

d(detaching) {

if (detaching) {

detach(div);

}

}

};

function create_fragment(ctx) {

var updating_items, current;

function grid_items_binding(value) {

ctx.grid_items_binding.call(null, value);

updating_items = true;

add_flush_callback(() => updating_items = false);

}

let grid_props = {

items: ctx.items,

cols: 4,

rowHeight: 100,

$$slots: {

default: [create_default_slot, ({ item }) => ({ item })]

},

$$scope: { ctx }

};

if (ctx.items !== void 0) {

grid_props.items = ctx.items;

}

var grid = new Grid({ props: grid_props });

binding_callbacks.push(() => bind(grid, 'items', grid_items_binding));

return {

c() {

grid.$$.fragment.c();

},

m(target, anchor) {

mount_component(grid, target, anchor);

current = true;

},

p(changed, ctx) {

var grid_changes = {};

if (changed.items) grid_changes.items = ctx.items;

if (changed.$$scope) grid_changes.$$scope = { changed, ctx };

if (!updating_items && changed.items) {

grid_changes.items = ctx.items;

}

grid.$set(grid_changes);

},

i(local) {

if (current) return;

transition_in(grid.$$.fragment, local);

current = true;

},

o(local) {

transition_out(grid.$$.fragment, local);

current = false;

},

d(detaching) {

destroy_component(grid, detaching);

}

};

function instance($$self, $$props, $$invalidate) {

const id = () =>

"_" +

Math.random()

.toString(36)

.substr(2, 9);

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

function grid_items_binding(value) {

items = value;

$$invalidate('items', items);

}

return { items, grid_items_binding };

class App extends SvelteComponent {

constructor(options) {

super();

if (!document.getElementById("svelte-jw8zba-style")) add_css();

init(this, options, instance, create_fragment, safe_not_equal, []);

}

export default App;