@itwin/appui-react 4.8.3 → 4.9.0

package/lib/cjs/appui-react/layout/widget-panels/Grip.js

@@ -0,0 +1,209 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDoubleClick = exports.useResizeGrip = exports.WidgetPanelGrip = void 0;
+require("./Grip.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const DragManager_1 = require("../base/DragManager");
+const NineZone_1 = require("../base/NineZone");
+const Panel_1 = require("./Panel");
+const usePointerCaptor_1 = require("../base/usePointerCaptor");
+const LayoutStore_1 = require("../base/LayoutStore");
+/** Resize grip of [[WidgetPanel]] component.
+ * @internal
+ */
+function WidgetPanelGrip(props) {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    const { collapsed, pinned } = (0, LayoutStore_1.useLayout)((state) => {
+        const panel = state.panels[side];
+        return {
+            collapsed: panel.collapsed,
+            pinned: panel.pinned,
+        };
+    }, true);
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    const [ref, resizing, active] = (0, exports.useResizeGrip)();
+    const className = (0, classnames_1.default)("nz-widgetPanels-grip", `nz-${side}`, active && "nz-active", resizing && "nz-resizing", props.className);
+    const resizeGripTitle = (0, NineZone_1.useLabel)("resizeGripTitle");
+    return (React.createElement("div", { className: className, title: resizeGripTitle, style: props.style },
+        React.createElement("div", { className: "nz-line-grip" },
+            React.createElement("div", { className: "nz-line-grip-detail" })),
+        React.createElement("div", { className: "nz-handle", ref: ref, onMouseOverCapture: () => {
+                collapsed &&
+                    !pinned &&
+                    !resizing &&
+                    dispatch({
+                        side,
+                        collapsed: false,
+                        type: "PANEL_SET_COLLAPSED",
+                    });
+            } })));
+}
+exports.WidgetPanelGrip = WidgetPanelGrip;
+/** @internal */
+const useResizeGrip = () => {
+    const widgetPanel = React.useContext(Panel_1.WidgetPanelContext);
+    const side = React.useContext(Panel_1.PanelSideContext);
+    const dispatch = React.useContext(NineZone_1.NineZoneDispatchContext);
+    (0, core_bentley_1.assert)(!!side);
+    (0, core_bentley_1.assert)(!!widgetPanel);
+    const [resizing, setResizing] = React.useState(false);
+    const [active, setActive] = React.useState(false);
+    const initialPointerPosition = React.useRef();
+    const dragStartTimer = React.useRef(new core_react_1.Timer(300));
+    const ref = React.useRef(null);
+    const relativePosition = React.useRef(new core_react_1.Point());
+    const layoutStore = (0, LayoutStore_1.useLayoutStore)();
+    const panelStateRef = React.useRef(layoutStore.getState().panels[side]);
+    React.useLayoutEffect(() => layoutStore.subscribe((state) => {
+        panelStateRef.current = state.panels[side];
+    }), [layoutStore, side]);
+    const handleDoubleClick = React.useCallback(() => {
+        dispatch({
+            type: "PANEL_TOGGLE_COLLAPSED",
+            side,
+        });
+    }, [dispatch, side]);
+    const handleClick = useDoubleClick(handleDoubleClick);
+    const onDrag = React.useCallback((pointerPosition, lastPointerPosition) => {
+        if (!ref.current)
+            return;
+        const direction = side === "left" || side === "top" ? 1 : -1;
+        const dragOffset = lastPointerPosition.getOffsetTo(pointerPosition);
+        const dragBy = (0, Panel_1.isHorizontalPanelSide)(side) ? dragOffset.y : dragOffset.x;
+        const resizeBy = direction * dragBy;
+        const bounds = widgetPanel.getBounds();
+        const outerEdge = bounds[side];
+        const innerEdge = (0, Panel_1.isHorizontalPanelSide)(side)
+            ? pointerPosition.y
+            : pointerPosition.x;
+        const size = (innerEdge - outerEdge) * direction;
+        const panel = panelStateRef.current;
+        if (resizeBy === 0)
+            return;
+        if (panel.collapsed) {
+            if (size >= panel.collapseOffset) {
+                dispatch({
+                    type: "PANEL_SET_COLLAPSED",
+                    side,
+                    collapsed: false,
+                });
+                return;
+            }
+            return;
+        }
+        if (panel.size === undefined)
+            return;
+        // New size should match drag direction (i.e. dragging `left` panel grip to the left should not increase left panel size).
+        const sizeDiff = size - panel.size;
+        if (sizeDiff * resizeBy < 0)
+            return;
+        const collapseThreshold = Math.max(panel.minSize - panel.collapseOffset, 0);
+        if (size <= collapseThreshold) {
+            dispatch({
+                type: "PANEL_SET_COLLAPSED",
+                side,
+                collapsed: true,
+            });
+            dispatch({
+                type: "PANEL_SET_SIZE",
+                side,
+                size: panel.minSize,
+            });
+            return;
+        }
+        dispatch({
+            type: "PANEL_SET_SIZE",
+            side,
+            size,
+        });
+    }, [dispatch, side, widgetPanel]);
+    const onDragEnd = React.useCallback(() => {
+        setResizing(false);
+    }, []);
+    const handlePanelGripDragStart = (0, DragManager_1.useDragPanelGrip)({
+        side,
+        onDrag,
+        onDragEnd,
+    });
+    React.useEffect(() => {
+        const timer = dragStartTimer.current;
+        timer.setOnExecute(() => {
+            if (initialPointerPosition.current && ref.current) {
+                relativePosition.current = core_react_1.Rectangle.create(ref.current.getBoundingClientRect())
+                    .topLeft()
+                    .getOffsetTo(initialPointerPosition.current);
+                setResizing(true);
+                handlePanelGripDragStart({
+                    initialPointerPosition: initialPointerPosition.current,
+                    pointerPosition: initialPointerPosition.current,
+                });
+            }
+            initialPointerPosition.current = undefined;
+        });
+        return () => {
+            timer.setOnExecute(undefined);
+        };
+    }, [handlePanelGripDragStart]);
+    const handleDragEnd = React.useCallback(() => {
+        initialPointerPosition.current = undefined;
+        dragStartTimer.current.stop();
+        handleClick();
+        setActive(false);
+    }, [handleClick]);
+    const handlePointerDown = React.useCallback((args) => {
+        initialPointerPosition.current = new core_react_1.Point(args.clientX, args.clientY);
+        dragStartTimer.current.start();
+        setActive(true);
+    }, []);
+    const handlePointerMove = React.useCallback((args) => {
+        if (!initialPointerPosition.current)
+            return;
+        const position = new core_react_1.Point(args.clientX, args.clientY);
+        setResizing(true);
+        handlePanelGripDragStart({
+            initialPointerPosition: position,
+            pointerPosition: position,
+        });
+        onDrag(position, initialPointerPosition.current);
+        initialPointerPosition.current = undefined;
+        dragStartTimer.current.stop();
+    }, [handlePanelGripDragStart, onDrag]);
+    const handlePointerCaptorRef = (0, usePointerCaptor_1.usePointerCaptor)(handlePointerDown, handlePointerMove, handleDragEnd);
+    const handleRef = React.useCallback((instance) => {
+        ref.current = instance;
+        handlePointerCaptorRef(instance);
+    }, [handlePointerCaptorRef]);
+    return [handleRef, resizing, active];
+};
+exports.useResizeGrip = useResizeGrip;
+/** @internal */
+function useDoubleClick(onDoubleClick) {
+    const timer = React.useRef(new core_react_1.Timer(300));
+    const clickCount = React.useRef(0);
+    timer.current.setOnExecute(() => {
+        clickCount.current = 0;
+    });
+    const handleClick = React.useCallback(() => {
+        timer.current.start();
+        clickCount.current++;
+        if (clickCount.current === 2) {
+            onDoubleClick && onDoubleClick();
+            clickCount.current = 0;
+            timer.current.stop();
+        }
+    }, [onDoubleClick]);
+    return handleClick;
+}
+exports.useDoubleClick = useDoubleClick;
+//# sourceMappingURL=Grip.js.map

package/lib/cjs/appui-react/layout/widget-panels/Grip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grip.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Grip.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module WidgetPanels\n */\n\nimport \"./Grip.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Point, Rectangle, Timer } from \"@itwin/core-react\";\nimport type { UseDragPanelGripArgs } from \"../base/DragManager\";\nimport { useDragPanelGrip } from \"../base/DragManager\";\nimport { NineZoneDispatchContext, useLabel } from \"../base/NineZone\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n  WidgetPanelContext,\n} from \"./Panel\";\nimport type { PointerCaptorArgs } from \"../base/usePointerCaptor\";\nimport { usePointerCaptor } from \"../base/usePointerCaptor\";\nimport { useLayout, useLayoutStore } from \"../base/LayoutStore\";\n\n/** Resize grip of [[WidgetPanel]] component.\n * @internal\n */\nexport function WidgetPanelGrip(props: CommonProps) {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  const { collapsed, pinned } = useLayout((state) => {\n    const panel = state.panels[side];\n    return {\n      collapsed: panel.collapsed,\n      pinned: panel.pinned,\n    };\n  }, true);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  const [ref, resizing, active] = useResizeGrip<HTMLDivElement>();\n  const className = classnames(\n    \"nz-widgetPanels-grip\",\n    `nz-${side}`,\n    active && \"nz-active\",\n    resizing && \"nz-resizing\",\n    props.className\n  );\n  const resizeGripTitle = useLabel(\"resizeGripTitle\");\n  return (\n    <div className={className} title={resizeGripTitle} style={props.style}>\n      <div className=\"nz-line-grip\">\n        <div className=\"nz-line-grip-detail\" />\n      </div>\n      <div\n        className=\"nz-handle\"\n        ref={ref}\n        onMouseOverCapture={() => {\n          collapsed &&\n            !pinned &&\n            !resizing &&\n            dispatch({\n              side,\n              collapsed: false,\n              type: \"PANEL_SET_COLLAPSED\",\n            });\n        }}\n      />\n    </div>\n  );\n}\n\n/** @internal */\nexport const useResizeGrip = <T extends HTMLElement>(): [\n  (instance: T | null) => void,\n  boolean,\n  boolean\n] => {\n  const widgetPanel = React.useContext(WidgetPanelContext);\n  const side = React.useContext(PanelSideContext);\n  const dispatch = React.useContext(NineZoneDispatchContext);\n  assert(!!side);\n  assert(!!widgetPanel);\n  const [resizing, setResizing] = React.useState(false);\n  const [active, setActive] = React.useState(false);\n  const initialPointerPosition = React.useRef<Point>();\n  const dragStartTimer = React.useRef(new Timer(300));\n  const ref = React.useRef<T | null>(null);\n  const relativePosition = React.useRef(new Point());\n  const layoutStore = useLayoutStore();\n  const panelStateRef = React.useRef(layoutStore.getState().panels[side]);\n  React.useLayoutEffect(\n    () =>\n      layoutStore.subscribe((state) => {\n        panelStateRef.current = state.panels[side];\n      }),\n    [layoutStore, side]\n  );\n  const handleDoubleClick = React.useCallback(() => {\n    dispatch({\n      type: \"PANEL_TOGGLE_COLLAPSED\",\n      side,\n    });\n  }, [dispatch, side]);\n  const handleClick = useDoubleClick(handleDoubleClick);\n  const onDrag = React.useCallback<NonNullable<UseDragPanelGripArgs[\"onDrag\"]>>(\n    (pointerPosition, lastPointerPosition) => {\n      if (!ref.current) return;\n      const direction = side === \"left\" || side === \"top\" ? 1 : -1;\n      const dragOffset = lastPointerPosition.getOffsetTo(pointerPosition);\n      const dragBy = isHorizontalPanelSide(side) ? dragOffset.y : dragOffset.x;\n      const resizeBy = direction * dragBy;\n\n      const bounds = widgetPanel.getBounds();\n      const outerEdge = bounds[side];\n      const innerEdge = isHorizontalPanelSide(side)\n        ? pointerPosition.y\n        : pointerPosition.x;\n      const size = (innerEdge - outerEdge) * direction;\n\n      const panel = panelStateRef.current;\n      if (resizeBy === 0) return;\n      if (panel.collapsed) {\n        if (size >= panel.collapseOffset) {\n          dispatch({\n            type: \"PANEL_SET_COLLAPSED\",\n            side,\n            collapsed: false,\n          });\n          return;\n        }\n        return;\n      }\n\n      if (panel.size === undefined) return;\n\n      // New size should match drag direction (i.e. dragging `left` panel grip to the left should not increase left panel size).\n      const sizeDiff = size - panel.size;\n      if (sizeDiff * resizeBy < 0) return;\n      const collapseThreshold = Math.max(\n        panel.minSize - panel.collapseOffset,\n        0\n      );\n      if (size <= collapseThreshold) {\n        dispatch({\n          type: \"PANEL_SET_COLLAPSED\",\n          side,\n          collapsed: true,\n        });\n        dispatch({\n          type: \"PANEL_SET_SIZE\",\n          side,\n          size: panel.minSize,\n        });\n        return;\n      }\n\n      dispatch({\n        type: \"PANEL_SET_SIZE\",\n        side,\n        size,\n      });\n    },\n    [dispatch, side, widgetPanel]\n  );\n  const onDragEnd = React.useCallback(() => {\n    setResizing(false);\n  }, []);\n  const handlePanelGripDragStart = useDragPanelGrip({\n    side,\n    onDrag,\n    onDragEnd,\n  });\n  React.useEffect(() => {\n    const timer = dragStartTimer.current;\n    timer.setOnExecute(() => {\n      if (initialPointerPosition.current && ref.current) {\n        relativePosition.current = Rectangle.create(\n          ref.current.getBoundingClientRect()\n        )\n          .topLeft()\n          .getOffsetTo(initialPointerPosition.current);\n        setResizing(true);\n        handlePanelGripDragStart({\n          initialPointerPosition: initialPointerPosition.current,\n          pointerPosition: initialPointerPosition.current,\n        });\n      }\n      initialPointerPosition.current = undefined;\n    });\n    return () => {\n      timer.setOnExecute(undefined);\n    };\n  }, [handlePanelGripDragStart]);\n  const handleDragEnd = React.useCallback(() => {\n    initialPointerPosition.current = undefined;\n    dragStartTimer.current.stop();\n    handleClick();\n    setActive(false);\n  }, [handleClick]);\n  const handlePointerDown = React.useCallback((args: PointerCaptorArgs) => {\n    initialPointerPosition.current = new Point(args.clientX, args.clientY);\n    dragStartTimer.current.start();\n    setActive(true);\n  }, []);\n  const handlePointerMove = React.useCallback(\n    (args: PointerCaptorArgs) => {\n      if (!initialPointerPosition.current) return;\n      const position = new Point(args.clientX, args.clientY);\n      setResizing(true);\n      handlePanelGripDragStart({\n        initialPointerPosition: position,\n        pointerPosition: position,\n      });\n      onDrag(position, initialPointerPosition.current);\n      initialPointerPosition.current = undefined;\n      dragStartTimer.current.stop();\n    },\n    [handlePanelGripDragStart, onDrag]\n  );\n  const handlePointerCaptorRef = usePointerCaptor(\n    handlePointerDown,\n    handlePointerMove,\n    handleDragEnd\n  );\n  const handleRef = React.useCallback(\n    (instance: T | null) => {\n      ref.current = instance;\n      handlePointerCaptorRef(instance);\n    },\n    [handlePointerCaptorRef]\n  );\n  return [handleRef, resizing, active];\n};\n\n/** @internal */\nexport function useDoubleClick(onDoubleClick?: () => void): () => void {\n  const timer = React.useRef(new Timer(300));\n  const clickCount = React.useRef(0);\n  timer.current.setOnExecute(() => {\n    clickCount.current = 0;\n  });\n  const handleClick = React.useCallback(() => {\n    timer.current.start();\n    clickCount.current++;\n    if (clickCount.current === 2) {\n      onDoubleClick && onDoubleClick();\n      clickCount.current = 0;\n      timer.current.stop();\n    }\n  }, [onDoubleClick]);\n  return handleClick;\n}\n"]}

