@shijiu/jsview-vue 0.0.1-beta.0

package/utils/JsViewVueWidget/JsvSwiper3D/JsvSwiper.vue

@@ -0,0 +1,404 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-11-23 09:42:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-11-29 11:04:37
+ * @Description: file content
+-->
+<script>
+import Indicator from "./Indicator.vue";
+import { ref } from "vue";
+
+const VIEW_NUM = 4;
+
+function modToRange(value, mod, start = 0) {
+  let m = value % mod;
+  if (m < start) {
+    m += mod;
+  } else if (m >= start + mod) {
+    m -= mod;
+  }
+  return m;
+}
+
+window.modToRange = modToRange;
+
+export default {
+  components: { Indicator },
+  props: {
+    showIndicator: {
+      type: Boolean,
+      default: true,
+    },
+    dotSize: {
+      type: Number,
+      default: 10,
+    },
+    dotGap: {
+      type: Number,
+      default: 10,
+    },
+    indicatorPos: {
+      type: Number,
+      default: -1,
+    },
+    indicatorAlign: {
+      type: String,
+      default: "middle",
+    },
+    totalFrame: {
+      type: Number,
+      require: true,
+    },
+    firstFrame: {
+      type: Number,
+      default: 0,
+    },
+    layoutInfo: {
+      type: Object,
+      require: true,
+    },
+    onClick: {
+      type: Function,
+    },
+    onChange: {
+      type: Function,
+    },
+    scale: {
+      type: Number,
+      default: 1.0,
+    },
+    autoplayInterval: {
+      type: Number,
+      default: 5000,
+    },
+    animation: {
+      type: Object,
+      default() {
+        return {
+          duration: 200,
+          easing: "linear",
+        };
+      },
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+    },
+    onFocus: {
+      type: Function,
+    },
+    onBlur: {
+      type: Function,
+    },
+    backgroundImage: {
+      type: String,
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+  computed: {
+    indicatorLayout() {
+      let indicatorSize =
+        this.totalFrame * (this.dotSize + this.dotGap) - this.dotGap;
+      if (this.vertical) {
+        let top;
+        if (this.indicatorAlign === "start") {
+          top = this.dotGap;
+        } else if (this.indicatorAlign === "end") {
+          top = this.layoutInfo.widgetHeight - indicatorSize - this.dotGap;
+        } else {
+          top = (this.layoutInfo.widgetHeight - indicatorSize) / 2;
+        }
+        return {
+          left:
+            this.indicatorPos < 0
+              ? this.layoutInfo.widgetWidth * 0.8
+              : this.indicatorPos,
+          top,
+          zIndex: 1,
+        };
+      } else {
+        let left;
+        if (this.indicatorAlign === "start") {
+          left = this.dotGap;
+        } else if (this.indicatorAlign === "end") {
+          left = this.layoutInfo.widgetWidth - indicatorSize - this.dotGap;
+        } else {
+          left = (this.layoutInfo.widgetWidth - indicatorSize) / 2;
+        }
+        return {
+          left,
+          top:
+            this.indicatorPos < 0
+              ? this.layoutInfo.widgetHeight * 0.8
+              : this.indicatorPos,
+          zIndex: 1,
+        };
+      }
+    },
+    indicatorDotSize() {
+      return this.dotSize + this.dotGap;
+    },
+    currentDataIndex() {
+      return modToRange(this.firstFrame + this.offset, this.totalFrame);
+    },
+    currentViewIndex() {
+      return modToRange(this.offset + (VIEW_NUM / 2 - 1), VIEW_NUM);
+    },
+    viewInfoList() {
+      let layoutInfo = this.layoutInfo;
+      let currentLeft =
+        (this.layoutInfo.widgetWidth - this.layoutInfo.frameWidth) / 2;
+      let currentTop =
+        (this.layoutInfo.widgetHeight - this.layoutInfo.frameHeight) / 2;
+      let duration = this.animation.duration / 1000;
+      let easing = this.animation.easing ? this.animation.easing : "linear";
+      let styleList = [
+        {
+          layout: {
+            top: currentTop + (this.vertical ? -layoutInfo.deltaPos : 0),
+            left: currentLeft + (this.vertical ? 0 : -layoutInfo.deltaPos),
+            zIndex: this.offset - this.preOffset > 0 ? 3 : 1,
+            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
+          },
+          transform: {
+            transform: `scale3d(${this.scale}, ${this.scale}, 1.0)`,
+            width: this.layoutInfo.frameWidth,
+            height: this.layoutInfo.frameHeight,
+            transition: `transform ${duration}s ${easing}`,
+          },
+        } /*左副位*/,
+        {
+          layout: {
+            top: currentTop,
+            left: currentLeft,
+            zIndex: 4,
+            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
+          },
+          transform: {
+            transform: "scale3d(1.0, 1.0, 1.0)",
+            width: this.layoutInfo.frameWidth,
+            height: this.layoutInfo.frameHeight,
+            transition: `transform ${duration}s ${easing}`,
+          },
+        } /*主位*/,
+        {
+          layout: {
+            top: currentTop + (this.vertical ? layoutInfo.deltaPos : 0),
+            left: currentLeft + (this.vertical ? 0 : layoutInfo.deltaPos),
+            zIndex: this.offset - this.preOffset > 0 ? 1 : 3,
+            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
+          },
+          transform: {
+            transform: `scale3d(${this.scale}, ${this.scale}, 1.0)`,
+            width: this.layoutInfo.frameWidth,
+            height: this.layoutInfo.frameHeight,
+            transition: `transform ${duration}s ${easing}`,
+          },
+        } /*右副位*/,
+        {
+          layout: {
+            top: currentTop,
+            left: currentLeft,
+            zIndex: 0,
+            transition: `left ${duration}s ${easing}, top ${duration}s ${easing}`,
+          },
+          transform: {
+            transform: `scale3d(${this.scale}, ${this.scale}, 1.0)`,
+            width: this.layoutInfo.frameWidth,
+            height: this.layoutInfo.frameHeight,
+            transition: `transform ${duration}s ${easing}`,
+          },
+        } /*隐藏位*/,
+      ];
+      let viewList = [];
+      for (let i = 0; i < VIEW_NUM; i++) {
+        viewList.push({
+          dataIndex: modToRange(
+            this.currentDataIndex +
+              modToRange(i - this.currentViewIndex, VIEW_NUM, -1),
+            this.totalFrame
+          ),
+          style: styleList[modToRange(i - this.offset, VIEW_NUM)],
+        });
+      }
+      return viewList;
+    },
+  },
+  setup() {
+    let preOffset = -1;
+    let offset = ref(0);
+    let focused = ref(false);
+    let intervalHandler = -1;
+    return {
+      preOffset,
+      offset,
+      focused,
+      intervalHandler,
+    };
+  },
+  watch: {
+    offset(newValue) {
+      this.onChange?.(modToRange(this.firstFrame + newValue, this.totalFrame));
+    },
+  },
+  methods: {
+    _onKeyDown(ev) {
+      switch (ev.keyCode) {
+        case 37:
+          if (!this.vertical) {
+            this.preOffset = this.offset;
+            this.offset = this.offset - 1;
+            return true;
+          }
+          break;
+        case 38:
+          if (this.vertical) {
+            this.preOffset = this.offset;
+            this.offset = this.offset - 1;
+            return true;
+          }
+          break;
+        case 39:
+          if (!this.vertical) {
+            this.preOffset = this.offset;
+            this.offset = this.offset + 1;
+            return true;
+          }
+          break;
+        case 40:
+          if (this.vertical) {
+            this.preOffset = this.offset;
+            this.offset = this.offset + 1;
+            return true;
+          }
+          break;
+        case 13:
+          this.onClick?.();
+          return true;
+        default:
+          break;
+      }
+
+      return false;
+    },
+    _enableAutoplay() {
+      if (this.autoplayInterval > 0) {
+        this.intervalHandler = setInterval(() => {
+          this.preOffset = this.offset;
+          this.offset = this.offset + 1;
+        }, this.autoplayInterval);
+      }
+    },
+    _onFocus() {
+      this.focused = true;
+      clearInterval(this.intervalHandler);
+      this.onFocus?.();
+    },
+    _onBlur() {
+      this.focused = false;
+      this._enableAutoplay();
+      this.onBlur?.();
+    },
+  },
+  created() {
+    this._enableAutoplay();
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        width: layoutInfo.widgetWidth,
+        height: layoutInfo.widgetHeight,
+        overflow: 'hidden',
+      }"
+    >
+      <div :style="{ zIndex: 0 }">
+        <div
+          v-if="backgroundImage || backgroundColor"
+          :style="{
+            width: layoutInfo.widgetWidth,
+            height: layoutInfo.widgetHeight,
+            zIndex: 2,
+            backgroundImage,
+            backgroundColor,
+          }"
+        />
+        <div
+          v-for="(item, index) in viewInfoList"
+          :key="index"
+          :style="item.style.layout"
+        >
+          <div :style="item.style.transform">
+            <slot
+              name="itemView"
+              :currentIndex="currentDataIndex"
+              :dataIndex="item.dataIndex"
+              :focused="focused"
+            ></slot>
+            <!-- <div
+                :style="{
+                  width: 50,
+                  height: 50,
+                  top: 50,
+                  fontSize: '30px',
+                  color: '#FF0000'
+                }"
+              >
+                {{ index }}
+              </div> -->
+          </div>
+        </div>
+      </div>
+
+      <div v-if="showIndicator" :style="indicatorLayout">
+        <indicator
+          :number="totalFrame"
+          :current="currentDataIndex"
+          :itemSize="indicatorDotSize"
+          :vertical="vertical"
+        >
+          <template #current>
+            <slot name="indicatorCur">
+              <div
+                :style="{
+                  width: 10,
+                  height: 10,
+                  backgroundColor: 'rgba(50, 50, 50, 1.0)',
+                  borderRadius: '5px',
+                }"
+              ></div>
+            </slot>
+          </template>
+          <template #normal>
+            <slot name="indicatorNor">
+              <div
+                :style="{
+                  width: 10,
+                  height: 10,
+                  backgroundColor: 'rgba(100, 100, 100, 0.7)',
+                  borderRadius: '5px',
+                }"
+              ></div>
+            </slot>
+          </template>
+        </indicator>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>

