se-drawing/datadict.js

/**
 * 数据字典绘制方法集
 * 作者：刘广文
 * 邮箱：liugw@imut.edu.cn
 * 版本：20230819
 * 功能：基于canvas实现数据字典的绘制 
 */
var tool = 1;
var current = -1;
var flag=false;
var mouseX= 0;
var mouseY= 0;
var mouseX1= 0;
var mouseY1= 0;
var aryValue = [];
var aryObject = [];
var drawn = false;
var myText = null, okButton = null, cancelButton = null;
var w = 0, h = 0, x = 0, y = 0, pLeft = 0, pTop = 0;
const aryTitle = ["数据存储名称", "属性名称", "数据类型", "描述"]

//加载工具
function loadTools(target){
    target.innerHTML = "<div id=\"single\" onclick=\"clickTool(this, 1);\" title=\"绘制方框式数据字典\">方框</div>"
    + "<div id=\"table\" onclick=\"clickTool(this, 2);\" title=\"绘制表格式数据字典\">表格</div>"
    + "<div id=\"myTable\" hidden></div>"
    + "<textarea id=\"myText\" hidden></textarea><input type=\"button\" id=\"okButton\" value=\"确定\" onclick=\"okTool();\" hidden/><input type=\"button\" id=\"cancelButton\" value=\"取消\" onclick=\"cancelTool();\" hidden/>";
}
//确定添加
function okTool(){
    if (tool == 1)
        pushTool(tool, x, y, x + w, y + h, myText.value, color.value, bcolor.value, size.value);
    if (tool == 2)
    {
        aryValue = [];
        for(var i = 1; i < myText.children[0].children[0].children.length; i ++){
            var row = myText.children[0].children[0].children[i];
            for(var j = 0; j < aryTitle.length; j ++)
                aryValue.push(row.cells[j].children[0].value);
        }
        pushTool(tool, x, y, x + w, y + h, "", color.value, bcolor.value, size.value);
    }    
    cancelTool();
    updateTools(cxt, tool, x, y, x + w, y + h, color.value, bcolor.value, size.value);
}
//取消添加 
function cancelTool(){
    if (myText != null)
    {
        myText.hidden = true;
        okButton.hidden = true;
        cancelButton.hidden = true;
    }
    drawn = false;
}
//鼠标抬起响应动作
function myMouseUp(e, page){
    flag=false;
    if (!drawn)
    {
        //pushTool(tool, mouseX, mouseY, mouseX1, mouseY1, text.value, color.value, bcolor.value, size.value);
        drawn = true;
        if (tool == 1)
        {
            if (myText == null)
            {
                myText = document.getElementById("myText");
                okButton = document.getElementById("okButton");
                cancelButton = document.getElementById("cancelButton");
            }
            myText.hidden = false;
            okButton.hidden = false;
            cancelButton.hidden = false;
            x = mouseX; 
            y = mouseY;
            if (mouseX1 < mouseX)
                x = mouseX1;
            if (mouseY1 < mouseY)
                y = mouseY1;
            w = Math.abs(mouseX - mouseX1);
            h = Math.abs(mouseY - mouseY1);
            var rect = canvas.getBoundingClientRect();
            pLeft = rect.left;
            pTop = rect.top;
            myText.style.left = (x + pLeft) + "px";
            myText.style.top = (y + pTop) + "px";
            myText.style.width = w + "px";
            myText.style.height = h + "px";
            cancelButton.style.left = (x + pLeft + w - 50) + "px";
            cancelButton.style.top = (y + pTop + h + 5) + "px";
            okButton.style.left = (x + pLeft + w - 110) + "px";
            okButton.style.top = (y + pTop + h + 5) + "px";
            textWidth = w;
            textHeight = h;
            myText.addEventListener("mousemove", function(){
                if(myText.clientWidth != w || myText.clientHeight != h){
                    w = myText.clientWidth;
                    h = myText.clientHeight;
                    cancelButton.style.left = (x + pLeft + w - 50) + "px";
                    cancelButton.style.top = (y + pTop + h + 5) + "px";
                    okButton.style.left = (x + pLeft + w - 110) + "px";
                    okButton.style.top = (y + pTop + h + 5) + "px";
                }
              });
            myText.focus();
        }
        if (tool == 2)
        {
            if (myText == null)
            {
                myText = document.getElementById("myTable");
                okButton = document.getElementById("okButton");
                cancelButton = document.getElementById("cancelButton");
            }
            myText.hidden = false;
            okButton.hidden = false;
            cancelButton.hidden = false;
            x = mouseX; 
            y = mouseY;
            if (mouseX1 < mouseX)
                x = mouseX1;
            if (mouseY1 < mouseY)
                y = mouseY1;
            w = Math.abs(mouseX - mouseX1);
            h = Math.abs(mouseY - mouseY1);
            var rect = canvas.getBoundingClientRect();
            pLeft = rect.left;
            pTop = rect.top;
            myText.style.left = (x + pLeft) + "px";
            myText.style.top = (y + pTop) + "px";
            myText.style.width = w + "px";
            myText.style.height = h + "px";
            cancelButton.style.left = (x + pLeft + w - 50) + "px";
            cancelButton.style.top = (y + pTop + h + 5) + "px";
            okButton.style.left = (x + pLeft + w - 110) + "px";
            okButton.style.top = (y + pTop + h + 5) + "px";
            textWidth = w;
            textHeight = h;
            var rowcount = parseInt(text.value);
            if (rowcount > 0){
                var ww = w / 4 - 10, hh = 25;
                var s = "<table width=\"100%\"><tr>";
                var i = 0;
                while(i < aryTitle.length)
                {
                    s += "<td>" + aryTitle[i] + "</td>";
                    i ++;
                }
                s += "</tr>";
                var j = 0;
                while(j < rowcount){
                    s += "<tr>";
                    i = 0;
                    while(i < aryTitle.length)
                    {
                        s += ("<td><textarea style=\"width:" + ww + "px;\"></textarea></td>");
                        i ++;
                    }
                    s += "</tr>";
                    j ++;
                }
                s += "</table>";
                myText.innerHTML = s;
            }
            myText.focus();
        }
    }
    updateTools(cxt);
}
//鼠标移动响应动作
function myMouseMove(e, page){
    mouseX1= e.pageX-page.offsetLeft;
    mouseY1= e.pageY-page.offsetTop;
    if(flag){
        updateTools(cxt);
        if (!drawn)
            drawTool(cxt, tool * 10, mouseX, mouseY, mouseX1, mouseY1, color.value, bcolor.value, size.value);
    }
}

