Twaver-HTML5基础学习(5)告警元素(Alarm)的告警位置(偏移量以及定位理解)

告警位置

Node等网元

网元中Alarm的位置可以参考Alarm样式属性alarm.position一栏。具体位置可与下图一一对应。注意Node网元中Alarm的Position位置属性没有from和to选项，因为概念上是讲不通的。
对于Node网元alarm.xoffset和alarm.yoffset分别代表了相对于alarm当前位置的x轴和y轴偏移量。

Link等网元

Link网元中alarm.position除了具有fron和to两个特殊的位置外，其他和上面的Node网元完全是一致的。在此着重介绍hotspot、from、to三个位置。

对于Link网元的alarm.xoffset和alarm.yoffset有个特殊的含义：
如果将xoffset的值设置为正负(0-1)之间的值，则代表了alarm在Link上的百分比位置。
当alarm.position设置为”from”，xoffset 取值为”0 – 1”则表示百分比，否则按实际值计算，偏移量均相对于起始from点，
position为”to”，则反之。
position为其他任何值，hotspot点为所有link长度一半的点，xoffset可取正数(0 – 1)、也可取负数(-1-0)，都则按实际值计算。

例子

工具JS代码：

const twaver = require('twaver');
// 设置每个图元name的颜色
twaver.Styles.setStyle('label.color', '#ec6c00');
// 设置每个图元name2的颜色
twaver.Styles.setStyle('label2.color', '#57ab9a');
twaver.Styles.setStyle('select.color', '#ef8200');
//TWaver内部预定义六中告警级别
twaver.AlarmSeverity.CRITICAL = twaver.AlarmSeverity.add(500, 'Critical', 'C', "#FF0000");
twaver.AlarmSeverity.MAJOR = twaver.AlarmSeverity.add(400, 'Major', 'M', "#FFA000");
twaver.AlarmSeverity.MINOR = twaver.AlarmSeverity.add(300, 'Minor', 'm', "#FFFF00");
twaver.AlarmSeverity.WARNING = twaver.AlarmSeverity.add(200, 'Warning', 'W', "#00FFFF");
twaver.AlarmSeverity.INDETERMINATE = twaver.AlarmSeverity.add(100, 'Indeterminate', 'N', "#C800FF");
twaver.AlarmSeverity.CLEARED = twaver.AlarmSeverity.add(0, 'Cleared', 'R', "#00FF00");

const { CRITICAL, MAJOR, WARNING, MINOR, INDETERMINATE, CLEARED } = twaver.AlarmSeverity
export const ALARM1 = CLEARED
export const ALARM2 = INDETERMINATE
export const ALARM3 = MINOR
export const ALARM4 = MAJOR
export const ALARM5 = CRITICAL

    /**
     * 创建一个dataBox容器
     * 容器中可以add图元
     */
    export const returnElementBoxFun = () => new twaver.ElementBox()


/**
 * 创建一个画布 network对象
 * @param {ElementBox} box  创建一个画布 network对象
 */
export const returnNetworkFun = (box) => new twaver.vector.Network(box)

/**
 * 创建一个Group
 * 用于包裹图元
 */
export const returnGroupFun = (box, obj = {}) => {
    let group = new twaver.Group(obj)
    box.add(group)
    return group
}



/**
 * 创建一个容器dataBox和一个画布
 * 并将容器实例化画布
 * @returns [box,network] box network
 */
export const returnElementBoxAndNetworkFun = () => {
    let box = returnElementBoxFun();
    let network = returnNetworkFun(box);
    return [box, network]
}

/**
 * 用于创建一个节点
 * @param {ElementBox} box dataBox 
 * @param {String} name 当前节点的name
 * @param {Number} x   当前节点的x坐标
 * @param {Number} y 当前节点的y坐标
 * @returns {Node} Node
 */
export const returnNodeFun = (box, Obj = {}) => {
    let node = new twaver.Node(Obj);
    // node.setName(name);
    // node.setLocation(x, y);
    box.add(node);
    return node
}

/**
 * 
 * @param {Node} node1 节点1
 * @param {Node} node2 节点2
 */
export const returnLineFun = (node1, node2) => new twaver.Link(node1, node2)

/**
 * 注册图片 用于设置图元的img setImage
 * @param {String} url 图片 url
 * @param {NetWork} svg  NetWork对象
 */
export function returnRegisterImage(url, svg) {
    var image = new Image();
    image.src = url;
    var views = arguments;
    image.onload = function () {
        // getImageName 获取到的图片name用做 node节点的显示img
        twaver.Util.registerImage(getImageName(url), image, image.width, image.height, svg === true);
        image.onload = null;
        for (var i = 1; i < views.length; i++) {
            var view = views[i];
            if (view.invalidateElementUIs) {
                view.invalidateElementUIs();
            }
            if (view.invalidateDisplay) {
                view.invalidateDisplay();
            }
        }
    };
    // getImageName 获取到的图片name用做 node节点的显示img
    const getImageName = (url) => {
        var index = url.lastIndexOf('/');
        var name = url;
        if (index >= 0) {
            name = url.substring(index + 1);
        }
        index = name.lastIndexOf('.');
        if (index >= 0) {
            name = name.substring(0, index);
        }
        return name;
    }
}


