@itwin/core-react 4.0.0-dev.12 → 4.0.0-dev.13

package/lib/esm/core-react/radialmenu/RadialMenu.js

@@ -1,175 +1,176 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module RadialMenu
- */
-import "./RadialMenu.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { Icon } from "../icons/IconComponent";
-import { Point } from "../utils/Point";
-import { AnnularSector, Annulus } from "./Annulus";
-/**
- * A context menu arranged in a radial layout.
- * @public
- */
-export class RadialMenu extends React.Component {
-    constructor(props) {
-        super(props);
-        this._root = null;
-        this._selectedButton = null;
-        /** @internal */
-        this.state = {
-            sectors: [],
-        };
-        this._handleKeyUp = (event) => {
-            if (event.key === SpecialKey.Escape && this.props.onEsc)
-                this.props.onEsc(event);
-        };
-        this._handleClick = (event) => {
-            if (event.target instanceof HTMLElement && this._root && !event.target.contains(this._root) && this.props.onBlur)
-                this.props.onBlur(event);
-        };
-        /** Manually call onSelect of highlighted button. */
-        this.select = () => {
-            // istanbul ignore else
-            if (this._selectedButton)
-                this._selectedButton.select();
-        };
-        this._generateAnnularSectors = () => {
-            const n = React.Children.count(this.props.children);
-            const angle = 2 * Math.PI / n;
-            const outer = this.props.outerRadius;
-            const inner = this.props.innerRadius;
-            const offset = -Math.PI / 8;
-            const annulus = new Annulus(new Point(outer + 1, outer + 1), inner + 1, outer - 1);
-            const sectors = [];
-            for (let i = 0; i < n; i++) {
-                sectors.push(new AnnularSector(annulus, angle * i + offset, angle * (i + 1) + offset));
-            }
-            this.setState({ sectors });
-        };
-    }
-    render() {
-        const width = 2 * (this.props.outerRadius + 1);
-        let x = this.props.left, y = this.props.top;
-        if (this.props.left && this.props.top && typeof this.props.left === "number" && typeof this.props.top === "number") {
-            x = this.props.left;
-            y = this.props.top;
-            if (x < 0)
-                x = 0;
-            if (x > window.innerWidth - width)
-                x = window.innerWidth - width;
-            if (y < 0)
-                y = 0;
-            if (y > window.innerHeight - width)
-                y = window.innerHeight - width;
-        }
-        const divStyle = { left: x, top: y, ...this.props.style };
-        return (React.createElement("div", { ref: (el) => { this._root = el; }, className: classnames("core-radial-menu", { opened: this.props.opened }, this.props.className), style: divStyle, "data-testid": "core-radial-menu" },
-            React.createElement("svg", { xmlns: "http://w3.org/2000/svg", version: "1.1", width: width, height: width, className: "core-radial-menu-container" }, React.Children.map(this.props.children, (child, index) => {
-                // istanbul ignore next
-                if (!child || typeof child !== "object" || !("props" in child))
-                    return child;
-                const childElement = child;
-                return React.cloneElement(childElement, {
-                    key: index,
-                    ref: (el) => {
-                        if (this.props.selected === index)
-                            this._selectedButton = el;
-                    },
-                    selected: index === this.props.selected,
-                    labelRotate: childElement.props.labelRotate || this.props.labelRotate,
-                    annularSector: this.state.sectors[index],
-                });
-            }))));
-    }
-    componentDidMount() {
-        this._generateAnnularSectors();
-        setTimeout(() => {
-            window.addEventListener("keyup", this._handleKeyUp);
-            window.addEventListener("mouseup", this._handleClick);
-        });
-    }
-    componentWillUnmount() {
-        window.removeEventListener("keyup", this._handleKeyUp);
-        window.removeEventListener("mouseup", this._handleClick);
-    }
-    componentDidUpdate(prevProps) {
-        if (prevProps.innerRadius !== this.props.innerRadius || prevProps.outerRadius !== this.props.outerRadius) {
-            this._generateAnnularSectors();
-        }
-    }
-}
-RadialMenu.defaultProps = {
-    labelRotate: false,
-    selected: -1,
-};
-/**
- * Button for use within a [[RadialMenu]]
- * @public
- */
-export class RadialButton extends React.Component {
-    constructor(props) {
-        super(props);
-        /** @internal */
-        this.state = { hover: this.props.selected || false };
-        /** Manually call this.props.onSelect */
-        this.select = () => {
-            // istanbul ignore else
-            if (this.props.onSelect)
-                this.props.onSelect(undefined);
-        };
-        this._handleClick = (event) => {
-            // istanbul ignore else
-            if (this.props.onSelect)
-                this.props.onSelect(event);
-        };
-        this._handleMouseOver = (_event) => {
-            this.setState({ hover: true });
-        };
-        this._handleMouseOut = (_event) => {
-            this.setState({ hover: false });
-        };
-    }
-    render() {
-        const sector = this.props.annularSector;
-        let p = new Point();
-        let size = 0;
-        let t = "";
-        let path = "";
-        if (sector) {
-            size = sector.start.p1.getDistanceTo(sector.end.p2) * 2;
-            path = sector.path;
-            const parent = sector.parent;
-            const { x: cx, y: cy } = parent.center;
-            const r = (parent.inner.radius + parent.outer.radius) / 2;
-            const angle = (sector.startAngle + sector.endAngle) / 2;
-            p = new Point(cx + r * Math.cos(angle), cy + r * Math.sin(angle));
-            if (this.props.labelRotate) {
-                let a = angle * 180 / Math.PI + 90;
-                while (a > 180)
-                    a -= 360;
-                while (a < -180)
-                    /* istanbul ignore next */
-                    a += 360;
-                if (a > 90)
-                    a -= 180;
-                if (a < -90)
-                    a += 180;
-                t = `rotate(${a} ${p.x}, ${p.y})`;
-            }
-        }
-        return (React.createElement("g", { onMouseOver: this._handleMouseOver, onMouseOut: this._handleMouseOut, onClick: this._handleClick },
-            React.createElement("path", { className: classnames("core-radial-menu-sector", { selected: this.state.hover }, this.props.className), style: this.props.style, d: path }),
-            React.createElement("foreignObject", { transform: t, x: p.x - size / 2, y: p.y - 16, width: size, height: size, className: "core-radial-menu-button-svg" },
-                React.createElement("div", { ...{ xmlns: "http://www.w3.org/1999/xhtml" }, className: "core-radial-menu-button-container" },
-                    React.createElement("div", { className: "core-radial-menu-button-icon" },
-                        React.createElement(Icon, { iconSpec: this.props.icon })),
-                    React.createElement("div", { className: "core-radial-menu-button-content" }, this.props.children)))));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module RadialMenu
+ */
+import "./RadialMenu.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { Icon } from "../icons/IconComponent";
+import { Point } from "../utils/Point";
+import { AnnularSector, Annulus } from "./Annulus";
+/**
+ * A context menu arranged in a radial layout.
+ * @public
+ */
+class RadialMenu extends React.Component {
+    constructor(props) {
+        super(props);
+        this._root = null;
+        this._selectedButton = null;
+        /** @internal */
+        this.state = {
+            sectors: [],
+        };
+        this._handleKeyUp = (event) => {
+            if (event.key === SpecialKey.Escape && this.props.onEsc)
+                this.props.onEsc(event);
+        };
+        this._handleClick = (event) => {
+            if (event.target instanceof HTMLElement && this._root && !event.target.contains(this._root) && this.props.onBlur)
+                this.props.onBlur(event);
+        };
+        /** Manually call onSelect of highlighted button. */
+        this.select = () => {
+            // istanbul ignore else
+            if (this._selectedButton)
+                this._selectedButton.select();
+        };
+        this._generateAnnularSectors = () => {
+            const n = React.Children.count(this.props.children);
+            const angle = 2 * Math.PI / n;
+            const outer = this.props.outerRadius;
+            const inner = this.props.innerRadius;
+            const offset = -Math.PI / 8;
+            const annulus = new Annulus(new Point(outer + 1, outer + 1), inner + 1, outer - 1);
+            const sectors = [];
+            for (let i = 0; i < n; i++) {
+                sectors.push(new AnnularSector(annulus, angle * i + offset, angle * (i + 1) + offset));
+            }
+            this.setState({ sectors });
+        };
+    }
+    render() {
+        const width = 2 * (this.props.outerRadius + 1);
+        let x = this.props.left, y = this.props.top;
+        if (this.props.left && this.props.top && typeof this.props.left === "number" && typeof this.props.top === "number") {
+            x = this.props.left;
+            y = this.props.top;
+            if (x < 0)
+                x = 0;
+            if (x > window.innerWidth - width)
+                x = window.innerWidth - width;
+            if (y < 0)
+                y = 0;
+            if (y > window.innerHeight - width)
+                y = window.innerHeight - width;
+        }
+        const divStyle = { left: x, top: y, ...this.props.style };
+        return (React.createElement("div", { ref: (el) => { this._root = el; }, className: classnames("core-radial-menu", { opened: this.props.opened }, this.props.className), style: divStyle, "data-testid": "core-radial-menu" },
+            React.createElement("svg", { xmlns: "http://w3.org/2000/svg", version: "1.1", width: width, height: width, className: "core-radial-menu-container" }, React.Children.map(this.props.children, (child, index) => {
+                // istanbul ignore next
+                if (!child || typeof child !== "object" || !("props" in child))
+                    return child;
+                const childElement = child;
+                return React.cloneElement(childElement, {
+                    key: index,
+                    ref: (el) => {
+                        if (this.props.selected === index)
+                            this._selectedButton = el;
+                    },
+                    selected: index === this.props.selected,
+                    labelRotate: childElement.props.labelRotate || this.props.labelRotate,
+                    annularSector: this.state.sectors[index],
+                });
+            }))));
+    }
+    componentDidMount() {
+        this._generateAnnularSectors();
+        setTimeout(() => {
+            window.addEventListener("keyup", this._handleKeyUp);
+            window.addEventListener("mouseup", this._handleClick);
+        });
+    }
+    componentWillUnmount() {
+        window.removeEventListener("keyup", this._handleKeyUp);
+        window.removeEventListener("mouseup", this._handleClick);
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.innerRadius !== this.props.innerRadius || prevProps.outerRadius !== this.props.outerRadius) {
+            this._generateAnnularSectors();
+        }
+    }
+}
+RadialMenu.defaultProps = {
+    labelRotate: false,
+    selected: -1,
+};
+export { RadialMenu };
+/**
+ * Button for use within a [[RadialMenu]]
+ * @public
+ */
+export class RadialButton extends React.Component {
+    constructor(props) {
+        super(props);
+        /** @internal */
+        this.state = { hover: this.props.selected || false };
+        /** Manually call this.props.onSelect */
+        this.select = () => {
+            // istanbul ignore else
+            if (this.props.onSelect)
+                this.props.onSelect(undefined);
+        };
+        this._handleClick = (event) => {
+            // istanbul ignore else
+            if (this.props.onSelect)
+                this.props.onSelect(event);
+        };
+        this._handleMouseOver = (_event) => {
+            this.setState({ hover: true });
+        };
+        this._handleMouseOut = (_event) => {
+            this.setState({ hover: false });
+        };
+    }
+    render() {
+        const sector = this.props.annularSector;
+        let p = new Point();
+        let size = 0;
+        let t = "";
+        let path = "";
+        if (sector) {
+            size = sector.start.p1.getDistanceTo(sector.end.p2) * 2;
+            path = sector.path;
+            const parent = sector.parent;
+            const { x: cx, y: cy } = parent.center;
+            const r = (parent.inner.radius + parent.outer.radius) / 2;
+            const angle = (sector.startAngle + sector.endAngle) / 2;
+            p = new Point(cx + r * Math.cos(angle), cy + r * Math.sin(angle));
+            if (this.props.labelRotate) {
+                let a = angle * 180 / Math.PI + 90;
+                while (a > 180)
+                    a -= 360;
+                while (a < -180)
+                    /* istanbul ignore next */
+                    a += 360;
+                if (a > 90)
+                    a -= 180;
+                if (a < -90)
+                    a += 180;
+                t = `rotate(${a} ${p.x}, ${p.y})`;
+            }
+        }
+        return (React.createElement("g", { onMouseOver: this._handleMouseOver, onMouseOut: this._handleMouseOut, onClick: this._handleClick },
+            React.createElement("path", { className: classnames("core-radial-menu-sector", { selected: this.state.hover }, this.props.className), style: this.props.style, d: path }),
+            React.createElement("foreignObject", { transform: t, x: p.x - size / 2, y: p.y - 16, width: size, height: size, className: "core-radial-menu-button-svg" },
+                React.createElement("div", { ...{ xmlns: "http://www.w3.org/1999/xhtml" }, className: "core-radial-menu-button-container" },
+                    React.createElement("div", { className: "core-radial-menu-button-icon" },
+                        React.createElement(Icon, { iconSpec: this.props.icon })),
+                    React.createElement("div", { className: "core-radial-menu-button-content" }, this.props.children)))));
+    }
+}
 //# sourceMappingURL=RadialMenu.js.map

package/lib/esm/core-react/radialmenu/RadialMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialMenu.js","sourceRoot":"","sources":["../../../../src/core-react/radialmenu/RadialMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module RadialMenu\r\n */\r\n\r\nimport \"./RadialMenu.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { Icon, IconSpec } from \"../icons/IconComponent\";\r\nimport { Point } from \"../utils/Point\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { AnnularSector, Annulus } from \"./Annulus\";\r\n\r\n/** Properties for [[RadialMenu]]\r\n * @public\r\n */\r\nexport interface RadialMenuProps extends CommonProps {\r\n  /** Whether to show RadialMenu */\r\n  opened: boolean;\r\n  /** Radius of inner portion of RadialMenu */\r\n  innerRadius: number;\r\n  /** Radius of outer portion of RadialMenu */\r\n  outerRadius: number;\r\n  /** Optional parameter to specify left position in viewport. */\r\n  left?: number | string;\r\n  /** Optional parameter to specify top position in viewport. */\r\n  top?: number | string;\r\n  /** Whether to rotate labels according to location on the RadialMenu, or to keep labels upright.\r\n   * Default: false\r\n   */\r\n  labelRotate?: boolean;\r\n  /** Which child RadialButton to highlight */\r\n  selected?: number;\r\n  /** triggered in case of onClick events anywhere other than radial menu */\r\n  onBlur?: (event: any) => any;\r\n  /** triggered onKeyUp for <Esc> key */\r\n  onEsc?: (event: any) => any;\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** @internal */\r\ninterface RadialMenuState {\r\n  sectors: AnnularSector[];\r\n}\r\n\r\n/**\r\n * A context menu arranged in a radial layout.\r\n * @public\r\n */\r\nexport class RadialMenu extends React.Component<RadialMenuProps, RadialMenuState> {\r\n  private _root: HTMLDivElement | null = null;\r\n  private _selectedButton: RadialButton | null = null;\r\n  public static defaultProps: Partial<RadialMenuProps> = {\r\n    labelRotate: false,\r\n    selected: -1,\r\n  };\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<RadialMenuState> = {\r\n    sectors: [],\r\n  };\r\n\r\n  constructor(props: RadialMenuProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    const width = 2 * (this.props.outerRadius + 1);\r\n    let x = this.props.left, y = this.props.top;\r\n\r\n    if (this.props.left && this.props.top && typeof this.props.left === \"number\" && typeof this.props.top === \"number\") {\r\n      x = this.props.left;\r\n      y = this.props.top;\r\n\r\n      if (x < 0)\r\n        x = 0;\r\n      if (x > window.innerWidth - width)\r\n        x = window.innerWidth - width;\r\n      if (y < 0)\r\n        y = 0;\r\n      if (y > window.innerHeight - width)\r\n        y = window.innerHeight - width;\r\n    }\r\n\r\n    const divStyle: React.CSSProperties = { left: x, top: y, ...this.props.style };\r\n\r\n    return (\r\n      <div\r\n        ref={(el) => { this._root = el; }}\r\n        className={classnames(\"core-radial-menu\", { opened: this.props.opened }, this.props.className)}\r\n        style={divStyle}\r\n        data-testid=\"core-radial-menu\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://w3.org/2000/svg\" version=\"1.1\"\r\n          width={width} height={width}\r\n          className={\"core-radial-menu-container\"}>\r\n          {React.Children.map(this.props.children, (child, index) => {\r\n            // istanbul ignore next\r\n            if (!child || typeof child !== \"object\" || !(\"props\" in child))\r\n              return child;\r\n\r\n            const childElement = (child as React.ReactElement<any>);\r\n            return React.cloneElement(childElement, {\r\n              key: index,\r\n              ref: (el: any) => {\r\n                if (this.props.selected === index)\r\n                  this._selectedButton = el;\r\n              },\r\n              selected: index === this.props.selected,\r\n              labelRotate: childElement.props.labelRotate || this.props.labelRotate,\r\n              annularSector: this.state.sectors[index],\r\n            });\r\n          })}\r\n        </svg>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  public override componentDidMount() {\r\n    this._generateAnnularSectors();\r\n\r\n    setTimeout(() => {\r\n      window.addEventListener(\"keyup\", this._handleKeyUp);\r\n      window.addEventListener(\"mouseup\", this._handleClick);\r\n    });\r\n  }\r\n\r\n  public override componentWillUnmount() {\r\n    window.removeEventListener(\"keyup\", this._handleKeyUp);\r\n    window.removeEventListener(\"mouseup\", this._handleClick);\r\n  }\r\n\r\n  public override componentDidUpdate(prevProps: RadialMenuProps) {\r\n    if (prevProps.innerRadius !== this.props.innerRadius || prevProps.outerRadius !== this.props.outerRadius) {\r\n      this._generateAnnularSectors();\r\n    }\r\n  }\r\n\r\n  private _handleKeyUp = (event: KeyboardEvent) => {\r\n    if (event.key === SpecialKey.Escape && this.props.onEsc)\r\n      this.props.onEsc(event);\r\n  };\r\n\r\n  private _handleClick = (event: MouseEvent) => {\r\n    if (event.target instanceof HTMLElement && this._root && !event.target.contains(this._root) && this.props.onBlur)\r\n      this.props.onBlur(event);\r\n  };\r\n\r\n  /** Manually call onSelect of highlighted button. */\r\n  public select = () => {\r\n    // istanbul ignore else\r\n    if (this._selectedButton)\r\n      this._selectedButton.select();\r\n  };\r\n\r\n  private _generateAnnularSectors = () => {\r\n    const n = React.Children.count(this.props.children);\r\n    const angle = 2 * Math.PI / n;\r\n    const outer = this.props.outerRadius;\r\n    const inner = this.props.innerRadius;\r\n\r\n    const offset = - Math.PI / 8;\r\n    const annulus = new Annulus(new Point(outer + 1, outer + 1), inner + 1, outer - 1);\r\n    const sectors: AnnularSector[] = [];\r\n    for (let i = 0; i < n; i++) {\r\n      sectors.push(new AnnularSector(annulus, angle * i + offset, angle * (i + 1) + offset));\r\n    }\r\n    this.setState({ sectors });\r\n  };\r\n}\r\n\r\n/** Properties for [[RadialButton]] component\r\n * @public\r\n */\r\nexport interface RadialButtonProps extends CommonProps {\r\n  /** Whether label is rotated to radial menu. Default: Inherit */\r\n  labelRotate?: boolean;\r\n  /** which icon to display in on the menu button */\r\n  icon?: IconSpec;\r\n  /** @internal */\r\n  annularSector?: AnnularSector;\r\n  /** listens to any onClick event, or any select event, which can be triggered by the select() method. */\r\n  onSelect?: (e: any) => any;\r\n  /** Whether item is highlighted */\r\n  selected?: boolean;\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** @internal */\r\ninterface RadialButtonState {\r\n  hover: boolean;\r\n}\r\n\r\n/**\r\n * Button for use within a [[RadialMenu]]\r\n * @public\r\n */\r\nexport class RadialButton extends React.Component<RadialButtonProps, RadialButtonState> {\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<RadialButtonState> = { hover: this.props.selected || false };\r\n\r\n  constructor(props: RadialButtonProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    const sector = this.props.annularSector;\r\n    let p = new Point();\r\n    let size = 0;\r\n    let t = \"\";\r\n    let path = \"\";\r\n\r\n    if (sector) {\r\n      size = sector.start.p1.getDistanceTo(sector.end.p2) * 2;\r\n      path = sector.path;\r\n\r\n      const parent = sector.parent;\r\n      const { x: cx, y: cy } = parent.center;\r\n      const r = (parent.inner.radius + parent.outer.radius) / 2;\r\n      const angle = (sector.startAngle + sector.endAngle) / 2;\r\n      p = new Point(cx + r * Math.cos(angle), cy + r * Math.sin(angle));\r\n\r\n      if (this.props.labelRotate) {\r\n        let a = angle * 180 / Math.PI + 90;\r\n        while (a > 180)\r\n          a -= 360;\r\n        while (a < -180)\r\n          /* istanbul ignore next */\r\n          a += 360;\r\n        if (a > 90)\r\n          a -= 180;\r\n        if (a < -90)\r\n          a += 180;\r\n        t = `rotate(${a} ${p.x}, ${p.y})`;\r\n      }\r\n    }\r\n\r\n    return (\r\n      <g\r\n        onMouseOver={this._handleMouseOver}\r\n        onMouseOut={this._handleMouseOut}\r\n        onClick={this._handleClick}>\r\n        <path\r\n          className={classnames(\"core-radial-menu-sector\", { selected: this.state.hover }, this.props.className)}\r\n          style={this.props.style}\r\n          d={path}>\r\n        </path>\r\n        <foreignObject transform={t} x={p.x - size / 2} y={p.y - 16} width={size} height={size} className={\"core-radial-menu-button-svg\"}>\r\n          <div {...{ xmlns: \"http://www.w3.org/1999/xhtml\" }} className={\"core-radial-menu-button-container\"}>\r\n            <div className=\"core-radial-menu-button-icon\">\r\n              <Icon iconSpec={this.props.icon} />\r\n            </div>\r\n            <div className={\"core-radial-menu-button-content\"}>\r\n              {this.props.children}\r\n            </div>\r\n          </div>\r\n        </foreignObject>\r\n      </g>\r\n    );\r\n  }\r\n\r\n  /** Manually call this.props.onSelect */\r\n  public select = () => {\r\n    // istanbul ignore else\r\n    if (this.props.onSelect)\r\n      this.props.onSelect(undefined);\r\n  };\r\n\r\n  private _handleClick = (event: React.MouseEvent<SVGElement>) => {\r\n    // istanbul ignore else\r\n    if (this.props.onSelect)\r\n      this.props.onSelect(event);\r\n  };\r\n\r\n  private _handleMouseOver = (_event: React.MouseEvent<SVGElement>) => {\r\n    this.setState({ hover: true });\r\n  };\r\n\r\n  private _handleMouseOut = (_event: React.MouseEvent<SVGElement>) => {\r\n    this.setState({ hover: false });\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"RadialMenu.js","sourceRoot":"","sources":["../../../../src/core-react/radialmenu/RadialMenu.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 RadialMenu\n */\n\nimport \"./RadialMenu.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { Icon, IconSpec } from \"../icons/IconComponent\";\nimport { Point } from \"../utils/Point\";\nimport { CommonProps } from \"../utils/Props\";\nimport { AnnularSector, Annulus } from \"./Annulus\";\n\n/** Properties for [[RadialMenu]]\n * @public\n */\nexport interface RadialMenuProps extends CommonProps {\n  /** Whether to show RadialMenu */\n  opened: boolean;\n  /** Radius of inner portion of RadialMenu */\n  innerRadius: number;\n  /** Radius of outer portion of RadialMenu */\n  outerRadius: number;\n  /** Optional parameter to specify left position in viewport. */\n  left?: number | string;\n  /** Optional parameter to specify top position in viewport. */\n  top?: number | string;\n  /** Whether to rotate labels according to location on the RadialMenu, or to keep labels upright.\n   * Default: false\n   */\n  labelRotate?: boolean;\n  /** Which child RadialButton to highlight */\n  selected?: number;\n  /** triggered in case of onClick events anywhere other than radial menu */\n  onBlur?: (event: any) => any;\n  /** triggered onKeyUp for <Esc> key */\n  onEsc?: (event: any) => any;\n  /** Content */\n  children?: React.ReactNode;\n}\n\n/** @internal */\ninterface RadialMenuState {\n  sectors: AnnularSector[];\n}\n\n/**\n * A context menu arranged in a radial layout.\n * @public\n */\nexport class RadialMenu extends React.Component<RadialMenuProps, RadialMenuState> {\n  private _root: HTMLDivElement | null = null;\n  private _selectedButton: RadialButton | null = null;\n  public static defaultProps: Partial<RadialMenuProps> = {\n    labelRotate: false,\n    selected: -1,\n  };\n\n  /** @internal */\n  public override readonly state: Readonly<RadialMenuState> = {\n    sectors: [],\n  };\n\n  constructor(props: RadialMenuProps) {\n    super(props);\n  }\n\n  public override render(): JSX.Element {\n    const width = 2 * (this.props.outerRadius + 1);\n    let x = this.props.left, y = this.props.top;\n\n    if (this.props.left && this.props.top && typeof this.props.left === \"number\" && typeof this.props.top === \"number\") {\n      x = this.props.left;\n      y = this.props.top;\n\n      if (x < 0)\n        x = 0;\n      if (x > window.innerWidth - width)\n        x = window.innerWidth - width;\n      if (y < 0)\n        y = 0;\n      if (y > window.innerHeight - width)\n        y = window.innerHeight - width;\n    }\n\n    const divStyle: React.CSSProperties = { left: x, top: y, ...this.props.style };\n\n    return (\n      <div\n        ref={(el) => { this._root = el; }}\n        className={classnames(\"core-radial-menu\", { opened: this.props.opened }, this.props.className)}\n        style={divStyle}\n        data-testid=\"core-radial-menu\"\n      >\n        <svg\n          xmlns=\"http://w3.org/2000/svg\" version=\"1.1\"\n          width={width} height={width}\n          className={\"core-radial-menu-container\"}>\n          {React.Children.map(this.props.children, (child, index) => {\n            // istanbul ignore next\n            if (!child || typeof child !== \"object\" || !(\"props\" in child))\n              return child;\n\n            const childElement = (child as React.ReactElement<any>);\n            return React.cloneElement(childElement, {\n              key: index,\n              ref: (el: any) => {\n                if (this.props.selected === index)\n                  this._selectedButton = el;\n              },\n              selected: index === this.props.selected,\n              labelRotate: childElement.props.labelRotate || this.props.labelRotate,\n              annularSector: this.state.sectors[index],\n            });\n          })}\n        </svg>\n      </div>\n    );\n  }\n\n  public override componentDidMount() {\n    this._generateAnnularSectors();\n\n    setTimeout(() => {\n      window.addEventListener(\"keyup\", this._handleKeyUp);\n      window.addEventListener(\"mouseup\", this._handleClick);\n    });\n  }\n\n  public override componentWillUnmount() {\n    window.removeEventListener(\"keyup\", this._handleKeyUp);\n    window.removeEventListener(\"mouseup\", this._handleClick);\n  }\n\n  public override componentDidUpdate(prevProps: RadialMenuProps) {\n    if (prevProps.innerRadius !== this.props.innerRadius || prevProps.outerRadius !== this.props.outerRadius) {\n      this._generateAnnularSectors();\n    }\n  }\n\n  private _handleKeyUp = (event: KeyboardEvent) => {\n    if (event.key === SpecialKey.Escape && this.props.onEsc)\n      this.props.onEsc(event);\n  };\n\n  private _handleClick = (event: MouseEvent) => {\n    if (event.target instanceof HTMLElement && this._root && !event.target.contains(this._root) && this.props.onBlur)\n      this.props.onBlur(event);\n  };\n\n  /** Manually call onSelect of highlighted button. */\n  public select = () => {\n    // istanbul ignore else\n    if (this._selectedButton)\n      this._selectedButton.select();\n  };\n\n  private _generateAnnularSectors = () => {\n    const n = React.Children.count(this.props.children);\n    const angle = 2 * Math.PI / n;\n    const outer = this.props.outerRadius;\n    const inner = this.props.innerRadius;\n\n    const offset = - Math.PI / 8;\n    const annulus = new Annulus(new Point(outer + 1, outer + 1), inner + 1, outer - 1);\n    const sectors: AnnularSector[] = [];\n    for (let i = 0; i < n; i++) {\n      sectors.push(new AnnularSector(annulus, angle * i + offset, angle * (i + 1) + offset));\n    }\n    this.setState({ sectors });\n  };\n}\n\n/** Properties for [[RadialButton]] component\n * @public\n */\nexport interface RadialButtonProps extends CommonProps {\n  /** Whether label is rotated to radial menu. Default: Inherit */\n  labelRotate?: boolean;\n  /** which icon to display in on the menu button */\n  icon?: IconSpec;\n  /** @internal */\n  annularSector?: AnnularSector;\n  /** listens to any onClick event, or any select event, which can be triggered by the select() method. */\n  onSelect?: (e: any) => any;\n  /** Whether item is highlighted */\n  selected?: boolean;\n  /** Content */\n  children?: React.ReactNode;\n}\n\n/** @internal */\ninterface RadialButtonState {\n  hover: boolean;\n}\n\n/**\n * Button for use within a [[RadialMenu]]\n * @public\n */\nexport class RadialButton extends React.Component<RadialButtonProps, RadialButtonState> {\n\n  /** @internal */\n  public override readonly state: Readonly<RadialButtonState> = { hover: this.props.selected || false };\n\n  constructor(props: RadialButtonProps) {\n    super(props);\n  }\n\n  public override render(): JSX.Element {\n    const sector = this.props.annularSector;\n    let p = new Point();\n    let size = 0;\n    let t = \"\";\n    let path = \"\";\n\n    if (sector) {\n      size = sector.start.p1.getDistanceTo(sector.end.p2) * 2;\n      path = sector.path;\n\n      const parent = sector.parent;\n      const { x: cx, y: cy } = parent.center;\n      const r = (parent.inner.radius + parent.outer.radius) / 2;\n      const angle = (sector.startAngle + sector.endAngle) / 2;\n      p = new Point(cx + r * Math.cos(angle), cy + r * Math.sin(angle));\n\n      if (this.props.labelRotate) {\n        let a = angle * 180 / Math.PI + 90;\n        while (a > 180)\n          a -= 360;\n        while (a < -180)\n          /* istanbul ignore next */\n          a += 360;\n        if (a > 90)\n          a -= 180;\n        if (a < -90)\n          a += 180;\n        t = `rotate(${a} ${p.x}, ${p.y})`;\n      }\n    }\n\n    return (\n      <g\n        onMouseOver={this._handleMouseOver}\n        onMouseOut={this._handleMouseOut}\n        onClick={this._handleClick}>\n        <path\n          className={classnames(\"core-radial-menu-sector\", { selected: this.state.hover }, this.props.className)}\n          style={this.props.style}\n          d={path}>\n        </path>\n        <foreignObject transform={t} x={p.x - size / 2} y={p.y - 16} width={size} height={size} className={\"core-radial-menu-button-svg\"}>\n          <div {...{ xmlns: \"http://www.w3.org/1999/xhtml\" }} className={\"core-radial-menu-button-container\"}>\n            <div className=\"core-radial-menu-button-icon\">\n              <Icon iconSpec={this.props.icon} />\n            </div>\n            <div className={\"core-radial-menu-button-content\"}>\n              {this.props.children}\n            </div>\n          </div>\n        </foreignObject>\n      </g>\n    );\n  }\n\n  /** Manually call this.props.onSelect */\n  public select = () => {\n    // istanbul ignore else\n    if (this.props.onSelect)\n      this.props.onSelect(undefined);\n  };\n\n  private _handleClick = (event: React.MouseEvent<SVGElement>) => {\n    // istanbul ignore else\n    if (this.props.onSelect)\n      this.props.onSelect(event);\n  };\n\n  private _handleMouseOver = (_event: React.MouseEvent<SVGElement>) => {\n    this.setState({ hover: true });\n  };\n\n  private _handleMouseOut = (_event: React.MouseEvent<SVGElement>) => {\n    this.setState({ hover: false });\n  };\n}\n"]}

