refactor: 为线条以外的元素都补充旋转角度属性

src/hooks/useCreateElement.ts

@@ -90,6 +90,7 @@ export default () => {
       top: 81.25,
       width: 400,
       height: 400,
+      rotate: 0,
       themeColor: [themeColor.value],
       gridColor: fontColor.value,
       data: {
@@ -135,6 +136,7 @@ export default () => {
       width,
       height,
       colWidths,
+      rotate: 0,
       data,
       left: (VIEWPORT_SIZE - width) / 2,
       top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2,
@@ -233,6 +235,7 @@ export default () => {
       id: createRandomCode(),
       width: data.w,
       height: data.h,
+      rotate: 0,
       left: (VIEWPORT_SIZE - data.w) / 2,
       top: (VIEWPORT_SIZE * viewportRatio.value - data.h) / 2,
       path: data.path,
@@ -254,6 +257,7 @@ export default () => {
       id: createRandomCode(),
       width: 500,
       height: 300,
+      rotate: 0,
       left: (VIEWPORT_SIZE - 500) / 2,
       top: (VIEWPORT_SIZE * viewportRatio.value - 300) / 2,
       src,

src/types/slides.ts

@@ -62,6 +62,8 @@ export interface PPTElementOutline {
  * 
  * height: 元素高度
  * 
+ * rotate: 旋转角度
+ * 
  * link?: 超链接地址
  */
 interface PPTBaseElement {
@@ -72,6 +74,7 @@ interface PPTBaseElement {
   groupId?: string;
   width: number;
   height: number;
+  rotate: number;
   link?: string;
 }
 
@@ -83,8 +86,6 @@ interface PPTBaseElement {
  * 
  * content: 文本内容（HTML字符串）
  * 
- * rotate: 旋转角度
- * 
  * defaultFontName: 默认字体（会被文本内容中的HTML内联样式覆盖）
  * 
  * defaultColor: 默认颜色（会被文本内容中的HTML内联样式覆盖）
@@ -104,7 +105,6 @@ interface PPTBaseElement {
 export interface PPTTextElement extends PPTBaseElement {
   type: 'text';
   content: string;
-  rotate: number;
   defaultFontName: string;
   defaultColor: string;
   outline?: PPTElementOutline;
@@ -178,8 +178,6 @@ export interface ImageElementClip {
  * 
  * src: 图片地址
  * 
- * rotate: 旋转角度
- * 
  * outline?: 边框
  * 
  * filters?: 图片滤镜
@@ -196,7 +194,6 @@ export interface PPTImageElement extends PPTBaseElement {
   type: 'image';
   fixedRatio: boolean;
   src: string;
-  rotate: number;
   outline?: PPTElementOutline;
   filters?: ImageElementFilters;
   clip?: ImageElementClip;
@@ -254,8 +251,6 @@ export interface ShapeText {
  * 
  * gradient?: 渐变，该属性存在时将优先作为填充
  * 
- * rotate: 旋转角度
- * 
  * outline?: 边框
  * 
  * opacity?: 不透明度
@@ -277,7 +272,6 @@ export interface PPTShapeElement extends PPTBaseElement {
   fixedRatio: boolean;
   fill: string;
   gradient?: ShapeGradient;
-  rotate: number;
   outline?: PPTElementOutline;
   opacity?: number;
   flipH?: boolean;
@@ -311,7 +305,7 @@ export type LinePoint = '' | 'arrow' | 'dot'
  * 
  * curve?: 曲线中点位置（[x, y]）
  */
-export interface PPTLineElement extends Omit<PPTBaseElement, 'height'> {
+export interface PPTLineElement extends Omit<PPTBaseElement, 'height' | 'rotate'> {
   type: 'line';
   start: [number, number];
   end: [number, number];

src/views/Editor/Canvas/Operate/CommonElementOperate.vue

@@ -7,15 +7,21 @@
       :type="line.type" 
       :style="line.style"
     />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in resizeHandlers"
         :key="point.direction"
         :type="point.direction"
+        :rotate="elementInfo.rotate"
         :style="point.style"
         @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
       />
+      <RotateHandler
+        class="operate-rotate-handler" 
+        :style="{ left: scaleWidth / 2 + 'px' }"
+        @mousedown.stop="rotateElement(elementInfo)"
+      />
     </template>
   </div>
 </template>
@@ -28,31 +34,35 @@ import { PPTShapeElement, PPTVideoElement, PPTLatexElement } from '@/types/slide
 import { OperateResizeHandler } from '@/types/edit'
 import useCommonOperate from '../hooks/useCommonOperate'
 
+import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
+type PPTElement = PPTShapeElement | PPTVideoElement | PPTLatexElement
+
 export default defineComponent({
   name: 'common-element-operate',
   inheritAttrs: false,
   components: {
+    RotateHandler,
     ResizeHandler,
     BorderLine,
   },
   props: {
     elementInfo: {
-      type: Object as PropType<PPTShapeElement | PPTVideoElement | PPTLatexElement>,
+      type: Object as PropType<PPTElement>,
       required: true,
     },
-    isActiveGroupElement: {
+    handlerVisible: {
       type: Boolean,
       required: true,
     },
-    isMultiSelect: {
+    rotateElement: {
-      type: Boolean,
+      type: Function as PropType<(element: PPTElement) => void>,
       required: true,
     },
     scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandler) => void>,
+      type: Function as PropType<(e: MouseEvent, element: PPTElement, command: OperateResizeHandler) => void>,
       required: true,
     },
   },

src/views/Editor/Canvas/Operate/ImageElementOperate.vue

@@ -7,7 +7,7 @@
       :type="line.type" 
       :style="line.style"
     />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in resizeHandlers"
@@ -50,11 +50,7 @@ export default defineComponent({
       type: Object as PropType<PPTImageElement>,
       required: true,
     },
-    isActiveGroupElement: {
+    handlerVisible: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
       type: Boolean,
       required: true,
     },

src/views/Editor/Canvas/Operate/LineElementOperate.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text-element-operate">
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in resizeHandlers"
@@ -33,11 +33,7 @@ export default defineComponent({
       type: Object as PropType<PPTLineElement>,
       required: true,
     },
-    isActiveGroupElement: {
+    handlerVisible: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
       type: Boolean,
       required: true,
     },

src/views/Editor/Canvas/Operate/ShapeElementOperate.vue

@@ -7,7 +7,7 @@
       :type="line.type" 
       :style="line.style"
     />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in resizeHandlers"
@@ -51,11 +51,7 @@ export default defineComponent({
       type: Object as PropType<PPTShapeElement>,
       required: true,
     },
-    isActiveGroupElement: {
+    handlerVisible: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
       type: Boolean,
       required: true,
     },

src/views/Editor/Canvas/Operate/TableElementOperate.vue

@@ -7,15 +7,21 @@
       :type="line.type" 
       :style="line.style"
     />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in textElementResizeHandlers"
         :key="point.direction"
         :type="point.direction"
+        :rotate="elementInfo.rotate"
         :style="point.style"
         @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
       />
+      <RotateHandler
+        class="operate-rotate-handler" 
+        :style="{ left: scaleWidth / 2 + 'px' }"
+        @mousedown.stop="rotateElement(elementInfo)"
+      />
     </template>
   </div>
 </template>
@@ -28,6 +34,7 @@ import { PPTTableElement } from '@/types/slides'
 import { OperateResizeHandler } from '@/types/edit'
 import useCommonOperate from '../hooks/useCommonOperate'
 
+import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
@@ -35,6 +42,7 @@ export default defineComponent({
   name: 'table-element-operate',
   inheritAttrs: false,
   components: {
+    RotateHandler,
     ResizeHandler,
     BorderLine,
   },
@@ -43,12 +51,12 @@ export default defineComponent({
       type: Object as PropType<PPTTableElement>,
       required: true,
     },
-    isActiveGroupElement: {
+    handlerVisible: {
       type: Boolean,
       required: true,
     },
-    isMultiSelect: {
+    rotateElement: {
-      type: Boolean,
+      type: Function as PropType<(element: PPTTableElement) => void>,
       required: true,
     },
     scaleElement: {

src/views/Editor/Canvas/Operate/TextElementOperate.vue

@@ -7,7 +7,7 @@
       :type="line.type" 
       :style="line.style"
     />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in textElementResizeHandlers"
@@ -51,11 +51,7 @@ export default defineComponent({
       type: Object as PropType<PPTTextElement>,
       required: true,
     },
-    isActiveGroupElement: {
+    handlerVisible: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
       type: Boolean,
       required: true,
     },

src/views/Editor/Canvas/Operate/index.vue

@@ -13,8 +13,7 @@
       v-if="isSelected"
       :is="currentOperateComponent"
       :elementInfo="elementInfo"
-      :isActiveGroupElement="isActiveGroupElement"
+      :handlerVisible="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)"
-      :isMultiSelect="isMultiSelect"
       :rotateElement="rotateElement"
       :scaleElement="scaleElement"
       :dragLineElement="dragLineElement"

src/views/Editor/Canvas/hooks/useDragLineElement.ts

@@ -29,7 +29,7 @@ export default (elementList: Ref<PPTElement[]>) => {
     // 获取所有线条以外的未旋转的元素的8个缩放点作为吸附位置
     for (let i = 0; i < elementList.value.length; i++) {
       const _element = elementList.value[i]
-      if (_element.type === 'line' || ('rotate' in _element && _element.rotate)) continue
+      if (_element.type === 'line' || _element.rotate) continue
 
       const left = _element.left
       const top = _element.top

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -99,7 +99,7 @@
       </div>
     </template>
 
-    <template v-if="['text', 'image', 'shape'].includes(handleElement.type)">
+    <template v-if="handleElement.type !== 'line'">
       <Divider />
 
       <div class="row">

src/views/components/element/ChartElement/BaseChartElement.vue

@@ -8,28 +8,33 @@
     }"
   >
     <div
-      class="element-content"
+      class="rotate-wrapper"
-      :style="{
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
-        backgroundColor: elementInfo.fill,
-      }"
     >
-      <ElementOutline
+      <div 
-        :width="elementInfo.width"
+        class="element-content"
-        :height="elementInfo.height"
+        :style="{
-        :outline="elementInfo.outline"
+          backgroundColor: elementInfo.fill,
-      />
+        }"
-      <Chart
+      >
-        :class="{ 'need-scale': needScaleSize }"
+        <ElementOutline
-        :width="chartWidth"
+          :width="elementInfo.width"
-        :height="chartHeight"
+          :height="elementInfo.height"
-        :type="elementInfo.chartType"
+          :outline="elementInfo.outline"
-        :data="elementInfo.data"
+        />
-        :options="elementInfo.options"
+        <Chart
-        :themeColor="elementInfo.themeColor"
+          :class="{ 'need-scale': needScaleSize }"
-        :gridColor="elementInfo.gridColor"
+          :width="chartWidth"
-        :legends="elementInfo.data.legends"
+          :height="chartHeight"
-        :legend="elementInfo.legend || ''"
+          :type="elementInfo.chartType"
-      />
+          :data="elementInfo.data"
+          :options="elementInfo.options"
+          :themeColor="elementInfo.themeColor"
+          :gridColor="elementInfo.gridColor"
+          :legends="elementInfo.data.legends"
+          :legend="elementInfo.legend || ''"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -70,6 +75,10 @@ export default defineComponent({
 .base-element-chart {
   position: absolute;
 }
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

src/views/components/element/ChartElement/index.vue

@@ -9,30 +9,35 @@
     }"
   >
     <div
-      class="element-content" 
+      class="rotate-wrapper"
-      :style="{
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
-        backgroundColor: elementInfo.fill,
-      }"
-      v-contextmenu="contextmenus"
-      @mousedown="$event => handleSelectElement($event)"
-      @dblclick="openDataEditor()"
     >
-      <ElementOutline
+      <div 
-        :width="elementInfo.width"
+        class="element-content" 
-        :height="elementInfo.height"
+        :style="{
-        :outline="elementInfo.outline"
+          backgroundColor: elementInfo.fill,
-      />
+        }"
-      <Chart
+        v-contextmenu="contextmenus"
-        :width="elementInfo.width"
+        @mousedown="$event => handleSelectElement($event)"
-        :height="elementInfo.height"
+        @dblclick="openDataEditor()"
-        :type="elementInfo.chartType"
+      >
-        :data="elementInfo.data"
+        <ElementOutline
-        :options="elementInfo.options"
+          :width="elementInfo.width"
-        :themeColor="elementInfo.themeColor"
+          :height="elementInfo.height"
-        :gridColor="elementInfo.gridColor"
+          :outline="elementInfo.outline"
-        :legends="elementInfo.data.legends"
+        />
-        :legend="elementInfo.legend || ''"
+        <Chart
-      />
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :type="elementInfo.chartType"
+          :data="elementInfo.data"
+          :options="elementInfo.options"
+          :themeColor="elementInfo.themeColor"
+          :gridColor="elementInfo.gridColor"
+          :legends="elementInfo.data.legends"
+          :legend="elementInfo.legend || ''"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -93,7 +98,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

src/views/components/element/TableElement/BaseTableElement.vue

@@ -7,14 +7,19 @@
       width: elementInfo.width + 'px',
     }"
   >
-    <div class="element-content">
+    <div
-      <StaticTable
+      class="rotate-wrapper"
-        :data="elementInfo.data"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
-        :width="elementInfo.width"
+    >
-        :colWidths="elementInfo.colWidths"
+      <div class="element-content">
-        :outline="elementInfo.outline"
+        <StaticTable
-        :theme="elementInfo.theme"
+          :data="elementInfo.data"
-      />
+          :width="elementInfo.width"
+          :colWidths="elementInfo.colWidths"
+          :outline="elementInfo.outline"
+          :theme="elementInfo.theme"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -43,7 +48,10 @@ export default defineComponent({
 .base-element-table {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

src/views/components/element/TableElement/index.vue

@@ -10,29 +10,34 @@
     }"
   >
     <div
-      class="element-content" 
+      class="rotate-wrapper"
-      v-contextmenu="contextmenus"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <EditableTable 
-        @mousedown.stop
-        :data="elementInfo.data"
-        :width="elementInfo.width"
-        :colWidths="elementInfo.colWidths"
-        :outline="elementInfo.outline"
-        :theme="elementInfo.theme"
-        :editable="editable"
-        @change="data => updateTableCells(data)"
-        @changeColWidths="widths => updateColWidths(widths)"
-        @changeSelectedCells="cells => updateSelectedCells(cells)"
-      />
       <div 
-        class="table-mask" 
+        class="element-content" 
-        :class="{ 'lock': elementInfo.lock }"
+        v-contextmenu="contextmenus"
-        v-if="!editable || elementInfo.lock"
-        @dblclick="startEdit()"
-        @mousedown="$event => handleSelectElement($event)"
       >
-        <div class="mask-tip" :style="{ transform: `scale(${ 1 / canvasScale })` }">双击编辑</div>
+        <EditableTable 
+          @mousedown.stop
+          :data="elementInfo.data"
+          :width="elementInfo.width"
+          :colWidths="elementInfo.colWidths"
+          :outline="elementInfo.outline"
+          :theme="elementInfo.theme"
+          :editable="editable"
+          @change="data => updateTableCells(data)"
+          @changeColWidths="widths => updateColWidths(widths)"
+          @changeSelectedCells="cells => updateSelectedCells(cells)"
+        />
+        <div 
+          class="table-mask" 
+          :class="{ 'lock': elementInfo.lock }"
+          v-if="!editable || elementInfo.lock"
+          @dblclick="startEdit()"
+          @mousedown="$event => handleSelectElement($event)"
+        >
+          <div class="mask-tip" :style="{ transform: `scale(${ 1 / canvasScale })` }">双击编辑</div>
+        </div>
       </div>
     </div>
   </div>
@@ -190,7 +195,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

src/views/components/element/VideoElement/BaseVideoElement.vue

@@ -7,21 +7,26 @@
       height: elementInfo.height + 'px',
     }"
   >
-    <div class="element-content" :style="{ backgroundImage: `url(${elementInfo.poster})` }">
+    <div
-      <IconPlayOne class="icon" />
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
+    >
+      <div class="element-content" :style="{ backgroundImage: `url(${elementInfo.poster})` }">
+        <IconPlayOne class="icon" />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import { PPTTableElement } from '@/types/slides'
+import { PPTVideoElement } from '@/types/slides'
 
 export default defineComponent({
   name: 'base-element-video',
   props: {
     elementInfo: {
-      type: Object as PropType<PPTTableElement>,
+      type: Object as PropType<PPTVideoElement>,
       required: true,
     },
   },
@@ -32,7 +37,10 @@ export default defineComponent({
 .base-element-video {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

src/views/components/element/VideoElement/ScreenVideoElement.vue

@@ -7,21 +7,26 @@
       height: elementInfo.height + 'px',
     }"
   >
-    <div class="element-content">
+    <div
-      <VideoPlayer
+      class="rotate-wrapper"
-        :width="elementInfo.width"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
-        :height="elementInfo.height"
+    >
-        :src="elementInfo.src" 
+      <div class="element-content">
-        :poster="elementInfo.poster"  
+        <VideoPlayer
-        :scale="scale" 
+          :width="elementInfo.width"
-      />
+          :height="elementInfo.height"
+          :src="elementInfo.src" 
+          :poster="elementInfo.poster"  
+          :scale="scale" 
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, inject, PropType, Ref, ref } from 'vue'
-import { PPTTableElement } from '@/types/slides'
+import { PPTVideoElement } from '@/types/slides'
 
 import VideoPlayer from './VideoPlayer/index.vue'
 
@@ -32,7 +37,7 @@ export default defineComponent({
   },
   props: {
     elementInfo: {
-      type: Object as PropType<PPTTableElement>,
+      type: Object as PropType<PPTVideoElement>,
       required: true,
     },
   },
@@ -50,7 +55,10 @@ export default defineComponent({
 .screen-element-video {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

src/views/components/element/VideoElement/index.vue

@@ -9,23 +9,28 @@
     }"
   >
     <div
-      class="element-content" 
+      class="rotate-wrapper"
-      v-contextmenu="contextmenus" 
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
-      @mousedown="$event => handleSelectElement($event, false)"
     >
-      <VideoPlayer
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :src="elementInfo.src" 
-        :poster="elementInfo.poster"  
-        :scale="scale" 
-      />
       <div 
-        :class="['handler-border', item]" 
+        class="element-content" 
-        v-for="item in ['t', 'b', 'l', 'r']" 
+        v-contextmenu="contextmenus" 
-        :key="item"
+        @mousedown="$event => handleSelectElement($event, false)"
-        @mousedown="$event => handleSelectElement($event)"
+      >
-      ></div>
+        <VideoPlayer
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :src="elementInfo.src" 
+          :poster="elementInfo.poster"  
+          :scale="scale" 
+        />
+        <div 
+          :class="['handler-border', item]" 
+          v-for="item in ['t', 'b', 'l', 'r']" 
+          :key="item"
+          @mousedown="$event => handleSelectElement($event)"
+        ></div>
+      </div>
     </div>
   </div>
 </template>
@@ -33,7 +38,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
 import { useStore } from '@/store'
-import { PPTTableElement } from '@/types/slides'
+import { PPTVideoElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 
 import VideoPlayer from './VideoPlayer/index.vue'
@@ -45,11 +50,11 @@ export default defineComponent({
   },
   props: {
     elementInfo: {
-      type: Object as PropType<PPTTableElement>,
+      type: Object as PropType<PPTVideoElement>,
       required: true,
     },
     selectElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTTableElement, canMove?: boolean) => void>,
+      type: Function as PropType<(e: MouseEvent, element: PPTVideoElement, canMove?: boolean) => void>,
       required: true,
     },
     contextmenus: {
@@ -83,7 +88,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;

tsconfig.json

@@ -14,7 +14,6 @@
     "baseUrl": ".",
     "types": [
       "webpack-env",
-      "jest",
       "resize-observer-browser"
     ],
     "paths": {