+
Flows
@@ -73,7 +73,7 @@ export const DashboardScreenExample = () => {
Database
-
+
Settings
@@ -90,37 +90,59 @@ export const DashboardScreenExample = () => {
-
-
-
-
-
-
- Open All
-
-
- Close All
-
-
-
-
-
- Test
- Test
-
-
-
- {[1,1,1,1,1,1,1,1,1,1,1,1].map(() => {
- return
-
- } name={"Google Cloud Flows"}/>
-
-
-
- })}
-
-
-
+
+ {(collapsed, collapse) => {
+ return <>
+ {!collapsed ?
+
+
+
+
+
+ Open All
+
+
+ Close All
+
+
+
+
+
+
+ {collapsed ? : }
+
+
+
+
+ {[1,1,1,1,1,1,1,1,1,1,1,1].map(() => {
+ return
+
+ } name={"Google Cloud Flows"}/>
+
+
+
+ })}
+
+
+ :
+
+
+
+
+ {collapsed ? : }
+
+
+
+
+
+
+
+ }
+
+ }}
+
diff --git a/src/components/d-screen/DScreen.style.scss b/src/components/d-screen/DScreen.style.scss
index bf762f41..021264ff 100644
--- a/src/components/d-screen/DScreen.style.scss
+++ b/src/components/d-screen/DScreen.style.scss
@@ -35,6 +35,28 @@
left: 0;
cursor: ns-resize;
+ &-label {
+ @include box(false);
+ position: absolute;
+ z-index: 2;
+ left: 50%;
+ display: flex;
+ transform: translateX(-50%);
+ padding: .25rem;
+
+ &--top {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ top: $height - ($height / 4);
+ }
+
+ &--bottom {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ bottom: $height - ($height / 4);
+ }
+ }
+
&:hover {
//background: #29BF12;
@@ -50,7 +72,7 @@
&--top {
bottom: ($height / 4) * -1;
- z-index: 999999;
+ z-index: 2;
&:hover::after {
top: $height - ($height / 4);
@@ -59,10 +81,10 @@
&--bottom {
top: ($height / 4) * -1;
- z-index: 999998;
+ z-index: 1;
&:hover::after {
- top: ($height / 4);
+ top: ($height / 4) - 1px;
}
}
@@ -82,6 +104,8 @@
display: none;
gap: .5rem;
align-items: start;
+
+
}
&--top {
@@ -109,10 +133,30 @@
height: 100%;
content: "";
top: 0;
- right: ($width / 2) * -1;
- z-index: 999999;
cursor: ew-resize;
+ &-label {
+ @include box(false);
+ position: absolute;
+ top: 50%;
+ display: flex;
+ z-index: 2;
+ transform: translateY(-50%);
+ padding: .25rem;
+
+ &--left {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ left: $width - ($width / 4);
+ }
+
+ &--right {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ right: $width - ($width / 4);
+ }
+ }
+
&:hover {
//background: #29BF12;
@@ -127,18 +171,20 @@
}
&--left {
- right: ($width / 2) * -1;
+ right: ($width / 4) * -1;
+ z-index: 2;
&:hover::after {
- left: ($width / 2) + 1;
+ left: $width - ($width / 4);
}
}
&--right {
- left: ($width / 2) * -1;
+ left: ($width / 4) * -1;
+ z-index: 1;
&:hover::after {
- left: ($width / 2) - 1;
+ left: ($width / 4) - 1px;
}
}
@@ -156,10 +202,10 @@
gap: .5rem;
padding: .5rem;
height: 100%;
- z-index: 0;
width: 100%;
position: relative;
flex-direction: column;
+
}
&--left {
@@ -188,6 +234,7 @@
&__content {
color: white;
+ background: $primary;
height: 100%;
overflow: auto;
width: 100%;
@@ -214,6 +261,6 @@
align-items: center;
justify-content: center;
cursor: pointer;
- z-index: 2;
+ z-index: 9999999;
}
}
\ No newline at end of file
diff --git a/src/components/d-screen/DScreen.tsx b/src/components/d-screen/DScreen.tsx
index 8b1ef97a..74d27af6 100644
--- a/src/components/d-screen/DScreen.tsx
+++ b/src/components/d-screen/DScreen.tsx
@@ -4,6 +4,7 @@ import React, {useEffect, useMemo, useRef, useState} from "react";
import {Code0Component} from "../../utils/types";
import "./DScreen.style.scss"
import {getChild, mergeCode0Props} from "../../utils/utils";
+import {IconLayoutBottombarExpand} from "@tabler/icons-react";
export interface DScreenProps extends Code0Component {
children: React.ReactElement & DScreenContentProps>[]
@@ -49,6 +50,7 @@ export interface DScreenHBarProps extends DScreenBarProps {
const Bar = (barType: 'v' | 'h'): React.FC => (props) => {
const {type, children, collapsed = false, resizeable = false, ...rest} = props
const [stateCollapsed, setStateCollapsed] = useState(collapsed)
+ const [sizePercent, setSizePercent] = useState(Infinity)
const barRef = useRef(null)
const resizeRef = useRef(null)
@@ -62,7 +64,6 @@ const Bar = (barType: 'v' | 'h'): React.FC => (pro
const maxH = barRef.current?.style.maxHeight ? parseFloat(barRef.current.style.maxHeight) : Infinity
const mouseDown = () => {
- console.log("mousedown")
const selection = document.getSelection()
if (selection) selection.removeAllRanges()
@@ -71,43 +72,50 @@ const Bar = (barType: 'v' | 'h'): React.FC => (pro
}
const mouseMove = (event: MouseEvent | TouchEvent) => {
+
+ setStateCollapsed(false)
+
//calculate new width
const parentOfBar = barRef.current?.parentElement
- let spacing, mousePosition, widthPixel, widthPercent
+ let localSizePercent = Infinity
if (barType === "h" && type === "left") {
- spacing = barRef.current?.getBoundingClientRect().left ?? 0
- mousePosition = (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX)
- widthPixel = Math.max(Math.min((mousePosition - spacing), maxW), minW)
+ const spacing = barRef.current?.getBoundingClientRect().left ?? 0
+ const mousePosition = (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX)
+ const widthPixel = Math.max(Math.min((mousePosition - spacing), maxW), minW)
const widthPixelAttaching = widthPixel <= (startW + 25) && widthPixel >= (startW - 25) ? startW : widthPixel
- widthPercent = Math.max(Math.min((((widthPixelAttaching) / (parentOfBar?.offsetWidth ?? 0)) * 100), 100), 0)
+ localSizePercent = Math.max(Math.min((((widthPixelAttaching) / (parentOfBar?.offsetWidth ?? 0)) * 100), 100), 0)
} else if (barType === "h" && type === "right") {
- spacing = (barRef.current?.getBoundingClientRect().right ?? 0) - (parentOfBar?.offsetWidth ?? 0)
- mousePosition = (parentOfBar?.offsetWidth ?? 0) - (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX)
- widthPixel = Math.max(Math.min((spacing + mousePosition), maxW), minW)
+ const spacing = (barRef.current?.getBoundingClientRect().right ?? 0) - (parentOfBar?.offsetWidth ?? 0)
+ const mousePosition = (parentOfBar?.offsetWidth ?? 0) - (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX)
+ const widthPixel = Math.max(Math.min((spacing + mousePosition), maxW), minW)
const widthPixelAttaching = widthPixel <= (startW + 25) && widthPixel >= (startW - 25) ? startW : widthPixel
- widthPercent = Math.max(Math.min((((widthPixelAttaching) / ((parentOfBar?.offsetWidth ?? 0))) * 100), 100), 0)
+ localSizePercent = Math.max(Math.min((((widthPixelAttaching) / ((parentOfBar?.offsetWidth ?? 0))) * 100), 100), 0)
} else if (barType === "v" && type === "top") {
- spacing = barRef.current?.getBoundingClientRect().top ?? 0
- mousePosition = (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY)
- widthPixel = Math.max(Math.min((mousePosition - spacing), maxH), minH)
+ const spacing = barRef.current?.getBoundingClientRect().top ?? 0
+ const mousePosition = (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY)
+ const widthPixel = Math.max(Math.min((mousePosition - spacing), maxH), minH)
const widthPixelAttaching = widthPixel <= (startH + 25) && widthPixel >= (startH - 25) ? startH : widthPixel
- widthPercent = Math.max(Math.min((((widthPixelAttaching) / (parentOfBar?.offsetHeight ?? 0)) * 100), 100), 0)
+ localSizePercent = Math.max(Math.min((((widthPixelAttaching) / (parentOfBar?.offsetHeight ?? 0)) * 100), 100), 0)
} else if (barType === "v" && type === "bottom") {
- spacing = (barRef.current?.getBoundingClientRect().bottom ?? 0) - (parentOfBar?.offsetHeight ?? 0)
- mousePosition = (parentOfBar?.offsetHeight ?? 0) - (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY)
- widthPixel = Math.max(Math.min((spacing + mousePosition), maxH), minH)
+ const spacing = (barRef.current?.getBoundingClientRect().bottom ?? 0) - (parentOfBar?.offsetHeight ?? 0)
+ const mousePosition = (parentOfBar?.offsetHeight ?? 0) - (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY)
+ const widthPixel = Math.max(Math.min((spacing + mousePosition), maxH), minH)
const widthPixelAttaching = widthPixel <= (startH + 25) && widthPixel >= (startH - 25) ? startH : widthPixel
- widthPercent = Math.max(Math.min((((widthPixelAttaching) / ((parentOfBar?.offsetHeight ?? 0))) * 100), 100), 0)
+ localSizePercent = Math.max(Math.min((((widthPixelAttaching) / ((parentOfBar?.offsetHeight ?? 0))) * 100), 100), 0)
}
+ //set to state
+ setSizePercent(localSizePercent)
+
//set new width
if (barType === "h" && barRef.current) {
- barRef.current.style.minWidth = `${widthPercent}%`
- barRef.current.style.width = `${widthPercent}%`
+ barRef.current.style.minWidth = `${localSizePercent}%`
+ barRef.current.style.maxWidth = `${localSizePercent}%`
+ barRef.current.style.width = `${localSizePercent}%`
} else if (barType === "v" && barRef.current) {
- barRef.current.style.minHeight = `${widthPercent}%`
- barRef.current.style.height = `${widthPercent}%`
+ barRef.current.style.minHeight = `${localSizePercent}%`
+ barRef.current.style.height = `${localSizePercent}%`
}
}
@@ -137,13 +145,27 @@ const Bar = (barType: 'v' | 'h'): React.FC => (pro
}, [barRef, resizeRef]);
const collapse = () => {
- setStateCollapsed(prevState => !prevState)
+ setStateCollapsed(prevState => {
+ if (!prevState && resizeable && barRef.current && barType === "h") {
+ barRef.current.style.minWidth = ""
+ barRef.current.style.width = ""
+ } else if (!prevState && resizeable && barRef.current && barType === "v") {
+ barRef.current.style.minHeight = ""
+ barRef.current.style.height = ""
+ }
+ return !prevState
+ })
+
}
const child = typeof children === "function" ? useMemo(() => children(stateCollapsed, collapse), [stateCollapsed]) : children
return
- {resizeable &&
}
+ {resizeable &&
+ {sizePercent <= 1 &&
+
+
}
+
}
{child}