@bdsoft/element 1.1.8 → 1.1.11

package/src/components/3dcloudwords/index.js

@@ -1,346 +0,0 @@
-var S = Object.defineProperty;
-var C = (f, t, i) => t in f ? S(f, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : f[t] = i;
-var n = (f, t, i) => C(f, typeof t != "symbol" ? t + "" : t, i);
-const w = [
-  "#23bcfe",
-  // Sky Blue
-  "#ff6f61",
-  // Coral
-  "#6a5acd",
-  // Slate Blue
-  "#3cb371",
-  // Medium Sea Green
-  "#ffcc00",
-  // Golden Yellow
-  "#ff1493",
-  // Deep Pink
-  "#20b2aa",
-  // Light Sea Green
-  "#ff4500",
-  // Orange Red
-  "#9370db",
-  // Medium Purple
-  "#f08080"
-  // Light Coral
-], M = {
-  children: [],
-  width: 480,
-  height: 480,
-  radius: "70%",
-  radiusMin: 75,
-  isDrawSvgBg: !0,
-  svgBgColor: "#000",
-  opacityOver: 1,
-  opacityOut: 0.05,
-  opacitySpeed: 6,
-  fov: 800,
-  speed: 0.5,
-  fontFamily: "Arial, sans-serif",
-  fontSize: "12",
-  fontColor: "#fff",
-  fontWeight: "normal",
-  //bold
-  fontStyle: "normal",
-  //italic
-  fontStretch: "normal",
-  //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
-  fontToUpperCase: !1,
-  tooltipFontFamily: "Arial, sans-serif",
-  tooltipFontSize: "15",
-  tooltipFontColor: "#fff",
-  tooltipFontWeight: "normal",
-  //bold
-  tooltipFontStyle: "normal",
-  //italic
-  tooltipFontStretch: "normal",
-  //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
-  tooltipFontToUpperCase: !1,
-  tooltipTextAnchor: "left",
-  tooltipDiffX: 0,
-  tooltipDiffY: 10,
-  animatingSpeed: 0.1,
-  animatingRadiusLimit: 1.3
-};
-class p {
-  constructor(t, i) {
-    n(this, "containerEl");
-    n(this, "settings");
-    n(this, "childHolder", []);
-    n(this, "tooltipEl", null);
-    n(this, "radius", 0);
-    n(this, "diameter", 0);
-    n(this, "mouseReact", !0);
-    n(this, "mousePos", { x: 0, y: 0 });
-    n(this, "center2D", { x: 0, y: 0 });
-    n(this, "center3D", { x: 0, y: 0, z: 0 });
-    n(this, "speed", { x: 0, y: 0 });
-    n(this, "position", { sx: 0, cx: 0, sy: 0, cy: 0 });
-    n(this, "MATHPI180", Math.PI / 180);
-    n(this, "svgEl", null);
-    n(this, "svgNS", "http://www.w3.org/2000/svg");
-    n(this, "svgBg", null);
-    n(this, "animFrameId", null);
-    n(this, "radius_factor", 1);
-    n(this, "animOut_cb", null);
-    n(this, "animIn_cb", null);
-    n(this, "animating", !1);
-    n(this, "onScreenResizeHandler", () => {
-      this.setParams();
-    });
-    n(this, "onMouseMoveHandler", (t) => {
-      this.mousePos = this.getMousePos(this.svgEl, t);
-    });
-    n(this, "mouseOverHandler", (t) => {
-      this.mouseReact = !1;
-      const i = t.target, o = this.getChildByElement(i);
-      o && (this.highlightChild(o), this.showTooltip(o));
-    });
-    n(this, "mouseOutHandler", (t) => {
-      this.mouseReact = !0;
-      const i = t.target;
-      this.getChildByElement(i) && this.hideTooltip();
-    });
-    // start to render the tag cloud component
-    n(this, "build", () => {
-      this.settings.children.length && (this.setSvgElAndSvgBgEl(), this.addChildren(), this.setParams(), this.animationLoopStart(), window.addEventListener("resize", this.onScreenResizeHandler));
-    });
-    this.containerEl = t, this.settings = { ...M, ...i }, this.bindMethods();
-  }
-  bindMethods() {
-    this.animationLoopStart = this.animationLoopStart.bind(this), this._animIn = this._animIn.bind(this), this._animOut = this._animOut.bind(this);
-  }
-  setAttributes(t, i) {
-    for (const [o, a] of Object.entries(i))
-      t.setAttribute(o, a);
-  }
-  getFontColor(t = 0, i = [], o = "#fff") {
-    const a = i.length;
-    return a > 0 ? i[t % a] : o;
-  }
-  getMousePos(t, i) {
-    if (!t) return { x: 0, y: 0 };
-    const o = t.getBoundingClientRect();
-    return { x: i.clientX - o.left, y: i.clientY - o.top };
-  }
-  setChildPosition(t, i) {
-    if (!t.vectorPosition) return;
-    const { x: o, y: a, z: h } = t.vectorPosition, r = o - this.center3D.x, l = a - this.center3D.y, c = h - this.center3D.z, s = Math.sqrt(r * r + l * l + c * c);
-    Object.assign(t.vectorPosition, {
-      x: o / s * i,
-      y: a / s * i,
-      z: h / s * i
-    });
-  }
-  setChildPositions(t) {
-    this.childHolder.forEach((i) => this.setChildPosition(i, t));
-  }
-  setParams() {
-    var m, u;
-    const { innerWidth: t, innerHeight: i } = window, { documentElement: o, body: a } = document, {
-      width: h,
-      height: r,
-      radius: l = "65%",
-      speed: c = 0,
-      radiusMin: s = 1,
-      isDrawSvgBg: g
-    } = this.settings;
-    let e = t || o.clientWidth || a.clientWidth, d = i || o.clientHeight || a.clientHeight;
-    typeof h == "string" && h.includes("%") ? (e = Math.round(
-      this.containerEl.offsetWidth / 100 * parseInt(h)
-    ), d = Math.round(e / 100 * parseInt(r))) : (e = h, d = r), e = Math.min(e, t || 0), d = Math.min(d, i || 0), this.center2D = { x: e / 2, y: d / 2 }, this.speed = { x: c / this.center2D.x, y: c / this.center2D.y }, this.diameter = Math.min(d, e) * (parseInt(`${l}`) / 100), this.diameter = Math.max(this.diameter, 1), this.radius = Math.max(this.diameter / 2, s), this.diameter = this.radius * 2, (m = this.svgEl) == null || m.setAttribute("width", `${e}`), (u = this.svgEl) == null || u.setAttribute("height", `${d}`), g && this.svgBg && (this.svgBg.setAttribute("width", `${e}`), this.svgBg.setAttribute("height", `${d}`)), this.setChildPositions(this.radius * this.radius_factor);
-  }
-  addChild(t, i, o, a, h) {
-    var g;
-    const { settings: r, svgNS: l } = this, c = this.getFontColor(t, w, r.fontColor), s = {
-      index: t,
-      mouseOver: !1,
-      fontColor: c,
-      vectorPosition: { x: o, y: a, z: h },
-      vector2D: { x: 0, y: 0 },
-      ...i
-    };
-    if (i.label) {
-      const e = {
-        x: "0",
-        y: "0",
-        fill: s.fontColor,
-        "font-family": s.fontFamily || r.fontFamily,
-        "font-size": `${i.fontSize || r.fontSize}`,
-        "font-weight": s.fontWeight || r.fontWeight,
-        "font-style": s.fontStyle || r.fontStyle,
-        "font-stretch": s.fontStretch || r.fontStretch,
-        "text-anchor": "middle"
-      };
-      s.element = document.createElementNS(l, "text"), this.setAttributes(s.element, e), s.element.textContent = r.fontToUpperCase ? i.label.toUpperCase() : i.label;
-    } else if (i.image)
-      s.element = document.createElementNS(l, "image"), s.element.setAttributeNS(
-        "http://www.w3.org/1999/xlink",
-        "href",
-        i.image
-      ), this.setAttributes(s.element, {
-        x: "0",
-        y: "0",
-        width: `${i.width || "0"}`,
-        height: `${i.height || "0"}`
-      }), s.diffX = i.width / 2, s.diffY = i.height / 2;
-    else
-      return;
-     s.link = document.createElementNS(l, "a"), 
-    this.setAttributes(s.link, {
-      href: i.url || "#",
-      target: i.target || ""
-    }), 
-    s.link.appendChild(s.element), 
-    s.link.addEventListener(
-      "mouseover",
-      this.mouseOverHandler,
-      !0
-    ), s.link.addEventListener(
-      "mouseout",
-      this.mouseOutHandler,
-      !0
-    ), i.tooltip ? (s.tooltipLabel = r.tooltipFontToUpperCase ? i.tooltip.toUpperCase() : i.tooltip, s.tooltip = s.tooltipLabel) : s.tooltip = "", (g = this.svgEl) == null || g.appendChild(s.link), this.childHolder.push(s);
-  }
-  addTooltip() {
-    var c;
-    const {
-      tooltipFontColor: t,
-      tooltipFontFamily: i,
-      tooltipFontSize: o,
-      tooltipFontWeight: a,
-      tooltipFontStyle: h,
-      tooltipFontStretch: r,
-      tooltipTextAnchor: l
-    } = this.settings;
-    this.tooltipEl = document.createElementNS(this.svgNS, "text"), this.setAttributes(this.tooltipEl, {
-      x: "0",
-      y: "0",
-      fill: `${t}`,
-      "font-family": `${i}`,
-      "font-size": `${o}`,
-      "font-weight": `${a}`,
-      "font-style": `${h}`,
-      "font-stretch": `${r}`,
-      "text-anchor": `${l}`
-    }), (c = this.svgEl) == null || c.appendChild(this.tooltipEl);
-  }
-  showTooltip(t) {
-    if (t.tooltip && this.tooltipEl && t.vector2D) {
-      const { tooltipDiffX: i, tooltipDiffY: o, tooltipFontToUpperCase: a } = this.settings;
-      this.setAttributes(this.tooltipEl, {
-        x: `${t.vector2D.x - (i || 0)}`,
-        y: `${t.vector2D.y - (o || 0)}`,
-        opacity: "1.0"
-      }), this.tooltipEl.textContent = a ? (t.tooltipLabel || "").toUpperCase() : t.tooltipLabel || "";
-    }
-  }
-  hideTooltip() {
-    var t;
-    (t = this.tooltipEl) == null || t.setAttribute("opacity", "0.0");
-  }
-  addChildren() {
-    let t = !1;
-    this.settings.children.forEach((i, o) => {
-      const a = this.settings.children.length + 1, h = Math.acos(-1 + 2 * (o + 1) / a), r = Math.sqrt(a * Math.PI) * h, l = Math.cos(r) * Math.sin(h), c = Math.sin(r) * Math.sin(h), s = Math.cos(h);
-      this.addChild(o, i, l, c, s), i.tooltip && (t = !0);
-    }), t && this.addTooltip();
-  }
-  highlightChild(t) {
-    this.childHolder.forEach((i) => i.mouseOver = i.index === t.index);
-  }
-  getChildByElement(t) {
-    return this.childHolder.find(
-      (i) => {
-        var o;
-        return (o = i.element) == null ? void 0 : o.isEqualNode(t);
-      }
-    );
-  }
-  render() {
-    const {
-      speed: t = 0,
-      opacityOut: i = 0.1,
-      opacityOver: o = 1,
-      opacitySpeed: a = 5,
-      fov: h = 0,
-      animatingRadiusLimit: r = 1.3
-    } = this.settings, l = this.speed.x * this.mousePos.x - t, c = t - this.speed.y * this.mousePos.y, s = l * this.MATHPI180, g = c * this.MATHPI180;
-    this.position = {
-      sx: Math.sin(s),
-      cx: Math.cos(s),
-      sy: Math.sin(g),
-      cy: Math.cos(g)
-    }, this.childHolder.forEach((e) => {
-      if (!e.element || !e.vectorPosition || !e.vector2D) return;
-      if (this.mouseReact) {
-        const { x: v, y, z: x } = e.vectorPosition, E = y * this.position.sy + x * this.position.cy;
-        e.vectorPosition.x = v * this.position.cx + E * this.position.sx, e.vectorPosition.y = y * this.position.cy + x * -this.position.sy, e.vectorPosition.z = v * -this.position.sx + E * this.position.cx;
-      }
-      const d = h / (h + e.vectorPosition.z);
-      e.vector2D.x = e.vectorPosition.x * d + this.center2D.x, e.vector2D.y = e.vectorPosition.y * d + this.center2D.y, e.diffX && e.diffY && (e.vector2D.x -= e.diffX, e.vector2D.y -= e.diffY), e.element.setAttribute("x", `${e.vector2D.x}`), e.element.setAttribute("y", `${e.vector2D.y}`);
-      let m = this.mouseReact ? (this.radius - e.vectorPosition.z) / this.diameter : parseFloat(e.element.getAttribute("opacity") || "1");
-      m = this.mouseReact ? Math.max(m, i) : e.mouseOver ? m + (o - m) / a : m + (i - m) / a;
-      const u = 1 - (this.radius_factor - 1) / (r - 1);
-      e.element.setAttribute("opacity", `${m * u}`);
-    }), this.childHolder.sort((e, d) => d.vectorPosition.z - e.vectorPosition.z);
-  }
-  animationLoopStart() {
-    this.animFrameId = window.requestAnimationFrame(() => {
-      this.render(), this.animationLoopStart();
-    });
-  }
-  _animIn() {
-    (this.animating = this.radius_factor > 1) ? (this.setRadiusFactor(
-      this.radius_factor - (this.settings.animatingSpeed || 0.1)
-    ), window.requestAnimationFrame(this._animIn)) : this.animIn_cb && (this.animIn_cb(), this.animIn_cb = null);
-  }
-  _animOut() {
-    (this.animating = this.radius_factor < (this.settings.animatingRadiusLimit || 1.3)) ? (this.setRadiusFactor(
-      this.radius_factor + (this.settings.animatingSpeed || 0.1)
-    ), window.requestAnimationFrame(this._animOut)) : this.animOut_cb && (this.animOut_cb(), this.animOut_cb = null);
-  }
-  setRadiusFactor(t) {
-    this.radius_factor = Math.min(
-      Math.max(t, 1),
-      this.settings.animatingRadiusLimit || 1.3
-    ), this.setParams();
-  }
-  resetRadiusFactor() {
-    this.setRadiusFactor(1);
-  }
-  animOut(t) {
-    this.animating || (this.radius_factor = 1, this.animOut_cb = t, this._animOut());
-  }
-  animIn(t) {
-    this.animating || (this.radius_factor = this.settings.animatingRadiusLimit || 1.3, this.animIn_cb = t, this._animIn());
-  }
-  setChildren(t) {
-    this.destroy(), this.settings.children = t, this.build();
-  }
-  setSvgElAndSvgBgEl() {
-    this.svgEl = document.createElementNS(this.svgNS, "svg"), this.svgEl.addEventListener("mousemove", this.onMouseMoveHandler), this.containerEl.appendChild(this.svgEl), this.settings.isDrawSvgBg && (this.svgBg = document.createElementNS(
-      this.svgNS,
-      "rect"
-    ), this.setAttributes(this.svgBg, {
-      x: "0",
-      y: "0",
-      fill: `${this.settings.svgBgColor}`
-    }), this.svgEl.appendChild(this.svgBg));
-  }
-  // destroy the element when component is removed;
-  destroy() {
-    var t;
-    this.animFrameId && window.cancelAnimationFrame(this.animFrameId), window.removeEventListener("resize", this.onScreenResizeHandler), this.svgBg && ((t = this.svgEl) == null || t.removeChild(this.svgBg)), this.svgEl && (this.containerEl.removeChild(this.svgEl), this.svgEl.removeEventListener("mousemove", this.onMouseMoveHandler), this.svgEl = null);
-  }
-  static __VERSION() {
-    console.log(
-      "%c [ __VERSION ]-573",
-      "font-size:13px; background:pink; color:#bf2c9f;",
-      "v0.0.19_Bt: 10/16/2024, 9:49:51 AM"
-    );
-  }
-}
-window && (window.SVG3DTagCloud = p, window.SVG3dTagCloud = p, window.Svg3dTagCloud = p);
-export {
-  p as default
-};

package/src/components/3dcloudwords/index.vue

@@ -1,99 +0,0 @@
-<script setup>
-import wordclouds from './index.js'
-import { ref, onMounted, computed, onUnmounted } from 'vue'
-const emits = defineEmits(['svgClick'])
-const props = defineProps({
-  // 数据项
-  datas: {
-    type: Array,
-    default: () => []
-  },
-  // 配置项
-  settings: {
-    type: Object,
-    default: () => {}
-  }
-})
-
-const cloudContainerRef = ref()
-// 数据格式 需要包含 label、url、target、color 四个字段，label是必填项，其余字段可选
-// const entries = [
-//   { label: 'Vue', url: 'https://vuejs.org', target: '_top', color: '#42b983' }
-// ]
-let settings = {
-  children: props.datas, // 选择文本或图像标签
-  width: 400, // 默认宽度
-  height: 400, // 默认高度
-  radius: '65%', // 标签云的半径百分比
-  radiusMin: 75, // 标签云的最小半径（像素）
-  isDrawSvgBg: true, // 是否绘制SVG背景
-  svgBgColor: '#fff', // 背景颜色
-  opacityOver: 1.0, // 悬停时的不透明度
-  opacityOut: 0.3, // 未悬停时的不透明度
-  opacitySpeed: 6, // 不透明度过渡速度
-  fov: 800, // 摄像机视场
-  speed: 0.2, // 旋转速度
-  fontFamily: 'Oswald, Arial, sans-serif', // 字体系列
-  fontSize: '14', // 字体大小
-  fontColor: '#fff', // 字体颜色
-  fontWeight: 'bold', // 字体粗细
-  fontStyle: 'normal', // 字体样式
-  fontStretch: 'narrower', // 字体拉伸
-  fontToUpperCase: true, // 将文本转换为大写
-  tooltipFontFamily: 'Oswald, Arial, sans-serif', // 工具提示的字体系列
-  tooltipFontSize: '12', // 工具提示的字体大小
-  tooltipFontColor: '#fff', // 工具提示的字体颜色
-  tooltipFontWeight: 'normal', // 工具提示的字体粗细
-  tooltipFontStyle: 'italic', // 工具提示的字体样式
-  tooltipFontStretch: 'normal', // 工具提示的字体拉伸
-  tooltipFontToUpperCase: false, // 工具提示文本是否转换为大写
-  tooltipTextAnchor: 'center', // 工具提示的文本锚点
-  tooltipDiffX: 10, // 工具提示的水平偏移量
-  tooltipDiffY: 10, // 工具提示的垂直偏移量
-  animatingSpeed: 0.01, // 动画速度
-  animatingRadiusLimit: 1.3 // 动画的最大半径
-}
-
-const _settings = computed(() => {
-  let s = {
-    ...settings,
-    ...props.settings
-  }
-
-  return s
-})
-//点击事件
-const handleTextClick = (event) => {
-   
-  // 检查点击的元素是否是 <text> 标签
-  if (event.target.tagName === 'text' || event.target.tagName === 'TEXT') {
-    // 获取 <text> 标签的文本内容
-    const textContent = event.target.textContent
-   if(textContent){
-        emits('svgClick',textContent)
-   }
-  }
-}
-onMounted(() => {
-  new wordclouds(document.getElementById('bd_cloud_container'), _settings.value).build()
-
-  if (cloudContainerRef.value) {
-    
-    cloudContainerRef.value.addEventListener('click', handleTextClick)
-  }
-})
-onUnmounted(() => {
-  
-  if (cloudContainerRef.value) {
-    cloudContainerRef.value.removeEventListener('click', handleTextClick)
-  }
-})
-</script>
-
-<template>
-  <div>
-    <div id="bd_cloud_container" ref="cloudContainerRef"></div>
-  </div>
-</template>
-
-<style scoped></style>

package/src/components/3dcloudwords/readme.md

@@ -1,66 +0,0 @@
-
-# 3D词云组件 使用说明
-
-
-```
-import {BdWordsCloud} from '@bdsoft/element'
-
-// 词云点击事件
-const handleSvgClick = (title)=>{
-    debugger
-}
-
- <BdWordsCloud @svgClick="handleSvgClick" :datas="wordscloudData"  :settings="{ width: 300,height:300 }"></BdWordsCloud>
-
-// 测试数据 --数据格式 需要包含 label、url、target、color 四个字段，label是必填项，其余字段可选
-const entries = [
-  { label: 'Vue', url: 'https://vuejs.org', target: '_top', color: '#42b983' },
-  { label: 'Three.js', url: 'https://threejs.org', target: '_top', color: '#ff6347' },
-  { label: '3D', url: '#', target: '_top', color: '#1e90ff' },
-  { label: 'JavaScript', url: 'https://develoavaScript', target: '_top', color: '#f0db4f' },
-]
-
-```
-## 配置说明
-```
-// 配置项说明（英文翻译为中文）
-const settingsDescription = {
-  children: "代表要显示的标签的对象数组。",
-  width: "标签云的宽度，以像素为单位。默认值为400。",
-  height: "标签云的高度，以像素为单位。默认值为400。",
-  radius: "标签云的半径。可以是像素值或容器大小的百分比。默认值为'65%'。",
-  radiusMin: "标签云的最小半径，以像素为单位。默认值为75。",
-  isDrawSvgBg: "是否绘制SVG背景。默认值为false。",
-  svgBgColor: "SVG背景的颜色。默认值为'#fff'。",
-  opacityOver: "悬停时标签云的不透明度。默认值为1.0。",
-  opacityOut: "标签未悬停时的不透明度。默认值为0.3。",
-  opacitySpeed: "不透明度过渡的速度。默认值为6。",
-  fov: "摄像机的视场。默认值为800。",
-  speed: "标签云的旋转速度。默认值为0.1。",
-  fontFamily: "标签使用的字体系列。默认值为'Oswald, Arial, sans-serif'。",
-  fontSize: "标签的字体大小。默认值为'15'。",
-  fontColor: "标签的字体颜色。默认值为'#fff'。",
-  fontWeight: "标签的字体粗细。默认值为'normal'。",
-  fontStyle: "标签的字体样式。默认值为'normal'。",
-  fontStretch: "标签的字体拉伸。默认值为'narrower'。",
-  fontToUpperCase: "是否将标签文本转换为大写。默认值为true。",
-  tooltipFontFamily: "工具提示的字体系列。默认值为'Oswald, Arial, sans-serif'。",
-  tooltipFontSize: "工具提示的字体大小。默认值为'12'。",
-  tooltipFontColor: "工具提示的字体颜色。默认值为'#fff'。",
-  tooltipFontWeight: "工具提示的字体粗细。默认值为'normal'。",
-  tooltipFontStyle: "工具提示的字体样式。默认值为'italic'。",
-  tooltipFontStretch: "工具提示的字体拉伸。默认值为'normal'。",
-  tooltipFontToUpperCase: "是否将工具提示文本转换为大写。默认值为false。",
-  tooltipTextAnchor: "工具提示的文本锚点。默认值为'left'。",
-  tooltipDiffX: "工具提示的水平偏移量。默认值为10。",
-  tooltipDiffY: "工具提示的垂直偏移量。默认值为10。",
-  animatingSpeed: "动画速度。默认值为0.01。",
-  animatingRadiusLimit: "动画的最大半径。默认值为1.3。"
-};
-```
-
-
-
-
-
-https://www.npmjs.com/package/svg-3d-tag-cloud?activeTab=readme