cione-comp-lib/es/packages/co-word-cloud-std/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, watch, nextTick, onMounted, onUnmounted, toRefs, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, toDisplayString, createCommentVNode, createElementVNode, normalizeClass } from "vue";
import "./otherFile/Bubble.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoWordCloudStd",
  props: {
    width: {
      type: String
    },
    height: {
      type: String
    },
    wordCloudType: {
      type: String
    },
    list: {
      type: Object,
      default: () => {
      }
    },
    speed: {
      type: Number,
      default: 400
    },
    direction: {
      type: String,
      default: "-1"
    },
    directionAngle: {
      type: Number,
      default: 135
    },
    webJumpType: {
      type: String,
      default: "1"
    },
    fontSize: {
      type: Number,
      default: 15
    },
    fontFamily: {
      type: String
    },
    letterSpacing: {
      type: Number
    },
    fontWeight: {
      type: String,
      default: "normal"
    },
    fontColor: {
      type: String,
      default: "rgba(255,255,255,1)"
    },
    activeBgColor: {
      type: String,
      default: "rgba(255, 255, 0,1)"
    },
    density: {
      type: Number,
      default: 18
    },
    isScale: {
      type: Boolean,
      default: false
    },
    moveUp: {
      type: Number,
      default: 0
    },
    circleDeviation: {
      type: Number,
      default: 60
    }
  },
  setup(props) {
    const listData = ref(props.list);
    const dataProcessing = () => {
      var newData = [];
      var newStr = "";
      var newUrl = [];
      var newUrlStr = "";
      var newWidth = [];
      var newWidthStr = "";
      listData.value.data.forEach((element, index) => {
        newData.push(element.text);
        newUrl.push(element.webUrl);
        if (props.wordCloudType === "bubble") {
          newWidth.push(element.width);
        }
      });
      newStr = newData.join(",") + ",";
      data.value = newStr.repeat(props.density).slice(0, -1).split(",");
      newUrlStr = newUrl.join(",") + ",";
      webUrlData.value = newUrlStr.repeat(props.density).slice(0, -1).split(",");
      if (props.wordCloudType === "bubble") {
        newWidthStr = newWidth.join(",") + ",";
        bubbleWidth.value = newWidthStr.repeat(props.density).slice(0, -1).split(",");
      }
    };
    const data = ref([]);
    const webUrlData = ref([]);
    const contentEle = ref();
    const tagBall = ref();
    const ballWidth = ref(0);
    const active = ref(true);
    const num = ref(-1);
    const aid = ref(0);
    var textWidth = 0;
    var textHeight = 0;
    const init = () => {
      dataProcessing();
      nextTick(() => {
        var _a, _b;
        contentEle.value = data.value.map(() => ({
          x: 0,
          y: 0,
          z: 0,
          style: {}
        }));
        ballWidth.value = tagBall.value.offsetWidth;
        textWidth = (_a = tagBall.value.children[0]) == null ? void 0 : _a.offsetWidth;
        textHeight = (_b = tagBall.value.children[0]) == null ? void 0 : _b.offsetHeight;
        const RADIUSX = (ballWidth.value - props.circleDeviation) / 2;
        const RADIUSY = (ballWidth.value - props.circleDeviation) / 2;
        contentEle.value = [];
        for (let i = 0; i < data.value.length; i += 1) {
          const k = -1 + (2 * (i + 1) - 1) / data.value.length;
          const a = Math.acos(k);
          const b = a * Math.sqrt(data.value.length * Math.PI);
          const x = RADIUSX * Math.sin(a) * Math.cos(b);
          const y = RADIUSY * Math.sin(a) * Math.sin(b);
          const z = RADIUSX * Math.cos(a);
          const singleEle = {
            x,
            y,
            z,
            style: {}
          };
          contentEle.value.push(singleEle);
        }
        animate();
      });
    };
    const animate = () => {
      rotateX();
      rotateY();
      move();
      aid.value = requestAnimationFrame(animate);
    };
    const rotateX = () => {
      const angleX = ["-1", "1"].includes(props.direction) ? Math.PI / Infinity : Math.PI / (Number(props.direction) / 2 * Number(props.speed));
      const cos = Math.cos(angleX);
      const sin = Math.sin(angleX);
      contentEle.value = contentEle.value.map((t) => {
        const y1 = t.y * cos - t.z * sin;
        const z1 = t.z * cos + t.y * sin;
        return {
          ...t,
          y: y1,
          z: z1
        };
      });
    };
    const rotateY = () => {
      const angleY = ["-2", "2"].includes(props.direction) ? Math.PI / Infinity : Math.PI / (Number(props.direction) * Number(props.speed));
      const cos = Math.cos(angleY);
      const sin = Math.sin(angleY);
      contentEle.value = contentEle.value.map((t) => {
        const x1 = t.x * cos - t.z * sin;
        const z1 = t.z * cos + t.x * sin;
        return {
          ...t,
          x: x1,
          z: z1
        };
      });
    };
    const move = () => {
      const CX = ballWidth.value / 2;
      const CY = ballWidth.value / 2;
      contentEle.value = contentEle.value.map((singleEle) => {
        const { x, y, z } = singleEle;
        const fallLength = ballWidth.value;
        const RADIUS = ballWidth.value / 2;
        const scale = fallLength / (fallLength - z);
        const alpha = (z + RADIUS) / (2 * RADIUS);
        const left = `${x + CX - textWidth / 2}px`;
        const top = `${y + CY - textHeight}px`;
        const transform = `translate(${left}, ${top}) scale(${scale})`;
        const style = {
          ...singleEle.style,
          opacity: alpha + 0.5,
          zIndex: parseInt((scale * 100).toString(), 10),
          transform
        };
        return {
          x,
          y,
          z,
          style
        };
      });
    };
    const mouseoutFn = () => {
      animate();
    };
    const mouseoverFn = () => {
      cancelAnimationFrame(aid.value);
    };
    const webJumpFn = (index) => {
      if (props.webJumpType === "1") {
        window.open(webUrlData.value[index]);
      } else if (props.webJumpType === "0") {
        window.location.href = webUrlData.value[index];
      }
    };
    const isBubble = ref(true);
    const bubbleWidth = ref([]);
    const wrapper = ref();
    const wrapperInit = ref(500);
    const wrapperInit2 = ref();
    const rollNum = ref(120);
    const initTimer = ref();
    const isIntervel = ref(true);
    const bubbleInitFn = () => {
      nextTick(() => {
        wrapperInit2.value = wrapper.value.offsetWidth;
        rollNum.value = 120 + (wrapperInit2.value - wrapperInit.value) * 0.34;
        window.tagcloud({
          selector: `.word-cloud__tagcloud${initTimer.value}`,
          radius: rollNum.value || 120,
          mspeed: props.speed,
          ispeed: props.speed / 10,
          direction: props.directionAngle,
          keep: false,
          isIntervel: isIntervel.value,
          activeScale: props.isScale
        });
      });
    };
    const RESET_VIEW = () => {
      if (props.wordCloudType === "3D") {
        cancelAnimationFrame(aid.value);
        init();
      } else if (props.wordCloudType === "bubble") {
        isBubble.value = false;
        nextTick(() => {
          isBubble.value = true;
          bubbleInitFn();
        });
      }
    };
    const renewList = () => {
      if (props.wordCloudType === "3D") {
        cancelAnimationFrame(aid.value);
        init();
      } else if (props.wordCloudType === "bubble") {
        isBubble.value = false;
        nextTick(() => {
          isBubble.value = true;
          dataProcessing();
          bubbleInitFn();
        });
      }
    };
    const updataList = (newList) => {
      listData.value = newList;
      renewList();
    };
    watch(
      () => props.density,
      () => {
        if (props.wordCloudType === "3D") {
          cancelAnimationFrame(aid.value);
          init();
        } else if (props.wordCloudType === "bubble") {
          isBubble.value = false;
          nextTick(() => {
            dataProcessing();
            isBubble.value = true;
            bubbleInitFn();
          });
        }
      }
    );
    watch(
      () => props.list,
      () => {
        listData.value = props.list;
        renewList();
      }
    );
    watch(
      () => props.fontSize,
      () => {
        renewList();
      }
    );
    watch(
      () => props.letterSpacing,
      () => {
        renewList();
      }
    );
    watch(
      () => props.circleDeviation,
      () => {
        renewList();
      }
    );
    watch(
      () => props.speed,
      () => {
        if (props.wordCloudType === "bubble") {
          isBubble.value = false;
          nextTick(() => {
            isBubble.value = true;
            bubbleInitFn();
          });
        }
      }
    );
    watch(
      () => props.directionAngle,
      () => {
        if (props.wordCloudType === "bubble") {
          isBubble.value = false;
          nextTick(() => {
            isBubble.value = true;
            bubbleInitFn();
          });
        }
      }
    );
    watch(
      () => props.isScale,
      () => {
        if (props.wordCloudType === "bubble") {
          isBubble.value = false;
          nextTick(() => {
            isBubble.value = true;
            bubbleInitFn();
          });
        }
      }
    );
    onMounted(() => {
      if (props.wordCloudType === "3D") {
        init();
      } else if (props.wordCloudType === "bubble") {
        initTimer.value = new Date().getTime();
        dataProcessing();
        nextTick(() => {
          bubbleInitFn();
        });
      }
    });
    onUnmounted(() => {
      if (props.wordCloudType === "3D") {
        cancelAnimationFrame(aid.value);
      } else if (props.wordCloudType === "bubble") {
        isIntervel.value = false;
        bubbleInitFn();
      }
    });
    return {
      listData,
      data,
      contentEle,
      active,
      num,
      tagBall,
      isBubble,
      bubbleWidth,
      wrapper,
      initTimer,
      mouseoutFn,
      mouseoverFn,
      webJumpFn,
      RESET_VIEW,
      updataList,
      ...toRefs(props)
    };
  }
});
const _hoisted_1 = ["onMouseover", "onClick"];
const _hoisted_2 = {
  key: 1,
  class: "word-cloud-std__tagBall"
};
const _hoisted_3 = {
  key: 0,
  class: "word-cloud-std__wrapper",
  ref: "wrapper"
};
const _hoisted_4 = ["onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: "co-word-cloud-std",
    style: normalizeStyle({ width: _ctx.width || "100%", height: _ctx.height || "100%" })
  }, [
    _ctx.wordCloudType === "3D" ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: "word-cloud-std__tagBall",
      style: normalizeStyle({ position: "absolute", top: -_ctx.moveUp + "px" }),
      ref: "tagBall",
      onMouseover: _cache[1] || (_cache[1] = (...args) => _ctx.mouseoverFn && _ctx.mouseoverFn(...args)),
      onMouseout: _cache[2] || (_cache[2] = (...args) => _ctx.mouseoutFn && _ctx.mouseoutFn(...args))
    }, [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item, index) => {
        return openBlock(), createElementBlock("span", {
          class: "word-cloud-std__tag",
          key: index,
          style: normalizeStyle({
            color: _ctx.listData.color[index % _ctx.listData.color.length],
            backgroundColor: _ctx.num == index ? _ctx.activeBgColor : "unset",
            cursor: _ctx.num == index ? "pointer" : "auto",
            fontSize: _ctx.fontSize + "px",
            fontFamily: _ctx.fontFamily,
            letterSpacing: _ctx.letterSpacing + "px",
            fontWeight: _ctx.fontWeight,
            ..._ctx.contentEle[index].style
          }),
          onMouseover: ($event) => _ctx.num = index,
          onMouseout: _cache[0] || (_cache[0] = ($event) => _ctx.num = -1),
          onClick: ($event) => _ctx.webJumpFn(index)
        }, toDisplayString(item), 45, _hoisted_1);
      }), 128))
    ], 36)) : createCommentVNode("", true),
    _ctx.wordCloudType === "bubble" ? (openBlock(), createElementBlock("div", _hoisted_2, [
      _ctx.isBubble ? (openBlock(), createElementBlock("div", _hoisted_3, [
        createElementVNode("div", {
          class: normalizeClass(`word-cloud__tagcloud word-cloud__tagcloud${_ctx.initTimer}`)
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item, index) => {
            return openBlock(), createElementBlock("div", {
              class: "b01 co01",
              key: index,
              style: normalizeStyle({
                background: `linear-gradient(to bottom, rgba(255,255,255,1) 0%, ${_ctx.listData.color[index % _ctx.listData.color.length]} 100%)`,
                width: _ctx.bubbleWidth[index] + "px",
                height: _ctx.bubbleWidth[index] + "px",
                color: _ctx.fontColor,
                fontSize: _ctx.fontSize + "px",
                fontFamily: _ctx.fontFamily,
                letterSpacing: _ctx.letterSpacing + "px",
                cursor: _ctx.webJumpType === "0" || _ctx.webJumpType === "1" ? "pointer" : "auto"
              }),
              onClick: ($event) => _ctx.webJumpFn(index)
            }, [
              createElementVNode("span", null, toDisplayString(item), 1)
            ], 12, _hoisted_4);
          }), 128))
        ], 2)
      ], 512)) : createCommentVNode("", true)
    ])) : createCommentVNode("", true)
  ], 4);
}
var CoWordCloudStd = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-21e4e620"]]);
export { CoWordCloudStd as default };