G6View.html

<div class="menu">
    <div class="collapse">
        <div class="collapse-header">></div>
        <div class="collapse-body">
            <div draggable="true">
                <img
                    src="../menu/input.svg"
                    width="20px"
                    id="input"
                    type="node"
                />
            </div>
            <div draggable="true">
                <img
                    src="../menu/radio.svg"
                    width="20px"
                    id="radio"
                    type="node"
                />
            </div>
            <div draggable="true" id="text">
                <img
                    src="../menu/text.svg"
                    width="20px"
                    id="text"
                    type="node"
                />
            </div>
            <div draggable="true" id="form">
                <img
                    src="../menu/form.svg"
                    width="20px"
                    id="form"
                    type="combo"
                />
            </div>
            <div draggable="true" id="form">
                <img
                    src="../menu/combination.svg"
                    width="20px"
                    id="combination"
                    type="combo"
                />
            </div>
        </div>
    </div>
</div>
<div id="drawing-board" style="width: 1920px; height: 1080px"></div>
<!-- 侧边配置栏 -->
<div class="config-menu">
    <div class="close">
        <span>o</span>
    </div>
    <div class="tabs">
        <span class="tab">config</span>
    </div>
    <div class="tab-body" #tabBody></div>
</div>
<script src="./g6.min.js"></script>
<script src="./common//index.js"></script>
<script src="./menu/input.js"></script>
<script src="./menu/radio.js"></script>
<script src="./menu/text.js"></script>
<script src="./menu/form/base-form.js"></script>
<script src="./menu/container//base/index.js"></script>
<script src="./mouse-menu//right-menu/index.js"></script>
<script>
    let dragEvent,
        focusNode,
        isEdit = false,
        tabBody = document.getElementsByClassName('tab-body')[0];
    document.addEventListener('keydown', (event) => {
        // event.preventDefault();
    });
    document.addEventListener(
        'dragstart',
        function (event) {
            dragEvent = event;
            // 保存拖动元素的引用 (ref.)
            dragEvent = event.target;
            // 使其半透明
            event.target.style.opacity = 0.5;
        },
        false
    );
    document.addEventListener(
        'dragend',
        function (event) {
            // 重置透明度
            event.target.style.opacity = '';
        },
        false
    );
    document.addEventListener(
        'drop',
        function (event) {
            if (event.target.tagName === 'CANVAS') {
                let { offsetX, offsetY } = event,
                    { id } = dragEvent,
                    targetX = offsetX,
                    targetY = offsetY,
                    targetType = dragEvent.getAttribute('type');
                // 阻止默认动作（如打开一些元素的链接）
                event.preventDefault();
                // 将拖动的元素到所选择的放置目标节点中
                if (targetType === 'combo') {
                    graph.createCombo(
                        {
                            x: targetX,
                            y: targetY,
                            type: id,
                            id: String(Math.random()),
                            padding: [5, 5, 5, 5],
                            size: [260, 50],
                            label: id,
                            labelCfg: {
                                refX: -1,
                                refY: -11,
                            },
                            style: {},
                        },
                        []
                    );
                } else if (targetType === 'node') {
                    graph.addItem('node', {
                        x: targetX,
                        y: targetY,
                        type: dragEvent.id,
                        ...window[dragEvent.id.toLocaleUpperCase() + '_CONFIG'],
                        id: String(Math.random()),
                    });
                }
            }
        },
        false
    );
    const data = {
        nodes: [
            {
                id: 'input',
                description: '单纯的输入框,只携带 placeholder',
                x: 250,
                type: 'input',
                ...INPUT_CONFIG,
                y: 150,
            },
            {
                id: 'text',
                description: '文字',
                x: 170,
                type: 'text',
                ...TEXT_CONFIG,
                y: 200,
            },
        ],
    };
    const width = document.getElementById('drawing-board').scrollWidth;
    const height = document.getElementById('drawing-board').scrollHeight || 500;
    const graph = new G6.Graph({
        container: 'drawing-board',
        width,
        height,
        // translate the graph to align the canvas's center, support by v3.5.1
        defaultNode: {
            type: 'modelRect',
        },
        modes: {
            default: ['drag-node', 'drag-combo'],
        },
        nodeStateStyles: {
            focus: {
                lineWidth: 1,
                stroke: '#1890ff',
            },
        },
        defaultCombo: {
            type: 'rect', // Combo 类型
            // ... 其他配置
        },
        plugins: [rightMenu],
    });

    graph.data(data);
    graph.render();
    graph.createCombo(
        {
            type: 'form',
            id: 'combo1',
            padding: [5, 5, 5, 5],
            size: [260, 50],
            label: 'form',
            labelCfg: {
                refX: -1,
                refY: -11,
            },
            style: {},
        },
        ['input', 'text']
    );

    graph.on('click', (evt) => {
        const { item } = evt;
        if (item !== focusNode && focusNode) {
            tabBody.replaceChildren();
            unFocus(focusNode);
            focusNode = null;
        }
    });
    graph.on('node:click', (evt) => {
        const { item, shape } = evt,
            model = item._cfg.model,
            comboId = model.comboId,
            json = item._cfg.model.json;
        console.log(model.comboId);

        focus(item); //focus当前节点
        focusNode = item;
        tabBody.replaceChildren();
        for (let [key, value] of Object.entries(json)) {
            let row = document.createElement('div'),
                keyNative = document.createElement('div'),
                colon = document.createElement('span'),
                valueNative = document.createElement('div');
            row.setAttribute('class', 'config-row');
            colon.setAttribute('class', 'config-colon');
            colon.appendChild(new Text(' :  '));
            keyNative.setAttribute('class', 'style-key');
            valueNative.setAttribute('class', 'style-value');
            valueNative.setAttribute('contenteditable', 'true');
            valueNative.addEventListener('focus', (e) => {
                isEdit = true;
            });
            valueNative.addEventListener('blur', (e) => {
                json[key] = Array.from(valueNative.childNodes)
                    .map((text) => text.nodeValue)
                    .join('');
                graph.updateItem(focusNode, {
                    ...model,
                });
                // isEdit = false;
                // json[key] = Array.from(valueNative.childNodes)
                //     .map((text) => text.nodeValue)
                //     .join('');
                // let targetCombo = graph.findById(comboId),
                //     newNode,
                //     newWidth;
                // newNode = graph.addItem('node', {
                //     ...model,
                //     id: String(Math.random()),
                // });
                // graph.removeItem(focusNode);
                // if (targetCombo) {
                //     targetCombo.addNode(newNode);
                // }
                // focusNode = newNode;

                // // // 更新节点的
                // newNode.update({
                //     size: [50, 50],
                // });
            });
            keyNative.appendChild(new Text(key));
            valueNative.appendChild(new Text(value));
            row.append(keyNative, colon, valueNative);
            tabBody.appendChild(row);
        }
    });
    graph.on('combo:click', (evt) => {
        console.log(evt);
    });
    graph.on('node:mouseenter', (evt) => {
        const { item } = evt;
        focus(item);
    });

    graph.on('node:mouseleave', (evt) => {
        const { item } = evt;
        if (focusNode !== item) {
            unFocus(item);
        }
    });
    graph.on('keydown', (evt) => {
        if (isEdit) {
            return;
        }
        const { item } = evt;
        if (evt.keyCode === 46) {
            //delete
            graph.removeItem(focusNode);
            focusNode = null;
        } else if (evt.keyCode >= 37 && evt.keyCode <= 40) {
            // 左上右下
            if (focusNode) {
                let { x, y } = focusNode._cfg.model;
                switch (evt.keyCode) {
                    case 37:
                        x -= 10;
                        break;
                    case 38:
                        y -= 10;
                        break;
                    case 39:
                        x += 10;
                        break;
                    case 40:
                        y += 10;
                        break;
                }
                let model = focusNode._cfg.model;
                focusNode.updatePosition({
                    x,
                    y,
                });
                evt.preventDefault();
                evt.stopPropagation();
            }
        }
    });
    function focus(item) {
        graph.setItemState(item, 'focus', true);
    }
    function unFocus(item) {
        graph.setItemState(item, 'focus', false);
    }
