@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/components/SnowFlakeChart/line/LineArrow.js

@@ -0,0 +1,62 @@
+/**
+ * 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 { direction } from '../CommonConstant';
+
+class Line2G {
+  constructor({ ctx, imageList, canvasWidth, direction }, verCenterPoint, interval, lineStrokeColor, intervalType) {
+    this.ctx = ctx;
+    this.imageList = imageList;
+    this.verCenterPoint = verCenterPoint;
+    this.canvasWidth = canvasWidth;
+    this.direction = direction;
+    this.interval = interval;
+    this.intervalType = intervalType;
+  }
+
+  draw() {
+    const { image2R, image2L, image5R, image5L, wirelessR, wirelessL } = this.imageList;
+    const { left } = direction;
+    for (let i = 0; i < this.canvasWidth; i++) {
+      let image;
+      if (this.direction === left) {
+        switch (this.intervalType) {
+          case '2.4G':
+            image = image2L.image;
+            break;
+          case '5G':
+            image = image5L.image;
+            break;
+          case 'wireless':
+            image = wirelessL.image;
+            break;
+        }
+      } else {
+        switch (this.intervalType) {
+          case '2.4G':
+            image = image2R.image;
+            break;
+          case '5G':
+            image = image5R.image;
+            break;
+          case 'wireless':
+            image = wirelessR.image;
+            break;
+        }
+      }
+      if (i % this.interval === 0) {
+        this.ctx.drawImage(image, i, this.verCenterPoint);
+      }
+    }
+  }
+}
+
+export default Line2G;

package/src/components/charts/components/SnowFlakeChart/line/LineDashed.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ */
+class LineDashed {
+  constructor({ ctx, canvasWidth, canvasHeight }, verCenterPoint, interval, lineStrokeColor) {
+    this.ctx = ctx;
+    this.canvasWidth = canvasWidth;
+    this.canvasHeight = canvasHeight;
+    this.lineStrokeColor = lineStrokeColor;
+  }
+  draw() {
+    this.ctx.moveTo(0, this.canvasHeight / 2);
+    this.ctx.lineTo(this.canvasWidth, this.canvasHeight / 2);
+    this.ctx.lineWidth = 2;
+    this.ctx.strokeStyle = this.lineStrokeColor;
+    this.ctx.setLineDash([5, 5]);
+    this.ctx.stroke();
+  }
+}
+
+export default LineDashed;

package/src/components/charts/components/SnowFlakeChart/line/LineDotted.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ */
+class LineDotted {
+    constructor({ ctx, canvasWidth, canvasHeight }, verCenterPoint, interval, lineStrokeColor) {
+        this.ctx = ctx;
+        this.canvasWidth = canvasWidth;
+        this.canvasHeight = canvasHeight;
+        this.lineStrokeColor = lineStrokeColor;
+    }
+    draw() {
+        this.ctx.fillStyle = this.lineStrokeColor;
+        const size = 1
+        for (let i = 0; i < this.canvasWidth; i += size * 2 * 2) {
+            this.ctx.arc(i, this.canvasHeight / 2, size, 0, Math.PI * 2)
+        }
+        this.ctx.fill();
+    }
+}
+
+export default LineDotted;

package/src/components/charts/components/SnowFlakeChart/line/LineStraight.js

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ *
+ */
+class LineStraight {
+  constructor({ ctx, canvasWidth, canvasHeight }, verCenterPoint, interval, lineStrokeColor) {
+    this.ctx = ctx;
+    this.canvasWidth = canvasWidth;
+    this.canvasHeight = canvasHeight;
+    this.lineStrokeColor = lineStrokeColor;
+  }
+  draw() {
+    this.ctx.moveTo(0, this.canvasHeight / 2);
+    this.ctx.lineTo(this.canvasWidth, this.canvasHeight / 2);
+    this.ctx.lineWidth = 2;
+    this.ctx.strokeStyle = this.lineStrokeColor;
+    this.ctx.stroke();
+  }
+}
+
+export default LineStraight;

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

