@itwin/imodel-components-react 3.8.0-dev.1 → 3.8.0

package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.scss

@@ -1,181 +1,181 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "~@itwin/itwinui-css/scss/style/typography";
-
-$cube-outer-width: 96px;
-$button-width: 20px;
-$nav-cube-width: 64px;
-$nav-cube-side-width: 14px;
-
-$grad-start: $buic-background-1;
-$grad-end: $buic-background-4;
-
-$grad-start-highlight: $buic-background-2;
-$grad-end-highlight: $buic-background-5;
-
-$arrow-margin: -3px;
-
-.components-cube-container {
-  position: relative;
-  width: $cube-outer-width;
-  height: $cube-outer-width;
-
-  .cube-element-container {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: $cube-outer-width;
-    height: $cube-outer-width;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .nav-cube {
-      width: $nav-cube-width;
-      height: $nav-cube-width;
-
-      .nav-cube-face {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-        font-size: $iui-cap-size;
-        font-weight: $iui-font-weight-semibold;
-        color: $buic-text-color;
-        box-shadow: inset 0px 0px 1.0px 0.2px #000;
-
-        .face-row {
-          display: flex;
-          flex-direction: row;
-          height: $nav-cube-side-width;
-          width: 100%;
-
-          &.cube-center {
-            height: auto;
-            flex-grow: 1;
-          }
-
-          .face-cell {
-            cursor: pointer;
-            user-select: none;
-            width: $nav-cube-side-width;
-
-            &.cube-center {
-              width: auto;
-              flex-grow: 1;
-            }
-
-            &.cube-hover {
-              color: $buic-foreground-activehover;
-              background: $buic-background-active-overlay;
-            }
-
-            &.cube-active {
-              color: $buic-foreground-activehover;
-              background: $buic-background-pressed-overlay;
-            }
-          }
-
-          &.cube-center .face-cell.cube-center {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-        }
-      }
-
-      .cube-left,
-      .cube-right,
-      .cube-front,
-      .cube-back {
-        background: linear-gradient(#{$grad-start}, #{$grad-end});
-      }
-
-      .cube-top {
-        background: $grad-start;
-      }
-
-      .cube-bottom {
-        background: $grad-end;
-      }
-
-      &.cube-dragging {
-        .face-row .face-cell {
-
-          &.cube-hover,
-          &.cube-active {
-            background: transparent;
-          }
-        }
-
-        .cube-left,
-        .cube-right,
-        .cube-front,
-        .cube-back {
-          background: linear-gradient(#{$grad-start-highlight}, #{$grad-end-highlight});
-        }
-
-        .cube-top {
-          background: $grad-start-highlight;
-        }
-
-        .cube-bottom {
-          background: $grad-end-highlight;
-        }
-      }
-    }
-  }
-
-  .cube-pointer {
-    position: absolute;
-    height: $button-width;
-    width: $button-width;
-    font-size: $button-width;
-    color: $buic-background-2;
-    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-    cursor: pointer;
-
-    &:not(.cube-visible) {
-      display: none;
-    }
-
-    &:hover {
-      color: $buic-row-selection;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &.cube-up {
-      margin: $arrow-margin auto;
-      left: 0px;
-      right: 0px;
-      top: 0px;
-    }
-
-    &.cube-down {
-      margin: $arrow-margin auto;
-      left: 0px;
-      right: 0px;
-      bottom: 0px;
-    }
-
-    &.cube-left {
-      margin: auto $arrow-margin;
-      top: 0px;
-      bottom: 0px;
-      left: 0px;
-    }
-
-    &.cube-right {
-      margin: auto $arrow-margin;
-      top: 0px;
-      bottom: 0px;
-      right: 0px;
-    }
-  }
+/*---------------------------------------------------------------------------------------------
+* 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 "~@itwin/itwinui-css/scss/style/typography";
+
+$cube-outer-width: 96px;
+$button-width: 20px;
+$nav-cube-width: 64px;
+$nav-cube-side-width: 14px;
+
+$grad-start: $buic-background-1;
+$grad-end: $buic-background-4;
+
+$grad-start-highlight: $buic-background-2;
+$grad-end-highlight: $buic-background-5;
+
+$arrow-margin: -3px;
+
+.components-cube-container {
+  position: relative;
+  width: $cube-outer-width;
+  height: $cube-outer-width;
+
+  .cube-element-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: $cube-outer-width;
+    height: $cube-outer-width;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .nav-cube {
+      width: $nav-cube-width;
+      height: $nav-cube-width;
+
+      .nav-cube-face {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        font-size: $iui-cap-size;
+        font-weight: $iui-font-weight-semibold;
+        color: $buic-text-color;
+        box-shadow: inset 0px 0px 1.0px 0.2px #000;
+
+        .face-row {
+          display: flex;
+          flex-direction: row;
+          height: $nav-cube-side-width;
+          width: 100%;
+
+          &.cube-center {
+            height: auto;
+            flex-grow: 1;
+          }
+
+          .face-cell {
+            cursor: pointer;
+            user-select: none;
+            width: $nav-cube-side-width;
+
+            &.cube-center {
+              width: auto;
+              flex-grow: 1;
+            }
+
+            &.cube-hover {
+              color: $buic-foreground-activehover;
+              background: $buic-background-active-overlay;
+            }
+
+            &.cube-active {
+              color: $buic-foreground-activehover;
+              background: $buic-background-pressed-overlay;
+            }
+          }
+
+          &.cube-center .face-cell.cube-center {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+
+      .cube-left,
+      .cube-right,
+      .cube-front,
+      .cube-back {
+        background: linear-gradient(#{$grad-start}, #{$grad-end});
+      }
+
+      .cube-top {
+        background: $grad-start;
+      }
+
+      .cube-bottom {
+        background: $grad-end;
+      }
+
+      &.cube-dragging {
+        .face-row .face-cell {
+
+          &.cube-hover,
+          &.cube-active {
+            background: transparent;
+          }
+        }
+
+        .cube-left,
+        .cube-right,
+        .cube-front,
+        .cube-back {
+          background: linear-gradient(#{$grad-start-highlight}, #{$grad-end-highlight});
+        }
+
+        .cube-top {
+          background: $grad-start-highlight;
+        }
+
+        .cube-bottom {
+          background: $grad-end-highlight;
+        }
+      }
+    }
+  }
+
+  .cube-pointer {
+    position: absolute;
+    height: $button-width;
+    width: $button-width;
+    font-size: $button-width;
+    color: $buic-background-2;
+    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+    cursor: pointer;
+
+    &:not(.cube-visible) {
+      display: none;
+    }
+
+    &:hover {
+      color: $buic-row-selection;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &.cube-up {
+      margin: $arrow-margin auto;
+      left: 0px;
+      right: 0px;
+      top: 0px;
+    }
+
+    &.cube-down {
+      margin: $arrow-margin auto;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+    }
+
+    &.cube-left {
+      margin: auto $arrow-margin;
+      top: 0px;
+      bottom: 0px;
+      left: 0px;
+    }
+
+    &.cube-right {
+      margin: auto $arrow-margin;
+      top: 0px;
+      bottom: 0px;
+      right: 0px;
+    }
+  }
 }

package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.d.ts

@@ -1,146 +1,146 @@
-/** @packageDocumentation
- * @module NavigationAids
- */
-import "./DrawingNavigationAid.scss";
-import * as React from "react";
-import { Matrix3d, Point2d, Point3d, Vector3d } from "@itwin/core-geometry";
-import { IModelConnection, ScreenViewport, ViewManager, Viewport, ViewState } from "@itwin/core-frontend";
-import { CommonProps } from "@itwin/core-react";
-/**
- * Enum for mode that minimap is currently in
- * @internal
- */
-export declare enum MapMode {
-    Opened = "map-opened",
-    Closed = "map-closed"
-}
-/** Properties for the [[DrawingNavigationAid]] component
- * @public
- */
-export interface DrawingNavigationAidProps extends CommonProps {
-    iModelConnection: IModelConnection;
-    viewport?: Viewport;
-    /** @internal */
-    animationTime?: number;
-    /** @internal */
-    openSize?: Vector3d;
-    /** @internal */
-    closeSize?: Vector3d;
-    /** @internal */
-    initialMapMode?: MapMode;
-    /** @internal */
-    onAnimationEnd?: () => void;
-    /** @internal */
-    initialRotateMinimapWithView?: boolean;
-    /** @internal */
-    initialView?: ViewState;
-    /** @internal */
-    viewManagerOverride?: ViewManager;
-    /** @internal */
-    screenViewportOverride?: typeof ScreenViewport;
-}
-/** @internal */
-interface DrawingNavigationAidState {
-    startOrigin: Point3d;
-    origin: Point3d;
-    extents: Vector3d;
-    startRotation: Matrix3d;
-    rotation: Matrix3d;
-    startMapOrigin: Point3d;
-    mapOrigin: Point3d;
-    startMapExtents: Vector3d;
-    mapExtents: Vector3d;
-    mouseStart: Point2d;
-    panningDirection: Vector3d;
-    startDrawingZoom: number;
-    drawingZoom: number;
-    mode: MapMode;
-    animation: number;
-    isMoving: boolean;
-    isPanning: boolean;
-    viewId: string;
-    view: ViewState | undefined;
-    rotateMinimapWithView: boolean;
-}
-/**
- * A Drawing Navigation Aid.
- * @public
- */
-export declare class DrawingNavigationAid extends React.Component<DrawingNavigationAidProps, DrawingNavigationAidState> {
-    private _rootElement;
-    private _viewContainerElement;
-    private _viewElement;
-    private _rootOffset;
-    private _viewport;
-    private _animationFrame;
-    private _mounted;
-    /** @internal */
-    readonly state: Readonly<DrawingNavigationAidState>;
-    constructor(props: DrawingNavigationAidProps);
-    /** @internal */
-    render(): React.ReactNode;
-    private _isViewport3D;
-    private _lastTime;
-    private static _animationFn;
-    private _animation;
-    private _animationEnd;
-    private _lastPanTime;
-    private _panAnimation;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private _handleViewRotationChangeEvent;
-    private _updateFrustum;
-    private _toggleRotationMode;
-    private _handleKeyUp;
-    private _lastClientXY;
-    private _processWindowDrag;
-    private _processWindowEndDrag;
-    private _handleMouseDown;
-    private _handleDrawingMouseDown;
-    private _handleWindowMouseDown;
-    private _handleMouseDrag;
-    private _handleMouseDragEnd;
-    private _handleWindowTouchStart;
-    private _onTouchMove;
-    private _onTouchEnd;
-    /** @internal */
-    static getDefaultClosedMapSize: () => Vector3d;
-    /** @internal */
-    static getDefaultOpenedMapSize: (paddingX?: number, paddingY?: number) => Vector3d;
-    private _getClosedMapSize;
-    private _getOpenedMapSize;
-    private _openLargeMap;
-    private _closeLargeMap;
-    private _getPanVector;
-    private _handleWheel;
-    private _handleZoomIn;
-    private _handleZoomOut;
-    private _handleUnrotate;
-    /** @internal */
-    static findRotatedWindowDimensions: (extents: Vector3d, rotation: Matrix3d) => Vector3d;
-}
-/** @internal */
-export interface DrawingNavigationCanvasProps {
-    view: ViewState | undefined;
-    viewId?: string;
-    origin: Point3d;
-    extents: Vector3d;
-    zoom: number;
-    rotation: Matrix3d;
-    viewManagerOverride?: ViewManager;
-    screenViewportOverride?: typeof ScreenViewport;
-    canvasSizeOverride?: boolean;
-}
-/** @internal */
-export declare class DrawingNavigationCanvas extends React.Component<DrawingNavigationCanvasProps> {
-    private _canvasElement;
-    private _vp?;
-    render(): React.ReactNode;
-    componentDidMount(): void;
-    private customizeViewport;
-    private _update;
-    componentDidUpdate(oldProps: DrawingNavigationCanvasProps): void;
-    componentWillUnmount(): void;
-}
-export {};
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+import "./DrawingNavigationAid.scss";
+import * as React from "react";
+import { Matrix3d, Point2d, Point3d, Vector3d } from "@itwin/core-geometry";
+import { IModelConnection, ScreenViewport, ViewManager, Viewport, ViewState } from "@itwin/core-frontend";
+import { CommonProps } from "@itwin/core-react";
+/**
+ * Enum for mode that minimap is currently in
+ * @internal
+ */
+export declare enum MapMode {
+    Opened = "map-opened",
+    Closed = "map-closed"
+}
+/** Properties for the [[DrawingNavigationAid]] component
+ * @public
+ */
+export interface DrawingNavigationAidProps extends CommonProps {
+    iModelConnection: IModelConnection;
+    viewport?: Viewport;
+    /** @internal */
+    animationTime?: number;
+    /** @internal */
+    openSize?: Vector3d;
+    /** @internal */
+    closeSize?: Vector3d;
+    /** @internal */
+    initialMapMode?: MapMode;
+    /** @internal */
+    onAnimationEnd?: () => void;
+    /** @internal */
+    initialRotateMinimapWithView?: boolean;
+    /** @internal */
+    initialView?: ViewState;
+    /** @internal */
+    viewManagerOverride?: ViewManager;
+    /** @internal */
+    screenViewportOverride?: typeof ScreenViewport;
+}
+/** @internal */
+interface DrawingNavigationAidState {
+    startOrigin: Point3d;
+    origin: Point3d;
+    extents: Vector3d;
+    startRotation: Matrix3d;
+    rotation: Matrix3d;
+    startMapOrigin: Point3d;
+    mapOrigin: Point3d;
+    startMapExtents: Vector3d;
+    mapExtents: Vector3d;
+    mouseStart: Point2d;
+    panningDirection: Vector3d;
+    startDrawingZoom: number;
+    drawingZoom: number;
+    mode: MapMode;
+    animation: number;
+    isMoving: boolean;
+    isPanning: boolean;
+    viewId: string;
+    view: ViewState | undefined;
+    rotateMinimapWithView: boolean;
+}
+/**
+ * A Drawing Navigation Aid.
+ * @public
+ */
+export declare class DrawingNavigationAid extends React.Component<DrawingNavigationAidProps, DrawingNavigationAidState> {
+    private _rootElement;
+    private _viewContainerElement;
+    private _viewElement;
+    private _rootOffset;
+    private _viewport;
+    private _animationFrame;
+    private _mounted;
+    /** @internal */
+    readonly state: Readonly<DrawingNavigationAidState>;
+    constructor(props: DrawingNavigationAidProps);
+    /** @internal */
+    render(): React.ReactNode;
+    private _isViewport3D;
+    private _lastTime;
+    private static _animationFn;
+    private _animation;
+    private _animationEnd;
+    private _lastPanTime;
+    private _panAnimation;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private _handleViewRotationChangeEvent;
+    private _updateFrustum;
+    private _toggleRotationMode;
+    private _handleKeyUp;
+    private _lastClientXY;
+    private _processWindowDrag;
+    private _processWindowEndDrag;
+    private _handleMouseDown;
+    private _handleDrawingMouseDown;
+    private _handleWindowMouseDown;
+    private _handleMouseDrag;
+    private _handleMouseDragEnd;
+    private _handleWindowTouchStart;
+    private _onTouchMove;
+    private _onTouchEnd;
+    /** @internal */
+    static getDefaultClosedMapSize: () => Vector3d;
+    /** @internal */
+    static getDefaultOpenedMapSize: (paddingX?: number, paddingY?: number) => Vector3d;
+    private _getClosedMapSize;
+    private _getOpenedMapSize;
+    private _openLargeMap;
+    private _closeLargeMap;
+    private _getPanVector;
+    private _handleWheel;
+    private _handleZoomIn;
+    private _handleZoomOut;
+    private _handleUnrotate;
+    /** @internal */
+    static findRotatedWindowDimensions: (extents: Vector3d, rotation: Matrix3d) => Vector3d;
+}
+/** @internal */
+export interface DrawingNavigationCanvasProps {
+    view: ViewState | undefined;
+    viewId?: string;
+    origin: Point3d;
+    extents: Vector3d;
+    zoom: number;
+    rotation: Matrix3d;
+    viewManagerOverride?: ViewManager;
+    screenViewportOverride?: typeof ScreenViewport;
+    canvasSizeOverride?: boolean;
+}
+/** @internal */
+export declare class DrawingNavigationCanvas extends React.Component<DrawingNavigationCanvasProps> {
+    private _canvasElement;
+    private _vp?;
+    render(): React.ReactNode;
+    componentDidMount(): void;
+    private customizeViewport;
+    private _update;
+    componentDidUpdate(oldProps: DrawingNavigationCanvasProps): void;
+    componentWillUnmount(): void;
+}
+export {};
 //# sourceMappingURL=DrawingNavigationAid.d.ts.map