flow-chart
/
index.html

<!DOCTYPE html>
<html>
<head>
    <title>Flow Chart</title>
    <link rel='stylesheet' href='./design/fontawesome-free-5.6.3/css/all.min.css'/>
    <link rel='stylesheet' href='./design/css/style.css'/>
    <link rel='stylesheet' href='./design/css/resize.css'/>
    <link rel='stylesheet' href='./design/x0popup/x0popup.min.css'/>
    <meta charset="UTF-8"/>
</head>
<body>

<div id="app" :style="{height:layout.height+'px'}">
    <div class="left"
         :style="{width:layout.left+'px',height:(layout.height)+'px','margin-right':layout.margin+'px'}">
        <div class="pro-box">
            <div class="title">属性设置</div>

            <div class="item">
                <div class="key">名称：</div>
                <div class="value">
                    <input style="width: 150px" type="input" v-model="card.name" placeholder="名称"/>
                </div>
            </div>

            <div class="item">
                <div class="key">宽度：</div>
                <div class="value">
                    <input type="number" v-model="card.width" placeholder="宽度"/>
                </div>
            </div>
            <div class="item">
                <div class="key">高度：</div>
                <div class="value">
                    <input type="number" v-model="card.height" placeholder="宽度"/>
                </div>
            </div>
        </div>
        <div class="pro-box">
            <div class="title">流程</div>
        </div>

    </div>
    <div class="center" id="center"
         :style="{width:layout.center+'px',height:(layout.height)+'px','margin-right':layout.margin+'px'}">

        <!--v-selectarea="{aa:123}"-->
        <div v-selectarea @contextmenu.prevent.stop="showCardMenu($event)"
             tabindex="0" class="card"
             :style="{width:card.width+'px',height:card.height+'px'}"
             @mousedown="cardClick($event)" @keyup="cardKeyup($event)" id="card-wrapper">

            <!--v-drag="{shape:shape}"-->
            <!-- 各种元素 -->
            <shape v-resize="{shape:shape}"
                   v-drag="{shape:shape}"
                   v-for="(shape,index) in shapes"
                   :id="shape.id"
                   :data-id="shape.id"
                   :shape="shape"
                   :key="shape.id"
                   @shapemove="shapeMove($event)"
                   @contextmenu.prevent.stop.native="showContextmenu($event,shape)"
                   @click.prevent.stop.native="selectShape($event,shape)"
            />


        </div>

    </div>


    <div v-if="popup.show" :style="{top:popup.top+'px',left:popup.left+'px'}" class="popup-menu">
        <div v-for="item in popup.menus">
            <div v-if="item.split" class="split"></div>
            <div v-else class="item" @click="item.handler()"><span :class="'fa '+item.icon"></span>{{item.text}}</div>
        </div>
    </div>

    <div v-if="cardPopup.show" :style="{top:cardPopup.top+'px',left:cardPopup.left+'px'}" class="popup-menu">
        <div v-for="item in cardPopup.menus">
            <div v-if="item.split" class="split"></div>
            <div v-else class="item" @click="item.handler()"><span :class="'fa '+item.icon"></span>{{item.text}}</div>
        </div>
    </div>
</div>
<script type="text/x-template" id="shape-template">
    <div @keydown.self.prevent="move($event)"  tabindex="1" :class="{shape:true,active:data.active,basic:data.type!=1}"
         :style="style()">

        <div @dblclick="dblclick($event,shape)"  class="card-shape-text" :style="{width:width()+'px',height:height()+'px'}">
            <textarea autofocus="autofocus"  class="shape-input" v-if="live().editor" @blur="blur($event,shape)" v-focus="shape.editor" v-model="shape.value"></textarea>
            <span v-else v-html="value()"></span>
        </div>
    </div>
</script>
<script type="text/javascript" src="./design/js/index.js"></script>
</body>
</html>