dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 复用视图时矩阵模式Y方向改为动态取值，防止平铺复用的视图时出现重叠

Browse Source
This commit is contained in:
wangjiahao 2022-07-05 18:44:32 +08:00
parent ab8763d3fd
commit 025c945db0
8 changed files with 425 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/canvas/store/copy.js
View File

@ -17,15 +17,21 @@ export default {
left: 0
},
x: 1,
y: 108,
y: 216,
sizex: 48,
sizey: 24
}
},
mutations: {
copyMultiplexingComponents(state) {
let pYMax = 0
const _this = this
state.isCut = false
state.componentData.forEach(item => {
if (item.y > pYMax) {
pYMax = item.y
}
})
const canvasStyleData = state.canvasStyleData
const curCanvasScale = state.curCanvasScale
const componentGap = state.componentGap
@ -33,7 +39,7 @@ export default {
const component =
{
...deepCopy(state.curMultiplexingComponents[viewId]),
...deepCopy(state.viewBase),
...deepCopy(deepCopy(state.viewBase)),
'auxiliaryMatrix': canvasStyleData.auxiliaryMatrix
}
@ -43,6 +49,8 @@ export default {
const width = component.sizex * curCanvasScale.matrixStyleOriginWidth
// 取余 平铺4个 此处x 位置偏移
component.x = component.x + component.sizex * tilePosition
// Y 方向根据当前应该放置的最大值 加上50矩阵余量
component.y = pYMax + 50 + state.viewBase.sizex * divisiblePosition
component.style.left = (component.x - 1) * curCanvasScale.matrixStyleOriginWidth
component.style.top = (component.y - 1) * curCanvasScale.matrixStyleOriginHeight
component.style.width = width
@ -85,17 +93,7 @@ export default {
data.style.top += 20
data.style.left += 20
}
// if (isMouse) {
// data.style.top = state.menuTop
// data.style.left = state.menuLeft
// } else {
// data.style.top += 10
// data.style.left += 10
// }
data.id = generateID()
// 如果是用户视图 测先进行底层复制
if (data.type === 'view') {
chartCopy(data.propValue.viewId, state.panel.panelInfo.id).then(res => {

282
frontend/src/styles/deicon/demo_index.html
View File

@ -54,6 +54,78 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">icon_clear_outlined</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">icon_dialpad_outlined</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">icon_effects_outlined</div>
<div class="code-name">&amp;#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">icon_magnify_outlined</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe623;</span>
<div class="name">icon_moments-categories_outlined</div>
<div class="code-name">&amp;#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe626;</span>
<div class="name">icon_pc_outlined</div>
<div class="code-name">&amp;#xe626;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe627;</span>
<div class="name">icon_phone_outlined</div>
<div class="code-name">&amp;#xe627;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">icon_redo_outlined</div>
<div class="code-name">&amp;#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62b;</span>
<div class="name">icon_undo_outlined</div>
<div class="code-name">&amp;#xe62b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">icon-more</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62f;</span>
<div class="name">icon-quicksetting</div>
<div class="code-name">&amp;#xe62f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe73e;</span>
<div class="name">square-selected</div>
<div class="code-name">&amp;#xe73e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe777;</span>
<div class="name">italic</div>
@ -648,9 +720,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1655779264671') format('woff2'),
url('iconfont.woff?t=1655779264671') format('woff'),
url('iconfont.ttf?t=1655779264671') format('truetype');
src: url('iconfont.woff2?t=1657014969539') format('woff2'),
url('iconfont.woff?t=1657014969539') format('woff'),
url('iconfont.ttf?t=1657014969539') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -676,6 +748,114 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-icon_clear_outlined"></span>
<div class="name">
icon_clear_outlined
</div>
<div class="code-name">.icon-icon_clear_outlined
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon_dialpad_outlined"></span>
<div class="name">
icon_dialpad_outlined
</div>
<div class="code-name">.icon-icon_dialpad_outlined
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon_effects_outlined"></span>
<div class="name">
icon_effects_outlined
</div>
<div class="code-name">.icon-icon_effects_outlined
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon_magnify_outlined"></span>
<div class="name">
icon_magnify_outlined
</div>
<div class="code-name">.icon-icon_magnify_outlined
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon_moments-categories_outlined"></span>
<div class="name">
icon_moments-categories_outlined
</div>
<div class="code-name">.icon-icon_moments-categories_outlined
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon_pc_outlined"></span>
<div class="name">
icon_pc_outlined
</div>
<div class="code-name">.icon-icon_pc_outlined
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon_phone_outlined"></span>
<div class="name">
icon_phone_outlined
</div>
<div class="code-name">.icon-icon_phone_outlined
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon_redo_outlined"></span>
<div class="name">
icon_redo_outlined
</div>
<div class="code-name">.icon-icon_redo_outlined
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon_undo_outlined"></span>
<div class="name">
icon_undo_outlined
</div>
<div class="code-name">.icon-icon_undo_outlined
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-more"></span>
<div class="name">
icon-more
</div>
<div class="code-name">.icon-icon-more
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-quicksetting"></span>
<div class="name">
icon-quicksetting
</div>
<div class="code-name">.icon-icon-quicksetting
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-square-selected"></span>
<div class="name">
square-selected
</div>
<div class="code-name">.icon-square-selected
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-italic"></span>
<div class="name">
@ -1567,6 +1747,102 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon_clear_outlined"></use>
</svg>
<div class="name">icon_clear_outlined</div>
<div class="code-name">#icon-icon_clear_outlined</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon_dialpad_outlined"></use>
</svg>
<div class="name">icon_dialpad_outlined</div>
<div class="code-name">#icon-icon_dialpad_outlined</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon_effects_outlined"></use>
</svg>
<div class="name">icon_effects_outlined</div>
<div class="code-name">#icon-icon_effects_outlined</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon_magnify_outlined"></use>
</svg>
<div class="name">icon_magnify_outlined</div>
<div class="code-name">#icon-icon_magnify_outlined</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon_moments-categories_outlined"></use>
</svg>
<div class="name">icon_moments-categories_outlined</div>
<div class="code-name">#icon-icon_moments-categories_outlined</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon_pc_outlined"></use>
</svg>
<div class="name">icon_pc_outlined</div>
<div class="code-name">#icon-icon_pc_outlined</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon_phone_outlined"></use>
</svg>
<div class="name">icon_phone_outlined</div>
<div class="code-name">#icon-icon_phone_outlined</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon_redo_outlined"></use>
</svg>
<div class="name">icon_redo_outlined</div>
<div class="code-name">#icon-icon_redo_outlined</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon_undo_outlined"></use>
</svg>
<div class="name">icon_undo_outlined</div>
<div class="code-name">#icon-icon_undo_outlined</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-more"></use>
</svg>
<div class="name">icon-more</div>
<div class="code-name">#icon-icon-more</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-quicksetting"></use>
</svg>
<div class="name">icon-quicksetting</div>
<div class="code-name">#icon-icon-quicksetting</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-square-selected"></use>
</svg>
<div class="name">square-selected</div>
<div class="code-name">#icon-square-selected</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-italic"></use>

54
frontend/src/styles/deicon/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1655779264671') format('woff2'),
url('iconfont.woff?t=1655779264671') format('woff'),
url('iconfont.ttf?t=1655779264671') format('truetype');
src: url('iconfont.woff2?t=1657014969539') format('woff2'),
url('iconfont.woff?t=1657014969539') format('woff'),
url('iconfont.ttf?t=1657014969539') format('truetype');
}
.iconfont {
@ -13,6 +13,54 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-icon_clear_outlined:before {
content: "\e61d";
}
.icon-icon_dialpad_outlined:before {
content: "\e61e";
}
.icon-icon_effects_outlined:before {
content: "\e620";
}
.icon-icon_magnify_outlined:before {
content: "\e621";
}
.icon-icon_moments-categories_outlined:before {
content: "\e623";
}
.icon-icon_pc_outlined:before {
content: "\e626";
}
.icon-icon_phone_outlined:before {
content: "\e627";
}
.icon-icon_redo_outlined:before {
content: "\e629";
}
.icon-icon_undo_outlined:before {
content: "\e62b";
}
.icon-icon-more:before {
content: "\e62e";
}
.icon-icon-quicksetting:before {
content: "\e62f";
}
.icon-square-selected:before {
content: "\e73e";
}
.icon-italic:before {
content: "\e777";
}

2
frontend/src/styles/deicon/iconfont.js
View File

File diff suppressed because one or more lines are too long

84
frontend/src/styles/deicon/iconfont.json
View File

@ -5,6 +5,90 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "30335147",
"name": "icon_clear_outlined",
"font_class": "icon_clear_outlined",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "30335253",
"name": "icon_dialpad_outlined",
"font_class": "icon_dialpad_outlined",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "30335256",
"name": "icon_effects_outlined",
"font_class": "icon_effects_outlined",
"unicode": "e620",
"unicode_decimal": 58912
},
{
"icon_id": "30335257",
"name": "icon_magnify_outlined",
"font_class": "icon_magnify_outlined",
"unicode": "e621",
"unicode_decimal": 58913
},
{
"icon_id": "30335264",
"name": "icon_moments-categories_outlined",
"font_class": "icon_moments-categories_outlined",
"unicode": "e623",
"unicode_decimal": 58915
},
{
"icon_id": "30335293",
"name": "icon_pc_outlined",
"font_class": "icon_pc_outlined",
"unicode": "e626",
"unicode_decimal": 58918
},
{
"icon_id": "30335296",
"name": "icon_phone_outlined",
"font_class": "icon_phone_outlined",
"unicode": "e627",
"unicode_decimal": 58919
},
{
"icon_id": "30335326",
"name": "icon_redo_outlined",
"font_class": "icon_redo_outlined",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "30335389",
"name": "icon_undo_outlined",
"font_class": "icon_undo_outlined",
"unicode": "e62b",
"unicode_decimal": 58923
},
{
"icon_id": "30335393",
"name": "icon-more",
"font_class": "icon-more",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "30335394",
"name": "icon-quicksetting",
"font_class": "icon-quicksetting",
"unicode": "e62f",
"unicode_decimal": 58927
},
{
"icon_id": "19959130",
"name": "square-selected",
"font_class": "square-selected",
"unicode": "e73e",
"unicode_decimal": 59198
},
{
"icon_id": "2958392",
"name": "italic",

BIN
frontend/src/styles/deicon/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff2
View File

Binary file not shown.