Commit ca4b185a by liuyong

修改画布

1 parent 03b9666a
......@@ -19,7 +19,7 @@ const initDrawioGraph = function(that) {//一进入画布显示的图形
let eleBelongId = receiveData.eleBelongId;
let dicys = JSON.stringify(receiveData.dicys);
that.editor.graph.getSelectionCells().forEach(item => {
if(item.value.length > 0) {
if(item.value) {
if(that.editor.graph.getModel().isVertex(item)){
// console.log('封闭图形');
that.editor.graph.setCellStyles('attr', dicys, [item]);
......@@ -114,9 +114,6 @@ const setIcon = function (itemIcon, dicys, color) {
// ];
const leftCustomGraph = function(that) {//左侧自定义图形
const leftGraph = JSON.parse(localStorage.getItem('leftGraph'));
leftGraph.forEach(function(item) {
if(item.eleDtos) {
......
......@@ -191,16 +191,16 @@ const addListPanel = function(that, originAttr, attrName_, attrValue_) {
}
//初始化右侧属性面板控件
const attributeNode = function(that, label3, div, ui, addClickHandler, idx) {
var label4 = label3.cloneNode(false);//二次开发,自己写的属性面板
label4.style.backgroundColor = Format.inactiveTabBackgroundColor;
mxUtils.write(label4, mxResources.get('attribute'));
div.appendChild(label4);
var attributePanel = div.cloneNode(false);
attributePanel.style.display = 'none';
that.panels.push(new AttributePanel(that, ui, attributePanel));
that.container.appendChild(attributePanel);
addClickHandler(label4, attributePanel, idx++, true);
}
\ No newline at end of file
// const attributeNode = function(that, label3, div, ui, addClickHandler, idx) {
// var label4 = label3.cloneNode(false);//二次开发,自己写的属性面板
// label4.style.backgroundColor = Format.inactiveTabBackgroundColor;
// mxUtils.write(label4, mxResources.get('attribute'));
// div.appendChild(label4);
// var attributePanel = div.cloneNode(false);
// attributePanel.style.display = 'none';
// that.panels.push(new AttributePanel(that, ui, attributePanel));
// that.container.appendChild(attributePanel);
// addClickHandler(label4, attributePanel, idx++, true);
// }
\ No newline at end of file
......@@ -48,13 +48,6 @@
item.eleDtos.forEach(item2 => {
if(item2.icon) {
if(item2.icon.includes('data')) {
// const item_icon = item2.icon.split("base64,")[1];
// const decode_item_icon = (window.atob) ? atob(item_icon) : Base64.decode(item_icon);//svg解码,为字符串
// const svgDocument = new DOMParser().parseFromString(decode_item_icon, 'text/xml');//svg字符串转标签
// const svgTag = svgDocument.getElementsByTagName('svg')[0];
// const width = +svgTag.getAttribute('width').split("px")[0];
// const height = +svgTag.getAttribute('height').split("px")[0];
let attr_ = [];
if(item2.dicys && item2.dicys.length > 0) {
......
......@@ -168,6 +168,7 @@ EditorUi.initMinimalTheme = function()
ui.sidebarWindow = new WrapperWindow(ui, mxResources.get('shapes'),
10, 56, w - 6, h - 6, function(container)
{
createSidebar(ui, container);
});
......
......@@ -367,10 +367,12 @@ Format.prototype.immediateRefresh = function()
(containsLabel ? '50%' : '25%');//二次开发,调整右侧面板每个的宽度从33.3%改成25%
var label2 = label.cloneNode(false);
var label3 = label2.cloneNode(false);
var label4 = label3.cloneNode(false);//二次开发,自己写的属性面板
// Workaround for ignored background in IE
label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
label3.style.backgroundColor = Format.inactiveTabBackgroundColor;
label4.style.backgroundColor = Format.inactiveTabBackgroundColor;//二次开发,自己写的属性面板
// Style
if (containsLabel)
......@@ -409,8 +411,14 @@ Format.prototype.immediateRefresh = function()
this.panels.push(new ArrangePanel(this, ui, arrangePanel));
this.container.appendChild(arrangePanel);
const that = this;
attributeNode(that, label3, div, ui, addClickHandler, idx);
mxUtils.write(label4, mxResources.get('attribute'));//二次开发,自己写的属性面板
div.appendChild(label4);//二次开发,自己写的属性面板
var attributePanel = div.cloneNode(false);//二次开发,自己写的属性面板
attributePanel.style.display = 'none';//二次开发,自己写的属性面板
this.panels.push(new AttributePanel(this, ui, attributePanel));
this.container.appendChild(attributePanel);//二次开发,自己写的属性面板
if (ss.cells.length > 0)
{
addClickHandler(label2, textPanel, idx + 1);
......@@ -421,6 +429,7 @@ Format.prototype.immediateRefresh = function()
}
addClickHandler(label3, arrangePanel, idx++, true);
addClickHandler(label4, attributePanel, idx++, true);//二次开发,自己写的属性面板
}
};
......
......@@ -2189,6 +2189,14 @@ Sidebar.prototype.createTitle = function(label)
var elt = document.createElement('a');
elt.setAttribute('title', mxResources.get('sidebarTooltip'));
elt.className = 'geTitle';
//二次开发,设置样式--------------------开始
if(label == '架构元素关系') {
elt.style.borderTop = '2px solid #ccc';
elt.style.borderBottom = '2px solid #ccc';
}else {
elt.style.border = 'none';
}
//二次开发,设置样式--------------------结束
mxUtils.write(elt, label);
return elt;
};
......
......@@ -191,22 +191,29 @@
:before-close="closeGraphDialog"
:close-on-click-modal="false"
width="60%">
<div style="height: 400px;display: flex;align-items: center;">
<div style="width: 20%;height: 100%;border-left: 1px solid #ccc;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;overflow: auto;text-align: center;">
<div :style="{ 'cursor': 'pointer', 'padding': '4px', 'background-color': nameIndex == index ? 'rgb(13,134,127)' : '#fff', 'color': nameIndex == index ? '#fff' : '#000' }"
v-for="(item, index) in search_select1"
:key="item.belongId"
@click="showCurrentGraph(item.name, index)">
{{ item.name }}
</div>
</div>
<div style="width: 80%;height: 100%;border: 1px solid #ccc;overflow: auto;text-align: left;">
<div :style="{ 'display': 'inline-block','margin': '10px', 'border': graphIndex == index ? '2px solid #0D867F' : 'none','padding': '8px', 'border-radius': '6px' }"
v-for="(item, index) in graphList" :key="item.graphId">
<img @click="clickGraph(index)" class="tu_biao_icon" :src="'data:image/svg+xml;base64,'+item.icon" alt="" />
<el-tabs type="border-card">
<el-tab-pane label="标准图元" style="height: 400px;">
</el-tab-pane>
<el-tab-pane label="常规图元" style="height: 400px;">
<div style="height: 400px;display: flex;align-items: center;">
<div style="width: 20%;height: 100%;border-left: 1px solid #ccc;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;overflow: auto;text-align: center;">
<div :style="{ 'cursor': 'pointer', 'padding': '4px', 'background-color': nameIndex == index ? 'rgb(13,134,127)' : '#fff', 'color': nameIndex == index ? '#fff' : '#000' }"
v-for="(item, index) in search_select1"
:key="item.belongId"
@click="showCurrentGraph(item.name, index)">
{{ item.name }}
</div>
</div>
<div style="width: 80%;height: 100%;border: 1px solid #ccc;overflow: auto;text-align: left;">
<div :style="{ 'display': 'inline-block','margin': '10px', 'border': graphIndex == index ? '2px solid #0D867F' : 'none','padding': '8px', 'border-radius': '6px' }"
v-for="(item, index) in graphList" :key="item.graphId">
<img @click="clickGraph(index)" class="tu_biao_icon" :src="'data:image/svg+xml;base64,'+item.icon" alt="" />
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="save_graph">确定</el-button>
<el-button @click="closeGraphDialog">取消</el-button>
......
......@@ -29,14 +29,16 @@
</div>
</div>
<div style="width: 80%;height: 100%;border: 1px solid #ccc;overflow: auto;text-align: left;">
<div :style="{ 'display': 'inline-block','margin': '10px', 'border': graphIndex == index ? '2px solid #0D867F' : 'none','padding': '8px', 'border-radius': '6px' }"
<div :style="{ 'display': 'inline-block', 'text-align': 'center', 'margin': '10px', 'border': graphIndex == index ? '2px solid #0D867F' : 'none','padding': '8px', 'border-radius': '6px' }"
v-for="(item, index) in graphList" :key="item.elementId">
<img @click="clickGraph(index)" class="tu_biao_icon" :src="item.icon" alt="" />
<br />
<span>{{ item.eleName ? item.eleName : item.elementName }}</span>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="confirm">确定</el-button>
<el-button class="greenButton" @click="confirm">关联</el-button>
<el-button @click="closeGraphDialog">取消</el-button>
</span>
</el-dialog>
......@@ -130,6 +132,7 @@
},
get_search_select1() {//查询架构归属下拉框值
const leftGraph = JSON.parse(localStorage.getItem("leftGraph"));
leftGraph.reverse();
this.search_select1 = leftGraph;
},
closeGraphDialog() {//图形选择窗口的取消
......
......@@ -29,14 +29,16 @@
</div>
</div>
<div style="width: 80%;height: 100%;border: 1px solid #ccc;overflow: auto;text-align: left;">
<div :style="{ 'display': 'inline-block','margin': '10px', 'border': graphIndex == index ? '2px solid #0D867F' : 'none','padding': '8px', 'border-radius': '6px' }"
<div :style="{ 'display': 'inline-block','text-align': 'center', 'margin': '10px', 'border': graphIndex == index ? '2px solid #0D867F' : 'none','padding': '8px', 'border-radius': '6px' }"
v-for="(item, index) in graphList" :key="item.elementId">
<img @click="clickGraph(index)" class="tu_biao_icon" :src="item.icon" alt="" />
<br />
<span>{{ item.eleName ? item.eleName : item.elementName }}</span>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="greenButton" @click="confirm">确定</el-button>
<el-button class="greenButton" @click="confirm">关联</el-button>
<el-button @click="closeGraphDialog">取消</el-button>
</span>
</el-dialog>
......@@ -130,6 +132,7 @@
},
get_search_select1() {//查询架构归属下拉框值
const leftGraph = JSON.parse(localStorage.getItem("leftGraph"));
leftGraph.reverse();
this.search_select1 = leftGraph;
},
closeGraphDialog() {//图形选择窗口的取消
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!