package/utils/JsViewVueWidget/JsvSwiper3D/index.js

@@ -0,0 +1,10 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-11-23 09:44:31
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-11-23 15:42:46
+ * @Description: file content
+ */
+import JsvSwiper from "./JsvSwiper.vue";
+
+export default JsvSwiper;

package/utils/JsViewVueWidget/JsvTextBox.vue

@@ -0,0 +1,111 @@
+<!--
+ * Created by chunfeng.luo@qcast.cn on 10/13/20.
+ */
+
+/*
+ * JsvTextBox：Vue高阶组件，文字的垂直对齐方式显示控件
+ *      props说明:
+ *          verticalAlign {string}  垂直对齐方式 (必需) top、middle、bottom
+ *          stylesList {array}    布局样式(必需)，数组中可包含样式对象或者JsvStyleClass，或者JsvTextStyleClass对象，
+ *                                  样式对象内容为{left:0, top:0, width:xxx, height:xxx}，
+ *                                  布局样式为数组中所有样式的合并。
+ *          styleToken {string}     类似于react html元素的key，当style变化时，由使用者改变此Token通知hoc进行style重新识别。
+ *                                  Token不变的场景，props变化不会引起render，以提高渲染性能
+ *          enableLatex {bool}     是否启用Latex文字描画模式
+-->
+
+<script>
+import {
+  JsvTextStyleClass,
+  combinedStyles,
+} from "jsview/utils/JsViewVueTools/JsvStyleClass.js";
+
+let sAreaAlignStyleMap = new Map();
+export default {
+  props: {
+    styleToken: String,
+    stylesList: Object,
+    verticalAlign: {
+      type: String,
+      default: "middle",
+    },
+    lineAlign: {
+      type: String,
+      default: "middle",
+    },
+    enableLatex: Boolean,
+  },
+  data() {
+    return {
+      styleCombined: null,
+      styleClasses: null,
+      tokenProcesses: null,
+    };
+  },
+  beforeMount() {
+    if (this.styleToken !== this.tokenProcesses) {
+      // Token变化时，重新解析style array
+      const style_set = combinedStyles(
+        this.stylesList,
+        !window.JsvDisableReactWrapper // 无ReactWrapper时，全解析style属性
+      );
+
+      this.styleCombined = style_set.combinedStyle;
+      // console.log("styleCombined = ", this.styleCombined);
+      if (!window.JsvDisableReactWrapper) {
+        this.styleClasses = style_set.combinedClass;
+        let key = this.verticalAlign + "_" + this.lineAlign;
+        if (!sAreaAlignStyleMap.has(key)) {
+          const text_class = new JsvTextStyleClass({});
+          text_class.setVerticalAlign(this.verticalAlign);
+          text_class.setLineAlign(this.lineAlign);
+          sAreaAlignStyleMap.set(key, text_class);
+        }
+        const va_set_class = sAreaAlignStyleMap.get(key);
+        if (this.styleClasses.length === 0) {
+          this.styleClasses += va_set_class.getName();
+        } else {
+          this.styleClasses = this.styleClasses + " " + va_set_class.getName();
+        }
+      }
+      this.tokenProcesses = this.styleToken;
+    }
+  },
+  methods: {
+    isJsvDisableReactWrapper() {
+      if (window.JsvDisableReactWrapper) {
+        return true;
+      }
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="isJsvDisableReactWrapper()" :style="styleCombined">
+      <div :style="{ position: 'static', display: 'table' }">
+        <div
+          :style="{
+            position: 'static',
+            display: 'table-cell',
+            width: styleCombined.width,
+            height: styleCombined.height,
+            verticalAlign: verticalAlign,
+          }"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      :className="styleClasses"
+      :style="{ ...styleCombined }"
+      :jsv_text_latex_enable="enableLatex ? 'true' : ''"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>

package/utils/JsViewVueWidget/JsvVideo.vue

@@ -0,0 +1,36 @@
+<!--
+/*
+ * JsvVideo：Vue高阶组件，包装<video>标签，添加离屏模式这种可以支持圆角和旋转效果，但绘制性能略有焦点的特效
+ *      props说明:
+ *          usetexture {bool}          是否使用texture即离屏模式，true:使用离屏模式，false:使用普通video
+ *          videoref {object} (必须)    video 句柄，对video进行播控
+ *      特别说明:
+ *          其他属性同video标签
+ */
+--> 
+
+<script>
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+  props: {
+    onRef: { type: Function, default: () => {} },
+    useTexture: { type: Boolean, default: false },
+    autoplay: { type: String, default: undefined },
+  },
+})
+class JsvVideo extends Vue {
+  constructor(props) {
+    super(props);
+  }
+}
+
+export default JsvVideo;
+</script>
+
+<template>
+  <video :ref="onRef" :jsv-media-usetexture="useTexture" v-bind="$attrs"/>
+</template>
+
+<style scoped>
+</style>