@@ -0,0 +1,202 @@
+/**
+ * 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 { pxToNumber, insertDom, getStyle, degPositive, getUnitText, getTextWidth, extractNumbersAndDots, judgeDisabled, pctToNumber, setDirection, setStyle } from '../util.js';
+import { radioType, direction, interval, textStyle, tagPosition } from '../CommonConstant.js';
+import LineStraight from './LineStraight.js';
+import LineArrow from './LineArrow.js';
+import LineDashed from './LineDashed.js';
+import LineDotted from './LineDotted.js';
+
+const LineFactory = {
+  [radioType.TYPE_Straight]: LineStraight,
+  [radioType.TYPE_Arrow]: LineArrow,
+  [radioType.TYPE_Dashed]: LineDashed,
+  [radioType.TYPE_Dotted]: LineDotted,
+};
+export default class LineManager {
+  constructor({ lineWrapper, leafNode }, data, deg, { imageList, option, centerDom, distance, drag }, isSubRoot, tagWidth) {
+    this.isSubRoot = isSubRoot;
+    this.container = lineWrapper;
+    this.data = data;
+    this.option = option;
+    this.deg = degPositive(deg); // 判断方向前，控制角度在0-360区间
+    this.imageList = imageList; // canvas用到的图片实例
+    this.canvasWidth;
+    this.canvasHeight = 150;
+    this.direction = setDirection(this.deg);
+    this.canvas;
+    this.ctx;
+    this.iconSize = 10; // 上下行速率图标尺寸
+    this.distance = distance;
+    this.centerDom = centerDom.dom;
+    this.leafNode = leafNode.dom;
+    this.drag = drag;
+    this.tagWidth = isSubRoot ? 0 : tagWidth;
+    this.createCanvas();
+    this.draw();
+  }
+
+  // 获取canvas的宽度
+  createCanvas() {
+    const containerWidth = pxToNumber(getStyle(this.container, 'width')); // 连线分组容器的宽度
+    let centerDomWidth = pxToNumber(getStyle(this.centerDom, 'width')); // 中心dom的宽度
+    let centerparentWidth = pxToNumber(getStyle(this.centerDom.parentNode, 'width')); // 中心dom外环的宽度
+    let leafNodeWidth = pxToNumber(getStyle(this.leafNode, 'width')); // 叶子dom的宽度
+    this.canvasWidth = containerWidth / 2 - centerDomWidth / 2;
+    if (this.isSubRoot) { // 主从网关的连线，需要考虑distance属性
+      // data.distance  只是为了让巴展那边调整主网关上行设备的距离，不推荐使用
+      // this.distance是主网关的最右侧到从网关圆心的距离
+      this.canvasWidth = (this.data.distance || this.distance) - leafNodeWidth / 2 + centerparentWidth / 2 - centerDomWidth / 2;
+    }
+
+    const { left } = direction;
+    // 判断canvas所在的角度，如果是在三四象限，修改canvas的样式(为了解决旋转导致的文本镜像问题)
+    let canvasStyle;
+    if (this.direction === left) {
+      canvasStyle = {
+        right: `calc(50% + ${centerDomWidth / 2}px)`,
+        transformOrigin: `calc(100% + ${centerDomWidth / 2}px) center`,
+        transform: `translate(0,-50%) rotate(${this.deg - 180}deg)`
+      };
+    } else {
+      canvasStyle = {
+        left: `calc(50% + ${centerDomWidth / 2}px)`,
+        transformOrigin: `${-1 * centerDomWidth / 2}px center`,
+        transform: `translate(0,-50%) rotate(${this.deg}deg)`
+      };
+    }
+
+    this.canvas = insertDom(this.container,
+      {
+        class: 'sfc-line-item',
+        width: this.canvasWidth * 2,
+        height: this.canvasHeight * 2,
+      },
+      { ...canvasStyle }, 'canvas');
+    this.ctx = this.canvas.getContext('2d');
+    // 确保字体清晰
+    this.canvas.style.width = this.canvasWidth + 'px';
+    this.canvas.style.height = this.canvasHeight + 'px';
+    this.ctx.scale(2, 2);
+  }
+
+  // 卸载canvas
+  destroyCanvas() {
+    this.container.removeChild(this.canvas);
+  }
+
+  // 绘制canvas连线
+  draw() {
+    judgeDisabled(this.option, [this.canvas]);
+    // overAll视图，非次级根节点，不生成划线和文本
+    if (this.option.overAll && !this.isSubRoot) {
+      return;
+    }
+    this.ctx.clearRect(0, 0, 10000, 10000);
+    this.ctx.beginPath();
+    // canvas 纵向绘制起始点
+    const verCenterPoint = (this.canvasHeight - this.iconSize) / 2;
+    this.drawLine(verCenterPoint);
+    if (!this.option.overAll && this.option.scaleAdaptive) { // 家庭视口
+      const scale = this.drag.scale;
+      if (scale >= 0.5 && scale <= 0.75) { // 0.5-0.75 隐藏叶子节点的canvas、文本
+        !this.isSubRoot && setStyle(this.canvas, { display: 'none' });
+      } else if (scale > 0.75 && scale < 0.95) { // 0.75-0.95 展示canvas不展示文本
+        setStyle(this.canvas, { display: 'block' });
+      } else if (scale >= 0.95 && scale <= 1.5) {
+        this.drawText(verCenterPoint); // 0.95-1.5 正常展示
+        setStyle(this.canvas, { display: 'block' });
+      }
+    } else { // 全网视口正常展示文本和canvas
+      this.drawText(verCenterPoint);
+      setStyle(this.canvas, { display: 'block' });
+    }
+    this.ctx.closePath();
+  }
+
+  drawLine(verCenterPoint) {
+    const { connectInterface, lineStrokeColor } = this.data;
+    let lineType;
+    let intervalType;
+    if (connectInterface.indexOf('SSID') !== -1) {
+      lineType = 'Arrow';
+      intervalType = connectInterface.slice(5);
+    } else if (connectInterface.indexOf('wireless') !== -1) {
+      lineType = 'Arrow';
+      intervalType = 'wireless';
+    } else if (connectInterface.indexOf('Dashed') !== -1) {
+      lineType = 'Dashed';
+    } else if (connectInterface.indexOf('Dotted') !== -1) {
+      lineType = 'Dotted';
+    } else {
+      lineType = 'Straight';
+    }
+    const line = new LineFactory[lineType](this, verCenterPoint, interval[intervalType], lineStrokeColor, intervalType);
+    line.draw();
+  }
+
+  // 待调整  提到drawline内部
+  drawText(verCenterPoint) {
+    const { imageUp, imageDown } = this.imageList;
+    const { upRate, downRate } = this.data;
+    const { left } = direction;
+    const maxTextWidth = Math.max(getTextWidth(upRate), getTextWidth(downRate));
+    // canvas 横向绘制起始点  // 设备取居中往内偏位置
+    let actualCanvasRatio = (100 - (100 - tagPosition) * 2) / 100; // 文本在tag和中心点之间的位置
+    let horCenterPoint;
+    if (this.direction === left) {
+      horCenterPoint = this.canvasWidth - maxTextWidth - (this.canvasWidth * actualCanvasRatio - maxTextWidth - this.tagWidth) / 2;
+    } else {
+      horCenterPoint = (this.canvasWidth * actualCanvasRatio - maxTextWidth - this.tagWidth) / 2;
+    }
+    // let horCenterPoint = (this.canvasWidth - maxTextWidth) / (this.direction === left ? 2 * 0.6 : 2 / 0.6);
+    if (this.isSubRoot) {  // 主从网关默认去居中位置
+      horCenterPoint = (this.canvasWidth - maxTextWidth) / 2;
+    }
+    const { font, bgStyle, fillStyle, unitStyle } = textStyle(this.option.theme);
+    this.ctx.font = font;
+
+    // // 上文字背景块，文字居中往左移24
+    // this.ctx.roundRect(horCenterPoint - 24, verCenterPoint - 28, maxTextWidth + 24 + 8, 24, 12);
+    // // 下文字背景块
+    // this.ctx.roundRect(horCenterPoint - 24, verCenterPoint + 12, maxTextWidth + 24 + 8, 24, 12);
+    // this.ctx.fillStyle = bgStyle;
+    // this.ctx.fill();
+
+    if (upRate) {
+      this.ctx.fillStyle = fillStyle;
+      // 上行icon,文本居中往左移16
+      this.ctx.drawImage(imageUp.image, horCenterPoint - 16, verCenterPoint - 12, this.iconSize, this.iconSize);
+      // 上行速率，文本居中
+      this.ctx.fillText(extractNumbersAndDots(upRate), horCenterPoint, verCenterPoint - 2);
+      // 上行单位
+      this.ctx.fillStyle = unitStyle;
+      this.ctx.fillText(getUnitText(upRate), horCenterPoint + getTextWidth(extractNumbersAndDots(upRate)) + 4, verCenterPoint - 2);
+    }
+    if (downRate) {
+      this.ctx.fillStyle = fillStyle;
+      // 下行icon,文本居中往左移16
+      this.ctx.drawImage(imageDown.image, horCenterPoint - 16, verCenterPoint + 12, this.iconSize, this.iconSize);
+      // 下行速率,文本居中
+      this.ctx.fillText(extractNumbersAndDots(downRate), horCenterPoint, verCenterPoint + 22);
+      // 下行单位
+      this.ctx.fillStyle = unitStyle;
+      this.ctx.fillText(getUnitText(downRate), horCenterPoint + getTextWidth(extractNumbersAndDots(downRate)) + 4, verCenterPoint + 22);
+    }
+  }
+
+  // 刷新数据的方法
+  refreshData(data) {
+    this.data = data !== undefined ? data : this.data;
+    this.draw();
+  }
+}