@ebiz/designer-components 0.0.48 → 0.0.49

package/src/components/charts/components/OrganizationChart/RotateManager.js

@@ -1,349 +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 { isParent } from '../../util/dom';
-import { pointsDirection, getAngleByPoints } from '../../util/math';
-
-export default class RotateManager {
-    currentTarget = null; 
-
-    constructor(dom, option, selected, nodeManager) {
-        this.dom = dom;
-        this.data = option.data;
-        this.selected = selected;
-        this.nodeManager = nodeManager;
-        this.angles = this.nodeManager.angles;
-        this.drag = false;
-        if(option.autoRotate){
-            this.autoRotate(option.autoRotate);
-        }else{
-            this.initWarppersEvent();
-            this.initNodesEvent(this.dom);
-        }
-    }
-
-    // 绑定转轮拖动事件
-    initWarppersEvent(){
-        this.warppers = this.dom.getElementsByClassName('ozc_warpper');
-        Array.from(this.warppers).forEach((element, index) => {
-            element.addEventListener('mousedown', (e) => {
-                let currentTargetRect = e.currentTarget.getBoundingClientRect();
-                this.drag = false;
-                this.currentTarget = {
-                    dom: e.currentTarget, // 旋转元素
-                    index: index,         // 旋转层数
-                    center: {             // 旋转中心位置
-                        x: currentTargetRect.x + currentTargetRect.width / 2,
-                        y: currentTargetRect.y + currentTargetRect.height / 2,
-                    },
-                    startRotate: this.getRotateDeg(e.currentTarget), // 初始旋转角度
-                    startTouchPosition: { // 鼠标拖动的起始位置
-                        x: e.clientX,
-                        y: e.clientY
-                    },
-                    clockwise: undefined, // true 表示顺时针方向
-                }
-            });
-            element.addEventListener('mousemove', (e) => {
-                if(this.currentTarget){
-                    this.drag = true;
-                    // 当前拖动的层级
-                    let curLevel = this.currentTarget.index;
-                    // 鼠标拖动的当前位置
-                    this.currentTarget.endTouchPosition = { 
-                        x: e.clientX,
-                        y: e.clientY
-                    };
-                    // 是否为顺时针方向
-                    let clockwise = pointsDirection(
-                        this.currentTarget.center, 
-                        this.currentTarget.startTouchPosition, 
-                        this.currentTarget.endTouchPosition
-                    );
-                    // 旋转夹角，计算结论<=180°，要结合顺逆时判断是否>180°
-                    let angle = getAngleByPoints(
-                        this.currentTarget.center, 
-                        this.currentTarget.startTouchPosition, 
-                        this.currentTarget.endTouchPosition
-                    )[1];
-                    // 顺时针夹角为正，逆时针夹角为负
-                    if(this.currentTarget.clockwise === undefined){
-                        this.currentTarget.clockwise = clockwise;
-                    } else if (this.currentTarget.clockwise !== clockwise){ 
-                        // 用户旋转超过180度后，继续旋转, 极限是转到 350
-                        if(angle > 10){  
-                            angle = 360 - angle;
-                        // 用户向另一个方向旋转了
-                        }else{
-                            this.currentTarget.clockwise = clockwise;
-                        }
-                    }
-                    let rotate = angle;
-                    rotate = angle * (this.currentTarget.clockwise ? 1 : -1); 
-                    rotate = this.currentTarget.startRotate + rotate;
-                    // 旋转时产生的临时选中下标
-                    let selected = this.getSelected(rotate).selected;
-                    // 旋转前选中的下标
-                    let prevSelected = this.selected[curLevel];
-                    this.setRotateDeg(this.currentTarget.dom, curLevel, rotate, selected, prevSelected);
-                }                
-            });
-            element.addEventListener('mouseup', (e) => {
-                if(this.drag && this.currentTarget){
-                    let curIndex = this.currentTarget.index;
-                    let endRotate = this.getRotateDeg(this.currentTarget.dom);
-                    let result = this.getSelected(endRotate, true);
-                    endRotate = result.rotate;
-                    this.selected[curIndex] = result.selected
-                    // 刷新下层数据
-                    this.nodeManager.refreshWarpper(curIndex, this.selected);
-                    this.setRotateDeg(this.currentTarget.dom, curIndex,  endRotate, this.selected[curIndex], -1);
-                }
-                this.currentTarget = null;
-            });
-        });
-        this.dom.addEventListener('mouseleave', (e)=>{
-            if(this.drag && this.currentTarget){
-                let mouseupEvent = new Event('mouseup');
-                this.currentTarget.dom.dispatchEvent(mouseupEvent);
-                e.stopPropagation();
-                e.preventDefault();
-            }
-        })
-    }   
-
-    // 绑定卡片点击事件
-    initNodesEvent(container){
-        container.addEventListener('click', (e) => {
-            let parent = isParent(e.target, 'ozc_card');
-            if(!this.drag && parent){
-                let warpperIndex = parseInt(parent.getAttribute('data-warpper-index'));
-                let nodeIndex = parseInt(parent.getAttribute('data-node-index'));
-                let warpperDom = this.nodeManager.warppers[warpperIndex];
-                let moveIndex = this.selected[warpperIndex] - nodeIndex;
-                let rotate = this.angles[warpperIndex] * moveIndex * -1;
-                rotate = this.getRotateDeg(warpperDom) + rotate;
-                this.selected[warpperIndex] = nodeIndex;
-                this.setRotateDeg(warpperDom, warpperIndex,  rotate, nodeIndex, -1);
-                // 刷新下层数据
-                this.nodeManager.refreshWarpper(warpperIndex, this.selected);
-            }
-        });
-    }
-
-    /**
-     * 旋转 ozc_warpper
-     * dom: ozc_warpper元素
-     * domIndex： ozc_warpper下标
-     * rotate： ozc_warpper目标旋转角度
-     * selected： 当前选中的元素
-     * prevSelected： 拖拽过程前选中的元素（上一个选中元素）
-     */
-    setRotateDeg(dom, domIndex, rotate, selected, prevSelected){
-        dom.style.transform = ` translateX(-50%) translateY(-50%) rotate(${rotate}deg)`;
-        let data = this.nodeManager.getDepthData(this.data, domIndex);
-        // 逆向旋转ozc_card
-        Array.from(dom.getElementsByClassName('ozc_card')).forEach((element, index) => {
-            element.style.transform = `rotate(${-rotate}deg)`;
-            // 清空ozc_card，并重新绘制 selected 状态
-            element.innerHTML = '';
-            this.nodeManager.render && this.nodeManager.render(element, data[index], {
-                boss: false,
-                selected: selected === index ? true : false,
-                prevSelected: prevSelected === index ? true : false,
-            });
-        }); 
-    }
-
-    // 从DOM的内联样式上取出旋转角度
-    getRotateDeg(element){
-        let transform = element.style.transform;
-        let degIndex = transform.indexOf('deg)');
-        let rotateIndex = transform.indexOf('rotate(');
-        let targetRotate = parseFloat(transform.slice(rotateIndex + 'rotate('.length, degIndex));
-        return targetRotate;
-    }
-    
-    // 根据当前旋转角度计算出选中的单位, correct = true时表示需要对角度进行修正
-    getSelected(rotate, correct){
-        let curIndex = this.currentTarget.index;
-        let unitAngle = this.angles[curIndex];
-        // step1. 吸附到最近的 unitAngle 倍数上
-        if(Math.abs(rotate % unitAngle) >= unitAngle / 2){
-            if(rotate >= 0){
-                rotate = (Math.floor(rotate / unitAngle) + 1) * unitAngle;
-            }else{
-                rotate = (Math.ceil(rotate / unitAngle) - 1) * unitAngle;
-            }
-        }else{
-            if(rotate >= 0){
-                rotate = Math.floor(rotate / unitAngle) * unitAngle;
-            }else{
-                rotate = Math.ceil(rotate / unitAngle) * unitAngle;
-            }
-        }
-        // step2. 进行超限修正 
-        // 修正前旋转了多少位置
-        let dataLength = this.nodeManager.getDepthData(this.data, curIndex).length;
-        let changeIndex = (rotate - this.currentTarget.startRotate) / unitAngle;
-        let endIndex = parseInt(changeIndex.toFixed()) + this.selected[curIndex];
-        let selectedIndex = 0;
-        // 右侧超限需要回转
-        if(endIndex >= dataLength) {
-            selectedIndex = dataLength - 1; 
-            correct && (rotate = rotate - (endIndex - (dataLength - 1)) * unitAngle);
-        // 左侧超限需要回转
-        } else if (endIndex < 0){
-            selectedIndex = 0;
-            correct && (rotate = rotate + (Math.abs(endIndex)) * unitAngle);
-        // 正常范围内
-        } else {
-            selectedIndex = endIndex;
-        }
-        return {
-            rotate: rotate,
-            selected: selectedIndex
-        };
-    }
-
-    // 自动旋转
-    autoRotate(option){
-        let current = 0;
-        let speed = option.speed || 1;
-        let direction = option.direction || 'clockwise';
-        let warppers = this.dom.getElementsByClassName('ozc_warpper');
-        function rotate(){
-            if(direction === 'clockwise'){
-                current += speed;
-            }else{
-                current -= speed;
-            }
-            Array.from(warppers).forEach((element) => {
-                element.style.transform = ` translateX(-50%) translateY(-50%) rotate(${current}deg)`;
-                Array.from(element.getElementsByClassName('ozc_card')).forEach((card) => {
-                    card.style.transform = `rotate(${-current}deg)`;
-                }); 
-            });
-            window.requestAnimationFrame(rotate);
-        }
-        window.requestAnimationFrame(rotate);
-    }
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

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

@@ -1,124 +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 BaseChart from '../BaseChart';
-import RotateManager from './RotateManager';
-import NodeManager, { INIT_RADIUS } from './NodeManager';
-import { CHART_TYPE } from '../../util/constants';
-
-export default class OrganizationChart extends BaseChart {
-
-    static name = CHART_TYPE.ORGANIZATION
-    
-    constructor() {
-        super();
-        // 图表渲染容器
-        this.dom = null;
-        // 图表配置项
-        this.option = null;
-        // 图表所需数据
-        this.data = null;
-        // 图表容器的宽高变化监听器
-        this.resizeObserver = null;
-        // 生成节点和计算位置
-        this.nodeManager = null;
-        // 当前选中的组织index
-        this.selected = null;
-    }
-
-    // 初始化图表渲染容器
-    init(dom) {
-        this.dom = dom;
-    }
-
-    // 初始化图表渲染配置
-    setSimpleOption(chartName, option) {
-        this.option = option;
-    }
-
-    // 图表渲染回调
-    render() {
-        this.setResizeObserver();
-        this.renderCallBack && this.renderCallBack(this);
-    }
-
-    // 图表渲染完成时回调
-    onRenderReady(callback) {
-        this.renderCallBack = callback;
-    }
-
-    initDom() {
-        if(!this.data) return;
-        this.container = document.createElement('div');
-        this.container.setAttribute('class', 'ozc_container');
-        if(this.option.theme && this.option.theme.indexOf('dark') !== -1){
-            this.container.classList.add('ozc_container_dark');
-        }
-        for (const styleKey in this.option.position) {
-            if(Object.hasOwnProperty.call(this.option.position,styleKey)){
-                this.container.style[styleKey] = this.option.position[styleKey];
-            }         
-        }
-        this.dom.appendChild(this.container);
-        this.nodeManager = new NodeManager(this.container, this.option, this.selected);
-        this.rotateManager = new RotateManager(this.container, this.option, this.selected, this.nodeManager);
-    }
-
-    resizeDom() {
-        this.dom.innerHTML = '';
-        let domRect = this.dom.getBoundingClientRect();
-        let minSize = Math.min(domRect.width, domRect.height); 
-        this.option.radius = this.option.radius || INIT_RADIUS;
-        let radius = this.option.radius;
-        if(radius.minRatio !== undefined){
-            radius.min = radius.minRatio * minSize;
-        }
-
-        if(radius.gapRatio !== undefined){
-            radius.gap = radius.gapRatio * minSize;
-        }
-        this.data = this.option.data || [];
-        this.selected = this.option.selected || [1, 1];
-        this.initDom(); 
-    }
-
-    // 监听容器变化
-    setResizeObserver() {
-        this.resizeObserver = new ResizeObserver(entries => {
-            this.resizeDom();
-        });
-        this.resizeObserver.observe(this.dom);
-    }
-
-    // 图表刷新，刷新配置项
-    refresh(option) {
-        
-    }
-
-    // 图表刷新，仅刷新数据
-    refreshData(data) {
-       
-    }
-
-    // 销毁图表
-    uninstall() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-        }
-        this.dom.innerHTML = '';
-    }
-
-    // 刷新图表自适应宽度
-    setResize() {
-        this.resizeDom();
-    }
-}

