fcr-ui-scene 3.5.0 → 3.5.1

package/lib/fragments/toolbar/components/wrapper.js

@@ -1,138 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DraggleWrapper = void 0;
-require("core-js/modules/es.array.concat.js");
-require("core-js/modules/web.timers.js");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _store = require("../store");
-var _reactRnd = require("react-rnd");
-var _mobxReact = require("mobx-react");
-var _transferPositionIcon = require("./transfer-position-icon");
-var _jsxRuntime = require("react/jsx-runtime");
-var DraggleWrapper = exports.DraggleWrapper = (0, _mobxReact.observer)(function (props) {
-  var _useContext = (0, _react.useContext)(_store.ToolbarContext),
-    getCoordinate = _useContext.getCoordinate,
-    toolbarDockPosition = _useContext.observables.toolbarDockPosition;
-  var NAV_HEIGHT = 70;
-  var HIDDEN_TIMEOUT = 3000;
-  // @ts-ignore
-  var TITLE_HEIGHT = window.screen.availTop;
-  var MAX_Y = window.screen.availHeight - NAV_HEIGHT;
-  var screenWidth = window.screen.width;
-  var _useState = (0, _react.useState)(_transferPositionIcon.TransferPosition.TOP),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    toolbarCurrentPosition = _useState2[0],
-    setToolbarCurrentPosition = _useState2[1];
-  var _useState3 = (0, _react.useState)(0),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    currentCoordinateX = _useState4[0],
-    setCurrentCoordinateX = _useState4[1];
-  var _useState5 = (0, _react.useState)(0),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    currentCoordinateY = _useState6[0],
-    setCurrentCoordinateY = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    hiddenShareActionNav = _useState8[0],
-    setHiddenShareActionNav = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    showTransferAnimation = _useState10[0],
-    setShowTransferAnimation = _useState10[1];
-  var rndRef = (0, _react.useRef)(null);
-  var hideTimeout = (0, _react.useRef)(0);
-  var handleMouseEnter = function handleMouseEnter() {
-    window.runtime.browserWindow.focus();
-    window.runtime.browserWindow.setIgnoreMouseEvents(false, {
-      forward: true
-    });
-    clearTimeout(hideTimeout.current);
-    setHiddenShareActionNav(false);
-  };
-  var handleMouseLeave = function handleMouseLeave(e) {
-    window.runtime.browserWindow.setIgnoreMouseEvents(true, {
-      forward: true
-    });
-    hideTimeout.current = window.setTimeout(function () {
-      var hasPopover = document.querySelector('.fcr-popover');
-      if (!hasPopover) {
-        setHiddenShareActionNav(true);
-      }
-    }, HIDDEN_TIMEOUT);
-  };
-  var handleDragStop = function handleDragStop(_, data) {
-    setShowTransferAnimation(false);
-    var x = data.lastX,
-      y = data.lastY;
-    setCurrentCoordinateX(x);
-    setCurrentCoordinateY(y);
-    // setCoordinate(x, y);
-    if (y === MAX_Y || y > MAX_Y) {
-      toolbarDockPosition.placement = 'bottom';
-    } else if (y === 0 || y < 0) {
-      toolbarDockPosition.placement = 'top';
-    }
-  };
-  var handleMouseMove = function handleMouseMove() {
-    window.runtime.browserWindow.moveTop();
-    window.runtime.browserWindow.focus();
-    window.runtime.browserWindow.setIgnoreMouseEvents(false, {
-      forward: true
-    });
-  };
-  (0, _react.useEffect)(function () {
-    if (rndRef.current) {
-      var _getCoordinate = getCoordinate(),
-        x = _getCoordinate.x,
-        y = _getCoordinate.y;
-      setCurrentCoordinateX(x);
-      setCurrentCoordinateY(y);
-    }
-  }, []);
-  (0, _react.useEffect)(function () {
-    handleMouseLeave();
-    // document.body.classList.add(TOAST_ROOT_CLASS_NAME);
-    return function () {
-      window.runtime.browserWindow.setIgnoreMouseEvents(false);
-      clearTimeout(hideTimeout.current);
-    };
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    style: {
-      transition: showTransferAnimation ? '0.2s' : '0s'
-    },
-    bounds: "window",
-    allowAnyClick: false,
-    cancel: ".share-action-nav__not-draggable",
-    dragHandleClassName: "fcr-board-toolbar-main",
-    enableUserSelectHack: true,
-    enableResizing: false,
-    "default": {
-      x: currentCoordinateX,
-      y: currentCoordinateY,
-      width: 'auto',
-      height: NAV_HEIGHT
-    },
-    onDragStop: handleDragStop,
-    position: {
-      x: currentCoordinateX,
-      y: currentCoordinateY
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: rndRef,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onMouseOver: handleMouseEnter,
-      onMouseMove: handleMouseMove,
-      onClick: handleMouseMove,
-      className: "fcr-flex \n        share-action-nav__container\n         ".concat(toolbarCurrentPosition === _transferPositionIcon.TransferPosition.BOTTOM ? 'share-action-nav__move_to_bottom' : 'share-action-nav__move_to_top', "\n         ").concat(hiddenShareActionNav ? 'share-action-nav__hidden' : '', "\n      ").concat(hiddenShareActionNav && currentCoordinateY === MAX_Y ? 'completely-hidden-in-bottom' : '', "\n      ").concat(hiddenShareActionNav && (currentCoordinateY < TITLE_HEIGHT || currentCoordinateY === TITLE_HEIGHT) ? 'completely-hidden-in-top' : '', "\n      "),
-      children: props.children
-    })
-  });
-});