</script>
<script>
    let collHeader = document.querySelector('.collapse-header'),
        collBody = document.querySelector('.collapse-body');
    collHeader.addEventListener('click', () => {
        if (collBody.style.display !== 'none') {
            collBody.style.display = 'none';
        } else {
            collBody.style.display = 'block';
        }
    });
</script>
<style>
    .g6-component-contextmenu {
        font-size: 14px;
        padding: 0;
    }
    .g6-component-contextmenu > div {
        cursor: pointer;
    }
    .g6-component-contextmenu > ul {
        margin: 1px;
    }
    .g6-component-contextmenu p:hover {
        color: #00af1ccf;
    }
    [contenteditable] {
        width: 100%;
    }
    [draggable] {
        cursor: pointer;
        display: inline-block;
    }
    [draggable] > img {
        padding: 5px;
    }
    .collapse-body > div {
        margin: 6px 0;
    }
    /* 整个滚动条 */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: #ffffff;
        /* display: none; */
    }

    /* 鼠标指针浮动显示 */
    :hover::-webkit-scrollbar {
        display: block;
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        /* 阴影 */
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #ffffff;
    }

    /* 滚定条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius: 30px;
        background-color: #615b5b49;
    }
    foreignObject {
        width: 100%;
        overflow: inherit;
    }
    body {
        margin: 0;
    }
    .collapse-header {
        cursor: pointer;
        background-color: #fafafa;
        padding: 5px;
    }
    .menu {
        width: 194px;
        position: absolute;
        border: 1px solid #615b5b49;
        border-bottom: none;
        border-right: none;
        padding: 2px;
    }
    #drawing-board {
        border: 1px solid #615b5b49;
        margin-left: 200px;
    }
    .config-menu {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #7e7ef214;
        width: 200px;
        height: 100%;
    }
    .close {
        position: absolute;
        top: 50%;
        left: -12px;
        cursor: pointer;
    }
    .tabs {
        padding-top: 6px;
        margin-bottom: 14px;
    }
    .tab-body {
        font-size: 14px;
        padding: 0 4px;
    }
    .tab {
        border-bottom: 2px solid blue;
        padding: 5px;
        cursor: pointer;
    }
    .tab:hover {
        background-color: #d4d4de;
    }
    .config-menu {
        position: fixed;
        top: 0;
        right: 0;
        background-color: #7e7ef214;
        width: 200px;
        height: 100%;
    }
    .config-row {
        display: flex;
    }
    .config-colon {
        margin: 0 4px 0 2px;
        font-weight: 600;
    }
</style>