fcr-ui-scene 3.8.2 → 3.9.0-alpha

package/lib-es/{fragments/annotation/toolbar → modules/annotation/standalone-toolbar}/components/pen-tool/index.js

@@ -4,22 +4,21 @@ import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
 import { AnnotationToolItem } from '../item/item';
 import { AnnotationPenPanel } from './pen-panel';
 import { observer } from 'mobx-react';
-import { AnnotationToolbarContext } from '../../store';
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { FcrBoardToolType } from 'fcr-core';
 import { useI18n } from 'agora-ui-foundation/lib/i18n';
-import { HotAreaContext } from '../../../../../modules/dialog/components/host-area-container';
+import { StandaloneAnnotationToolbarContext } from '../../store';
+import { BoundaryDetector } from '../../../../control-bar/components/boundary-detector';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var AnnotationPenTool = observer(function () {
-  var _useContext = useContext(AnnotationToolbarContext),
+  var _useContext = useContext(StandaloneAnnotationToolbarContext),
     _useContext$observabl = _useContext.observables,
     currentColor = _useContext$observabl.currentColor,
     currentTool = _useContext$observabl.currentTool,
     setTool = _useContext.setTool,
     popoverVisible = _useContext.popoverVisible,
-    setPopoverVisible = _useContext.setPopoverVisible;
-  var _useContext2 = useContext(HotAreaContext),
-    placement = _useContext2.placement;
+    setPopoverVisible = _useContext.setPopoverVisible,
+    setPopoverArea = _useContext.setPopoverArea;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
@@ -35,11 +34,22 @@ export var AnnotationPenTool = observer(function () {
   };
   useEffect(function () {
     !popoverVisible && setVisible(false);
+    if (!popoverVisible) {
+      setPopoverArea({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      });
+    }
   }, [popoverVisible]);
   var t = useI18n();
   var penMap = _defineProperty({}, FcrBoardToolType.CURVE, FcrIconType.FCR_WHITEBOARD_PED5);
+  var handleBoundariesChanged = useCallback(function (boundaries) {
+    console.log('Annotation toolbar pen tool boundaries changed');
+    setPopoverArea(boundaries);
+  }, []);
   return /*#__PURE__*/_jsx(AnnotationToolItem, {
-    placement: placement,
     active: currentTool in penMap,
     iconType: currentTool in penMap ? penMap[currentTool] : FcrIconType.FCR_WHITEBOARD_PED5,
     title: t('fmt_screenshare_whiteboard_button_paintbrush'),
@@ -47,8 +57,11 @@ export var AnnotationPenTool = observer(function () {
     visible: visible && popoverVisible,
     onVisibleChange: handleVisibleChange,
     onClick: handleClick,
-    content: /*#__PURE__*/_jsx(AnnotationPenPanel, {
-      onClick: handleClick
+    content: /*#__PURE__*/_jsx(BoundaryDetector, {
+      onBoundariesChanged: handleBoundariesChanged,
+      children: /*#__PURE__*/_jsx(AnnotationPenPanel, {
+        onClick: handleClick
+      })
     })
   });
 });

package/lib-es/{fragments/annotation/toolbar → modules/annotation/standalone-toolbar}/components/pen-tool/pen-panel/index.js

@@ -5,10 +5,10 @@ import { AnnotationToolItem } from '../../item/item';
 import { AnnotationToolPanel } from '../../panel';
 import { observer } from 'mobx-react';
 import { useContext } from 'react';
-import { AnnotationToolbarContext } from '../../../store';
+import { StandaloneAnnotationToolbarContext } from '../../../store';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var AnnotationPenPanel = observer(function (props) {
-  var _useContext = useContext(AnnotationToolbarContext),
+  var _useContext = useContext(StandaloneAnnotationToolbarContext),
     currentStrokeWidth = _useContext.observables.currentStrokeWidth,
     setStrokeWidth = _useContext.setStrokeWidth;
   var _onClick = props.onClick;

package/lib-es/modules/annotation/standalone-toolbar/components/permission-tool/index.js

@@ -0,0 +1,44 @@
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import { useCallback, useContext } from 'react';
+import AnnotationMenu from '../../../../components/annotation-menu';
+import { BoundaryDetector } from '../../../../control-bar/components/boundary-detector';
+import { StandaloneAnnotationToolbarContext } from '../../store';
+import { AnnotationToolItem } from '../item/item';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var AnnotationPermissionTool = observer(function () {
+  var _useContext = useContext(StandaloneAnnotationToolbarContext),
+    hasAnnotationAllowWritePermission = _useContext.hasAnnotationAllowWritePermission,
+    allowAnnotationWriteState = _useContext.allowAnnotationWriteState,
+    setAllowAnnotationWrite = _useContext.setAllowAnnotationWrite,
+    setPopoverArea = _useContext.setPopoverArea,
+    popoverVisible = _useContext.popoverVisible;
+  var t = useI18n();
+  var handleBoundariesChanged = useCallback(function (boundaries) {
+    console.log('Annotation toolbar permission tool boundaries changed');
+    setPopoverArea(boundaries);
+  }, []);
+  return /*#__PURE__*/_jsx(AnnotationToolItem, {
+    content: /*#__PURE__*/_jsx(BoundaryDetector, {
+      onBoundariesChanged: handleBoundariesChanged,
+      children: /*#__PURE__*/_jsx(AnnotationMenu, {
+        hasAnnotationAllowWritePermission: hasAnnotationAllowWritePermission,
+        allowAnnotationWriteState: allowAnnotationWriteState,
+        setAllowAnnotationWrite: setAllowAnnotationWrite
+      })
+    }),
+    iconType: FcrIconType.FCR_SETTING2,
+    title: t('fmt_screenshare_controlbar_button_annotations'),
+    onVisibleChange: function onVisibleChange() {
+      if (!popoverVisible) {
+        setPopoverArea({
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        });
+      }
+    }
+  });
+});