package/lib/fragments/toolbar/hooks.d.ts

@@ -1,16 +0,0 @@
-export declare const useVisibleTools: (diraction?: "horizontal") => {
-    mainTools: {
-        renderItem: () => {
-            title: string;
-            component: import("react/jsx-runtime").JSX.Element;
-        };
-    }[];
-    additionTools: {
-        renderItem: () => {
-            title: string;
-            component: import("react/jsx-runtime").JSX.Element;
-        };
-    }[];
-    showColorCount: number;
-    isShinked: boolean;
-};

package/lib/fragments/toolbar/hooks.js

@@ -1,256 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useVisibleTools = void 0;
-require("core-js/modules/es.array.concat.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.array.push.js");
-require("core-js/modules/es.array.reverse.js");
-require("core-js/modules/es.array.unshift.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.async-iterator.map.js");
-require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.filter.js");
-require("core-js/modules/esnext.iterator.map.js");
-var _react = require("react");
-var _toolbarItem = require("./components/toolbar-item");
-var _index = require("./components/color-picker/index");
-var _eraserPicker = require("./components/eraser-picker");
-var _history = require("./components/history");
-var _penPicker = require("./components/pen-picker");
-var _shapePicker = require("./components/shape-picker");
-var _range = _interopRequireDefault(require("lodash/range"));
-var _min = _interopRequireDefault(require("lodash/min"));
-var _max = _interopRequireDefault(require("lodash/max"));
-var _extraToolPicker = require("./components/extra-tool-picker");
-var _store = require("./store");
-var _i18n = require("agora-ui-foundation/lib/i18n");
-var _type = require("agora-ui-foundation/lib/components/icon/type");
-var _screenCapturePicker = require("./components/screen-capture-picker");
-var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
-var _jsxRuntime = require("react/jsx-runtime");
-var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diraction) {
-  var _useContext = (0, _react.useContext)(_store.ToolbarContext),
-    _useContext$observabl = _useContext.observables,
-    currentTool = _useContext$observabl.currentTool,
-    maxCountVisibleTools = _useContext$observabl.maxCountVisibleTools,
-    toolbarDockPosition = _useContext$observabl.toolbarDockPosition,
-    setTool = _useContext.setTool,
-    saveDraft = _useContext.saveDraft,
-    captureScreen = _useContext.captureScreen;
-  var transI18n = (0, _i18n.useI18n)();
-  var handleToolChange = function handleToolChange(tool) {
-    return function () {
-      setTool(tool);
-    };
-  };
-  var placement = toolbarDockPosition.placement === 'top' ? 'top' : 'bottom';
-  var offset = toolbarDockPosition.placement === 'top' ? 10 : 30;
-  var baseMainTools = [{
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_laserpen'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbarItem.ToolbarItem, {
-          tooltipPlacement: placement,
-          tooltip: transI18n('fmt_screenshare_whiteboard_button_laserpen'),
-          icon: _type.FcrIconType.FCR_WHITEBOARD_LASERPEN2,
-          onClick: handleToolChange(_enums.FcrBoardToolType.LASER_POINTER),
-          isActive: currentTool === _enums.FcrBoardToolType.LASER_POINTER,
-          diraction: diraction
-        })
-      };
-    }
-  },
-  // {
-  //   renderItem: () => (
-  //     <ToolbarItem
-  //       tooltipPlacement={placement}
-  //       tooltip={'fcr_board_tool_clicker'}
-  //       icon={FcrIconType.FCR_WHITEBOARD_MOUSE}
-  //       onClick={handleToolChange(FcrBoardTool.Clicker)}
-  //       isActive={currentTool === FcrBoardTool.Clicker}
-  //     />
-  //   ),
-  // },
-  {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_boxselection'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbarItem.ToolbarItem, {
-          tooltipPlacement: placement,
-          tooltip: transI18n('fmt_screenshare_whiteboard_button_boxselection'),
-          icon: _type.FcrIconType.FCR_WHITECHOOSE,
-          onClick: handleToolChange(_enums.FcrBoardToolType.SELECTOR),
-          isActive: currentTool === _enums.FcrBoardToolType.SELECTOR,
-          diraction: diraction
-        })
-      };
-    }
-  }, {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_paintbrush'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_penPicker.PenPickerItem, {
-          offset: offset
-        })
-      };
-    }
-  }, {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_shape'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_shapePicker.ShapePickerItem, {
-          offset: offset
-        })
-      };
-    }
-  }, {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_text'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbarItem.ToolbarItem, {
-          tooltipPlacement: placement,
-          tooltip: transI18n('fmt_screenshare_whiteboard_button_text'),
-          icon: _type.FcrIconType.FCR_WHITEBOARD_TEXT,
-          onClick: handleToolChange(_enums.FcrBoardToolType.TEXT),
-          isActive: currentTool === _enums.FcrBoardToolType.TEXT,
-          diraction: diraction
-        })
-      };
-    }
-  }, {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_eraser'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_eraserPicker.EraserPickerItem, {
-          offset: offset
-        })
-      };
-    }
-  }, {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_dragdrop'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbarItem.ToolbarItem, {
-          tooltipPlacement: placement,
-          tooltip: transI18n('fmt_screenshare_whiteboard_button_dragdrop'),
-          icon: _type.FcrIconType.FCR_WHITEBOARD_MOVESUBJECTS2,
-          onClick: handleToolChange(_enums.FcrBoardToolType.HAND),
-          isActive: currentTool === _enums.FcrBoardToolType.HAND,
-          diraction: diraction
-        })
-      };
-    }
-  },
-  // {
-  //   renderItem: () => (
-  //     <ToolbarItem tooltip="Cloud" icon={FcrIconType.FCR_WHITEBOARD_CLOUD} isActive={false} />
-  //   ),
-  // },
-  // {
-  //   renderItem: ({ offset }: { offset?: number } = {}) => (
-  //     <ScreenCapturePickerItem offset={offset} />
-  //   ),
-  // },
-  {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_screenshot'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenCapturePicker.ScreenCapturePickerItem, {
-          offset: offset
-        })
-      };
-    }
-  }, {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_savescript'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbarItem.ToolbarItem, {
-          tooltipPlacement: placement,
-          tooltip: transI18n('fmt_screenshare_whiteboard_button_savescript'),
-          icon: _type.FcrIconType.FCR_DOWNLOAD,
-          onClick: saveDraft,
-          isActive: false,
-          diraction: diraction
-        })
-      };
-    }
-  }];
-  var divider = {
-    renderItem: function renderItem() {
-      return {
-        title: '',
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "fcr-divider-horizontal fcr-divider-marign-bottom"
-        })
-      };
-    }
-  };
-  var fixedTools = [divider, {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_withdrwa'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_history.UndoItem, {})
-      };
-    }
-  }, {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_screenshare_whiteboard_button_forward'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_history.RedoItem, {})
-      };
-    }
-  }];
-  var additionTool = {
-    renderItem: function renderItem() {
-      return {
-        title: '',
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_extraToolPicker.AdditionToolPickerItem, {})
-      };
-    }
-  };
-  var colorTool = {
-    renderItem: function renderItem() {
-      return {
-        title: transI18n('fmt_whiteboard_labels_colour'),
-        component: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ColorPickerItem, {})
-      };
-    }
-  };
-
-  // whether toolbar needs to shrink in vertical direction
-  var isShinked = false;
-  var showColorCount = isShinked ? 0 : 3; /* addition tool */
-
-  if (showColorCount) {
-    baseMainTools.push(divider);
-    baseMainTools.push(colorTool);
-  }
-  var maxCountAvailableToDisplay = maxCountVisibleTools;
-  var mainTools = isShinked && diraction !== 'horizontal' ? (0, _range["default"])(0, (0, _max["default"])([0, (0, _min["default"])([maxCountAvailableToDisplay, baseMainTools.length])])).map(function (index) {
-    return baseMainTools[index];
-  }).concat([additionTool]).concat(fixedTools) : baseMainTools.concat(fixedTools);
-  var additionToolsCount = baseMainTools.length - maxCountAvailableToDisplay;
-  var additionTools = [].concat(baseMainTools).reverse().filter(function (tool, index) {
-    if (index < additionToolsCount) {
-      return true;
-    }
-    return false;
-  });
-  if (isShinked) {
-    additionTools.unshift(colorTool);
-  }
-  additionTools = additionTools.reverse();
-  return {
-    mainTools: mainTools,
-    additionTools: additionTools,
-    showColorCount: showColorCount,
-    isShinked: isShinked
-  };
-};

