Skip to content

Commit 0c73258

Browse files
eclipsegloryeclipseglory
committed
增加menu，以及水平，垂直翻转功能
1 parent e02a7a3 commit 0c73258

8 files changed

Lines changed: 232 additions & 5 deletions

File tree

‎figures/group.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import CanvasKitUtils from "./canvaskit-utils.js";
22
import Figure from "./figure.js";
3-
3+
// TODO #10 : bug:Group中的图形修改后Group的bounds不会修改
44
export default class Group extends Figure {
55
constructor(props) {
66
super(props);

‎src/components/Header.vue‎

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,55 @@
6262
</ul>
6363
</li>
6464
</ul>
65+
66+
<ul class="navbar-nav">
67+
<li class="nav-item dropdown">
68+
<a
69+
class="nav-link dropdown-toggle"
70+
id="editMenuLink"
71+
role="button"
72+
data-bs-toggle="dropdown"
73+
aria-expanded="false"
74+
>
75+
<small><label>Edit</label></small>
76+
</a>
77+
<ul class="dropdown-menu" aria-labelledby="editMenuLink">
78+
<edit-menu />
79+
</ul>
80+
</li>
81+
</ul>
82+
83+
<ul class="navbar-nav">
84+
<li class="nav-item dropdown">
85+
<a
86+
class="nav-link dropdown-toggle"
87+
id="figureMenuLink"
88+
role="button"
89+
data-bs-toggle="dropdown"
90+
aria-expanded="false"
91+
>
92+
<small><label>Figures</label></small>
93+
</a>
94+
<ul class="dropdown-menu" aria-labelledby="figureMenuLink">
95+
<figure-menu />
96+
</ul>
97+
</li>
98+
</ul>
99+
100+
<!-- <ul class="navbar-nav">
101+
<li class="nav-item dropdown">
102+
<a
103+
class="nav-link dropdown-toggle"
104+
id="selectMenuLink"
105+
role="button"
106+
data-bs-toggle="dropdown"
107+
aria-expanded="false"
108+
>
109+
<small><label>Select</label></small>
110+
</a>
111+
<ul class="dropdown-menu" aria-labelledby="selectMenuLink"></ul>
112+
</li>
113+
</ul> -->
65114
</div>
66115
<new-doc-dialog :show="showDocDialog" @dialog:hidden="docDialogHidden" />
67116
<load-dialog :show="showLoadDialog" @dialog:hidden="loadDialogHidden" />
@@ -74,11 +123,13 @@ import NewDocDialog from "./NewDocDialog.vue";
74123
import docstoremapper from "../store/doc-store-mapper";
75124
import LoadDialog from "./LoadDialog.vue";
76125
import { exportToSVG } from "figures/exporter";
126+
import EditMenu from "./menus/edit-menu.vue";
127+
import FigureMenu from "./menus/figure-menu.vue";
77128
78129
export default {
79130
mixins: [docstoremapper],
80131
name: "Header",
81-
components: { NewDocDialog, LoadDialog },
132+
components: { NewDocDialog, LoadDialog, EditMenu, FigureMenu },
82133
emits: ["document:new", "svg:create", "document:update"],
83134
84135
data() {
@@ -158,4 +209,23 @@ export default {
158209
padding: 2px 20px 2px 20px;
159210
box-sizing: border-box;
160211
}
212+
213+
/* ============ desktop view ============ */
214+
@media all and (min-width: 992px) {
215+
.navbar-nav li {
216+
position: relative;
217+
}
218+
.navbar-nav li .submenu {
219+
display: none;
220+
position: absolute;
221+
left: 100%;
222+
top: -7px;
223+
}
224+
.navbar-nav li:hover > .submenu {
225+
display: block;
226+
}
227+
}
228+
/* ============ desktop view .end// ============ */
229+
230+
161231
</style>

‎src/components/menus/base-menu.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<li>
3+
<a class="dropdown-item" @click="undo" :class="canUndo ? '' : 'disabled'">
4+
<small><label>Undo</label></small></a
5+
>
6+
</li>
7+
<li>
8+
<a class="dropdown-item" @click="redo" :class="canRedo ? '' : 'disabled'">
9+
<small><label>Redo</label></small></a
10+
>
11+
</li>
12+
</template>
13+
14+
<script>
15+
import docstoremapper from "../../store/doc-store-mapper";
16+
17+
const mixins = [docstoremapper];
18+
export default {
19+
mixins,
20+
};
21+
</script>
22+
23+
<style>
24+
</style>

‎src/components/menus/edit-menu.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<li>
3+
<a class="dropdown-item" @click="undo" :class="canUndo ? '' : 'disabled'">
4+
<small><label>Undo</label></small></a
5+
>
6+
</li>
7+
<li>
8+
<a class="dropdown-item" @click="redo" :class="canRedo ? '' : 'disabled'">
9+
<small><label>Redo</label></small></a
10+
>
11+
</li>
12+
<li><hr class="dropdown-divider" /></li>
13+
<li>
14+
<a
15+
class="dropdown-item"
16+
@click="deleteSelections"
17+
:class="canDelete ? '' : 'disabled'"
18+
>
19+
<small><label>Delete</label></small></a
20+
>
21+
</li>
22+
</template>
23+
24+
<script>
25+
import baseMenuVue from "./base-menu.vue";
26+
27+
import { selectiondeleteprocessor } from "../../mixins";
28+
29+
const mixins = [selectiondeleteprocessor];
30+
export default {
31+
extends: baseMenuVue,
32+
mixins,
33+
computed: {
34+
canRedo() {
35+
if (this.actionStack) return this.actionStack.canRedo();
36+
},
37+
canUndo() {
38+
if (this.actionStack) return this.actionStack.canUndo();
39+
},
40+
},
41+
};
42+
</script>
43+
44+
<style>
45+
</style>

‎src/components/menus/figure-menu.vue‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<li>
3+
<a class="dropdown-item">
4+
<small><label>Symmetry</label></small>
5+
<label class="float-end">&raquo;</label></a
6+
>
7+
<ul class="submenu dropdown-menu">
8+
<li>
9+
<a
10+
class="dropdown-item"
11+
:class="isEmptySelections ? 'disabled' : ''"
12+
@click="horizontalFigures"
13+
><small><label>Horizontal</label></small></a
14+
>
15+
</li>
16+
<li>
17+
<a
18+
class="dropdown-item"
19+
:class="isEmptySelections ? 'disabled' : ''"
20+
@click="verticalFigures"
21+
><small><label>Vertical</label></small></a
22+
>
23+
</li>
24+
</ul>
25+
</li>
26+
27+
<!-- <li>
28+
<a class="dropdown-item">
29+
<small><label>Order</label></small>
30+
<label class="float-end">&raquo;</label></a
31+
>
32+
<ul class="submenu dropdown-menu">
33+
<li>
34+
<a class="dropdown-item" :class="isEmptySelections ? 'disabled' : ''"
35+
><small><label>Front</label></small></a
36+
>
37+
</li>
38+
<li>
39+
<a class="dropdown-item" :class="isEmptySelections ? 'disabled' : ''"
40+
><small><label>Vertical</label></small></a
41+
>
42+
</li>
43+
</ul>
44+
</li>
45+
46+
<li><hr class="dropdown-divider" /></li> -->
47+
</template>
48+
49+
<script>
50+
import { ActionFactory, CompositeAction } from "../../actions";
51+
import baseMenuVue from "./base-menu.vue";
52+
export default {
53+
extends: baseMenuVue,
54+
methods: {
55+
horizontalFigures() {
56+
console.log(this.selections);
57+
if (this.selections) {
58+
let actions = new CompositeAction();
59+
this.selections.forEach((selection) => {
60+
let sx = selection.scalex;
61+
actions.add(
62+
ActionFactory.newChangePropertyAction(selection, "scalex", -sx)
63+
);
64+
});
65+
this.excuteAction(actions);
66+
}
67+
},
68+
verticalFigures() {
69+
if (this.selections) {
70+
let actions = new CompositeAction();
71+
this.selections.forEach((selection) => {
72+
let sy = selection.scaley;
73+
actions.add(
74+
ActionFactory.newChangePropertyAction(selection, "scaley", -sy)
75+
);
76+
});
77+
this.excuteAction(actions);
78+
}
79+
},
80+
},
81+
};
82+
</script>
83+
84+
<style>
85+
</style>

‎src/components/workspace/Canvas.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -504,8 +504,8 @@ export default {
504504
if (type == "minus") {
505505
action = ActionFactory.newDeletePointAction(path, index);
506506
}
507-
if(type =='change'){
508-
action = ActionFactory.newChangePropertyAction(point,'out',null);
507+
if (type == "change") {
508+
action = ActionFactory.newChangePropertyAction(point, "out", null);
509509
}
510510
if (action) this.excuteAction(action);
511511
if (type == "close") {

‎src/main.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@ import router from './router'
44
import store from './store'
55

66
createApp(App).use(store).use(router).mount('#app')
7+
8+
9+
// TODO #12 实现像素转矢量功能

‎src/mixins/clip-processor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default {
7474

7575
this.excuteAction(actions);
7676
},
77-
77+
// TODO #11 取消剪切蒙版后，剪切主体在图层下，应该在图层顶部
7878
unClip() {
7979
let masks = [];
8080
this.selections.forEach((selection) => {

0 commit comments

Comments
 (0)