@byeolnaerim/flex-layout 0.0.4 → 0.0.6

package/dist/flex-layout/styles/FlexLayout.module.css

@@ -0,0 +1,416 @@
+.flex-layout {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    overflow-wrap: revert;
+    position: relative;
+    /* -ms-overflow-style: none;
+    scrollbar-width: none; */
+    /* &::-webkit-scrollbar {
+        display: none;
+    } */
+    &[data-direction='column'] {
+        flex-direction: column;
+        & > .flex-resize-panel {
+            height: 4px;
+            width: auto;
+            cursor: ns-resize;
+            &:hover > .hover,
+            &:hover > .hover[data-is_hover],
+            &:active > .hover {
+                height: 3px;
+                width: 100%;
+            }
+        }
+        & > .flex-container > .flex-content-fit-wrapper {
+            width: 100%;
+            height: fit-content;
+            & > * {
+                width: 100%;
+                height: fit-content;
+            }
+        }
+    }
+
+    &[data-direction='row'] {
+        flex-direction: row;
+        & > .flex-resize-panel {
+            width: 4px;
+            height: auto;
+            cursor: ew-resize;
+            &:hover > .hover,
+            &:hover > .hover[data-is_hover],
+            &:active > .hover {
+                width: 3px;
+                height: 100%;
+            }
+        }
+        & > .flex-container > .flex-content-fit-wrapper {
+            width: fit-content;
+            height: 100%;
+            & > * {
+                width: fit-content;
+                height: 100%;
+            }
+        }
+    }
+    & > .flex-container {
+        overflow: hidden;
+        box-sizing: border-box;
+        &[data-is_resize_panel='true'] {
+            flex: 1 1 0%;
+        }
+        &[data-is_resize_panel='false'] {
+            flex: 0 0 0%;
+        }
+        & > *:not(.flex-content-fit-wrapper) {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    & .flex-resize-panel {
+        background-color: rgb(115 115 115);
+        z-index: 1001;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex: 0 0 0.1%;
+        position: relative;
+        -moz-user-select: -moz-none;
+        -khtml-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        right: 0;
+        bottom: 0;
+
+        &:hover,
+        &:active {
+            animation-name: drag-panel-hover;
+            animation-fill-mode: forwards;
+            animation-direction: normal;
+            animation-duration: 0.3s;
+            animation-iteration-count: 1;
+            animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);
+        }
+
+        &:hover > .hover,
+        &:hover > .hover[data-is_hover],
+        &:active > .hover {
+            background-color: #0066ffb5;
+            z-index: 3002;
+            position: absolute;
+            display: block;
+            opacity: 1;
+            visibility: inherit;
+            transition: all 1s;
+            animation-name: drag-panel-hover-highlight;
+            animation-fill-mode: forwards;
+            animation-direction: normal;
+            animation-duration: 0.3s;
+            animation-iteration-count: 1;
+            animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);
+        }
+
+        & > .hover {
+            opacity: 0;
+            visibility: hidden;
+            transition: all 1s;
+        }
+        &.bottom-cylinder {
+            &::after {
+                border-bottom-left-radius: 15px;
+                border-bottom-right-radius: 15px;
+                bottom: 100%;
+            }
+        }
+        &.bottom-cylinder-reverse {
+            &::after {
+                border-top-left-radius: 15px;
+                border-top-right-radius: 15px;
+                bottom: 100%;
+            }
+        }
+        &.top-cylinder {
+            border-bottom-left-radius: 15px;
+            border-bottom-right-radius: 15px;
+        }
+        &.right-cylinder {
+            &::after {
+                border-top-right-radius: 15px;
+                border-bottom-right-radius: 15px;
+                left: 100%;
+            }
+        }
+        &.left-cylinder {
+            &::after {
+                right: 100%;
+            }
+        }
+        &.bottom-cylinder,
+        &.bottom-cylinder-reverse,
+        &.top-cylinder,
+        &.left-cylinder,
+        &.right-cylinder {
+            &::after {
+                background-color: hsla(0, 0%, 54%, 0.32);
+                content: ' ';
+                position: absolute;
+                z-index: 3002;
+            }
+            &:hover,
+            &:hover::after,
+            &:active,
+            &:active::after {
+                background-color: rgb(0 102 255 / 45%);
+                transition: background-color 1s;
+            }
+        }
+        &.bottom-cylinder,
+        &.top-cylinder,
+        &.bottom-cylinder-reverse {
+            &::after {
+                height: 1.1rem;
+                width: 60%;
+            }
+            &:not(.bottom-cylinder-reverse)::after {
+                top: 0;
+            }
+        }
+        &.left-cylinder,
+        &.right-cylinder {
+            &::after {
+                width: 1.1rem;
+                height: 60%;
+            }
+        }
+    }
+}
+
+@keyframes drag-panel-hover {
+    0% {
+        background-color: #b1b1b1d6;
+    }
+
+    10% {
+        background-color: #b1b1b1ba;
+    }
+
+    20% {
+        background-color: #b1b1b194;
+    }
+
+    40% {
+        background-color: #b1b1b17d;
+    }
+
+    60% {
+        background-color: #b1b1b152;
+    }
+
+    80% {
+        background-color: #b1b1b130;
+    }
+
+    100% {
+        background-color: #b1b1b100;
+        animation-play-state: paused;
+    }
+}
+
+@keyframes drag-panel-hover-highlight {
+    0% {
+        opacity: 0;
+    }
+
+    10% {
+        opacity: 0.1;
+    }
+
+    20% {
+        opacity: 0.2;
+    }
+
+    40% {
+        opacity: 0.4;
+    }
+
+    60% {
+        opacity: 0.6;
+    }
+
+    80% {
+        opacity: 0.8;
+    }
+
+    100% {
+        opacity: 1;
+        animation-play-state: paused;
+    }
+}
+
+.flex-split-screen {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    & .flex-split-screen-boundary-container {
+        position: absolute;
+        font-family: Arial, sans-serif;
+        transition:
+            background-color 0.3s,
+            border-color 0.3s;
+        color: #00acc1;
+        border: 2px dashed #00acc1;
+        border-radius: 10px;
+        background-color: #0014ff17;
+        font-size: 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        z-index: 9001;
+    }
+    & .flex-split-screen-drag-box-title-wrapper-sticky {
+        position: sticky;
+        top: 0;
+        z-index: 2001;
+        background: #f0f0f0;
+    }
+    & .flex-split-screen-drag-box-title-wrapper {
+        html[data-color-scheme='dark'] & {
+            background: #3c3c3c;
+            box-shadow: 0px 1px 20px 0px #1e1e1e;
+        }
+        html[data-color-scheme='light'] & {
+            background: #edf1f5;
+            box-shadow: 0px 1px 20px 0px #e5e5e5;
+        }
+        scrollbar-width: initial;
+        scrollbar-color: initial;
+        display: flex;
+        justify-content: space-between;
+        transition:
+            background 0.3s,
+            color 0.3s,
+            box-shadow 0.3s;
+        position: relative;
+        border-bottom: 1px solid #e5e5e5;
+        & .flex-split-screen-drag-box-title-container {
+            display: flex;
+            width: 100%;
+            background: inherit;
+        }
+    }
+}
+.flex-split-screen-drag-box-title-item {
+    display: flex;
+    align-items: baseline;
+    padding-right: 0.5rem;
+    padding-left: 0.1rem;
+    &:last-child:not(:first-child) {
+        border-right: 2px solid #00000012;
+    }
+    &:not(.active) {
+        box-shadow: inset 0 0 20px 20px #00000000;
+        border-bottom: 1px solid #007fff40;
+    }
+    &:hover {
+        html[data-color-scheme='dark'] & {
+            background: #494949;
+        }
+        html[data-color-scheme='light'] & {
+            background: #e0e0e0;
+        }
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    &:active {
+        box-shadow: inset 0px 0px 17px 0px #00000029;
+        transform: scale(0.97);
+    }
+    & button {
+        background: none;
+        border: none;
+        color: #bbbbbb;
+        font-weight: bold;
+        font-family: none;
+        font-size: 0.9rem;
+        cursor: pointer;
+        padding: 0 0.25rem;
+    }
+    &.active {
+        html[data-color-scheme='dark'] & {
+            color: #b9af3a;
+        }
+        html[data-color-scheme='light'] & {
+            color: #494300;
+        }
+        font-weight: bold;
+        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+        & button {
+            color: #5f5f5f;
+        }
+    }
+}
+.flex-split-screen-drag-box-title-more {
+    display: flex;
+    flex-direction: column;
+    line-height: 0.3;
+    padding: 0rem 0.65rem 0.5rem;
+    font-size: 1.2rem;
+    font-weight: bold;
+    border: none;
+    background: none;
+    color: black;
+    justify-content: space-evenly;
+    cursor: pointer;
+    background: inherit;
+    &:hover {
+        background: #797979;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    &:active {
+        box-shadow: inset 0px 0px 17px 0px #00000029;
+        transform: scale(0.97);
+    }
+}
+.flex-split-screen-drag-box {
+    align-self: center;
+    -webkit-touch-callout: none; /* iOS */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE 10+ */
+    user-select: none; /* Standard syntax */
+    /* pointer-events: none; */
+    -webkit-tap-highlight-color: transparent;
+    /* touch-action: none; */
+    -webkit-touch-callout: none;
+}
+.flex-split-screen-drag-box-clone {
+    -webkit-touch-callout: none; /* iOS */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE 10+ */
+    user-select: none; /* Standard syntax */
+    /* pointer-events: none; */
+    -webkit-tap-highlight-color: transparent;
+    /* touch-action: none; */
+    -webkit-touch-callout: none;
+
+    display: flex;
+    background-color: #adadad;
+    flex-direction: column;
+    padding: 0.2rem 0.4rem;
+    border-radius: 7px;
+    line-height: 99%;
+    z-index: 9001;
+    & span:first-child {
+        font-weight: bold;
+        font-size: 0.85rem;
+    }
+    & span:last-child {
+        font-size: 0.75rem;
+    }
+}

package/dist/flex-layout/styles/listScroll.module.css

@@ -0,0 +1,85 @@
+.default-scroll {
+    overflow: auto;
+}
+.list-scroll {
+    position: relative;
+    flex-wrap: nowrap;
+    text-wrap: nowrap;
+    white-space: nowrap;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    scrollbar-gutter: stable both-edges;
+    &.y {
+        overflow-y: scroll;
+        overflow-x: clip;
+        padding-left: 0.15rem;
+        padding-right: 0.4rem;
+        &:not(:hover) {
+            padding-right: 0.4rem;
+            padding-top: 0.4rem;
+        }
+        &:hover {
+            padding-right: 0;
+            padding-left: top;
+        }
+    }
+
+    &.x {
+        overflow-y: clip;
+        overflow-x: scroll;
+        padding-top: 0.15rem;
+        padding-bottom: 0.4rem;
+        &:not(:hover) {
+            padding-bottom: 0.4rem;
+            padding-left: 0.4rem;
+        }
+        &:hover {
+            padding-bottom: 0;
+            padding-left: 0;
+        }
+    }
+
+    &.none {
+        scrollbar-width: none !important;
+
+        &::-webkit-scrollbar {
+            display: none !important;
+        }
+    }
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    &.show-scroll::-webkit-scrollbar,
+    &:hover::-webkit-scrollbar {
+        scrollbar-width: thin;
+        display: initial;
+        width: 0.45rem;
+        height: 0.45rem;
+    }
+
+    &.show-scroll::-webkit-scrollbar-thumb,
+    &:hover::-webkit-scrollbar-thumb {
+        background: #222; /* 스크롤 위치 */
+        border-radius: 6px;
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* 입체감 있는 그림자 */
+        transition:
+            background 0.3s ease,
+            box-shadow 0.3s ease;
+    }
+
+    &.show-scroll::-webkit-scrollbar-thumb:hover,
+    &.show-scroll::-webkit-scrollbar-thumb:active,
+    &:hover::-webkit-scrollbar-thumb:hover {
+        background: linear-gradient(145deg, #ffecec, #f1f1f1);
+        /* 호버 시 밝아지는 효과 */
+    }
+
+    &.show-scroll::-webkit-scrollbar-track,
+    &:hover::-webkit-scrollbar-track {
+        background: linear-gradient(145deg, #989898, #7c7c7c);
+        border-radius: 6px;
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* 트랙 내부에 부드러운 그림자 */
+    }
+}

package/dist/flex-layout/styles/shake.module.css

@@ -0,0 +1,41 @@
+.shake {
+    animation-name: shake;
+    animation-duration: 0.5s;
+    transform-origin: 50% 50%;
+    animation-iteration-count: infinite;
+}
+@keyframes shake {
+    0% {
+        transform: translate(2px, 1px) rotate(0deg);
+    }
+    10% {
+        transform: translate(-1px, -2px) rotate(-1deg);
+    }
+    20% {
+        transform: translate(-3px, 0px) rotate(1deg);
+    }
+    30% {
+        transform: translate(0px, 2px) rotate(0deg);
+    }
+    40% {
+        transform: translate(1px, -1px) rotate(1deg);
+    }
+    50% {
+        transform: translate(-1px, 2px) rotate(-1deg);
+    }
+    60% {
+        transform: translate(-3px, 1px) rotate(0deg);
+    }
+    70% {
+        transform: translate(2px, 1px) rotate(-1deg);
+    }
+    80% {
+        transform: translate(-1px, -1px) rotate(1deg);
+    }
+    90% {
+        transform: translate(2px, 2px) rotate(0deg);
+    }
+    100% {
+        transform: translate(1px, -2px) rotate(-1deg);
+    }
+}

package/dist/flex-layout/types/FlexDirectionTypes.d.ts

@@ -0,0 +1,6 @@
+export type FlexDirectionModelType = {
+    xy: 'x' | 'y';
+    targetDirection: 'left' | 'top';
+    sizeName: 'width' | 'height' | keyof DOMRect;
+    resizeCursor: 'ew-resize' | 'ns-resize';
+};

package/dist/flex-layout/types/FlexLayoutTypes.d.ts

@@ -0,0 +1,53 @@
+import { ReactElement, ReactNode } from "react";
+export type ResizePanelMode = "default" | "bottom-cylinder" | "bottom-cylinder-reverse" | "top-cylinder" | "left-cylinder" | "right-cylinder";
+export type Direction = "row" | "column";
+export type PanelMovementMode = "bulldozer" | "divorce" | "stalker";
+export type FitContent = "width" | "height";
+export interface FlexLayoutChildrenType {
+    isInitialResizable?: boolean;
+    grow?: number;
+    prevGrow?: number;
+    panelMode?: ResizePanelMode;
+    isFitContent?: boolean;
+    isFitResize?: boolean;
+    isResizePanel?: boolean;
+    containerName: string;
+    children: ReactNode;
+    className?: string;
+}
+export interface FlexContainerProps extends FlexLayoutChildrenType {
+    readonly fitContent?: FitContent;
+    readonly containerCount?: number;
+    readonly layoutName?: string;
+}
+export interface FlexLayoutPanelStyle {
+    color: string;
+    hoverColor?: string;
+}
+export interface FlexLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "id" | "panelClassName"> {
+    direction: Direction;
+    children: ReactElement<FlexLayoutChildrenType>[] | ReactElement<FlexLayoutChildrenType>;
+    layoutName: string;
+    isSplitScreen?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+    className?: string;
+    panelClassName?: string;
+    panelMovementMode?: PanelMovementMode;
+}
+export type FlexLayoutResizePanelProps = {
+    direction: string;
+    containerCount: number;
+    panelMode?: ResizePanelMode;
+    containerName: string;
+    layoutName: string;
+    panelMovementMode: PanelMovementMode;
+    panelClassName?: string;
+};
+export interface FlexLayoutContextValue {
+    layoutName: string;
+    direction: Direction;
+    panelMovementMode: PanelMovementMode;
+    panelClassName?: string;
+    containerCount: number;
+    fitContent: FitContent;
+}

package/dist/flex-layout/utils/FlexLayoutUtils.d.ts

@@ -0,0 +1,26 @@
+export declare function isDocumentOut({ x, y }: {
+    x: number;
+    y: number;
+}): boolean | undefined;
+export declare function getClientXy(event: Event): {
+    clientX: number;
+    clientY: number;
+} | undefined;
+export declare function isOverMove(elementSize: number, elementMinSize: number): boolean;
+export declare function findNotCloseFlexContent(target: HTMLElement | Element | null, direction: 'previousElementSibling' | 'nextElementSibling'): HTMLElement | null;
+export declare function remain(flexContainerList: Array<HTMLElement>): Promise<unknown>;
+export declare function resize(list: Array<HTMLElement>, totalGrow: number): Promise<unknown>;
+export declare function mathWeight(totalCount: number, totalGrow: number): number;
+export declare function mathGrow(childSize: number, parentSize: number, containerCount: number): number;
+export declare function getGrow(growTarget: HTMLElement | Element): number;
+export declare function closeFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isResize, isDsiabledResizePanel, sizeName, }: {
+    isResize?: boolean;
+    isDsiabledResizePanel?: boolean;
+    sizeName: 'width' | 'height';
+}): Promise<unknown>;
+export declare function openFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isPrevSizeOpen, isResize, openGrowImportant, sizeName, }: {
+    isPrevSizeOpen?: boolean;
+    isResize?: boolean;
+    openGrowImportant?: number;
+    sizeName?: 'width' | 'height';
+}): Promise<unknown>;

package/dist/flex-layout/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./FlexLayoutUtils";