package/lib/fragments/toolbar/index.d.ts

@@ -1,12 +0,0 @@
-import { BaseFragment } from '../base';
-import './style.css';
-export declare class Toolbar extends BaseFragment {
-    private _store;
-    get name(): "toolbar";
-    get component(): import("react/jsx-runtime").JSX.Element;
-    constructor(runtime: Runtime);
-    onEvent(event: RendererCustomEvent): void;
-}
-export declare const windowOptions: Electron.BrowserWindowConstructorOptions;
-export declare const webPreferences: Electron.WebPreferences;
-export declare const title = "Toolbar";

package/lib/fragments/toolbar/index.js

@@ -1,80 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.reflect.construct.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.windowOptions = exports.webPreferences = exports.title = exports.Toolbar = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _base = require("../base");
-var _store = require("./store");
-var _view = require("./view");
-require("./style.css");
-var _wrapper = require("./components/wrapper");
-var _constant = require("../../utilities/constant");
-var _jsxRuntime = require("react/jsx-runtime");
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var Toolbar = exports.Toolbar = /*#__PURE__*/function (_BaseFragment) {
-  function Toolbar(runtime) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, Toolbar);
-    _this = _callSuper(this, Toolbar, [runtime]);
-    _this._store = new _store.ToolbarStore();
-    return _this;
-  }
-  (0, _inherits2["default"])(Toolbar, _BaseFragment);
-  return (0, _createClass2["default"])(Toolbar, [{
-    key: "name",
-    get: function get() {
-      return 'toolbar';
-    }
-  }, {
-    key: "component",
-    get: function get() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.ToolbarContext.Provider, {
-        value: this._store,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_wrapper.DraggleWrapper, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.ToolbarHorizontal, {})
-        })
-      });
-    }
-  }, {
-    key: "onEvent",
-    value: function onEvent(event) {
-      var _ref = event,
-        action = _ref.action,
-        payload = _ref.payload;
-      console.log('Whiteboard onEvent', action, payload);
-      switch (action) {
-        case _constant.RendererEventAction.UPDATE_TOOLBAR:
-          this._store.observables = payload;
-          break;
-      }
-    }
-  }]);
-}(_base.BaseFragment);
-var windowOptions = exports.windowOptions = {
-  width: 300,
-  height: 100,
-  y: 0,
-  x: 0,
-  frame: false,
-  transparent: true,
-  maximizable: false,
-  fullscreenable: false,
-  backgroundColor: '#00000000',
-  fullscreen: false,
-  hasShadow: false,
-  useContentSize: true
-};
-var webPreferences = exports.webPreferences = {
-  nodeIntegration: true
-};
-var title = exports.title = 'Toolbar';

