@nodeject/ui-components/esm/dnd-tree/DnDTree.module.less

UI library for non-trivial components

@offsetListChildrenNodes: 48px;
@offsetOrgChildrenNodes: 24px;
@verticalListNodeMargin: 12px;
@verticalOrgNodeMargin: 24px * 2;
@orgNodeMarginUnderHorizontalLine: @verticalOrgNodeMargin/ 4;
@edgeColor: hsl(216, 20%, 85%);
@edgeWidth: 2px;
@dropPlaceholderHeight: 100px;
@dropPlaceholderWidth: 200px;

.dndTree {
    display: flex;
    width: max-content;
    height: 100%;
}
.dndTreeWrapper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    width: 100%;
    height: 100%;

    :global {
        .draggable-item {
            display: inline-flex;
        }
        .smooth-dnd-container.horizontal > .draggable-item {
            display: inline-flex;
        }
        .smooth-dnd-container {
            min-height: @verticalListNodeMargin;
        }
    }

    :global(.smooth-dnd-container.horizontal > .smooth-dnd-draggable-wrapper) {
        height: fit-content;
    }

    // --- DRAGGING --
    // :global(.animated.draggable-item[data-is-dragging-node="true"] > .branch > .nodeChildrenList) {
    // 	display: none;
    // 	height: 0 !important;
    // 	max-height: 0 !important;
    // 	max-width: 0 !important;
    // 	opacity: 0 !important;
    // 	overflow: hidden !important;
    // 	white-space: nowrap !important;
    // 	-webkit-transition: all 0.2s ease;
    // 	-moz-transition: all 0.2s ease;
    // 	-o-transition: all 0.2s ease;
    // 	transition: all 0.2s ease;
    // }
    // Ghost dragged item
    :global(.smooth-dnd-ghost) {
        height: fit-content !important;
        :global(.branch) {
            height: fit-content;
        }
    }
    .nodeStyles {
        display: flex;
    }

    :global(.smooth-dnd-ghost.draggable-item.draggable-item) {
        // height: 81.2px !important;
        & > .helperBorderTopLeft {
            border: unset;
        }
        & > .helperBorderTopRight {
            border: unset;
        }

        .smooth-dnd-container.vertical {
            max-height: @dropPlaceholderHeight;
            height: @dropPlaceholderHeight;
        }

        // input[type=checkbox]:checked ~ .listTreeWrapper,
        // input[type=checkbox]:checked ~ .orgTreeWrapper {
        // 	display: none;
        // 	height: 0 !important;
        // 	max-height: 0 !important;
        // 	max-width: 0 !important;
        // 	opacity: 0 !important;
        // 	overflow: hidden !important;
        // 	white-space: nowrap !important;
        // 	-webkit-transition: all 0.2s ease;
        // 	-moz-transition: all 0.2s ease;
        // 	-o-transition: all 0.2s ease;
        // 	transition: all 0.2s ease;
        // }

        // This gets rid of some of the first node's connecting edges during a drag
        & > :global(.branch > .nodeContainer > .node) {
            .borderBottomMidLeft,
            .nodeTopLeft,
            .nodeTopRight,
            .borderTopMidLeft,
            .borderTopLeft {
                border: unset;
            }
        }

        filter: opacity(0.85);
        .nodeStyles {
            -webkit-box-shadow: 0px 8px 12px -5px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 0px 8px 12px -5px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 8px 12px -5px rgba(0, 0, 0, 0.75);
            transition: all 0.3s ease;
        }
    }

    // Offsets the lists children to the right
    :global(.draggable-item[data-is-child-of-org='false'][data-is-list='true']
            > .branch)
        > .listTreeWrapper
        > :global(.smooth-dnd-container) {
        padding-left: @offsetListChildrenNodes;
    }
    :global(.draggable-item[data-is-child-of-org='true']
            > .branch
            > .nodeContainer)
        ~ .listTreeWrapper {
        padding-left: @offsetListChildrenNodes / 2;
    }

    :global(.smooth-dnd-drop-preview-constant-class) {
        width: @dropPlaceholderWidth !important;
        max-width: @dropPlaceholderWidth !important;
        height: @dropPlaceholderHeight !important;
        max-height: @dropPlaceholderHeight !important;
        padding-top: @verticalListNodeMargin / 2;
        padding-left: @offsetListChildrenNodes / 2;
    }
    :global(.smooth-dnd-container) {
        .dropPlaceholder {
            max-height: @dropPlaceholderHeight;
            border: dashed 1px blue;
            background: lightblue;
        }
    }
    :global(.smooth-dnd-container.vertical) {
        :global(.animated.draggable-item)[style*='translate3d'] {
            transform: translate3d(
                0px,
                (@dropPlaceholderHeight + @verticalListNodeMargin),
                0px
            ) !important;
        }
        :global(.animated.draggable-item[style*='translate3d'][style*=', -']) {
            transform: translate3d(
                0px,
                -(@dropPlaceholderHeight + @verticalListNodeMargin),
                0px
            ) !important;
        }
        :global(.smooth-dnd-stretcher-element) {
            height: 120px !important;
        }
    }

    :global(.branch) > .listNodeNotLastChildWrapper ~ .listTreeWrapper {
        border-left: solid @edgeWidth @edgeColor;
    }

    :global(.draggable-item[data-is-first-child='true'][data-is-first-child='true'][data-is-child-of-org='false'] > .branch > .nodeContainer) {
        & > .listNodeNotLastChildWrapper {         
            grid-template-rows: @verticalListNodeMargin / 2 @verticalListNodeMargin / 2 1fr 1fr 0;
        }
    }
    
    
    // Helper is collapsed:
    .helperIsCollapsed {
        height: @verticalListNodeMargin;
        min-height: 24px;
        border-left: solid @edgeWidth @edgeColor;
    }
    :global(.smooth-dnd-ghost) {
        .helperIsCollapsed {
            border-left: unset;
        }
    }
    :global(.draggable-item[data-is-last-child='true'][data-is-child-of-org='false']
            > .branch) {
        & > .helperIsCollapsed {
            border-left: unset;
        }
    }
    :global(.draggable-item[data-is-child-of-org='true'] > .branch) {
        & > .helperIsCollapsed {
            border-left: unset;
        }
    }

    .listTreeWrapper {
        width: 100%;

        // This adds a line
        :global(.draggable-item[data-is-list='true'][data-is-last-child='false']
                > .branch
                > .nodeContainer)
            ~ .listTreeWrapper {
            border-left: @edgeWidth solid @edgeColor;
        }
        :global(.draggable-item[data-is-list='true'][data-is-last-child='true']
                > .branch
                > .nodeContainer)
            ~ .listTreeWrapper {
            border-left: unset;
        }
    }
    .orgTreeWrapper {
        display: inline-flex;
        flex-direction: row;

        &
            > :global(.smooth-dnd-container
                > .draggable-item[data-is-first-child='false'][data-is-last-child='false']
                > .branch) {
            border-top: @edgeWidth solid @edgeColor;
        }
        &
            :global(.draggable-item[data-is-first-child='true'][data-is-last-child='false'][data-is-child-of-org='true']
                > .branch)
            ~ .helperBorderTopRight {
            border-top: @edgeWidth solid @edgeColor;
            width: @offsetOrgChildrenNodes / 2;
            display: inline-flex;
        }
        &
            :global(.draggable-item[data-is-first-child='false'][data-is-last-child='false'][data-is-child-of-org='true']
                > .branch)
            ~ .helperBorderTopRight {
            border-top: @edgeWidth solid @edgeColor;
            width: @offsetOrgChildrenNodes / 2;
            display: inline-flex;
        }        
        &
            :global(.draggable-item[data-is-first-child='false'][data-is-last-child='false'][data-is-child-of-org='true']
                > .branch) {
            .listNodeWithOrgParentNotLastNotFirstWrapper {
                grid-template-rows: 0 @orgNodeMarginUnderHorizontalLine - @edgeWidth 1fr 1fr 0;
            }
        }
        &
            :global(.draggable-item)[data-is-first-child='false'][data-is-child-of-org='true']
            > .helperBorderTopLeft {
            border-top: @edgeWidth solid @edgeColor;
            width: @offsetOrgChildrenNodes / 2;
            display: inline-flex;
        }
    }

    .firstChildOfOrgTreeNodeWrapper {
        display: flex;
        // width: 100%;
        .helperBorderTopRight {
            flex-grow: 1;
            border-top: @edgeWidth solid @edgeColor;
        }
    }

    .listTreeRootNodeWrapper {
        display: flex;
    }

    .orgNodeCenterWrapper {
        display: flex;
        justify-content: center;
        .helperBorderTopLeft {
            flex-grow: 1;
            // border-top: @edgeWidth solid @edgeColor;
        }
        .helperBorderTopRight {
            flex-grow: 1;
            border-top: @edgeWidth solid @edgeColor;
        }
    }

    .nodeWrapper {
        // max-width: 220px;
        display: grid;
        grid-template-areas:
            'borderTopLeft nodeTopMargin nodeTopMargin' 'borderTopLeft nodeTopLeft nodeTopRight'
            'borderTopMidLeft node node' 'borderBottomMidLeft node node'
            'borderBottomLeft nodeBottomLeft nodeBottomRight';
        grid-template-columns: 0 1fr 1fr;
        grid-template-rows: @verticalListNodeMargin / 2 @verticalListNodeMargin / 2 1fr 1fr @verticalListNodeMargin;
        & > .borderTopLeft {
            grid-area: borderTopLeft;
        }
        & > .nodeTopMargin {
            grid-area: nodeTopMargin;
        }
        & > .nodeTopLeft {
            position: relative;
            grid-area: nodeTopLeft;
        }
        & > .nodeTopRight {
            grid-area: nodeTopRight;
        }
        & > .borderTopMidLeft {
            grid-area: borderTopMidLeft;
        }
        & > .node {
            grid-area: node;
        }
        & > .borderBottomMidLeft {
            grid-area: borderBottomMidLeft;
        }
        & > .borderBottomLeft {
            grid-area: borderBottomLeft;
        }
        & > .nodeBottomLeft {
            grid-area: nodeBottomLeft;
            position: relative;
            .expandCollapseButton {
                z-index: 10;
                position: absolute;
                left: @offsetListChildrenNodes / 2 - 6px;
                top: -2px;
            }
        }
        & > .nodeBottomRight {
            grid-area: nodeBottomRight;
            position: relative;
            .expandCollapseButton {
                z-index: 10;
                position: absolute;
                left: -8px;
                top: 0px;
            }
        }
    }

    /*              
        *       _______
        *      |  any  |
        *      |_______|
        *          |
        */
    .orgNodeNoParentNoChildrenWrapper {
        .nodeWrapper();
        grid-template-rows: 0 0 1fr 1fr 0;
    }

    /*              
        *       _______
        *      |  any  |
        *      |_______|
        *          |
        */
    .orgNodeNoParentWithChildrenWrapper {
        .nodeWrapper();
        // grid-template-rows: 0 @verticalNodeMargin / 2 1fr 1fr @verticalNodeMargin;
        grid-template-rows: 0 0 1fr 1fr @verticalOrgNodeMargin / 2;
        & > .nodeBottomRight {
            // border-top: @edgeWidth solid @edgeColor;
            border-left: @edgeWidth solid @edgeColor;
        }
    }

    /*          
     *       _______
     *      |  List |
     *      |_______|
     *        |
     */
    .listRootSiblingNodeWrapper {
        .nodeWrapper();
        grid-template-columns: @offsetListChildrenNodes / 2 1fr 1fr;
        grid-template-rows: 0 0 / 2 1fr 1fr 0;
    }

    /*              ____
        *       ___|___
        *      |  any  |
        *      |_______|
     */
    .firstNodeWithOrgParentWrapper {
        .nodeWrapper();
        grid-template-rows: 0 @orgNodeMarginUnderHorizontalLine 1fr 1fr 0;
        & > .nodeTopRight {
            border-top: @edgeWidth solid @edgeColor;
            border-left: @edgeWidth solid @edgeColor;
        }
    }
    /*              ____
        *       ___|___
        *      |  org  |
        *      |_______|
        *          |
     */
    .firstOrgNodeWithOrgParentAndChildrenWrapper {
        .firstNodeWithOrgParentWrapper();
        grid-template-rows: 0 @orgNodeMarginUnderHorizontalLine 1fr 1fr @verticalListNodeMargin / 2;
        & > .nodeBottomRight {
            border-left: @edgeWidth solid @edgeColor;
        }
    }

    /*      _______________
        *  |    ___|___    |
        *      |  list |
        *      |_______|
     */
    .listNodeWithOrgParentNotLastNotFirstWrapper {
        .nodeWrapper();
        grid-template-rows: 0 @orgNodeMarginUnderHorizontalLine 1fr 1fr 0;
        & > .nodeTopRight {
            border-left: @edgeWidth solid @edgeColor;
        }
    }

    /*      _______________
        *  |    ___|___    |
        *      |  org  |
        *      |_______|    
     */
    .orgNodeWithOrgParentNoChildrenMidPositionWrapper {
        .nodeWrapper();
        grid-template-rows: 0 @orgNodeMarginUnderHorizontalLine 1fr 1fr 0;
        & > .nodeTopRight {
            border-left: @edgeWidth solid @edgeColor;
        }
    }

    /*      _______________
        *  |    ___|___    |
        *      |  org  |
        *      |_______|
        *          |
     */
    .orgNodeWithOrgParentWithChildrenMidPositionWrapper {
        .orgNodeWithOrgParentNoChildrenMidPositionWrapper();
        grid-template-rows: 0 (@orgNodeMarginUnderHorizontalLine - @edgeWidth) 1fr 1fr @verticalListNodeMargin / 2;
        & > .nodeBottomRight {
            border-left: @edgeWidth solid @edgeColor;
        }
    }

    /*         ____
        *       ___|___
        *      |  org  |
        *      |_______|
     */
    .lastOrgNodeWithOrgParentNoChildrenWrapper {
        .nodeWrapper();
        grid-template-rows: 0 @orgNodeMarginUnderHorizontalLine 1fr 1fr @verticalListNodeMargin;
        & > .nodeTopLeft,
        .borderTopLeft {
            border-top: @edgeWidth solid @edgeColor;
        }
        & > .nodeTopRight {
            border-left: @edgeWidth solid @edgeColor;
        }
    }
    /*         ____
        *       ___|___
        *      |  org  |
        *      |_______|
        *          |
     */
    .lastOrgNodeWithOrgParentWrapper {
        .lastOrgNodeWithOrgParentNoChildrenWrapper();
        grid-template-rows: 0 @orgNodeMarginUnderHorizontalLine 1fr 1fr @verticalListNodeMargin / 2;
        & > .nodeBottomRight {
            border-left: @edgeWidth solid @edgeColor;
        }
    }
    /*         ____
        *       ___|___
        *      |  list |
        *      |_______|
     */
    .lastListNodeWithOrgParentWrapper {
        .nodeWrapper();
        grid-template-rows: 0 @orgNodeMarginUnderHorizontalLine 1fr 1fr 0;
        & > .nodeTopLeft {
            border-top: @edgeWidth solid @edgeColor;
        }
        & > .nodeTopRight {
            border-left: @edgeWidth solid @edgeColor;
        }
    }
    /*          
     *    |  _______
     *    |_|  List |
     *    | |_______|
     */
     .listNodeNotLastChildWrapper {
        .nodeWrapper();
        grid-template-columns: @offsetListChildrenNodes / 2 1fr 1fr;
        grid-template-rows: 0 0 1fr 1fr 0; // ZARB

        & > .borderTopLeft,
        .borderTopMidLeft,
        .borderBottomMidLeft,
        .borderBottomLeft {
            border-left: @edgeWidth solid @edgeColor;
        }
        & > .borderTopMidLeft {
            border-bottom: @edgeWidth solid @edgeColor;
        }
    }

    /*          
     *    |  _______
     *    |_|  List |
     *    | |_______|
     */
     .listNodeNotFirstChildNotLastChildWrapper {
        .nodeWrapper();
        grid-template-columns: @offsetListChildrenNodes / 2 1fr 1fr;
        grid-template-rows: 0 0 1fr 1fr 0; // ZARB

        & > .borderTopLeft,
        .borderTopMidLeft,
        .borderBottomMidLeft,
        .borderBottomLeft {
            border-left: @edgeWidth solid @edgeColor;
        }
        & > .borderTopMidLeft {
            border-bottom: @edgeWidth solid @edgeColor;
        }
    }

    /*          
     *    |  _______
     *    |_|  List |
     *      |_______|
     */
    .listLastSiblingNodeWrapper {
        .nodeWrapper();
        grid-template-columns: @offsetListChildrenNodes / 2 1fr 1fr;
        grid-template-rows: 0 0 / 2 1fr 1fr @verticalOrgNodeMargin / 4;

        & > .borderTopLeft,
        .borderTopMidLeft {
            border-left: @edgeWidth solid @edgeColor;
        }
        & > .borderTopMidLeft {
            border-bottom: @edgeWidth solid @edgeColor;
        }
    }

    .orgNodeWrapper {
        display: grid;
        grid-template-areas: 'node node' 'left right';
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr @verticalListNodeMargin / 2;

        & > .node {
            grid-area: node;
        }
        & > .left {
            grid-area: left;
            border-right: @edgeWidth solid @edgeColor;
        }
        & > .right {
            grid-area: right;
        }
    }

    .orgNodeWithListParentAndMoreSiblingsWrapper {
        display: grid;
        width: 100%;
        grid-template-areas:
            'topLeft top top topRight' 'topLeft node node topRight' 'bottomLeft node node bottomRight'
            'bottomLeft bottomLeftMid bottomRightMid bottomRight';
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-rows: @verticalListNodeMargin auto auto @verticalListNodeMargin / 2;

        & > .topLeft {
            grid-area: topLeft;
            min-width: @offsetListChildrenNodes / 2;
            border-bottom: @edgeWidth solid @edgeColor;
        }
        & > .top {
            grid-area: top;
        }
        & > .topRight {
            grid-area: topRight;
        }
        & > .node {
            grid-area: node;
        }
        & > .bottomLeft {
            grid-area: bottomLeft;
        }
        & > .bottomLeftMid {
            grid-area: bottomLeftMid;
        }
        & > .bottomRightMid {
            grid-area: bottomRightMid;
            border-left: @edgeWidth solid @edgeColor;
        }
        & > .bottomRight {
            grid-area: bottomRight;
        }
    }

    .orgNodeWrapperHasParentNoChildren {
        display: grid;
        grid-template-areas: 'left right' 'node node';
        grid-template-columns: 1fr 1fr;
        grid-template-rows: @verticalListNodeMargin / 2 1fr;

        & > .left {
            grid-area: left;
            border-right: @edgeWidth solid @edgeColor;
        }
        & > .right {
            grid-area: right;
        }
        & > .node {
            grid-area: node;
        }
    }

    .orgTreeChildrenWrapper {
        display: flex;
        flex-direction: row;
    }

    .innerListTreeChildrenWrapper {
        border-left: @edgeWidth solid @edgeColor;
    }

    .listTreeChildrenWrapper {
        display: flex;
        flex-direction: column;
        padding-left: @offsetListChildrenNodes;
    }

    input[type='checkbox'] {
        display: none;
    }
    input[type='checkbox'] ~ .listTreeWrapper,
    input[type='checkbox'] ~ .orgTreeWrapper {
        display: flex;
        max-height: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    input[type='checkbox']:checked ~ .listTreeWrapper,
    input[type='checkbox']:checked ~ .orgTreeWrapper {
        max-height: 100%;
        max-width: 100%;
        opacity: 1;
    }
    input[type='checkbox']:checked + .node:before {
        transform: rotate(90deg);
    }
}

// :global(.smooth-dnd-container.horizontal > .draggable-item) {
//     height: 100%;
//     display: table-cell;
//     vertical-align: top;
// }

// :global(.smooth-dnd-container.vertical > .draggable-item) {
//     overflow: hidden;
//     display: block;
// }

// :global(.draggable-item) {
//     box-sizing: border-box;
// }

// :global(.draggable-item.horizontal) {
//     height: 100%;
//     display: table-cell;
//     vertical-align: top;
// }

// :global(.draggable-item.vertical) {
//     overflow: hidden;
//     display: block;
// }

// :global(.draggable-item.animated) {
//     transition: transform ease;
// }