@ebiz/designer-components 0.0.47 → 0.0.49

package/src/components/charts/components/SnowFlakeChart/defaultOption.js

@@ -1,285 +0,0 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import { setStyle, getSingle } from './util';
-import defendXSS from '../../util/defendXSS';
-
-// 主从网关。
-const rootDefault = (data, nodeContainer, isRoot, option, scale) => {
-  const { theme, overAll } = option;
-  setStyle(nodeContainer, {
-    width: isRoot ? '150px' : '110px',
-    height: isRoot ? '150px' : '110px',
-  });
-  const { single, singleTextColor } = getSingle(data, isRoot ? 'root' : 'ap');
-  let mainColor = theme.indexOf('dark') !== -1 ? '#f5f5f5' : '#191919';
-  let subColor = theme.indexOf('dark') !== -1 ? '#bbbbbb' : '#999999';
-  nodeContainer.innerHTML = `
-  <div class='centerNode_defaultRender'>
-    <img 
-      class=${isRoot ? 'rootImg' : 'apImg'}  
-      src='./image/device/${defendXSS(data.deviceType)}.png' 
-      draggable=false>
-    </img>
-    <div 
-      class='deviceName ${isRoot ? 'rootName' : 'apName'}' 
-      style='color:${mainColor};' 
-      title=${defendXSS(data.deviceName)}>
-      ${defendXSS(data.deviceName)}
-    </div>
-    <div 
-      class='onlineDuration' 
-      style='color:${subColor};display:${data.onlineDuration ? 'block' : 'none'};' 
-      title=${defendXSS(data.onlineDuration)}>
-      ${defendXSS(data.onlineDuration)}
-    </div>
-    <div 
-      style='color:${defendXSS(singleTextColor)};display:${single ? 'block' : 'none'}' 
-      title=${defendXSS(single)}>
-      ${defendXSS(single)}
-    </div>
-    <div 
-      style='color:${subColor};display:${data.trafficStatistics ? 'block' : 'none'}' 
-      title=${defendXSS(data.trafficStatistics)}>
-      ${defendXSS(data.trafficStatistics)}
-    </div>
-    <div 
-      class='terminalNumTip'
-      style='color:${mainColor}'>
-      终端：${data.children?.filter(item => !item.isAP).length || 0}个
-    </div>
-  </div>`;
-
-  if (scale >= 0.5 && scale < 0.95) {
-    nodeContainer.innerHTML = `
-    <div class='centerNode_defaultRender'>
-      <div 
-        class='deviceName ${isRoot ? 'rootName' : 'apName'}' 
-        style='color:${mainColor};' 
-        title=${defendXSS(data.deviceName)}>
-        ${defendXSS(data.deviceName)}
-      </div>
-    </div>`;
-  }
-};
-
-const overAllTag = (data, tagContainer) => {
-  // tag节点
-  setStyle(tagContainer, {
-    width: 0,
-    height: 0,
-    border: 0
-  });
-  tagContainer.innerHTML = null;
-};
-
-// 正常态叶子节点样式
-const houseLeaf = (data, nodeContainer, isActive, theme, scale) => {
-  setStyle(nodeContainer, {
-    width: '100px',
-    height: '100px',
-    display: 'block'
-  });
-  let imageSrc = data.deviceType;
-  let imgBg = 'staSelected'; // 终端选中态的图片周边阴影
-  if (data.faultNumber) {
-    imageSrc += '_error';
-    imgBg += '_error';
-  }
-  if (isActive) {  // 点击态的图片
-    imageSrc = data.deviceType;
-  } else {
-    imgBg = 'unset';
-  }
-  const { single, singleTextColor } = getSingle(data, 'leaf');
-  let mainColor = theme.indexOf('dark') !== -1 ? '#ffffff' : '#191919';
-  let subColor = theme.indexOf('dark') !== -1 ? '#bbbbbb' : '#999999';
-  let leafBg = theme.indexOf('dark') !== -1 ? 'rgba(25,25,25,.6)' : 'rgba(25,25,25,.1)';
-  let HTMLstr = `
-  <div class='leafNode_defaultRender'>
-    <div class='imgBg' 
-      style='background:${imgBg !== 'unset' ? `url(./image/device/${defendXSS(imgBg)}.svg)` : imgBg};'>
-      <img 
-        src='./image/device/${defendXSS(imageSrc)}.svg' 
-        draggable=false>
-      </img>
-      <div class='deviceName' 
-        style='color:${mainColor};' 
-        title=${defendXSS(data.deviceName)}>
-        ${defendXSS(data.deviceName)}
-      </div>
-      <div 
-        style='color:${defendXSS(singleTextColor)};display:${single ? 'block' : 'none'}' 
-        title=${defendXSS(single)}>
-        ${defendXSS(single)}
-      </div>
-      <div 
-        style='color:${subColor};display:${data.trafficStatistics ? 'block' : 'none'}' 
-        title=${defendXSS(data.trafficStatistics)}>
-        ${defendXSS(data.trafficStatistics)}
-      </div>
-    </div>
-  </div>
-  <div class='leafNodeShadow'
-    style='background:${leafBg};display:${isActive ? 'none' : 'block'}'>
-  </div>`;
-  setTimeout(() => {
-    nodeContainer.innerHTML = HTMLstr;
-  }, 20);
-
-  if (scale >= 0.5 && scale <= 0.75) {
-    setStyle(nodeContainer, {
-      display: 'none'
-    });
-  }
-};
-
-const overAllLeaf = (data, nodeContainer, option) => {
-  setStyle(nodeContainer, { // 宽高用户可自定义配置。
-    width: '24px',
-    height: '24px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  });
-  nodeContainer.innerHTML = null;
-};
-/**
- * 全网
- * @param {*} param0
- * @param {*} data
- * @param {*} option
- */
-const handleOverall = ({ nodeContainer, tagContainer }, data, option) => {
-  if (data.isRoot || data.isAP || data.children && data.children.length) {
-    // 根节点(默认166*166)
-    if (data.isRoot || data.mac === option.data[0].mac) {
-      rootDefault(data, nodeContainer, true, option);
-    } else {
-      // 次级根节点(默认104*104)
-      rootDefault(data, nodeContainer, false, option);
-    }
-  } else {
-    // 叶子节点(默认38*38)
-    overAllLeaf(data, nodeContainer, option);
-  }
-  // tag节点
-  overAllTag(data, tagContainer);
-};
-
-const houseTag = (data, tagContainer, theme, scale) => {
-  const commonStyle = {
-    padding: '4px 12px',
-    background: theme.indexOf('dark') !== -1 ? '#191919' : '#ffffff',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '999px'
-  };
-  if (data.connectInterface?.indexOf('SSID') === -1 && data.connectInterface?.indexOf('wireless') === -1) {
-    setStyle(tagContainer, {
-      ...commonStyle,
-      border: '1px solid #777777',
-      display: data.connectInterface?.indexOf('PON') === -1 ? 'flex' : 'none',
-
-    });
-    tagContainer.innerHTML = `<div>${defendXSS(data.connectInterface.replace('Straight-', ''))}</div>`;
-  } else {
-    setStyle(tagContainer, {
-      ...commonStyle,
-      border: data.connectInterface?.indexOf('2.4G') !== -1 ? '1px solid #2070F3' : '1px solid #058358',
-      display: data.wifiChannel ? 'flex' : 'none',
-    });
-    setStyle(tagContainer, { // 当信道为三位数以下，固定宽度为40px
-      width: String(data.wifiChannel).length <= 2 ? '40px' : 'unset'
-    });
-    tagContainer.innerHTML = defendXSS(data.wifiChannel);
-  }
-  if (scale >= 0.5 && scale < 0.95) {
-    setStyle(tagContainer, {
-      display: 'none'
-    });
-  }
-};
-
-/**
- * 家庭
- * @param {*} param0
- * @param {*} data
- * @param {*} option
- */
-const handleHouse = ({ nodeContainer, tagContainer }, data, option, scale) => {
-  if (data.isRoot || data.isAP || data.children && data.children.length) {
-    // 根节点(默认166*166)
-    if (data.isRoot || data.mac === option.data[0].mac) {
-      rootDefault(data, nodeContainer, true, option, scale);
-    } else {
-      // 次级根节点(默认166*166)
-      rootDefault(data, nodeContainer, false, option, scale);
-    }
-  } else {
-    // 叶子节点(默认104*104)
-    const classList = nodeContainer?.parentNode?.classList || [];
-    const isActive = [...classList].indexOf('nodeActive') !== -1;
-    houseLeaf(data, nodeContainer, isActive, option.theme, scale);
-  }
-  // tag节点
-  houseTag(data, tagContainer, option.theme, scale);
-};
-
-const defaultOption = {
-  isLink: false,// 主网关是否预留一个位置
-  distance: {
-    minDistance: 200, // 全网视口，主从网关的圆心的最小距离
-    minDistanceDrill: 400 // 下钻视口，主从网关的圆心的最小距离
-  },
-  ratio: {
-    // 全网视口，递归生成的节点必定在minRatio-maxRatio之间，如果终端设备数量超过了该网关能展示的最大数量，后续终端不会展示出来，出现...
-    minRatio: 0.5, // 全网视口 递归节点的最小尺寸占比
-    maxRatio: 0.75, // 全网视口 递归节点的最大尺寸占比
-    // 家庭视口，如果终端设备数量超过了该网关能展示的最大数量，则允许尺寸占比超出maxRatioDrill
-    minRatioDrill: 0.7, // 家庭视口 递归节点的最小尺寸占比
-    maxRatioDrill: 0.8 // 家庭视口 递归节点的最大尺寸占比
-  },
-  overAll: true, // 是否为全局视口（节点变小，隐藏tag、line)
-  scaleAdaptive: false, // 家庭视口下，drag的不同缩放值会产生不同的视图（且首次进入家庭视口，会开启自适应缩放功能）
-  // 默认渲染配置
-  render: ({ nodeContainer, tagContainer }, data, option, scale) => {
-    if (option.overAll) {
-      // 全网
-      handleOverall({ nodeContainer, tagContainer }, data, option);
-    } else {
-      // 家庭
-      handleHouse({ nodeContainer, tagContainer }, data, option, option.scaleAdaptive ? scale : null);
-    }
-  }
-};
-
-const defaultToolTip = (data, isLeaf) => {
-  let HTMLstr = `
-  <div class='sfcTipContainer'>
-    <div>${data.deviceName}</div>
-    <div class='rateInfo'>
-      <img src='./image/device/up.svg' />
-      ${data.upRate}
-    </div>
-    <div class='rateInfo'>
-      <img src='./image/device/down.svg' />
-      ${data.downRate}
-    </div>
-  </div>`;
-  if (!isLeaf) {
-    HTMLstr = '点击查看详细拓扑';
-  }
-  return HTMLstr;
-};
-
-export default defaultOption;
-export { defaultToolTip };

package/src/components/charts/components/SnowFlakeChart/index.js

@@ -1,408 +0,0 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-import { insertDom, onImageLoad, setDefault, arrFlat, isDataDisabled, compareRefresh, setAttribute, getDistance, pxToNumber, getStyle, setStyle, getAreaScope, getWaistLength } from './util.js';
-import BranchManager from './BranchManager.js';
-import BaseChart from '../BaseChart/index.js';
-import defaultOption from './defaultOption.js';
-import { tagPosition } from './CommonConstant.js';
-import image5R from './assets/image5R.svg';
-import image5L from './assets/image5L.svg';
-import image2R from './assets/image2R.svg';
-import image2L from './assets/image2L.svg';
-import imageUp from './assets/up.svg';
-import imageDown from './assets/down.svg';
-import wirelessR from './assets/wirelessR.svg';
-import wirelessL from './assets/wirelessL.svg';
-import { CHART_TYPE } from '../../util/constants.js';
-
-// 1、在全网进行缩放会影响家庭的canvas连线和定位 ok
-// 2、悬浮提示框的定位问题   ok
-// 3、branchManager代码整理
-// 下钻前得到缩放不回印象下钻后的，下钻后开启自适应。
-
-// 最顶层：用来管理所有branch和下转功能
-export default class SnowFlakeChart extends BaseChart {
-
-  static name = CHART_TYPE.SNOWFLAKE;
-
-  constructor() {
-    super();
-    this.dom;
-    this.drag;
-    this.option;
-    this.data;
-    this.branchs = []; // branch的集合
-    this.renderCallBack = null; // 图表渲染完毕的回调
-    this.firstRecordStatus = true; // 只需要在首次获取到0.5-0.75 缩放值的时候，记录下主从网关的距离、宽高等。 不需要每次都记录，会导致0.75-0.5过渡也记录，再切换到1的时候，视图异常。
-  }
-
-  init(dom) {
-    this.dom = dom;
-    this.dom.innerHTML = '';
-    this.container = insertDom(this.dom);
-  }
-
-  setSimpleOption(chartName, option, { drag }) {
-    setDefault(option, defaultOption);
-    this.data = option.data;
-    this.option = option;
-    this.drag = drag;
-    setAttribute(this.container, { class: `sfc-container ${option.overAll ? 'overAll' : ''}` });
-  }
-
-  setResize() {
-
-  }
-
-  // 首次render需要等所有内置的图片全部加载完毕
-  render(assets, callback) {
-    this.initImage(assets);
-    onImageLoad(this.imageList, () => {
-      this.renderBranch();
-      callback && callback();
-    });
-    // 监听drag：每次达到预设的缩放界限值时，触发视图更新
-    window.addEventListener('dragScaleChange', this.dragScaleChange.bind(this));
-  }
-
-  // 创建canvas用到图片的实例对象
-  initImage(assets = {}) {
-    this.imageList = {
-      'image5R': { src: assets.image5R || image5R },
-      'image5L': { src: assets.image5L || image5L },
-      'image2R': { src: assets.image2R || image2R },
-      'image2L': { src: assets.image2L || image2L },
-      'imageUp': { src: assets.imageUp || imageUp },
-      'imageDown': { src: assets.imageDown || imageDown },
-      'wirelessR': { src: assets.wirelessR || wirelessR },
-      'wirelessL': { src: assets.wirelessL || wirelessL }
-    };
-    for (let item in this.imageList) {
-      if (Object.hasOwnProperty.call(this.imageList, item)) {
-        const img = new Image();
-        img.src = this.imageList[item]['src'];
-        this.imageList[item]['image'] = img;
-      }
-    }
-  }
-
-  renderBranch() {
-    if (this.option.theme.indexOf('dark') === -1) {
-      this.container.classList.add('snowLight');
-    }
-    if (this.data && this.data.length > 0) {
-      this.data.forEach((dataItem) => {
-        this.branchs.push(new BranchManager(dataItem, this.container, this));
-      });
-      // 判断数据的disabled，给外层容器挂上类名,设置容器外环的样式
-      isDataDisabled(arrFlat(this.data), this.container, this.option);
-    }
-    if (!this.option.overAll) {
-      this.setPositionLeft();
-      this.setTransformOrigin();
-      this.setTagPosition();
-    }
-    // 首次进入家庭视口，开启自适应缩放功能后，寻找合适的drag缩放值
-    this.findFitScale();
-    setTimeout(() => {
-      this.renderCallBack && this.renderCallBack(this);
-    }, 0);
-  }
-
-  // 考虑多个多终端的容器，相邻不得重叠。需要调整其定位值
-  // 这样的方法有bug会导致两个很小的从网关之间插了个很大的从网关。从网关到主网关的连线会特别长
-  setPositionLeft() {
-    const centerDomArr = [...this.branchs[0].centerDomArr];
-    centerDomArr.splice(0, 1);
-    centerDomArr.forEach((item, index) => {
-      const { equalDeg, data: { level } } = item;
-      const itemBranch = item.container.parentNode.parentNode;
-      const itemBranchWidth = pxToNumber(getStyle(itemBranch, 'width'));
-      // newLeftVal和oldLeftVal得到的都是从主网关最右侧到从网关圆心的距离，定位直接从100%开始累计
-      let newLeftVal = (itemBranchWidth / 2 + 40) / Math.sin(equalDeg / 2 * Math.PI / 180)
-        - pxToNumber(getStyle(itemBranch.parentNode, 'width')) / 2; // 给相邻容器设置一个40的间隔
-      let oldLeftVal = pxToNumber(getStyle(itemBranch, 'left'))
-        - pxToNumber(getStyle(itemBranch.parentNode, 'width'));
-      if (newLeftVal > oldLeftVal) {
-        // 进入到这个判断内说明是个多终端的从网关，要计算最合适的newLeftVal
-        if (centerDomArr.length >= 3) { // 获取其相邻branch的尺寸
-          let sameLevelArr = centerDomArr.filter((node) => node.data.level === level);
-          let getIndex = sameLevelArr.findIndex(same => same.data.mac === item.data.mac);
-          const lastBranch = sameLevelArr[getIndex - 1 === -1 ? sameLevelArr.length - 1 : getIndex - 1].container.parentNode.parentNode;
-          const nextBranch = sameLevelArr[getIndex + 1 === sameLevelArr.length ? 0 : getIndex + 1].container.parentNode.parentNode;
-          const lastBranchWidth = pxToNumber(getStyle(lastBranch, 'width'));
-          const nextBranchWidth = pxToNumber(getStyle(nextBranch, 'width'));
-          if (itemBranchWidth > lastBranchWidth && itemBranchWidth > nextBranchWidth) { // 至少满足当前分支要大于兄弟分支的尺寸(有bug，待解决)
-            const minEqual = itemBranchWidth / (Math.max(lastBranchWidth, nextBranchWidth) + itemBranchWidth + 40) * equalDeg;
-            newLeftVal = (itemBranchWidth / 2 + 40) / Math.sin(minEqual * Math.PI / 180)
-              - pxToNumber(getStyle(itemBranch.parentNode, 'width')) / 2;
-          }
-        }
-        itemBranch.style.left = `calc(100% + ${newLeftVal}px)`;
-      }
-    });
-  }
-
-  // 给所有的外环容器设置旋转中心（因为要等全部的外环大小确定下来，才能统一计算）
-  setTransformOrigin() {
-    const centerDomArr = this.branchs[0].centerDomArr;
-    centerDomArr.forEach((item, index) => {
-      if (index === 0) return;
-      let branchContainer = item.container;
-      while (!branchContainer.classList.contains('sfc-branch')) {
-        branchContainer = branchContainer.parentNode;
-      }
-      const centerNode = branchContainer.querySelector('.sfc-node-center');
-      const parentCenterNode = branchContainer.parentNode.querySelector('.sfc-node-center');
-      const scale = getStyle(this.drag.dom, 'transform').replace('matrix(', '').split(',')[0];
-      const distance = getDistance(centerNode, parentCenterNode) / scale;// getBoundingClientRect获取的x,y要去掉scale的影响。未避免用户修改，不直接从drag拿
-      branchContainer.style.transformOrigin = `calc(50% - ${distance}px) center`;
-      // 更新主从网关间的canvas连线
-      const centerLine = this.branchs[0].centerLineArr.find(line => line.data.mac === branchContainer.getAttribute('data-mac'));
-      centerLine.distance = distance - pxToNumber(getStyle(branchContainer.parentNode, 'width')) / 2;
-      centerLine.destroyCanvas();
-      centerLine.createCanvas();
-      centerLine.draw();
-    });
-  }
-
-  setTagPosition() {
-    const centerTagArr = this.branchs[0].centerTagArr;
-    centerTagArr.forEach((tag) => {
-      tag.setAngle();
-    });
-  }
-
-  // 切换下钻状态（需要重刷dom结构）,下钻后可以设置居中的dom。默认中心dom(允许传入mac，自定义居中的dom)下钻后居中
-  switchView(drill = true, mac, callback) {
-    if (!drill) this.drag.reset();// 取消下钻，切换为全网，恢复drag初始值
-    this.branchs.forEach((item) => {
-      item.centerDomArr[0].drillDown(drill, true, false, mac);
-    });
-    callback && callback();
-  }
-
-  // 已经是下钻状态下且状态不变（不用重刷dom结构），设置切换居中点
-  switchCenterByDrill(mac) {
-    this.branchs.forEach((item) => {
-      // 先去遍历一遍中心dom，判断是否一致
-      item.centerDomArr.forEach((center) => {
-        if (center.data.mac === mac) {
-          this.drag.moveTargetToCenter(center.dom);
-        }
-      });
-      // 再去遍历一遍叶子dom，判断是否一致
-      item.leafsArr.forEach((leaf) => {
-        if (leaf.node.data.mac === mac) {
-          this.drag.moveTargetToCenter(leaf.node.dom);
-        }
-      });
-    });
-  }
-
-  // 图表渲染完毕的回调
-  onRenderReady(callback) {
-    this.renderCallBack = callback;
-  }
-
-  // 销毁图表
-  uninstall() {
-    this.dom.innerHTML = '';
-    window.removeEventListener('dragScaleChange', this.dragScaleChange.bind(this));
-  }
-
-  // 移除所有的节点高亮状态
-  removeNodeActive() {
-    this.branchs.forEach((item) => {
-      item.centerDomArr.forEach((center) => {
-        if (center.dom.classList.contains('nodeActive')) {
-          center.dom.classList.remove('nodeActive');
-        }
-      });
-      item.leafsArr.forEach((leaf) => {
-        if (leaf.node.dom.classList.contains('nodeActive')) {
-          leaf.node.dom.classList.remove('nodeActive');
-          // 叶子节点高亮前后内部的dom变更了，需要重新调用一下它的渲染内容方法
-          leaf.node.insertContent();
-        }
-      });
-    });
-  }
-
-  // 刷新line，不会重构dom
-  refreshLine(data) {
-    this.data = data;
-    compareRefresh(data, this.branchs, {
-      centerArr: 'centerLineArr',
-      target: 'line'
-    }, this);
-  }
-
-  // 刷新tag，不会重构dom
-  refreshTag(data) {
-    this.data = data;
-    compareRefresh(data, this.branchs, {
-      centerArr: 'centerTagArr',
-      target: 'tag'
-    }, this);
-  }
-
-  // 刷新node，不会重构dom
-  refreshNode(data, callback) {
-    this.data = data;
-    compareRefresh(data, this.branchs, {
-      centerArr: 'centerDomArr',
-      target: 'node'
-    }, this);
-    callback && callback();
-  }
-
-  // 刷新option,会重构dom
-  refresh(option, callback) {
-    this.branchs = [];
-    this.container.innerHTML = null;
-    this.firstRecordStatus = true;
-    this.setSimpleOption(null, option, { drag: this.drag });
-    this.renderBranch();
-    callback && callback();
-  }
-
-  // 刷新data，会重构dom
-  refreshData(data, callback) {
-    this.option.data = data;
-    this.refresh(this.option, callback);
-  }
-
-  findFitScale(callback) {
-    if (!this.option.scaleAdaptive || this.option.overAll) return;
-    let dragScale = this.drag.scale;
-    let branchArr = Array.from(this.dom.querySelectorAll('.sfc-branch'));
-    let leafArr = Array.from(this.dom.querySelectorAll('.sfc-branch .sfc-node-item'));
-    let centerNodeArr = Array.from(this.dom.querySelectorAll('.sfc-branch .sfc-node-center'));
-    let { width: snowWidth, height: snowHeight } = getAreaScope(leafArr.length ? leafArr : branchArr);
-    const viewContainer = this.drag.container;
-    const { width: viewWidth, height: viewHeight, x, y } = viewContainer.getBoundingClientRect();
-    let fitScale;
-    // 判定scale=0.75时，能否显示全雪花图
-    if (viewWidth >= (snowWidth * 0.75 / dragScale) && viewHeight >= (snowHeight * 0.75 / dragScale)) {
-      // 0.75以上展示的下，不改变主从网关的距离,只需调整到合适的scale值
-      fitScale = Math.min(viewWidth / (snowWidth / dragScale), viewHeight / (snowHeight / dragScale));
-      fitScale = Math.min(this.drag.scaleLimit.max, Math.floor(fitScale * 10) / 10);
-      fitScale = Math.max(0.75, Math.floor(fitScale * 10) / 10);
-    } else {
-      // 0.75以上展示不下，需要拉近主从网关的距离,同时需调整到合适的scale值
-      this.lowScaleView();
-      let { width: snowWidth, height: snowHeight } = getAreaScope(centerNodeArr);
-      fitScale = Math.min(viewWidth / (snowWidth / dragScale), viewHeight / (snowHeight / dragScale));
-      fitScale = Math.min(0.75, Math.floor(fitScale * 10) / 10);
-      fitScale = Math.max(this.drag.scaleLimit.min, Math.floor(fitScale * 10) / 10);
-    }
-    this.drag.scale = fitScale;
-    this.drag.scaleDom(x + viewWidth / 2, y + viewHeight / 2, fitScale - dragScale, false);
-    const dragCurrentVal = this.drag.container.querySelector('.drag-currentVal');
-    dragCurrentVal.innerHTML = (fitScale * 100).toFixed(0) + '%';
-
-    this.refreshNode(this.data);
-    this.refreshLine(this.data);
-    this.refreshTag(this.data);
-
-    callback && callback();
-  }
-
-  dragScaleChange(e) {
-    if (this.option.overAll || !this.option.scaleAdaptive) return;
-    const scale = e.detail.scaleVal;
-
-    // 0.75以下隐藏主从网关的外环边框，拉近主从网关的间距
-    if (scale >= 0.5 && scale <= 0.75) {
-      this.lowScaleView();
-      // 如果叶子节点居中的，但是缩小了，叶子节点都隐藏了，为了视觉效果，将整个图表居中
-      setTimeout(() => { this.drag.moveTargetToCenter(this.container); }, this.drag.throldHold);
-    } else {
-      this.highScaleView();
-    }
-
-    this.refreshNode(this.data);
-    this.refreshLine(this.data);
-    this.refreshTag(this.data);
-  };
-
-  // 0.5-0.75倍的显示
-  lowScaleView() {
-    // 拉近主从网关的间距
-    const branchArr = Array.from(this.dom.querySelectorAll('.sfc-branch'));
-    if (this.firstRecordStatus) {
-      setAttribute(branchArr[0], {
-        'data-width': branchArr[0].style.width,
-        'data-height': branchArr[0].style.height
-      });
-    }
-    branchArr[0].style.width = '150px';
-    branchArr[0].style.height = '150px';
-    branchArr.shift();
-    branchArr.forEach((branch, index) => {
-      let equalDeg = this.branchs[0].centerDomArr[index + 1].equalDeg;
-      let centerDomWidth = pxToNumber(getStyle(branch.querySelector('.sfc-node-center'), 'width'));
-      let distance = Math.max(getWaistLength(equalDeg, centerDomWidth + 20), this.option.distance.minDistanceDrill); // 避免ap重叠，需要动态计算distance
-      const parentBranchWidth = pxToNumber(getStyle(branch.parentNode, 'width'));
-      const centerLine = this.branchs[0].centerLineArr.find(item => item.data.mac === branch.getAttribute('data-mac'));
-      if (this.firstRecordStatus) {
-        setAttribute(branch, { // 需要将scle为1的left和transformOrigin记录下来；也需要将其width和height切换掉。不然中心节点无法点击，会被容器盖住
-          'data-left': branch.style.left,
-          'data-transformOrigin': branch.style.transformOrigin,
-          'data-distance': centerLine.distance,
-          'data-width': branch.style.width,
-          'data-height': branch.style.height
-        });
-      }
-      branch.style.transformOrigin = `calc(50% - ${distance}px) center`;
-      branch.style.left = `calc(100% + ${distance}px - ${parentBranchWidth / 2}px)`;
-      branch.style.width = '150px';
-      branch.style.height = '150px';
-      // 更新主从网关间的canvas连线     
-      centerLine.distance = distance - parentBranchWidth / 2;
-      centerLine.destroyCanvas();
-      centerLine.createCanvas();
-      centerLine.draw();
-    });
-    const coreContainerArr = this.dom.querySelectorAll('.sfc-core');
-    coreContainerArr.forEach(item => {
-      setStyle(item, { backgroundSize: 0 });
-    });
-    this.firstRecordStatus = false;
-  }
-
-  // 0.75-1.5倍的显示
-  highScaleView() {
-    if (this.firstRecordStatus) this.lowScaleView(); // 如果设备比较少，初始化scale的时候，没走lowScaleView。那么首次放大时需要这边手动调一次，拿到自定义数据
-    const branchArr = Array.from(this.dom.querySelectorAll('.sfc-branch'));
-    branchArr[0].style.width = branchArr[0].getAttribute('data-width');
-    branchArr[0].style.height = branchArr[0].getAttribute('data-height');
-    branchArr.shift();
-    branchArr.forEach(item => {
-      item.style.left = item.getAttribute('data-left');
-      item.style.transformOrigin = item.getAttribute('data-transformOrigin');
-      item.style.width = item.getAttribute('data-width');
-      item.style.height = item.getAttribute('data-height');
-      // 更新主从网关间的canvas连线
-      const centerLine = this.branchs[0].centerLineArr.find(line => line.data.mac === item.getAttribute('data-mac'));
-      centerLine.distance = item.getAttribute('data-distance');
-      centerLine.destroyCanvas();
-      centerLine.createCanvas();
-      centerLine.draw();
-    });
-    const coreContainerArr = this.dom.querySelectorAll('.sfc-core');
-    coreContainerArr.forEach(item => {
-      setStyle(item, { backgroundSize: '100% 100%' });
-    });
-  }
-}