package/lib/fragments/toolbar/store.d.ts

@@ -1,62 +0,0 @@
-import { FcrBoardShape, WhiteboardThemeType } from '../../modules/whiteboard/type';
-import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
-export declare class ToolbarStore {
-    accessor observables: {
-        currentTool: FcrBoardToolType | undefined;
-        currentShape: FcrBoardShape | undefined;
-        currentColor: string;
-        currentStrokeWidth: number;
-        toolbarPosition: {
-            x: number;
-            y: number;
-        };
-        toolbarReleased: boolean;
-        toolbarDockPosition: {
-            x: number | undefined;
-            y: number | undefined;
-            placement: "top" | "bottom";
-        };
-        redoSteps: number;
-        undoSteps: number;
-        lastPen: FcrBoardShape | undefined;
-        lastShape: FcrBoardShape | undefined;
-        maxCountVisibleTools: number;
-        layoutReady: boolean;
-        colors: string[];
-        commonColorIndex: number;
-        background: string;
-        commonColors: string[];
-    };
-    constructor();
-    initToolbar(): void;
-    getCurrentWorkArea(): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-    getCoordinate(): {
-        x: number;
-        y: number;
-    };
-    redo(): void;
-    undo(): void;
-    clean(): void;
-    setTool(tool: FcrBoardToolType): void;
-    setPen(shape: FcrBoardShape): void;
-    setShape(shape: FcrBoardShape): void;
-    setStrokeColor(color: string): void;
-    setStrokeWidth(strokeWidth: number): void;
-    clickExpansionTool(): void;
-    setToolbarPosition(pos: {
-        x: number;
-        y: number;
-    }): void;
-    dragToolbar(): void;
-    releaseToolbar(): void;
-    captureScreen(hideWindow?: boolean): void;
-    saveDraft(): void;
-    setTheme(theme: WhiteboardThemeType): void;
-    setCommonColor(color: string): void;
-}
-export declare const ToolbarContext: import("react").Context<ToolbarStore>;