package/lib/esm/core-react/radialmenu/RadialMenu.scss

@@ -1,55 +1,55 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../z-index";
-@import "../style/themecolors";
-@import "../icons/variables";
-
-.core-radial-menu {
-  visibility: hidden;
-
-  &.opened {
-    visibility: inherit;
-  }
-
-  position: fixed;
-  @include uicore-z-index(dialog);
-
-  > .core-radial-menu-container {
-    margin-left: -50%;
-    margin-top: -50%;
-
-    .core-radial-menu-sector {
-      stroke: $buic-background-panel-stroke;
-      fill: $buic-background-control;
-      stroke-width: 1px;
-
-      &.selected {
-        fill: $buic-row-selection;
-      }
-    }
-
-    .core-radial-menu-button-svg {
-      .core-radial-menu-button-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        .core-radial-menu-button-icon {
-          height: $uicore-icons-small;
-          width: $uicore-icons-small;
-          line-height: $uicore-icons-small;
-          color: $buic-icon-color;
-        }
-
-        .core-radial-menu-button-content {
-          cursor: default;
-          color: var(--iui-color-text);
-          font-size: var(--iui-font-size-0);
-          user-select: none;
-        }
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../z-index";
+@import "../style/themecolors";
+@import "../icons/variables";
+
+.core-radial-menu {
+  visibility: hidden;
+
+  &.opened {
+    visibility: inherit;
+  }
+
+  position: fixed;
+  @include uicore-z-index(dialog);
+
+  > .core-radial-menu-container {
+    margin-left: -50%;
+    margin-top: -50%;
+
+    .core-radial-menu-sector {
+      stroke: $buic-background-panel-stroke;
+      fill: $buic-background-control;
+      stroke-width: 1px;
+
+      &.selected {
+        fill: $buic-row-selection;
+      }
+    }
+
+    .core-radial-menu-button-svg {
+      .core-radial-menu-button-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .core-radial-menu-button-icon {
+          height: $uicore-icons-small;
+          width: $uicore-icons-small;
+          line-height: $uicore-icons-small;
+          color: $buic-icon-color;
+        }
+
+        .core-radial-menu-button-content {
+          cursor: default;
+          color: var(--iui-color-text);
+          font-size: var(--iui-font-size-0);
+          user-select: none;
+        }
+      }
+    }
+  }
+}