gristlabs_grist-core/app/client/components/Layout.js

476 lines
17 KiB
JavaScript
Raw Normal View History

/**
* This module provides the ability to render and edit hierarchical layouts of boxes. Each box may
* contain a list of other boxes, and horizontally- and vertically-arranged lists alternating with
* the depth in the hierarchy.
*
* Layout
* Layout is a tree of LayoutBoxes (HBoxes and VBoxes). It consists of HBoxes and VBoxes in
* alternating levels. The leaves of the tree are LeafBoxes, and those are the only items that
* may be moved around, with the structure of Boxes above them changing to accommodate.
*
* LayoutBox
* A LayoutBox is a node in the Layout tree. LayoutBoxes should typically have nothing visual
* about them (e.g. no borders) except their dimensions: they serve purely for layout purposes.
*
* A LayoutBox may be an HBox or a VBox. An HBox may contain multiple VBoxes arranged in a row.
* A VBox may contain multiple HBoxes one under the other. Either kind of LayoutBox may contain
* a single LeafBox instead of child LayoutBoxes. No LayoutBox may be empty, and no LayoutBox
* may contain a single LayoutBox as a child: it must contain either multiple LayoutBox
* children, or a single LeafBox.
*
* LeafBox
* A LeafBox is the container for user content, i.e. what needs to be laid out, for example
* form elements. LeafBoxes are what the user can drag around to other location in the layout.
* All the LeafBoxes in a Layout together fill the entire Layout rectangle. If some parts of
* the layout are to be empty, they should still contain an empty LeafBox.
*
* There is no separate JS class for LeafBoxes, they are simply LayoutBoxes with .layout_leaf
* class and set leafId and leafContent member observables.
*
* Floater
* A Floater is a rectangle that floats over the layout with the mouse pointer while the user is
* dragging a LeafBox. It contains the content of the LeafBox being dragged, so that the user
* can see what is being repositioned.
*
* DropOverlay
* An DropOverlay is a visual aid to the user to indicate area over the current LeafBox where a
* drop may be attempted. It also computes the "affinity": which border of the current LeafBox
* the user is trying to target as the insertion point.
*
* DropTargeter
* DropTargeter displays a set of rectangles, each of which represents a particular allowed
* insertion point for the element being dragged. E.g. dragging an element to the right side of
* a LeafBox would display a drop target for each LayoutBox up the tree that allows a sibling
* to be inserted on the right.
*
* Saving Changes
* --------------
* We don't attempt to save granular changes to the layout, for each drag operation, because
* for the user, it's better to finish editing the layout, and only save the end result. Also,
* it's not so easy (the structure changes many times while dragging, and a single drag
* operation results in a non-trivial diff of the 'before' and 'after' layouts). So instead, we
* just have a way to serialize the layout to and from a JSON blob.
*/
var ko = require('knockout');
var assert = require('assert');
var _ = require('underscore');
var BackboneEvents = require('backbone').Events;
var dispose = require('../lib/dispose');
var dom = require('../lib/dom');
var kd = require('../lib/koDom');
var koArray = require('../lib/koArray');
/**
* A LayoutBox is the node in the hierarchy of boxes comprising the layout. This class is used for
* rendering as well as for the code editor. Since it may be rendered many times on a page, it's
* important for it to be efficient.
* @param {Layout} layout: The Layout object that manages this LayoutBox.
*/
function LayoutBox(layout) {
this.layout = layout;
this.parentBox = ko.observable(null);
this.childBoxes = koArray();
this.leafId = ko.observable(null);
this.leafContent = ko.observable(null);
this.uniqueId = _.uniqueId("lb"); // For logging and debugging.
this.isVBox = this.autoDispose(ko.computed(function() {
return this.parentBox() ? !this.parentBox().isVBox() : true;
}, this));
this.isHBox = this.autoDispose(ko.computed(function() { return !this.isVBox(); }, this));
this.isLeaf = this.autoDispose(ko.computed(function() { return this.leafId() !== null; },
this));
// flexSize represents flexWidth for VBoxes and flexHeight for HBoxes.
// Undesirable transition effects are likely when <1, so we set average value
// to 100 so that reduction below 1 is rare.
this.flexSize = ko.observable(100);
this.dom = null;
this._parentBeingDisposed = false;
// This is an optimization to avoid the wasted cost of removeFromParent during disposal.
this._parentBeingDisposed = false;
this.autoDisposeCallback(function() {
if (!this._parentBeingDisposed) {
this.removeFromParent();
}
this.childBoxes.peek().forEach(function(child) {
child._parentBeingDisposed = true;
child.dispose();
});
});
}
exports.LayoutBox = LayoutBox;
dispose.makeDisposable(LayoutBox);
LayoutBox.prototype.getDom = function() {
return this.dom || (this.dom = this.autoDispose(this.buildDom()));
};
/**
* This helper turns a value, observable, or function (as accepted by koDom functions) into a
* plain value. It's used to build a static piece of DOM without subscribing to any of the
* observables, to avoid the performance cost of subscribing/unsubscribing.
*/
function makeStatic(valueOrFunc) {
if (ko.isObservable(valueOrFunc) || koArray.isKoArray(valueOrFunc)) {
return valueOrFunc.peek();
} else if (typeof valueOrFunc === 'function') {
return valueOrFunc();
} else {
return valueOrFunc;
}
}
LayoutBox.prototype.buildDom = function() {
var self = this;
var wrap = this.layout.needDynamic ? _.identity : makeStatic;
return dom('div.layout_box',
kd.toggleClass('layout_leaf', wrap(this.isLeaf)),
kd.toggleClass(this.layout.leafId, wrap(this.isLeaf)),
kd.cssClass(wrap(function() { return self.isVBox() ? "layout_vbox" : "layout_hbox"; })),
kd.cssClass(wrap(function() { return (self.layout.fillWindow ? 'layout_fill_window' :
(self.isLastChild() ? 'layout_last_child' : null));
})),
kd.style('--flex-grow', wrap(function() {
return (self.isVBox() || (self.isHBox() && self.layout.fillWindow)) ? self.flexSize() : '';
})),
kd.domData('layoutBox', this),
kd.foreach(wrap(this.childBoxes), function(layoutBox) {
return layoutBox.getDom();
}),
kd.scope(wrap(this.leafContent), function(leafContent) {
return leafContent;
})
);
};
/**
* Moves the leaf id and content from another layoutBox, unsetting them in the source one.
*/
LayoutBox.prototype.takeLeafFrom = function(sourceLayoutBox) {
this.leafId(sourceLayoutBox.leafId.peek());
// Note that we detach the node, so that the old box doesn't destroy its DOM.
this.leafContent(dom.detachNode(sourceLayoutBox.leafContent.peek()));
sourceLayoutBox.leafId(null);
sourceLayoutBox.leafContent(null);
};
LayoutBox.prototype.setChildren = function(children) {
children.forEach(function(child) {
child.parentBox(this);
}, this);
this.childBoxes.assign(children);
};
LayoutBox.prototype.isFirstChild = function() {
return this.parentBox() ? this.parentBox().childBoxes.peek()[0] === this : true;
};
LayoutBox.prototype.isLastChild = function() {
// Use .all() rather than .peek() because it's used in kd.toggleClass('layout_last_child'), and
// we want it to automatically stay correct when childBoxes array changes.
return this.parentBox() ? _.last(this.parentBox().childBoxes.all()) === this : true;
};
LayoutBox.prototype.isDomDetached = function() {
return !(this.dom && this.dom.parentNode);
};
LayoutBox.prototype.getSiblingBox = function(isAfter) {
if (!this.parentBox()) {
return null;
}
var siblings = this.parentBox().childBoxes.peek();
var index = siblings.indexOf(this);
if (index < 0) {
return null;
}
index += (isAfter ? 1 : -1);
return (index < 0 || index >= siblings.length ? null : siblings[index]);
};
LayoutBox.prototype._addChild = function(childBox, isAfter, optNextSibling) {
assert(childBox.parentBox() === null, "LayoutBox._addChild: child already has parentBox set");
var index;
if (optNextSibling) {
index = this.childBoxes.peek().indexOf(optNextSibling) + (isAfter ? 1 : 0);
} else {
index = isAfter ? this.childBoxes.peekLength : 0;
}
childBox.parentBox(this);
this.childBoxes.splice(index, 0, childBox);
};
LayoutBox.prototype.addSibling = function(childBox, isAfter) {
childBox.removeFromParent();
var parentBox = this.parentBox();
if (parentBox) {
// Normally, we just add a sibling as requested.
parentBox._addChild(childBox, isAfter, this);
} else {
// If adding a sibling to the root node (another VBox), we need to create a new root and push
// things down two levels (HBox and VBox), and add the sibling to the lower VBox.
if (this.childBoxes.peekLength === 1) {
// Except when the root has a single child, in which case there is already a good place to
// add the new node two levels lower. And we should not create another level because the
// root is the only place that can have a single child.
var lowerBox = this.childBoxes.peek()[0];
assert(!lowerBox.isLeaf(), 'LayoutBox.addSibling: should not have leaf as a single child');
lowerBox._addChild(childBox, isAfter);
} else {
// Create a new root, and add the sibling two levels lower.
var vbox = LayoutBox.create(this.layout);
var hbox = LayoutBox.create(this.layout);
// We don't need removeFromParent here because this only runs when there is no parent.
vbox._addChild(hbox, false);
hbox._addChild(this, false);
hbox._addChild(childBox, isAfter);
this.layout.setRoot(vbox);
}
}
this.layout.trigger('layoutChanged');
};
LayoutBox.prototype.addChild = function(childBox, isAfter) {
childBox.removeFromParent();
if (this.isLeaf()) {
// Move the leaf data into a new child, then add the requested childBox.
var newBox = LayoutBox.create(this.layout);
newBox.takeLeafFrom(this);
this._addChild(newBox, 0);
}
this._addChild(childBox, isAfter);
this.layout.trigger('layoutChanged');
};
LayoutBox.prototype.toString = function() {
return this.isDisposed() ? this.uniqueId + "[disposed]" : (this.uniqueId +
(this.isHBox() ? "H" : "V") +
(this.isLeaf() ? "(" + this.leafId() + ")" :
"[" + this.childBoxes.peek().map(function(b) { return b.toString(); }).join(",") + "]")
);
};
LayoutBox.prototype._removeChildBox = function(childBox) {
//console.log("_removeChildBox %s from %s", childBox.toString(), this.toString());
var index = this.childBoxes.peek().indexOf(childBox);
childBox.parentBox(null);
if (index >= 0) {
this.childBoxes.splice(index, 1);
this.rescaleFlexSizes();
}
if (this.childBoxes.peekLength === 1) {
// If we now have a single child, then something needs to collapse.
var lowerBox = this.childBoxes.peek()[0];
var parentBox = this.parentBox();
if (lowerBox.isLeaf()) {
// Move the leaf data into ourselves, and remove the lower box.
this.takeLeafFrom(lowerBox);
lowerBox.dispose();
} else if (parentBox) {
// Move grandchildren into our place within our parent, and collapse two levels.
// (Unless we are the root, in which case it's OK for us to have a single non-leaf child.)
index = parentBox.childBoxes.peek().indexOf(this);
assert(index >= 0, 'LayoutBox._removeChildBox: box not found in parent');
var grandchildBoxes = lowerBox.childBoxes.peek();
grandchildBoxes.forEach(function(box) { box.parentBox(parentBox); });
parentBox.childBoxes.arraySplice(index, 0, grandchildBoxes);
lowerBox.childBoxes.splice(0, lowerBox.childBoxes.peekLength);
this.removeFromParent();
lowerBox.dispose();
this.dispose();
}
}
};
/**
* Helper to detach a box from its parent without disposing it. If you no longer plan to reattach
* the box, you should probably call box.dispose().
*/
LayoutBox.prototype.removeFromParent = function() {
if (this.parentBox()) {
this.parentBox()._removeChildBox(this);
this.layout.trigger('layoutChanged');
}
};
/**
* Adjust flexSize values of the children so that they add up to at least 1.
* Otherwise, Firefox will not stretch them to the full size of the container.
*/
LayoutBox.prototype.rescaleFlexSizes = function() {
// Just scale so that the smallest value is 1.
var children = this.childBoxes.peek();
var minSize = Math.min.apply(null, children.map(function(b) { return b.flexSize(); }));
if (minSize < 1) {
children.forEach(function(b) {
b.flexSize(b.flexSize() / minSize);
});
}
};
//----------------------------------------------------------------------
/**
* @event layoutChanged: Triggered on changes to the structure of the layout.
* @event layoutResized: Triggered on non-structural changes that may affect the size of rootElem.
*/
function Layout(boxSpec, createLeafFunc, optFillWindow) {
this.rootBox = ko.observable(null);
this.createLeafFunc = createLeafFunc;
this._leafIdMap = null;
this.fillWindow = optFillWindow || false;
this.needDynamic = false;
this.rootElem = this.autoDispose(this.buildDom());
// Generates a unique id class so boxes can only be placed next to other boxes in this layout.
this.leafId = _.uniqueId('layout_leaf_');
this.buildLayout(boxSpec || {});
// Invalidate the _leafIdMap when the layout is adjusted.
this.listenTo(this, 'layoutChanged', function() { this._leafIdMap = null; });
this.autoDisposeCallback(function() {
if (this.rootBox()) {
this.rootBox().dispose();
}
});
}
exports.Layout = Layout;
dispose.makeDisposable(Layout);
_.extend(Layout.prototype, BackboneEvents);
/**
* Returns a LayoutBox object containing the given DOM element, or null if not found.
*/
Layout.prototype.getContainingBox = function(elem) {
return Layout.getContainingBox(elem, this.rootElem);
};
/**
* You can also find the nearest containing LayoutBox without having the Layout object itself by
* using Layout.Layout.getContainingBox. The Layout object is then accessible as box.layout.
*/
Layout.getContainingBox = function(elem, optContainer) {
var boxElem = dom.findAncestor(elem, optContainer, '.layout_box');
return boxElem ? ko.utils.domData.get(boxElem, 'layoutBox') : null;
};
/**
* Finds and returns the leaf layout box containing the content for the given leafId.
*/
Layout.prototype.getLeafBox = function(leafId) {
return this.getLeafIdMap().get(leafId);
};
/**
* Returns the list of all leafIds present in this layout.
*/
Layout.prototype.getAllLeafIds = function() {
return Array.from(this.getLeafIdMap().keys());
};
Layout.prototype.setRoot = function(layoutBox) {
this.rootBox(layoutBox);
};
Layout.prototype.buildDom = function() {
return dom('div.layout_root',
kd.domData('layoutModel', this),
kd.toggleClass('layout_fill_window', this.fillWindow),
kd.scope(this.rootBox, function(rootBox) {
return rootBox ? rootBox.getDom() : null;
})
);
};
/**
* Calls cb on each box in the layout recursively.
*/
Layout.prototype.forEachBox = function(cb, optContext) {
function iter(box) {
cb.call(optContext, box);
box.childBoxes.peek().forEach(iter);
}
iter(this.rootBox.peek());
};
Layout.prototype.buildLayoutBox = function(boxSpec) {
// Note that this is hot code: it runs when rendering a layout for each record, not only for the
// layout editor.
var box = LayoutBox.create(this);
if (boxSpec.size) {
box.flexSize(boxSpec.size);
}
if (boxSpec.leaf) {
box.leafId(boxSpec.leaf);
box.leafContent(this.createLeafFunc(box.leafId()));
} else if (boxSpec.children) {
box.setChildren(boxSpec.children.map(this.buildLayoutBox, this));
}
return box;
};
Layout.prototype.buildLayout = function(boxSpec, needDynamic) {
this.needDynamic = needDynamic;
var oldRootBox = this.rootBox();
this.rootBox(this.buildLayoutBox(boxSpec));
this.trigger('layoutChanged');
if (oldRootBox) {
oldRootBox.dispose();
}
};
Layout.prototype._getBoxSpec = function(layoutBox) {
var spec = {};
if (layoutBox.isDisposed()) {
return spec;
}
if (layoutBox.flexSize() && layoutBox.flexSize() !== 100) {
spec.size = layoutBox.flexSize();
}
if (layoutBox.isLeaf()) {
spec.leaf = layoutBox.leafId();
} else {
spec.children = layoutBox.childBoxes.peek().map(this._getBoxSpec, this);
}
return spec;
};
Layout.prototype.getLayoutSpec = function() {
return this._getBoxSpec(this.rootBox());
};
/**
* Returns a Map object mapping leafId to its LayoutBox. This gets invalidated on layoutAdjust
* events, and rebuilt on next request.
*/
Layout.prototype.getLeafIdMap = function() {
if (!this._leafIdMap) {
this._leafIdMap = new Map();
this.forEachBox(function(box) {
var leafId = box.leafId.peek();
if (leafId !== null) {
this._leafIdMap.set(leafId, box);
}
}, this);
}
return this._leafIdMap;
};