Doric/doric-Qt/example/doric/resources/FlexItem.qml

import QtQuick 2.12
import QtQuick.Layouts 1.15
import pub.doric.widget 1.0

Rectangle {
    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();
}