//鼠标按下响应动作
function myMouseDown(e, page)
{
    mouseX= e.pageX-page.offsetLeft;
    mouseY= e.pageY-page.offsetTop;
    flag=true;
}
//保存
function save(){
    var ary = [];
    var i = 0;
    while(i <= current){
        ary.push(aryObject[i]);
        i ++;
    }
    aryObject = ary;
    updateButton();
    const fileName = 'flowchart.txt';
    var str = '';
    i = 0;
    while(i < aryObject.length){
        if (i == 0)
            str = aryObject[i]
        else{
            str += "\r\n"
            str += aryObject[i]
        }
        i ++;
    }
    const content = str
    const blob = new Blob([content], {type: 'application/text'});
    // 构造一个blob对象来处理数据
    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
    // IE10以上支持blob但是依然不支持download
    if ('download' in document.createElement('a')) 
    { 
        // 支持a标签download的浏览器
        const link = document.createElement('a') 
        // 创建a标签
        link.download = fileName 
        // a标签添加属性
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        document.body.appendChild(link)
        link.click() 
        // 执行下载
        URL.revokeObjectURL(link.href) 
        // 释放url
        document.body.removeChild(link) 
        // 释放标签
    } else { 
        // 其他浏览器
        navigator.msSaveBlob(blob, fileName)
    }
}
//撤销
function undo(){
    if (current >= 0)
    {
        while(current > 0)
        {
            var ary = aryObject[current].split('|');
            if (parseInt(ary[0]) < 3)
                break;
            current --;
        }
        current --;
        updateTools();
    }
    updateButton();
}
//刷新按钮状态
function updateButton(){
    var undo = document.getElementById("undo");
    var redo = document.getElementById("redo");
    var save = document.getElementById("save");
    if (current >= 0)
    {
        save.disabled = false;
        undo.disabled = false;
    }
    else 
    {
        undo.disabled = true;
        save.disabled = true;
    }
    if (current < aryObject.length - 1)
    {
        redo.disabled = false;
    }
    else {
        redo.disabled = true;
    }
}
//重做
function redo(){
    if (current < aryObject.length - 1)
    {
        if (current < 0) 
        {
            if (aryObject.length > 1)
                current = 1;
            else current = 0;
        }
        else 
        {
            if (current + 2 < aryObject.length) current += 2;
            else current = aryObject.length - 1;
        }
        while(current < aryObject.length)
        {
            var ary = aryObject[current].split('|');
            if (parseInt(ary[0]) < 3) 
            {
                current --;
                break
            }
            if (current == aryObject.length - 1) break;
            current ++;
        }      
        updateTools();
    }
    updateButton();
}