package/src/components/charts/components/OrganizationChart/index.less

@@ -1,112 +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.
- *
- */
-.ozc_container{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-
-    .ozc_warpper{
-        top: 50%;
-        left: 50%;
-        position: absolute;
-        border-radius: 50%;
-        transform-origin: 50% 50%;
-        transition: all 200ms linear;
-        border-width: 1px;
-        &.ozc_no_inertia{
-            transition: none;
-        }
-        &::after {
-            top: 0;
-            left: 0;
-            content: "";
-            z-index: -1;
-            width: 100%;
-            height: 100%;
-            padding: 1px;
-            position: absolute;
-            border-radius: 50%;
-            background: var(--lineColor);;
-            mask-image: linear-gradient(#FFF, #FFF), linear-gradient(#FFF, #FFF);
-            mask-clip: content-box, padding-box;
-            mask-composite: exclude;
-            -webkit-mask-composite: destination-out;
-        }
-    }   
-
-    .ozc_warpper_line{
-        left: 50%;
-        width: 1px;
-        position: absolute;
-        transform: translateX(-50%);
-        background-color: #bbbbbb;
-    }
-
-    .ozc_warpper_rect{
-        left: 50%;
-        color: #5cacff;
-        line-height: 25px;
-        height: 25px;
-        width: 40px;
-        text-align: center;
-        font-size: 12px;
-        background-color: #fff;
-        position: absolute;
-        border-radius: 4px;
-        transform: translateX(-50%);
-        border: 1px solid #5cacff;
-    }
-
-    .ozc_warpper_empty{
-        left: 50%;
-        display: none;
-        font-size: 18px;
-        color: #bbbbbb;
-        text-align: center;
-        position: absolute;
-        transform: translateX(-50%);
-    }
-}
-
-// 深色主题
-.ozc_container_dark.ozc_container {
-    .ozc_warpper{
-        border-color: #676767;
-    }
-    .ozc_warpper_line{
-        background-color: #676767;
-    }
-    .ozc_warpper_rect{
-        color: #eeeeee;
-        border-color: #eeeeee;
-        background-color: #2e94ff;
-    }
-    .ozc_warpper_empty{
-        color: #bbbbbb;
-    }
-}
-
-.ozc_card{
-    width: 0;
-    height: 0;
-    position: absolute;
-    transition: all 100ms linear;
-    &.ozc_no_inertia{
-        transition: none;
-    }
-    img{
-        -webkit-user-drag:none;
-    }
-}

package/src/components/charts/components/PieChart/chartToken.js

@@ -1,17 +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 Token from '../../feature/token';
-import {CHART_TYPE} from '../../util/constants'
-
-const chartToken = Token.getTokenByName(CHART_TYPE.PIE)
-
-export default chartToken;

package/src/components/charts/components/PieChart/handleLabel.js

@@ -1,94 +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 merge from '../../util/merge';
-import chartToken from './chartToken';
-
-function handleLabel(hasLabel, seriesUnit) {
-  if (hasLabel) {
-    seriesUnit.label = merge({ color: chartToken.labelColor, fontSize: chartToken.labelFontSize }, seriesUnit.label);
-  } else {
-    seriesUnit.label = { show: false };
-  }
-}
-
-function handleLabelLine(hasLabelLine, seriesUnit, label) {
-  const lineColor = label?.lineColor;
-  const lineLength = label?.labelLineLength ?? chartToken.labelLineLength;
-  if (hasLabelLine) {
-    seriesUnit.labelLine = merge(
-      {
-        show: true,
-        lineStyle: {
-          color: lineColor ? lineColor : chartToken.labelLineColor,
-        },
-        length: lineLength,
-        length2: lineLength / 2,
-      },
-      seriesUnit.labelLine,
-    );
-  } else {
-    seriesUnit.labelLine = {
-      show: false,
-      length: lineLength,
-      length2: lineLength / 2,
-    };
-  }
-}
-
-function hasLabelFormatterFun(labelFormatterType, seriesUnit, sum) {
-  switch (labelFormatterType) {
-    case 'percent':
-      seriesUnit.label.formatter = params => {
-        if (params.value === 0) {
-          return '0(0 %)';
-        } else {
-          const percent = ((params.value * 100) / sum).toFixed(2);
-          return `${percent} %`;
-        }
-      };
-      break;
-    case 'value':
-      seriesUnit.label.formatter = params => {
-        return `${params.value}`;
-      };
-      break;
-    default:
-      break;
-  }
-}
-
-function handleLabelFormatter(hasLabel, hasLabelFormatter, seriesUnit, labelFormatterType, sum) {
-  if (hasLabel && hasLabelFormatter) {
-    seriesUnit.label.formatter = hasLabelFormatter;
-  } else {
-    hasLabelFormatterFun(labelFormatterType, seriesUnit, sum);
-  }
-}
-
-/**
- * 配置圆盘图的label
- */
-function setLabel(seriesUnit, label, data) {
-  const hasLabel = !(label && label.show === false);
-  const hasLabelLine = !(label && label.line === false);
-  const hasLabelFormatter = label && label.labelHtml;
-  const labelFormatterType = (label && label.type) || '';
-  let sum = data.reduce((x, y) => ({ value: x.value + y.value }), { value: 0 });
-  sum = sum.value;
-  handleLabel(hasLabel, seriesUnit, label);
-  handleLabelLine(hasLabelLine, seriesUnit, label);
-  handleLabelFormatter(hasLabel, hasLabelFormatter, seriesUnit, labelFormatterType, sum);
-  // 合并label其他属性
-  merge(seriesUnit.label, label);
-}
-
-export default setLabel;