313 lines
10 KiB
QML
313 lines
10 KiB
QML
import QtQuick 2.12
|
|
import QtQuick.Layouts 1.15
|
|
import pub.doric.widget 1.0
|
|
|
|
Item {
|
|
id: flex
|
|
|
|
property int minHeight: 0
|
|
property int minWidth: 0
|
|
|
|
property int flexShrink: 0
|
|
property int flexGrow: 0
|
|
|
|
property int marginTop: 0
|
|
property int marginLeft: 0
|
|
property int marginRight: 0
|
|
property int marginBottom: 0
|
|
|
|
property int paddingTop: 0
|
|
property int paddingLeft: 0
|
|
property int paddingRight: 0
|
|
property int paddingBottom: 0
|
|
|
|
property string alignContent: "auto"
|
|
property string alignItems: "auto"
|
|
property string alignSelf: "auto"
|
|
|
|
property string justifyContent: "flexStart"
|
|
|
|
property string display: "flex"
|
|
|
|
property string flexWrap: "noWrap"
|
|
|
|
property string flexDirection: "row"
|
|
|
|
FlexLayoutService {
|
|
id: flexLayoutService
|
|
}
|
|
|
|
function isFlex(child) {
|
|
if (typeof child.flexShrink === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.flexGrow === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.minHeight === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.minWidth === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.marginTop === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.marginLeft === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.marginRight === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.marginBottom === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.paddingTop === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.paddingLeft === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.paddingRight === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.paddingBottom === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.alignContent === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.alignItems === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.alignSelf === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.justifyContent === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.display === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.flexWrap === 'undefined') {
|
|
return false;
|
|
} else if (typeof child.flexDirection === 'undefined') {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function setAlignContent(child, node) {
|
|
var align = child.alignContent;
|
|
if (align === "auto") {
|
|
node.setAlignContentAuto();
|
|
} else if (align === "flexStart") {
|
|
node.setAlignContentFlexStart();
|
|
} else if (align === "center") {
|
|
node.setAlignContentCenter();
|
|
} else if (align === "flexEnd") {
|
|
node.setAlignContentFlexEnd();
|
|
} else if (align === "stretch") {
|
|
node.setAlignContentStretch();
|
|
} else if (align === "baseline") {
|
|
node.setAlignContentBaseline();
|
|
} else if (align === "spaceBetween") {
|
|
node.setAlignContentSpaceBetween();
|
|
} else if (align === "spaceAround") {
|
|
node.setAlignContentSpaceAround();
|
|
} else {
|
|
throw "setAlignContent invalid param";
|
|
}
|
|
}
|
|
|
|
function setAlignItems(child, node) {
|
|
var align = child.alignItems;
|
|
if (align === "auto") {
|
|
node.setAlignItemsAuto();
|
|
} else if (align === "flexStart") {
|
|
node.setAlignItemsFlexStart();
|
|
} else if (align === "center") {
|
|
node.setAlignItemsCenter();
|
|
} else if (align === "flexEnd") {
|
|
node.setAlignItemsFlexEnd();
|
|
} else if (align === "stretch") {
|
|
node.setAlignItemsStretch();
|
|
} else if (align === "baseline") {
|
|
node.setAlignItemsBaseline();
|
|
} else if (align === "spaceBetween") {
|
|
node.setAlignItemsSpaceBetween();
|
|
} else if (align === "spaceAround") {
|
|
node.setAlignItemsSpaceAround();
|
|
} else {
|
|
throw "setAlignItems invalid param";
|
|
}
|
|
}
|
|
|
|
function setAlignSelf(child, node) {
|
|
var align = child.alignSelf;
|
|
if (align === "auto") {
|
|
node.setAlignSelfAuto();
|
|
} else if (align === "flexStart") {
|
|
node.setAlignSelfFlexStart();
|
|
} else if (align === "center") {
|
|
node.setAlignSelfCenter();
|
|
} else if (align === "flexEnd") {
|
|
node.setAlignSelfFlexEnd();
|
|
} else if (align === "stretch") {
|
|
node.setAlignSelfStretch();
|
|
} else if (align === "baseline") {
|
|
node.setAlignSelfBaseline();
|
|
} else if (align === "spaceBetween") {
|
|
node.setAlignSelfSpaceBetween();
|
|
} else if (align === "spaceAround") {
|
|
node.setAlignSelfSpaceAround();
|
|
} else {
|
|
throw "setAlignSelf invalid param";
|
|
}
|
|
}
|
|
|
|
function setDisplay(child, node) {
|
|
var display = child.display;
|
|
if (display === "flex") {
|
|
node.setDisplayFlex();
|
|
} else if (display === "none") {
|
|
node.setDisplayNone();
|
|
} else {
|
|
throw "setDisplay invalid param";
|
|
}
|
|
}
|
|
|
|
function setJustifyContent(child, node) {
|
|
var justify = child.justifyContent;
|
|
if (justify === "center") {
|
|
node.setJustifyCenter();
|
|
} else if (justify === "flexEnd") {
|
|
node.setJustifyFlexEnd();
|
|
} else if (justify === "flexStart") {
|
|
node.setJustifyFlexStart();
|
|
} else if (justify === "spaceAround") {
|
|
node.setJustifySpaceAround();
|
|
} else if (justify === "spaceEvenly") {
|
|
node.setJustifySpaceEvenly();
|
|
} else if (justify === "spaceBetween") {
|
|
node.setJustifySpaceBetween();
|
|
} else {
|
|
throw "setJustifyContent invalid param";
|
|
}
|
|
}
|
|
|
|
function setFlexWrap(child, node) {
|
|
var wrap = child.flexWrap;
|
|
if (wrap === "wrap") {
|
|
node.setWrap();
|
|
} else if (wrap === "noWrap") {
|
|
node.setNoWrap();
|
|
} else if (wrap === "wrapReverse") {
|
|
node.setWrapReverse();
|
|
} else {
|
|
throw "setFlexWrap invalid param";
|
|
}
|
|
}
|
|
|
|
function setFlexDirection(child, node) {
|
|
var direction = child.flexDirection;
|
|
if (direction === "row") {
|
|
node.setFlexDirectionRow();
|
|
} else if (direction === "column") {
|
|
node.setFlexDirectionColumn();
|
|
} else if (direction === "rowReverse") {
|
|
node.setFlexDirectionRowReverse();
|
|
} else if (direction === "columnReverse") {
|
|
node.setFlexDirectionColumnReverse();
|
|
} else {
|
|
throw "setFlexDirection invalid param";
|
|
}
|
|
}
|
|
|
|
function setOtherNodeProps(child, node) {
|
|
node.minHeight = child.minHeight;
|
|
node.minWidth = child.minWidth;
|
|
node.flexShrink = child.flexShrink;
|
|
node.flexGrow = child.flexGrow;
|
|
|
|
node.marginTop = child.marginTop;
|
|
node.marginLeft = child.marginLeft;
|
|
node.marginRight = child.marginRight;
|
|
node.marginBottom = child.marginBottom;
|
|
|
|
node.paddingTop = child.paddingTop;
|
|
node.paddingLeft = child.paddingLeft;
|
|
node.paddingRight = child.paddingRight;
|
|
node.paddingBottom = child.paddingBottom;
|
|
|
|
node.height = child.height;
|
|
node.width = child.width;
|
|
}
|
|
|
|
function setDefaultNodeProps(child, node) {
|
|
node.minHeight = 9999;
|
|
node.minWidth = 0;
|
|
node.flexShrink = 0;
|
|
node.flexGrow = 0;
|
|
|
|
node.marginTop = 0;
|
|
node.marginLeft = 0;
|
|
node.marginRight = 0;
|
|
node.marginBottom = 0;
|
|
|
|
node.paddingTop = 0;
|
|
node.paddingLeft = 0;
|
|
node.paddingRight = 0;
|
|
node.paddingBottom = 0;
|
|
|
|
node.height = child.height;
|
|
node.width = child.width;
|
|
|
|
node.setDisplayFlex();
|
|
|
|
node.setAlignSelfAuto();
|
|
node.setAlignItemsAuto();
|
|
node.setAlignContentAuto();
|
|
|
|
node.setJustifySpaceBetween();
|
|
node.setNoWrap();
|
|
|
|
node.setFlexDirectionRow();
|
|
}
|
|
|
|
function processNode(child, node) {
|
|
setOtherNodeProps(child, node, true);
|
|
setJustifyContent(child, node);
|
|
setFlexDirection(child, node);
|
|
setAlignContent(child, node);
|
|
setAlignItems(child, node);
|
|
setAlignSelf(child, node);
|
|
setFlexWrap(child, node);
|
|
setDisplay(child, node);
|
|
}
|
|
|
|
function updatePositions() {
|
|
if (flex.height != 0 && flex.width != 0) {
|
|
var rootNode = flexLayoutService.createNode();
|
|
processNode(flex, rootNode);
|
|
var nodes = []
|
|
var node = {}
|
|
var child = {}
|
|
var i = 0;
|
|
for (i = 0; i !== flex.children.length; i++) {
|
|
node = flexLayoutService.createNode();
|
|
child = flex.children[i];
|
|
if (isFlex(child)) {
|
|
processNode(child, node);
|
|
} else {
|
|
setDefaultNodeProps(child, node);
|
|
}
|
|
nodes.push(node);
|
|
}
|
|
rootNode.appendChildren(nodes);
|
|
rootNode.calculateLayoutLtr(flex.width, flex.height);
|
|
/* console.log(JSON.stringify({root: rootNode})); */
|
|
for (i = 0; i !== flex.children.length; i++) {
|
|
node = nodes[i];
|
|
flex.children[i].x = node.getLayoutLeft();
|
|
flex.children[i].y = node.getLayoutTop();
|
|
flex.children[i].width = node.getLayoutWidth();
|
|
flex.children[i].height = node.getLayoutHeight();
|
|
/* console.log(JSON.stringify(node)); */
|
|
}
|
|
flexLayoutService.collectGarbage(rootNode);
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
onChildrenChanged: updatePositions();
|
|
onWidthChanged: updatePositions();
|
|
onHeightChanged: updatePositions();
|
|
}
|