//选择工具
function clickTool(o, tag){
    cancelTool();
    myText = null;
    tool = tag;
    for(var i = 0; i < tools.children.length; i ++){
        tools.children[i].style.border = '1px solid black';
    }
    o.style.border = '2px solid red';
    text.hidden = true;
    if (tag == 2)
    {
        text.hidden = false;
    }
}

//绘制所有工具
function updateTools(context){
    canvas.width = canvas.width;
    var i = 0;
    while (i <= current){
        var ary = aryObject[i].split('|');
        var type = parseInt(ary[0]);
        var ary1 = ary[1].split(',');
        var x1 = parseFloat(ary1[0]);
        var y1 = parseFloat (ary1[1]);
        var x2 = parseFloat(ary1[2]);
        var y2 = parseFloat(ary1[3]);
        var size = parseFloat(ary[5]);
        var color = ary[3];
        var bcolor = ary[4];
        if(type == 1){
            drawTool(cxt, type, x1, y1, x2, y2, color, bcolor, size);
            i ++;
            var yy = y1;
            while(i <= current){
                ary = aryObject[i].split('|');
                type = parseInt(ary[0]);
                if (type > 2)
                {
                    drawText(cxt, type, x1, yy, x2, y2, ary[2], color); 
                    yy += getFontHeight(cxt, ary[2]);
                }
                else break;                   
                i ++;
            }
        }
        else if(type == 2){
            i ++;
            var ww = Math.abs(x2 - x1) / aryTitle.length;
            var hh = getFontHeight(cxt, aryTitle[0]);
            var j = 0;
            while(j < aryTitle.length)
            {
                drawTool(cxt, type, x1 + j * ww, y1, x1 + (j + 1) * ww, y1 + hh, color, bcolor, size);
                drawText(cxt, type, x1 + j * ww, y1, x1 + (j + 1) * ww, y1 + hh, aryTitle[j], color);
                j ++;
            }
            var rr = 0, cc = 0, rCount = 0, rMax = 0;
            var aryText = [];
            var yy = y1 + hh;
            while(i <= current){
                ary = aryObject[i].split('|');
                type = parseInt(ary[0]);
                if (type > 2)
                {
                    ary1 = ary[1].split(',');
                    var r = parseInt(ary1[0]), c = parseInt(ary1[1]);
                    if (rr != r)
                    {
                        j = 0;
                        while(j < aryTitle.length)
                        {
                            drawTool(cxt, 2, x1 + j * ww, yy, x1 + (j + 1) * ww, yy + hh * rMax, color, bcolor, size);
                            var jj = 0;
                            for(var k = 0; k < aryText.length; k ++)
                            {
                                if (aryText[k].startsWith(j + "|"))
                                {
                                    ary1 = aryText[k].split('|');
                                    drawText(cxt, 2, x1 + j * ww, yy + hh * jj, x1 + (j + 1) * ww, yy + hh * (jj + 1), ary1[1], color);
                                    jj ++;
                                }
                            }
                            j ++;
                        }
                        yy += hh * rMax
                        rMax = 0;
                        rCount = 0;
                        aryText = [];
                    }
                    aryText.push(c + "|" + ary[2]);
                    if (c != cc)
                    {
                        if (rMax < rCount)
                            rMax = rCount;
                        rCount = 0;
                    }
                    cc = c;
                    rr = r;
                    rCount ++;
                }
                else break;                                  
                i ++;
            }
            if (rCount > 0)
            {
                j = 0;
                while(j < aryTitle.length)
                {
                    drawTool(cxt, 2, x1 + j * ww, yy, x1 + (j + 1) * ww, yy + hh * rMax, color, bcolor, size);
                    var jj = 0;
                    for(var k = 0; k < aryText.length; k ++)
                    {
                        if (aryText[k].startsWith(j + "|"))
                        {
                            ary1 = aryText[k].split('|');
                            drawText(cxt, 2, x1 + j * ww, yy + hh * jj, x1 + (j + 1) * ww, yy + hh * (jj + 1), ary1[1], color);
                            jj ++;
                        }
                    }
                    j ++;
                }
            } 
        }
        //i ++;
    }
}
//保存当前的绘制
function pushTool(type, x1, y1, x2, y2, text, color, bcolor, size){
    var ary = [];
    var i = 0;
    while(i <= current){
        ary.push(aryObject[i]);
        i ++;
    }
    aryObject = ary;
    if(type == 1)
    {
        var s = type + '|' + x1 + ',' + y1 + ',' + x2 + ',' + y2 + '||' + color + '|' + bcolor + '|' + size;
        aryObject.push(s);
        current ++;
        ary = text.split("\n");
        i = 0;
        while(i < ary.length){
            s = type + '0||' + ary[i];
            aryObject.push(s);
            i ++;
            current++;
        }
    }
    if(type == 2)
    {
        var s = type + '|' + x1 + ',' + y1 + ',' + x2 + ',' + y2 + '||' + color + '|' + bcolor + '|' + size;
        aryObject.push(s);
        current ++;
        var j = 0, r = 0, c = 0;
        while(j < aryValue.length){
            ary = aryValue[j].split('\n');
            if (c == aryTitle.length)
            {
                c = 0;
                r ++;
            }
            i = 0;
            while(i < ary.length)
            {
                s =  type + "0|" + r + "," + c + "|" + ary[i];
                aryObject.push(s);
                current++;
                i ++;
            }
            j ++;
            c ++;
        }
    }
    updateButton();
}
//绘制文本
function drawText(context, type, x1, y1, x2, y2, text, color){
    if (text == "" || context == null) return; 
    context.fillStyle = color;
    context.fillText(text, x1, y1 + 10);   
}
//绘制当前工具
function drawTool(context, type, x1, y1, x2, y2, color, bcolor, size){
    if (context == null || type < 1) return;
    switch(type){
        case 1: 
        case 10:
        case 2:
        case 20:{     
            //绘制矩形框
            //计算宽高
            var l = x1, t = y1;
            var w = x2 - x1, h = y2 - y1;
            if (w < 0)
            {
                l = x2;
                w = x1 - x2;
            }               
            if (h < 0){
                t = y2;
                h = y1 - y2;
            }
            context.strokeStyle = color;
            context.lineWidth = size;
            context.beginPath();
            context.moveTo(l, t);
            context.lineTo(l + w, t);
            context.lineTo(l + w, t + h);
            context.lineTo(l, t + h);
            context.lineTo(l, t);
            context.closePath();
            context.fillStyle = bcolor;
            context.fill();
            context.stroke();
            if(type == 20)
            {
                text.value = Math.trunc(h / getFontHeight(context, aryTitle[0]));
            }
            break;
        } 
        case 21:{
            //绘制矩形框
            //计算宽高
            var l = x1, t = y1;
            var w = x2 - x1, h = y2 - y1;
            if (w < 0)
            {
                l = x2;
                w = x1 - x2;
            }               
            if (h < 0){
                t = y2;
                h = y1 - y2;
            }
            var rSize = 25, cSize = w / 4;
            context.strokeStyle = color;
            context.lineWidth = size;
            //context.beginPath();
            var yy = t;
            var rr = 0;
            while(yy <= t + h){
                context.moveTo(l, yy);
                context.lineTo(l + w, yy);
                yy += rSize;
                rr ++;
            }
            text.value = rr;
            var xx = l;
            while(xx <= l + w){
                context.moveTo(xx, t);
                context.lineTo(xx, t + h);
                xx += cSize;
            }
            //context.closePath();
            //context.fillStyle = bcolor;
            //context.fill();
            context.stroke();
            break;
        }     
    }
}

//计算当前字体下的文本宽度
function getFontWidth(context, txt) {
    const metrics = context.measureText(txt);
    const actual = Math.abs(metrics.actualBoundingBoxLeft ?? 0) + Math.abs(metrics.actualBoundingBoxRight ?? 0);
    const width = Math.max(metrics.width, actual);
    return width;
}
//计算当前字体下的文本高度
function getFontHeight(context, txt) {
    const metrics = context.measureText(txt);
    const fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
    //所有字在这个字体下的高度
    //const actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
    return fontHeight;
}
//自动调整字体大小
function updateFont(context, w, h, text, size){
    context.font = size + "pt SimSun";
    w1 = getFontWidth(context, text) * 2;
    h1 = getFontHeight(context, text) * 2;
    var s = size;
    while (w1 > w || h1 > h){
        s = s - 1;
        context.font = s + "pt SimSun";
        w1 = getFontWidth(context, text) * 2;
        h1 = getFontHeight(context, text) * 2;
    }
    return s;
}