@shijiu/jsview-vue 2.3.151-test.0 → 2.3.728-alpha.0

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>

package/utils/JsViewVueWidget/JsvTextBox.vue

@@ -10,6 +10,14 @@
  *          textDirection {string}  文字方向，主要考虑阿拉伯语的方向场景
  *          syncDraw {string}  文字较长时，是强制同步绘制还是自动的进入异步绘制，可选"auto","sync","async"
  *                             其中"async"为强制包含短文字的场景也异步绘制
+ *          minWidth {number}      最小宽度限制，-1表示不限制。当文字内容较少时，确保组件至少占用指定宽度, 
+ *                                 以此影响后续的Flex布局
+ *          maxWidth {number}      最大宽度限制，-1表示不限制。当文字内容较多时，限制组件最大宽度，
+ *                                 当文字不足指定宽度时，此组件为文字的实际宽度，以此影响后续的Flex布局，超出部分根据textOverflow处理
+ *          minHeight {number}     最小高度限制，-1表示不限制。当文字内容较少时，确保组件至少占用指定高度, 
+ *                                 以此影响后续的Flex布局
+ *          maxHeight {number}     最大高度限制，-1表示不限制。当文字内容较多时，限制组件最大高度，
+ *                                 当文字不足指定高度时，此组件为文字的实际高度， 以此影响后续的Flex布局，超出部分根据textOverflow处理
  * latex语法样例
  *    1. 颜色:     "测试\\textcolor{#FF0000}{红色}文字"
  *    2. 加粗:     "测试\\textb{加粗}文字"
@@ -43,6 +51,22 @@ const props = defineProps({
     type: String,
     default: "auto",
   },
+  minWidth: {
+    type: Number,
+    default: -1,
+  },
+  maxWidth: {
+    type: Number,
+    default: -1,
+  },
+  minHeight: {
+    type: Number,
+    default: -1,
+  },
+  maxHeight: {
+    type: Number,
+    default: -1,
+  },
 });
 
 const computeAlignItems = computed(() => {
@@ -80,10 +104,15 @@ const jsvTextLatexValue = computed(() => {
   >
     <div
       :style="{
-        width: textWidth,
+        width: style.width,
+        height: style.height,
         JsvTextLatex: jsvTextLatexValue,
         JsvTextLineAlign: lineAlign,
         JsvTextInnerDirection: textDirection,
+        JsvMinWidth: minWidth,
+        JsvMaxWidth: maxWidth,
+        JsvMinHeight: minHeight,
+        JsvMaxHeight: maxHeight,
       }"
       :data-jsv-perf-loadtex="props.syncDraw"
     >