diff --git a/src/client/lively.js b/src/client/lively.js index d957cd302..de3fc4837 100644 --- a/src/client/lively.js +++ b/src/client/lively.js @@ -723,21 +723,18 @@ export default class Lively { } static setExtent(node, extent) { - // node.style.width = '' + extent.x + 'px'; - // node.style.height = '' + extent.y + 'px'; - // node.dispatchEvent(new CustomEvent("extent-changed")) this.setWidth(node, extent.x, true); this.setHeight(node, extent.y); } static setWidth(node, x, noevent) { node.style.width = '' + x + 'px'; - if (!noevent) node.dispatchEvent(new CustomEvent("extent-changed")); + if (!noevent) node.dispatchEvent(new CustomEvent("extent-changed", {detail: {extent: this.getExtent(node)}})); } static setHeight(node, y, noevent) { node.style.height = '' + y + 'px'; - if (!noevent) node.dispatchEvent(new CustomEvent("extent-changed")); + if (!noevent) node.dispatchEvent(new CustomEvent("extent-changed", {detail: {extent: this.getExtent(node)}})); } // #important diff --git a/src/components/tools/lively-container.js b/src/components/tools/lively-container.js index 4c83a5fba..96043dcf8 100644 --- a/src/components/tools/lively-container.js +++ b/src/components/tools/lively-container.js @@ -74,7 +74,7 @@ export default class Container extends Morph { this.addEventListener("extent-changed", function(evt) { if (this.target) { - this.target.dispatchEvent(new CustomEvent("extent-changed")); + this.target.dispatchEvent(new CustomEvent("extent-changed", evt)); } }); diff --git a/src/components/widgets/lively-resizer.js b/src/components/widgets/lively-resizer.js index 19904f670..562b8bbf6 100644 --- a/src/components/widgets/lively-resizer.js +++ b/src/components/widgets/lively-resizer.js @@ -103,7 +103,7 @@ export default class Resizer extends Morph { lively.setPosition(element, newPosition) lively.setExtent(element, newExtent) - element.dispatchEvent(new CustomEvent("extent-changed")) + element.dispatchEvent(new CustomEvent("extent-changed", {detail:{extent:lively.getExtent(element)}})) evt.stopPropagation(); evt.preventDefault(); diff --git a/src/components/widgets/lively-window-docking.js b/src/components/widgets/lively-window-docking.js index 91eb53e2f..9035e5ee1 100644 --- a/src/components/widgets/lively-window-docking.js +++ b/src/components/widgets/lively-window-docking.js @@ -16,6 +16,7 @@ export default class LivelyWindowDocking extends Morph { // because the window can be resized, the screen is seen from 0,0 to 1,1 if (!this.availableDockingAreas) { if (this.getAttribute("availableDockingAreas")) { + console.log("Parsing docking areas from store"); var store = JSON.parse(this.getAttribute("availableDockingAreas")); this.availableDockingAreas = store.map(ea => { var win = null; @@ -25,6 +26,7 @@ export default class LivelyWindowDocking extends Morph { return {"bounds": Rectangle.fromLiteral(ea.bounds), "window": win}; }) } else { + console.log("Restoring default docking areas"); this.availableDockingAreas = [{"bounds": rect(0,0,1,1), "window": null}]; } } @@ -278,15 +280,16 @@ export default class LivelyWindowDocking extends Morph { } resizeMySlot(win, newSize) { + newSize = this.clientCoordsToDockingCoords(newSize); if (!newSize) throw new Error("newSize is missing") - var slot = this.availableDockingAreas.find((area) => (area.window == win)); // recheck diff between var and let lively.notify("Resize slot called"); - debugger; - if (slot && slot.bounds) { + + if (slot && slot.bounds) { this.availableDockingAreas.forEach(ea => { // @TODO make sure slot !== ea var newBounds = null; + debugger; lively.notify("huh"); if (ea.bounds.left() == slot.bounds.left() && ea.bounds.width == slot.bounds.width) { // vertical setup lively.notify("shoiuld NOT"); @@ -313,6 +316,7 @@ export default class LivelyWindowDocking extends Morph { } if (newBounds) { ea.bounds = newBounds; + lively.notify("NEW ADJACENT"); if (ea.window) { // resize window in other slot lively.setPosition(ea.window, pt(newBounds.left(), newBounds.top())); @@ -321,7 +325,7 @@ export default class LivelyWindowDocking extends Morph { } }); // only finally resize it's own slot after each neighboring slot has been accounted for. expect newSize to be compatible with bounds? - slot.bounds = newSize; + slot.bounds = rect(slot.bounds.x, slot.bounds.y, newSize.x, newSize.y); } } diff --git a/src/components/widgets/lively-window.js b/src/components/widgets/lively-window.js index 9cad2d0c0..60412369f 100644 --- a/src/components/widgets/lively-window.js +++ b/src/components/widgets/lively-window.js @@ -59,9 +59,10 @@ export default class Window extends Morph { } setExtent(extent) { - lively.setExtent(this, extent) + console.log(extent); + lively.setExtent(this, extent); if (this.target) - this.target.dispatchEvent(new CustomEvent("extent-changed")) + this.target.dispatchEvent(new CustomEvent("extent-changed", {detail: {extent: lively.getExtent(this.target)}})) } /*MD ## Setup MD*/ @@ -140,7 +141,7 @@ export default class Window extends Morph { bindEvents() { try { - this.addEventListener('extent-changed', evt => { this.onExtentChanged(); }); + this.addEventListener('extent-changed', evt => { this.onExtentChanged(evt); }); this.windowTitle.addEventListener('pointerdown', evt => { this.onTitleMouseDown(evt) }); this.windowTitle.addEventListener('dblclick', evt => { this.onTitleDoubleClick(evt) }); this.addEventListener('mousedown', evt => lively.focusWithoutScroll(this), true); @@ -529,11 +530,13 @@ export default class Window extends Morph { } onExtentChanged(evt) { + console.log(evt); + debugger; // console.log(evt); // evt has no content? => current bounds must already have been refreshed if (this.target) { - this.target.dispatchEvent(new CustomEvent("extent-changed")); + this.target.dispatchEvent(new CustomEvent("extent-changed", evt)); if (this.isDocked()) { - lively.windowDocking.resizeMySlot(this, evt); + lively.windowDocking.resizeMySlot(this, evt.detail.extent); } } } @@ -605,8 +608,10 @@ export default class Window extends Morph { this.style.height = targetArea.height + "px"; document.body.style.overflow = "hidden" // @TODO I dont know why this is necessary yet + /* if (this.target) this.target.dispatchEvent(new CustomEvent("extent-changed")) + */ this.classList.add("docked") // DO display resize handles to change slot sizes. Could be made custom in the future to disallow out-of-bounds dragging