package/lib/cjs/appui-react/layout/widget-panels/Grip.scss

@@ -0,0 +1,138 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "variables";
+
+$line-grip-translate: 1px;
+$full-bar-width: calc(#{$nz-grip-width} * 0.5);
+$handle-width: calc(#{$nz-grip-width} + 1px);
+$line-grip-width: calc(#{$nz-grip-width} - 2px);
+
+.nz-widgetPanels-grip {
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  display: flex;
+  transition: 0.2s ease-out;
+
+  > .nz-handle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &.nz-left {
+    transition-property: background-color, right;
+  }
+  &.nz-right {
+    transition-property: background-color, left;
+  }
+  &.nz-top {
+    transition-property: background-color, bottom;
+  }
+
+  &.nz-left,
+  &.nz-right {
+    flex-direction: column;
+    cursor: ew-resize;
+    width: $full-bar-width;
+    height: 100%;
+
+    > .nz-handle {
+      height: 100%;
+      width: $handle-width;
+    }
+  }
+
+  &.nz-top,
+  &.nz-bottom {
+    cursor: ns-resize;
+    width: 100%;
+    height: $full-bar-width;
+
+    > .nz-handle {
+      height: $handle-width;
+      width: 100%;
+    }
+  }
+
+  &:hover,
+  &.nz-resizing {
+    background-color: $buic-foreground-primary;
+  }
+}
+
+.nz-line-grip {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s ease-out, height 0.2s ease-out, width 0.2s ease-out;
+
+  .nz-captured &,
+  .nz-widgetPanels-grip.nz-resizing &,
+  .nz-collapsed .nz-widgetPanels-grip:hover & {
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  .nz-collapsed & {
+    display: flex;
+    background-color: $buic-background-5;
+    border: 1px solid var(--iui-color-border-subtle);
+    border-radius: 999px;
+    box-sizing: border-box;
+    opacity: 1;
+  }
+
+  .nz-left & {
+    transform: translateX($line-grip-translate);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .nz-right & {
+    transform: translateX(calc(#{$line-grip-translate} * -1));
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .nz-top & {
+    transform: translateY($line-grip-translate);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .nz-bottom & {
+    transform: translateY(calc(#{$line-grip-translate} * -1));
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .nz-left &,
+  .nz-right & {
+    height: 20%;
+    width: $line-grip-width;
+
+    .nz-line-grip-detail {
+      width: 1px;
+      height: 70%;
+    }
+  }
+
+  .nz-top &,
+  .nz-bottom & {
+    height: $line-grip-width;
+    width: 20%;
+
+    .nz-line-grip-detail {
+      width: 70%;
+      height: 1px;
+    }
+  }
+
+  .nz-line-grip-detail {
+    background-color: var(--iui-color-border-subtle);
+  }
+}

package/lib/cjs/appui-react/layout/widget-panels/Panel.d.ts

@@ -0,0 +1,37 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import type { RectangleProps } from "@itwin/core-react";
+import * as React from "react";
+import "./Panel.scss";
+import type { BottomPanelSide, HorizontalPanelSide, LeftPanelSide, PanelSide, RightPanelSide, TopPanelSide } from "./PanelTypes";
+/** Properties of [[WidgetPanelProvider]] component.
+ * @internal
+ */
+export interface WidgetPanelProviderProps {
+    side: PanelSide;
+}
+/** Widget panel component is a side panel with multiple widgets.
+ * @internal
+ */
+export declare function WidgetPanelProvider({ side }: WidgetPanelProviderProps): React.JSX.Element;
+/** @internal */
+export declare function WidgetPanel(): React.JSX.Element;
+/** @internal */
+export declare const PanelSideContext: React.Context<PanelSide | undefined>;
+/** @internal */
+export interface WidgetPanelContextArgs {
+    getBounds(): RectangleProps;
+}
+/** @internal */
+export declare const WidgetPanelContext: React.Context<WidgetPanelContextArgs | undefined>;
+/** @internal */
+export declare const isHorizontalPanelSide: (side: PanelSide) => side is HorizontalPanelSide;
+/** @internal */
+export declare const panelSides: [
+    LeftPanelSide,
+    RightPanelSide,
+    TopPanelSide,
+    BottomPanelSide
+];
+//# sourceMappingURL=Panel.d.ts.map

package/lib/cjs/appui-react/layout/widget-panels/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Panel.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,SAAS,EACT,cAAc,EACd,YAAY,EACb,MAAM,cAAc,CAAC;AAGtB;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,EAAE,wBAAwB,qBAWrE;AAED,gBAAgB;AAChB,wBAAgB,WAAW,sBA+G1B;AAED,gBAAgB;AAChB,eAAO,MAAM,gBAAgB,sCAE5B,CAAC;AAGF,gBAAgB;AAChB,MAAM,WAAW,sBAAsB;IACrC,SAAS,IAAI,cAAc,CAAC;CAC7B;AAED,gBAAgB;AAChB,eAAO,MAAM,kBAAkB,mDAEnB,CAAC;AAGb,gBAAgB;AAChB,eAAO,MAAM,qBAAqB,SAC1B,SAAS,gCAGhB,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,UAAU,EAAE;IACvB,aAAa;IACb,cAAc;IACd,YAAY;IACZ,eAAe;CACqB,CAAC"}

package/lib/cjs/appui-react/layout/widget-panels/Panel.js

@@ -0,0 +1,124 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.panelSides = exports.isHorizontalPanelSide = exports.WidgetPanelContext = exports.PanelSideContext = exports.WidgetPanel = exports.WidgetPanelProvider = void 0;
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_react_1 = require("@itwin/core-react");
+const classnames_1 = require("classnames");
+const React = require("react");
+const DragManager_1 = require("../base/DragManager");
+const LayoutStore_1 = require("../base/LayoutStore");
+const PanelOutline_1 = require("../outline/PanelOutline");
+const SectionOutline_1 = require("../outline/SectionOutline");
+const PanelState_1 = require("../state/PanelState");
+const PanelTargets_1 = require("../target/PanelTargets");
+const SectionTargets_1 = require("../target/SectionTargets");
+const PreviewHorizontalPanelAlign_1 = require("../widget/PreviewHorizontalPanelAlign");
+const Grip_1 = require("./Grip");
+require("./Panel.scss");
+const PanelSections_1 = require("./PanelSections");
+const useAnimatePanel_1 = require("./useAnimatePanel");
+/** Widget panel component is a side panel with multiple widgets.
+ * @internal
+ */
+function WidgetPanelProvider({ side }) {
+    const hasWidgets = (0, LayoutStore_1.useLayout)((state) => state.panels[side].widgets.length > 0);
+    return (React.createElement(exports.PanelSideContext.Provider, { value: side },
+        hasWidgets && React.createElement(WidgetPanel, null),
+        React.createElement(PanelTargets_1.PanelTargets, null),
+        React.createElement(PanelOutline_1.PanelOutline, null)));
+}
+exports.WidgetPanelProvider = WidgetPanelProvider;
+/** @internal */
+function WidgetPanel() {
+    const side = React.useContext(exports.PanelSideContext);
+    const draggedPanelSide = React.useContext(DragManager_1.DraggedPanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    const { enabled: previewHorizontalPanelAlignmentEnabled, alignments } = (0, PreviewHorizontalPanelAlign_1.usePreviewHorizontalPanelAlign)();
+    const previewHorizontalPanelAlignAttributes = React.useMemo(() => previewHorizontalPanelAlignmentEnabled
+        ? {
+            "data-preview-horizontal-panel-align-top": alignments.top,
+            "data-preview-horizontal-panel-align-bottom": alignments.bottom,
+        }
+        : {}, [alignments.bottom, alignments.top, previewHorizontalPanelAlignmentEnabled]);
+    const spanTop = (0, LayoutStore_1.useLayout)((state) => state.panels.top.span);
+    const spanBottom = (0, LayoutStore_1.useLayout)((state) => state.panels.bottom.span);
+    const panel = (0, LayoutStore_1.useLayout)((state) => {
+        const p = state.panels[side];
+        const span = (0, PanelState_1.isHorizontalPanelState)(p) ? p.span : false;
+        return {
+            collapsed: p.collapsed,
+            widgets: p.widgets,
+            resizable: p.resizable,
+            span,
+        };
+    }, true);
+    const { handleTransitionEnd, size, contentSize, transition, ref: panelRef, } = (0, useAnimatePanel_1.useAnimatePanel)();
+    const isHorizontal = (0, exports.isHorizontalPanelSide)(side);
+    const style = React.useMemo(() => {
+        if (isHorizontal)
+            return {
+                height: `${size}px`,
+            };
+        return {
+            width: `${size}px`,
+        };
+    }, [size, isHorizontal]);
+    const contentStyle = React.useMemo(() => {
+        if (contentSize === undefined)
+            return undefined;
+        if (isHorizontal)
+            return {
+                minHeight: `${contentSize}px`,
+            };
+        return {
+            minWidth: `${contentSize}px`,
+        };
+    }, [contentSize, isHorizontal]);
+    const elementRef = React.useRef(null);
+    const getBounds = React.useCallback(() => {
+        (0, core_bentley_1.assert)(!!elementRef.current);
+        return elementRef.current.getBoundingClientRect();
+    }, []);
+    const widgetPanel = React.useMemo(() => {
+        return {
+            getBounds,
+        };
+    }, [getBounds]);
+    const captured = draggedPanelSide === side;
+    const className = (0, classnames_1.default)("nz-widgetPanels-panel", `nz-${side}`, panel.collapsed && "nz-collapsed", captured && "nz-captured", panel.span && "nz-span", spanTop && "nz-span-top", spanBottom && "nz-span-bottom", transition && `nz-${transition}`);
+    const singleSection = panel.widgets.length === 1;
+    const showSectionTargets = singleSection && !panel.collapsed;
+    const ref = (0, core_react_1.useRefs)(elementRef, panelRef);
+    /* istanbul ignore next */
+    return (React.createElement(exports.WidgetPanelContext.Provider, { value: widgetPanel },
+        React.createElement("div", { className: className, ref: ref, style: style, onTransitionEnd: handleTransitionEnd, ...previewHorizontalPanelAlignAttributes },
+            React.createElement("div", { className: "nz-content", style: contentStyle },
+                singleSection && React.createElement(SectionOutline_1.SectionOutline, { sectionIndex: 0 }),
+                React.createElement(PanelSections_1.PanelSections, null),
+                singleSection && React.createElement(SectionOutline_1.SectionOutline, { sectionIndex: 1 })),
+            showSectionTargets && React.createElement(SectionTargets_1.SectionTargets, { widgetId: panel.widgets[0] }),
+            panel.resizable && (React.createElement("div", { className: "nz-grip-container" },
+                React.createElement(Grip_1.WidgetPanelGrip, { className: "nz-grip" }))))));
+}
+exports.WidgetPanel = WidgetPanel;
+/** @internal */
+exports.PanelSideContext = React.createContext(undefined);
+exports.PanelSideContext.displayName = "nz:PanelSideContext";
+/** @internal */
+exports.WidgetPanelContext = React.createContext(undefined);
+exports.WidgetPanelContext.displayName = "nz:WidgetPanelContext";
+/** @internal */
+const isHorizontalPanelSide = (side) => {
+    return side === "top" || side === "bottom";
+};
+exports.isHorizontalPanelSide = isHorizontalPanelSide;
+/** @internal */
+exports.panelSides = ["left", "right", "top", "bottom"];
+//# sourceMappingURL=Panel.js.map

package/lib/cjs/appui-react/layout/widget-panels/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/widget-panels/Panel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module WidgetPanels\n */\n\nimport { assert } from \"@itwin/core-bentley\";\nimport type { RectangleProps } from \"@itwin/core-react\";\nimport { useRefs } from \"@itwin/core-react\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { DraggedPanelSideContext } from \"../base/DragManager\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { PanelOutline } from \"../outline/PanelOutline\";\nimport { SectionOutline } from \"../outline/SectionOutline\";\nimport { isHorizontalPanelState } from \"../state/PanelState\";\nimport { PanelTargets } from \"../target/PanelTargets\";\nimport { SectionTargets } from \"../target/SectionTargets\";\nimport { usePreviewHorizontalPanelAlign } from \"../widget/PreviewHorizontalPanelAlign\";\nimport { WidgetPanelGrip } from \"./Grip\";\nimport \"./Panel.scss\";\nimport { PanelSections } from \"./PanelSections\";\nimport type {\n  BottomPanelSide,\n  HorizontalPanelSide,\n  LeftPanelSide,\n  PanelSide,\n  RightPanelSide,\n  TopPanelSide,\n} from \"./PanelTypes\";\nimport { useAnimatePanel } from \"./useAnimatePanel\";\n\n/** Properties of [[WidgetPanelProvider]] component.\n * @internal\n */\nexport interface WidgetPanelProviderProps {\n  side: PanelSide;\n}\n\n/** Widget panel component is a side panel with multiple widgets.\n * @internal\n */\nexport function WidgetPanelProvider({ side }: WidgetPanelProviderProps) {\n  const hasWidgets = useLayout(\n    (state) => state.panels[side].widgets.length > 0\n  );\n  return (\n    <PanelSideContext.Provider value={side}>\n      {hasWidgets && <WidgetPanel />}\n      <PanelTargets />\n      <PanelOutline />\n    </PanelSideContext.Provider>\n  );\n}\n\n/** @internal */\nexport function WidgetPanel() {\n  const side = React.useContext(PanelSideContext);\n  const draggedPanelSide = React.useContext(DraggedPanelSideContext);\n  assert(!!side);\n  const { enabled: previewHorizontalPanelAlignmentEnabled, alignments } =\n    usePreviewHorizontalPanelAlign();\n\n  const previewHorizontalPanelAlignAttributes = React.useMemo(\n    () =>\n      previewHorizontalPanelAlignmentEnabled\n        ? {\n            \"data-preview-horizontal-panel-align-top\": alignments.top,\n            \"data-preview-horizontal-panel-align-bottom\": alignments.bottom,\n          }\n        : {},\n    [alignments.bottom, alignments.top, previewHorizontalPanelAlignmentEnabled]\n  );\n\n  const spanTop = useLayout((state) => state.panels.top.span);\n  const spanBottom = useLayout((state) => state.panels.bottom.span);\n  const panel = useLayout((state) => {\n    const p = state.panels[side];\n    const span = isHorizontalPanelState(p) ? p.span : false;\n    return {\n      collapsed: p.collapsed,\n      widgets: p.widgets,\n      resizable: p.resizable,\n      span,\n    };\n  }, true);\n\n  const {\n    handleTransitionEnd,\n    size,\n    contentSize,\n    transition,\n    ref: panelRef,\n  } = useAnimatePanel();\n\n  const isHorizontal = isHorizontalPanelSide(side);\n  const style = React.useMemo(() => {\n    if (isHorizontal)\n      return {\n        height: `${size}px`,\n      };\n    return {\n      width: `${size}px`,\n    };\n  }, [size, isHorizontal]);\n  const contentStyle = React.useMemo(() => {\n    if (contentSize === undefined) return undefined;\n    if (isHorizontal)\n      return {\n        minHeight: `${contentSize}px`,\n      };\n    return {\n      minWidth: `${contentSize}px`,\n    };\n  }, [contentSize, isHorizontal]);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n  const getBounds = React.useCallback(() => {\n    assert(!!elementRef.current);\n    return elementRef.current.getBoundingClientRect();\n  }, []);\n  const widgetPanel = React.useMemo<WidgetPanelContextArgs>(() => {\n    return {\n      getBounds,\n    };\n  }, [getBounds]);\n\n  const captured = draggedPanelSide === side;\n  const className = classnames(\n    \"nz-widgetPanels-panel\",\n    `nz-${side}`,\n    panel.collapsed && \"nz-collapsed\",\n    captured && \"nz-captured\",\n    panel.span && \"nz-span\",\n    spanTop && \"nz-span-top\",\n    spanBottom && \"nz-span-bottom\",\n    transition && `nz-${transition}`\n  );\n\n  const singleSection = panel.widgets.length === 1;\n  const showSectionTargets = singleSection && !panel.collapsed;\n  const ref = useRefs(elementRef, panelRef);\n\n  /* istanbul ignore next */\n  return (\n    <WidgetPanelContext.Provider value={widgetPanel}>\n      <div\n        className={className}\n        ref={ref}\n        style={style}\n        onTransitionEnd={handleTransitionEnd}\n        {...previewHorizontalPanelAlignAttributes}\n      >\n        <div className=\"nz-content\" style={contentStyle}>\n          {singleSection && <SectionOutline sectionIndex={0} />}\n          <PanelSections />\n          {singleSection && <SectionOutline sectionIndex={1} />}\n        </div>\n        {showSectionTargets && <SectionTargets widgetId={panel.widgets[0]} />}\n        {panel.resizable && (\n          <div className=\"nz-grip-container\">\n            <WidgetPanelGrip className=\"nz-grip\" />\n          </div>\n        )}\n      </div>\n    </WidgetPanelContext.Provider>\n  );\n}\n\n/** @internal */\nexport const PanelSideContext = React.createContext<PanelSide | undefined>(\n  undefined\n);\nPanelSideContext.displayName = \"nz:PanelSideContext\";\n\n/** @internal */\nexport interface WidgetPanelContextArgs {\n  getBounds(): RectangleProps;\n}\n\n/** @internal */\nexport const WidgetPanelContext = React.createContext<\n  WidgetPanelContextArgs | undefined\n>(undefined);\nWidgetPanelContext.displayName = \"nz:WidgetPanelContext\";\n\n/** @internal */\nexport const isHorizontalPanelSide = (\n  side: PanelSide\n): side is HorizontalPanelSide => {\n  return side === \"top\" || side === \"bottom\";\n};\n\n/** @internal */\nexport const panelSides: [\n  LeftPanelSide,\n  RightPanelSide,\n  TopPanelSide,\n  BottomPanelSide\n] = [\"left\", \"right\", \"top\", \"bottom\"];\n"]}