diff --git a/src/iscs_new/animateHandle.js b/src/iscs_new/animateHandle.js index 8098a24bd..85885a385 100644 --- a/src/iscs_new/animateHandle.js +++ b/src/iscs_new/animateHandle.js @@ -65,6 +65,7 @@ class Animate { const view = mapView[name]; const model = frame[name]; if (view && model) { + model.visible? view.show(): view.hide(); view.attr({shape: model.shape, style: model.style}); view.dirty(); } @@ -101,4 +102,4 @@ class AnimateHandle { } } -export default AnimateHandle \ No newline at end of file +export default AnimateHandle diff --git a/src/iscs_new/core/form/elementConst.js b/src/iscs_new/core/form/elementConst.js index f8da62988..f52207773 100644 --- a/src/iscs_new/core/form/elementConst.js +++ b/src/iscs_new/core/form/elementConst.js @@ -4,19 +4,43 @@ import * as graphic from '../../core/graphic'; const elementType = Object.fromEntries(Object.keys(graphic).map(type => [type, type])); export const elementConst = { - [elementType.Line]: {code: elementType.Line, name:'线段', formList:{style:[], shape:[] }}, - {code:'text', name:'文字', formList:{style:[], shape:[] }}, - {code:'rect', name:'矩形', formList:{style:[], shape:[] }}, - {code:'circle', name:'圆形', formList:{style:[], shape:[] }}, - {code:'polygon', name:'多边形', formList:{style:[], shape:[] }}, - {code:'triangle', name:'三角形', formList:{style:[], shape:[] }}, - {code:'arrow', name:'箭头', formList:{style:[], shape:[] }}, - {code:'polyline', name:'多边形折线段', formList:{style:[], shape:[] }}, - {code:'isogon', name:'正多边形', formList:{style:[], shape:[] }}, - {code:'ellipse', name:'椭圆', formList:{style:[], shape:[] }}, - {code:'arc', name:'圆弧', formList:{style:[], shape:[] }}, - {code:'sector', name:'扇形', formList:{style:[], shape:[] }}, - {code:'heart', name:'心形', formList:{style:[], shape:[] }}, - {code:'droplet', name:'水滴', formList:{style:[], shape:[] }} - ] + [elementType.Line]: { + code: elementType.Line, name:'线段', formList:{ style:[], shape:[] } + }, + [elementType.Text]: { + code: elementType.Text, name:'文字', formList:{ style:[], shape:[] } + }, + [elementType.Rect]: { + code: elementType.Rect, name:'矩形', formList:{ style:[], shape:[] } + }, + [elementType.Circle]: { + code: elementType.Circle, name:'圆形', formList:{ style:[], shape:[] } + }, + [elementType.Polygon]: { + code: elementType.Polygon, name:'多边形', formList:{ style:[], shape:[] } + }, + [elementType.Arrow]: { + code: elementType.Arrow, name:'箭头', formList:{ style:[], shape:[] } + }, + [elementType.Polyline]: { + code: elementType.Polyline, name:'多边形折线段', formList:{ style:[], shape:[] } + }, + [elementType.Isogon]: { + code: elementType.Isogon, name:'正多边形', formList:{ style:[], shape:[] } + }, + [elementType.Ellipse]: { + code: elementType.Ellipse, name:'椭圆', formList:{ style:[], shape:[] } + }, + [elementType.Arc]: { + code: elementType.Arc, name:'圆弧', formList:{style:[], shape:[] } + }, + [elementType.Sector]: { + code: elementType.Sector, name:'扇形', formList:{style:[], shape:[] } + }, + [elementType.Heart]: { + code: elementType.Heart, name:'心形', formList:{style:[], shape:[] } + }, + [elementType.Droplet]: { + code: elementType.Droplet, name:'水滴', formList:{style:[], shape:[] } + } }; diff --git a/src/iscs_new/core/form/form2Base.js b/src/iscs_new/core/form/form2Base.js index 88bebc05c..14c98eb4f 100644 --- a/src/iscs_new/core/form/form2Base.js +++ b/src/iscs_new/core/form/form2Base.js @@ -1,36 +1,39 @@ export default [ - // number 0 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。 - { prop: 'z', - label: '层级 z', - type: 'number', precisionFlag:0, min:0, max:100, step:1, + { prop: 'z1', + label: '层级 z1', + type: 'number', + precisionFlag: 0, + min:0, + max:20, + step:1, rules:[ { required: true, message:'请输入层级z', trigger: 'blur' } ], - value: 1, - description: '' + value: 10, + description: '控制图形的前后顺序。' }, - { prop: 'z2', label: '层级 z2', - type: 'number', precisionFlag:0, min:0, max:100, step:1, - rules:[{ required: true, message:'请输入层级z2', trigger: 'blur' }], - defValue: 10, required:true - } - // boolean false 图形是否不可见，为 true 时不绘制图形，但是仍能触发鼠标事件。 - // {prop: 'invisible', label: '不可见', type: 'switch', defValue: false,required:true}, - // // boolean false 是否响应鼠标事件。 - // {prop: 'silent', label: '响应鼠标事件', type: 'switch', defValue: false,required:true} - // // boolean false 是否进行裁剪。 - // culling: { - // }, - // // string 'pointer' 鼠标移到元素上时的鼠标样式。 - // cursor: { - // }, - // // boolean false 图形是否可拖曳。 - // draggable: { - // }, - // // number -1 是否渐进式渲染。当图形元素过多时才使用，用大于 0 的数字表示渲染顺序。 - // progressive: { - // }, - // // boolean false 是否使用包围盒检验鼠标是否移动到物体。false 则检测元素实际的内容。 - // rectHover: { - // }, + { + prop: 'z2', + label: '层级 z2', + type: 'number', + precisionFlag: 0, + min: 0, + max: 100, + step: 1, + rules:[ + { required: true, message:'请输入层级z2', trigger: 'blur' } + ], + value: 50, + description: '控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低。' + }, + { + prop: 'visible', + label: '图形是否可见', + type: props.Boolean, + rules:[ + { required: true, message:'请输入层级z2', trigger: 'blur' } + ], + value: false, + description: '图形是否可见，为 false 时不绘制图形。' + } ]; diff --git a/src/iscs_new/transformHandle.js b/src/iscs_new/transformHandle.js index 5dc8ab3c8..e22362181 100644 --- a/src/iscs_new/transformHandle.js +++ b/src/iscs_new/transformHandle.js @@ -15,18 +15,15 @@ export default class TransformHandle { // 检查显隐 checkVisible(shape) { - return utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect); + return shape.model.visible && utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect); } // 重新计算显隐 visibleView(shape) { - let visible = false; if (this.checkVisible(shape)) { shape.show(); - visible = true; } else { shape.hide(); - visible = false; } shape.dirty(); diff --git a/src/views/test/index.vue b/src/views/test/index.vue index c5bf5ddb4..940370fad 100644 --- a/src/views/test/index.vue +++ b/src/views/test/index.vue @@ -112,8 +112,8 @@ export default { stroke: 'black' }, stateList: [ - { status: 'st1', shape: {}, style:{ fill: 'yellow', stroke: 'black'} }, - { status: 'st2', shape: {}, style:{ fill: 'blue', stroke: 'black'} } + { status: 'st1', visible: true, shape: {}, style:{ fill: 'yellow', stroke: 'black'} }, + { status: 'st2', visible: true, shape: {}, style:{ fill: 'blue', stroke: 'black'} } ] }, { name: 'b', @@ -124,8 +124,8 @@ export default { stroke: 'black' }, stateList: [ - { status: 'st1', shape: {}, style:{ fill: 'yellow', stroke: 'black'} }, - { status: 'st2', shape: {}, style:{ fill: 'blue', stroke: 'black'} } + { status: 'st1', visible: true, shape: {}, style:{ fill: 'yellow', stroke: 'black'} }, + { status: 'st2', visible: true, shape: {}, style:{ fill: 'blue', stroke: 'black'} } ] }, ],