@shijiu/jsview-vue 2.3.151-test.0 → 3.0.0

package/utils/JsViewVueWidget/JsvPieChart.vue

@@ -6,6 +6,8 @@
  *      props说明:
  *          centerPosition  {Object}   圆心坐标，属性:{x,y}
  *          radius          {Number}   半径
+ *          subRadius       {Number}   内半径，默认0
+ *          radiusScale     {Number}   缩放比例, 默认为0.5, 目的是兼容老版本传的radius为实际情况的2倍问题
  *          animationTime   {Number}   动画变化时间，单位 /秒
  *          data            {Array}    数组对象，包含百分比和颜色。例如:[{color:'#FFFFFF',percent:20}]
  * 说明：传入的数组要为响应式，且保证所有项的percent都是大于0并且相加等于100
@@ -15,7 +17,8 @@
   <div :key="'pie-' + finalData.length">
     <div v-for="(item, index) in finalData.slice().reverse()">
       <JsvSector
-        :radius="props.radius"
+        :radius="Math.floor(props.radius * props.radiusScale)"
+        :subRadius="Math.floor(props.subRadius * props.radiusScale)"
         :config="{
           startAngle: Number(item.startAngle),
           sweepAngle:
@@ -34,93 +37,113 @@
 </template>
 
 <script setup>
-import { reactive,watchEffect } from "vue";
+import { ref, watch } from "vue";
 import JsvSector from "./JsvSector.vue";
 const props = defineProps({
   centerPosition: { type: Object, required: true },
   data: { type: Array, required: true },
   radius: { type: Number, required: true },
-  animationTime: { type: Number, default: 1 },
+  subRadius: { type: Number, default: 0 },
+  radiusScale: { type: Number, default: 0.5 },
+  animationTime: { type: Number, default: 0 },
 });