/*
 * @param {*} 告警的Id 
 * @param {*} 告警网元的Id 
  * @param {*} 告警级别 
 * @param {*} alarmBox 网元容器.getAlarmBox()
 */
export const returnAlarmFun = (alarmID, elementID, alarmSeverity, alarmBox) => {
    var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity);
    alarmBox.add(alarm);
}

react页面代码：

import React, { useEffect, useState } from 'react'
import {
    // returnElementBoxFun,
    // returnNetworkFun,
    returnGroupFun,
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
    returnRegisterImage,
    returnAlarmFun, ALARM1, ALARM2, ALARM3, ALARM4, ALARM5
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
    const [network, setnetwork] = useState({})
    const init = () => {
        const [box, network] = returnElementBoxAndNetworkFun()
        setnetwork(_ => network)
        document.getElementById("testID").appendChild(network.getView());
        // 设置最初的大小
        network.adjustBounds({ x: 0, y: 0, width: 800, height: 800 });


        let positions = ["from", "hotspot", "to"];
        let alarmSeverity = [ALARM1, ALARM2, ALARM3, ALARM4, ALARM5];
        let node1 = returnNodeFun(box, { name: '节点1', name2: "节点1name2", location: { x: 100, y: 100 }, })
        let node2 = returnNodeFun(box, { name: '节点2', name2: "节点2name2", location: { x: 540, y: 300 }, })
        let group1 = returnGroupFun(box, { name: "group1" })
        group1.addChild(node1)
        group1.addChild(node2)
        var line1 = returnLineFun(node1, node2)
        box.add(line1);
        line1.s('alarm.position', positions[0]);
        line1.s('alarm.xoffset', .3);
        returnAlarmFun("link" + 1, line1.getId(), alarmSeverity[1], box.getAlarmBox());

        var link = new twaver.ShapeLink(node1, node2);
        box.add(link);


        let node3 = returnNodeFun(box, { name: '节点3', location: { x: 300, y: 300 }, })
        let node4 = returnNodeFun(box, { name: '节点4', location: { x: 440, y: 400 }, })
        let group2 = returnGroupFun(box, { name: "group2" })
        group2.addChild(node3)
        group2.addChild(node4)
        var link2 = new twaver.ShapeLink(node3, node4);
        box.add(link2);
        var list = new twaver.List();
        list.add({
            x: 250,
            y: 500
        });
        list.add({
            x: 400,
            y: 500
        });
        link2.addPoint(list);
        link2.s('alarm.position', positions[1]);
        link2.s('alarm.xoffset', .5);
        returnAlarmFun("shapelink" + 1, link2.getId(), alarmSeverity[2], box.getAlarmBox());
        returnAlarmFun("group2" + 1, group2.getId(), alarmSeverity[3], box.getAlarmBox());
        group2.s('alarm.position','right')
        // ====================
        var groupline = returnLineFun(group1, group2)
        box.add(groupline)
    }
    useEffect(init, [])
    return (
        <>
            <p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={{ fontSize: "20px", paddingLeft: "50px" }}>
                <li>alarm.xoffset和alarm.yoffset以及alarm.position </li>

                <li>对于Link网元的alarm.xoffset和alarm.yoffset有个特殊的含义,<br />
                    如果将xoffset的值设置为正负(0-1)之间的值，则代表了alarm在Link上的百分比位置。<br />
                    当alarm.position设置为”from”，xoffset 取值为”0 – 1”则表示百分比，否则按实际值计算，偏移量均相对于起始from点，<br />
                    position为”to”，则反之。position为其他任何值，<br />
                    hotspot点为所有link长度一半的点，xoffset可取正数(0 – 1)、也可取负数(-1-0)，都则按实际值计算。</li>
            </ul>
            {/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
        </>
    )
}
export default Demo

总结：

对于Node网元，直接设置alarm.position为对应值即可；
对于Link网元，alarm.position有三种值：from hotspot to
Link可以设置偏移量属性alarm.xoffset、alarmyoffset;
当为from to的时候，
1：from 到 to的时候是正值 即 0-1 from为起点按照百分比换算长度
2：to 到 from的时候是正值 即 0-1 to为起点按照百分比换算长度
3：hotspot 可以为0-1 -1-0，从from到to为正，to到from为负；默认为中点，比如上面的例子：

 link2.s('alarm.position', positions[1]); //1 ===》 hotspot 
  link2.s('alarm.xoffset', .5);

那么他的意思就是向to方向再次移动一半距离的0.5,其相当于from 的 0.75；

学习参考：TWaver Documents