-let myData = props.data;
-//比较百分比数组
-let previousPercent = [];
-//额外时间数组
-let extraTimeArray = [];
-myData.forEach((item, index) => {
-  previousPercent.push(item.percent);
-  extraTimeArray.push(0);
-});
-//验证数据
-const CheckData = (data) => {
-  let totalPercent = 0;
+// 保存上一次的 percent，用于计算 extraTime
+const previousPercent = ref([]);
+const finalData = ref([]);
+
+// 验证数据
+const checkData = (data) => {
+  let isValid = true;
+
   data.forEach((item) => {
-    if (!item.hasOwnProperty("percent")) {
+    if (!Object.prototype.hasOwnProperty.call(item, "percent")) {
       console.error("每一项必须包含percent属性");
+      isValid = false;
+      return;
     }
     if (item.percent < 0 || item.percent > 100) {
       console.error("每一项percent必须大于0或者小于等于100！");
+      isValid = false;
     }
-    totalPercent += item.percent;
   });
-  if (totalPercent < 99 || totalPercent > 101) {
-    console.error("percent属性值总和必须等于100！");
-  }
-  return true;
+
+  return isValid;
 };
-CheckData(props.data);
-//过滤数据
-let finalData = reactive([]);
-let TempAngleArray = [];
-const filterData = (data) => {
-  data.forEach((item, index) => {
-    if (item.percent > previousPercent[index]) {
-      extraTimeArray[index] = -0.1;
-    } else if (item.percent < previousPercent[index]) {
-      extraTimeArray[index] = 0.1;
-    } else {
-      extraTimeArray[index] = 0;
-    }
-    TempAngleArray.push(((item.percent / 100) * 360).toFixed(2));
-    if (index == 0) {
-      finalData.push({
-        startAngle: Number(0).toFixed(2),
-        sweepAngle: Number((item.percent / 100) * 360).toFixed(2),
-        color: item.color,
-        index: index,
-        extraTime: extraTimeArray[0],
-      });
+
+// 当总和不为100时，从最后一项开始补齐/回收，不足时依次向前分摊
+const normalizeDataPercent = (data) => {
+  const normalizedData = data.map((item) => ({
+    ...item,
+    percent: Number(item.percent),
+  }));
+
+  const totalPercent = normalizedData.reduce((sum, item) => sum + item.percent, 0);
+  let delta = Number((100 - totalPercent).toFixed(6));
+
+  if (delta === 0) return normalizedData;
+
+  for (let i = normalizedData.length - 1; i >= 0 && delta !== 0; i--) {
+    const currentPercent = normalizedData[i].percent;
+
+    if (delta > 0) {
+      const canAdd = 100 - currentPercent;
+      if (canAdd <= 0) continue;
+
+      const addValue = Math.min(canAdd, delta);
+      normalizedData[i].percent = Number((currentPercent + addValue).toFixed(6));
+      delta = Number((delta - addValue).toFixed(6));
     } else {
-      finalData.push({
-        startAngle: (
-          Number(finalData[index - 1].startAngle) +
-          Number(finalData[index - 1].sweepAngle)
-        ).toFixed(2),
-        sweepAngle: Number(TempAngleArray[index]).toFixed(2),
-        color: item.color,
-        index: index,
-        extraTime: extraTimeArray[index],
-      });
+      const canReduce = currentPercent;
+      if (canReduce <= 0) continue;
+
+      const reduceValue = Math.min(canReduce, Math.abs(delta));
+      normalizedData[i].percent = Number((currentPercent - reduceValue).toFixed(6));
+      delta = Number((delta + reduceValue).toFixed(6));
     }
-  });
-  //处理结束清理临时角度数组
-  TempAngleArray=[]
+  }
+
+  if (delta !== 0) {
+    console.warn(
+      `[JsvPieChart] percent总和无法精确修正到100，剩余偏差: ${delta.toFixed(6)}`
+    );
+  }
+
+  return normalizedData;
 };
-filterData(myData);
-
-watchEffect(()=>{
-  if(CheckData(props.data)){
-    finalData.splice(0, finalData.length);
-      filterData(props.data);
-      myData = props.data;
-      previousPercent = [];
-  extraTimeArray = [];
-  myData.forEach((item, index) => {
-    previousPercent.push(item.percent);
-    extraTimeArray.push(0);
+
+const buildFinalData = (data, prevPercentList) => {
+  let currentStartAngle = 0;
+
+  return data.map((item, index) => {
+    const sweepAngle = Number(((item.percent / 100) * 360).toFixed(2));
+    const prevPercent = prevPercentList[index] ?? item.percent;
+    const extraTime =
+      item.percent > prevPercent ? -0.1 : item.percent < prevPercent ? 0.1 : 0;
+
+    const sector = {
+      startAngle: currentStartAngle.toFixed(2),
+      sweepAngle: sweepAngle.toFixed(2),
+      color: item.color,
+      index,
+      extraTime,
+    };
+
+    currentStartAngle += sweepAngle;
+    return sector;
   });
-  }
-})
+};
+
+watch(
+  () => props.data,
+  (data) => {
+    if (!checkData(data)) return;
+
+    const normalizedData = normalizeDataPercent(data);
+    finalData.value = buildFinalData(normalizedData, previousPercent.value);
+    previousPercent.value = normalizedData.map((item) => item.percent);
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <style lang="scss" scoped></style>

package/utils/JsViewVueWidget/JsvPreload/JsvPreload.vue

@@ -2,15 +2,14 @@
  * @file
  *
  * 【模块 export 内容】
- * JsvPreload：Vue高阶组件，图片预加载的控件
- *      preloadList {ObjectArray}: 预加载的信息列表，单个内容通过buildPreloadInfo构建
+ * JsvPreload(同时又名: JsvPicKeepAlive)：图片预加载的控件，同时也会将加载的内容保持在内存中！
+ *      preloadList/loadList {ObjectArray}: (属性二选一)加载的信息列表，单个内容通过buildLoadInfo构建
  *                                 列表中的图片会被进行下载，解码并将解码结果存储在内存中，内存占用的周期同JsvPreload组件声明周期
  *      downloadList {ObjectArray}: 预下载的信息列表，单个内容通过buildDownloadInfo构建
  *                                  列表的内容可以是图片，音频等任何网络资源，下载后缓存在本地，归入本地缓存管理(LRU清理策略)
  *      onPreloading {Function(float percent)}: 预加载中回调，返回预加载进度
- *      onPreloadDone {Function(sizeArray)}: 预加载完成回调，sizeArray(格式Object[])，每个的格式为{width, height}
- *      onDownloadDone {Function(pathesArray, extra)}: 预下载完成回调,pathesArray(格式为String[])为下载好回调的地址, 
- *                                         其中pathesArray为存储位置的路径列表, extra为额外信息(目前只有下载图片时的尺寸)
+ *      onPreloadDone {Function(info: {[url]: {width: number, height: number}}})}: 预加载完成回调
+ *      onDownloadDone {Function(info: {[url]: {path: string, width: number, height: number}})}: 预下载完成回调
  *
  * 注意事项:
  *      指定加载时的尺寸(0为不指定)，与img标签中的 jsv_img_scaledown_tex 属性一起使用
@@ -19,7 +18,7 @@
  *      对应着各自不同的图片内存缓存
  *
  * 静态函数:
- *  buildPreloadInfo: 静态函数，创建预加载信息项，用于制作JsvPreload的preloadList属性列表信息
+ *  buildLoadInfo/buildPreloadInfo: 静态函数，创建预加载信息项，用于制作JsvPreload的preloadList属性列表信息
  *        参数:
  *        url {string}:  (必填)图片url
  *        width {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
@@ -30,10 +29,9 @@
  *  buildDownloadInfo: 函数，创建预下载信息项，用于制作JsvPreload的downloadList属性列表信息
  *        参数:
  *        url {string}:  (必填)图片url
- *        width {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
- *        height {int}:  图片内存存储区域宽度，默认为0(同图片源文件宽度)
- *        color_type {string}:  图片存储颜色空间，去掉alpha通道可节省内存，例如"RGB_565"等，与img标签jsv_img_color_space配合，默认值"RGBA_8888"
- *        net_setting {object}:  (未实现)网络加载参数，cookie, refer等，默认值 null
+ *        netSetting {string}: 下载网络设置
+ *        getImageSize {boolean}: 是否获取图片尺寸
+ *        preDecode {boolean}: 是否预解码
  -->
 <script>
 const CONST_FORMAT_TOKEN = "_JsvP_";
@@ -56,16 +54,17 @@ const buildPreloadInfo = (
   };
 };
 
-const buildDownloadInfo = (url, net_setting = null, get_image_size) => {
+const buildDownloadInfo = (url, net_setting = null, get_image_size = false, preDecode = false) => {
   return {
     url,
     netSetting: net_setting,
     getImageSize: get_image_size,
     magicToken: CONST_FORMAT_TOKEN, // 用于格式校验
+    preDecode: preDecode,
   };
 };
 
-export { buildPreloadInfo, buildDownloadInfo };
+export { buildPreloadInfo, buildPreloadInfo as buildLoadInfo, buildDownloadInfo };
 </script>
 <script setup>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
@@ -75,6 +74,7 @@ import { urlCheckSet } from "../../JsViewVueTools";
 
 const props = defineProps({
   preloadList: Object,
+  loadList: Object,
   downloadList: Object,
   onPreloading: Function,
   onPreloadDone: Function,
@@ -148,12 +148,13 @@ const _checkPreload = () => {
 };
 
 const _getPreloadViewIdList = () => {
-  if (!props.preloadList) {
+  if (!props.preloadList && !props.loadList) {
     return;
   }
-  preloadStateList = new Array(props.preloadList.length).fill(false);
+  // 优先使用loadList，如果loadList为空，则使用preloadList
+  let preloadListData = props.loadList || props.preloadList;
+  preloadStateList = new Array(preloadListData.length).fill(false);
   // 直接在map前将为null的值删除掉
-  let preloadListData = props.preloadList;
   for (let i = 0; i < preloadListData.length; i++) {
     if (!preloadListData[i] || !preloadListData[i].url) {
       preloadListData.splice(i, 1);
@@ -226,7 +227,7 @@ const _checkDownload = () => {
     props.onDownloadDone &&
     loadedNum === downloadStateList.length - downloadIsNullNum
   ) {
-    props.onDownloadDone(downloadStateList, downloadResultMap);
+    props.onDownloadDone(downloadResultMap);
   }
 };
 
@@ -235,7 +236,7 @@ const _getDownloadViewIdList = () => {
     return;
   }
   // 直接在map前将url为null的值清除掉
-  downloadStateList = new Array(props.downloadList.length).fill(null);
+  downloadStateList = new Array(props.downloadList.length).fill(false);
   let downloadListData = props.downloadList;
   for (let i = 0; i < downloadListData.length; i++) {
     if (!downloadListData[i] || !downloadListData[i].url) {
@@ -250,32 +251,34 @@ const _getDownloadViewIdList = () => {
         "Error:format mismatch, data should comes from function buildDownloadInfo()"
       );
     }
-    console.log(`OnDownload get${index} url=${item.url}`);
+    // console.log(`OnDownload get${index} url=${item.url}`);
     let image_url = urlCheckSet(item.url);
     const texture = ForgeHandles.TextureManager.GetDownloadTexture(
       image_url,
       null,
-      item.getImageSize
+      item.getImageSize,
+      item.preDecode
     );
     if (!texture) {
       console.error("Error: Down view build texture failed for " + image_url);
       // 无法创建texture的图片先认为加载完成
-      downloadStateList[index] = "invalid";
+      downloadStateList[index] = true;
       return;
     }
     const callback_token = texture.RegisterLoadImageCallback(
       null,
       (texture_info) => {
-        console.log(`OnDownload done index${index}`);
-        downloadStateList[index] = texture_info.extra.absolutePath;
+        // console.log(`OnDownload done index${index}`, texture_info);
+        downloadStateList[index] = true;
         if (
           item.getImageSize &&
-          texture_info.extra.width &&
-          texture_info.extra.height
+          texture_info.width &&
+          texture_info.height
         ) {
-          downloadResultMap[texture_info.extra.absolutePath] = {
-            width: texture_info.extra.width,
-            height: texture_info.extra.height,
+          downloadResultMap[item.url] = {
+            width: texture_info.width,
+            height: texture_info.height,
+            path: texture_info.extra?.absolutePath,
           };
         }
         _checkDownload();
@@ -296,8 +299,8 @@ const _getDownloadViewIdList = () => {
 _releaseForgeView();
 
 watchEffect(() => {
-  if (props.preloadList) {
-    console.log("JsvPreload: update preloadList");
+  if (props.preloadList || props.loadList) {
+    console.log("JsvPreload: update preloadList/loadList");
     preloadIsNullNum = 0;
     _releasePreloadView();
     _getPreloadViewIdList();

package/utils/JsViewVueWidget/JsvQrcode/JsvQrcode.vue

@@ -9,7 +9,7 @@
  *            fgColor {string}          二维码前景色，默认值"#000000"，黑色
  *            bgColor {string}          二维码背景色，默认值"#ffffff"，白色
  *            level {string}            二维码的容错能力，可选值{'L':低, 'M':中, 'H':高, 'Q':最精细}，默认值'L'
- *            instant {string}      是否立即加载(auto, sync, async), auto = async
+ *            sync {string}      是否立即加载(auto, sync, async), auto = async
  *                                      是否当前帧限制(默认为非当前帧显示，不影响按键响应，但是会闪)
  *            imageSettings {Object}    设置中心logo图片，默认值为null，设置格式为：
  *                       {
@@ -122,6 +122,7 @@ export default {
       // Add new QRCode
       this.qrCodeView = view;
       this.jsvBaseView.AddView(this.qrCodeView, lp_params);
+      this.jsvBaseView.MarkFlexSizeFromChild(this.qrCodeView.ViewId);
     },
   },
   created() {

package/utils/JsViewVueWidget/JsvScrollBox/JsvScrollBox.vue

@@ -3,6 +3,7 @@
  *
  * 【模块 export 内容】
  * JsvScrollBox：Vue高阶组件，支持触控拖动的滚动型组件。
+ *      注意: 本组件进行rotate操作后，触控处理会出现坐标不对问题，所以不要进行rotate操作(其父节点也不能做rotate操作)
  *  props说明:
  *      style {Object}  (必填,响应式)  其中的width/height为必填项目, 决定scroll固定的底座的尺寸
  *      sliderSize {Object} (必填,响应式) 滑动区域的尺寸，滑块的尺寸在非滑动方向不能大于组件尺寸
@@ -24,7 +25,8 @@
  *                        (选填，响应式)  决定syncWith的联动模式，当syncWith设置后才能生效
  *                                      SyncForward(默认值): 同进同退, mySelf = sourcePercent
  *                                      SyncReverse: 进退反向, mySelf = (1 - sourcePercent)
- *
+ *      enableMouseWheel {boolean} (选填，非响应式) 是否需要支持鼠标滚轮滚动
+ *      mouseWheelRate {number} (选填，非响应式) 鼠标滚轮滚动速度比率，默认为10
  *  template说明:
  *      FixedBox={boxWidth, boxHeight}:  以本组件底座左上角0,0对齐的一个slot
  *      SliderBox={boxWidth, boxHeight}:  以滑块div的左上角0,0对齐的一个slot，
@@ -80,8 +82,6 @@ import {
   watchEffect,
   onMounted,
   onUnmounted,
-  defineExpose,
-  defineProps,
 } from "vue";
 import ActControl from "../../JsViewVueWidget/JsvFreeMoveActor/ActorControl";
 import { VERTICAL, HORIZONTAL } from "../../JsViewVueTools/ConstSymbol";
@@ -150,6 +150,14 @@ let rProps = defineProps({
     type: Symbol,
     default: ScrollBoxStyle.SyncForward,
   },
+  enableMouseWheel: {
+    type: Boolean,
+    default: false,
+  },
+  mouseWheelRate: {
+    type: Number,
+    default: 10,
+  },
 });
 
 // 激活引擎中的功能支持
@@ -461,6 +469,9 @@ function currentPercent(): number {
   return vCurrentPercent;
 }
 
+function onMouseWheelScrollProgress(pointInfo: any) {
+}
+
 onMounted(() => {
   vMounted = true;
 
@@ -474,6 +485,17 @@ onMounted(() => {
       ForgeConst.DragFlags.TOUCH_RECV_LAST_END
   ); // 激活 Move | TouchDown | TouchEnd
 
+  if (rProps.enableMouseWheel) {
+    sliderView.HoverEnables(2);
+    sliderView.SetMouseWheelRate(rProps.mouseWheelRate ?? 10.0);
+    cSliderActor.run((cmds) => [
+      cmds
+        .condition(undefined, true)
+        .onMouseWheelScrollProgress()
+        .then([onMouseWheelScrollProgress]),
+    ]);
+  }
+
   // 设置初始进度
   if (cInitPercent != 0) {
     updatePercent(cInitPercent);

package/utils/JsViewVueWidget/JsvScrollBox/JsvScrollFollow.vue

@@ -56,9 +56,6 @@ import {
   watchEffect,
   onMounted,
   onUnmounted,
-  defineExpose,
-  withDefaults,
-  defineProps,
 } from "vue";
 import ActControl from "../JsvFreeMoveActor/ActorControl";
 import { ScrollBoxStyle } from "./ScrollSymbol";

package/utils/JsViewVueWidget/JsvSector.vue

@@ -6,6 +6,7 @@
  *      props说明:
  *          centerPosition  {Object}   圆心坐标，属性:{x,y}
  *          radius          {Number}   半径
+ *          subRadius       {Number}   内半径，默认0；当0<subRadius<radius时绘制半圆圆弧
  *          animationTime   {Number}   动画变化时间，单位 /秒
  *          config          {Object}   配置信息对象，包含初始角度，扫过的角度以及颜色。属性:{startAngle,sweepAngle,color}
  *          extraTime       {Number}   可选配置（饼图用）扇形运动额外时间
@@ -13,97 +14,134 @@
 -->
 <template>
   <div
-    :style="{
-      width: props.radius,
-      height: props.radius,
-      transform: `rotate3d(0,0,1,${props.config.startAngle}deg)`,
-      transformOrigin: `center center`,
-      transition: `transform ${props.animationTime}s`,
-      left: props.centerPosition.x / 2,
-      top: props.centerPosition.y / 2,
-    }"
+    :style="rootStyle"
   >
     <div
       :style="{
-        width: props.radius,
-        height: props.radius / 2,
-        top: props.radius / 2,
+        width: props.radius * 2,
+        height: props.radius,
+        top: props.radius,
         left: 0,
         transform: `rotate3d(0,0,1,${upAngle}deg)`,
         transformOrigin: `center top`,
         overflow: 'hidden',
-        transition: `transform ${props.animationTime}s`,
+        transition: baseTransition,
       }"
     >
       <div
         :style="{
-          width: props.radius,
+          width: props.radius * 2,
           height: props.radius,
           backgroundImage: `jsvtexturestore://${sourceId}`,
           transform: `rotate3d(0,0,1,${downAngle}deg)`,
           transformOrigin: `center top`,
-          transition: `transform ${props.animationTime + props.extraTime}s`,
+          transition: sweepTransition,
         }"
       ></div>
     </div>
     <div
       :style="{
-        width: props.radius,
-        height: props.radius / 2,
-        top: props.radius / 2,
+        width: props.radius * 2,
+        height: props.radius,
+        top: props.radius,
         left: 0,
         overflow: 'hidden',
       }"
     >
       <div
         :style="{
-          width: props.radius,
+          width: props.radius * 2,
           height: props.radius,
           backgroundImage: `jsvtexturestore://${sourceId}`,
           transform: `rotate3d(0,0,1,${downAngle}deg)`,
           transformOrigin: `center top`,
-          transition: `transform ${props.animationTime+props.extraTime}s`,
+          transition: sweepTransition,
         }"></div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { shallowRef, onBeforeUnmount, watch } from "vue";
+import { shallowRef, onBeforeUnmount, watch, computed } from "vue";
 import { JsvTextureStoreApi } from "../JsViewVueTools";
 let sourceId = shallowRef("");
 const props = defineProps({
   centerPosition: { type: Object, require: true },
   radius: { type: Number, require: true },
+  subRadius: { type: Number, default: 0 },
   config: { type: Object, require: true },
   animationTime: { type: Number, default: 1 },
   extraTime: { type: Number, default: 0 },
 });
 
+const normalizedSubRadius = Math.min(
+  props.radius,
+  Math.max(0, Number(props.subRadius) || 0)
+);
+
 let canvasRef = JsvTextureStoreApi.canvasTexture(
   2 * props.radius,
-  2 * props.radius
+  props.radius
 );
 let customPath = canvasRef.customPath();
 customPath.arcTo(0, -props.radius, 2 * props.radius, props.radius, 0, 180);
-// 闭合路径，绘制实心扇形
+if (normalizedSubRadius > 0 && normalizedSubRadius < props.radius) {
+  const innerLeft = props.radius - normalizedSubRadius;
+  const innerRight = props.radius + normalizedSubRadius;
+  customPath.arcTo(
+    innerLeft,
+    -normalizedSubRadius,
+    innerRight,
+    normalizedSubRadius,
+    180,
+    -180
+  );
+}
+// subRadius=0时为实心扇形；subRadius生效时为半圆圆弧
 customPath.close();
 customPath.fill(props.config.color);
 sourceId.value = canvasRef.commit();
+
 //旋转角度
 let upAngle = shallowRef(0);
 let downAngle = shallowRef(0);
-const judge = () => {
-  downAngle.value = -(180 - props.config.sweepAngle / 2);
-  upAngle.value = props.config.sweepAngle / 2;
+const judge = (sweepAngle) => {
+  if (sweepAngle > 360) {
+    sweepAngle = 360;
+  } else if (sweepAngle < 0) {
+    sweepAngle = 0;
+  }
+  downAngle.value = -Number((180 - sweepAngle / 2).toFixed(3));
+  upAngle.value = Number((sweepAngle / 2).toFixed(3));
+
+  console.log("LudlDebugCSS sweepAngle:", sweepAngle, " color:", props.config.color, " downAngle:", downAngle.value, " upAngle:", upAngle.value);
 };
-judge();
+judge(props.config.sweepAngle);
 watch(props, (n, o) => {
-  judge();
+  judge(props.config.sweepAngle);
 });
 onBeforeUnmount(() => {
   JsvTextureStoreApi.deleteTexture(sourceId.value);
 });
+
+const baseTransition = computed(() =>
+  props.animationTime === 0 ? "" : `transform ${props.animationTime}s`
+);
+const sweepTransition = computed(() =>
+  props.animationTime === 0 ? "" : `transform ${props.animationTime + props.extraTime}s`
+);
+
+let rootStyle = computed(() => {
+  return {
+    width: props.radius * 2,
+    height: props.radius * 2,
+    transform: `rotate3d(0,0,1,${props.config.startAngle}deg)`,
+    transformOrigin: `center center`,
+    transition: baseTransition.value,
+    left: props.centerPosition.x -  props.radius,
+    top: props.centerPosition.y  - props.radius,
+  }
+});
 </script>
 
 <style lang="scss" scoped></style>