Skip to content

Commit 2772f81

Browse files
SSShooterSSShooter
committed
fix: optimize main node style
1 parent 59571d5 commit 2772f81

File tree

3 files changed

+118
-110
lines changed

3 files changed

+118
-110
lines changed

‎src/index.less‎

Lines changed: 114 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,15 @@
3131
width: 0px;
3232
height: 0px;
3333
}
34+
.selected {
35+
box-shadow: 0 0 0 2px #4dc4ff;
36+
}
37+
.lhs {
38+
direction: rtl;
39+
me-tpc {
40+
direction: ltr;
41+
}
42+
}
3443
.map-canvas {
3544
height: 20000px;
3645
width: 20000px;
@@ -39,9 +48,6 @@
3948
transition: all 0.3s;
4049
transform: scale(1);
4150
background-color: var(--bgcolor);
42-
.selected {
43-
outline: 2px solid #4dc4ff;
44-
}
4551
me-root {
4652
position: absolute;
4753
padding: 10px var(--gap);
@@ -59,118 +65,118 @@
5965
}
6066
}
6167
.box {
68+
// main node
6269
& > me-wrapper {
63-
// for main node
6470
position: absolute;
6571
& > me-parent {
6672
margin: var(--gap);
6773
background-color: var(--main-bgcolor);
6874
border: 1px solid var(--main-color);
69-
padding: 8px var(--gap);
7075
border-radius: var(--main-radius);
76+
padding: 0;
7177
& > me-tpc {
78+
border-radius: var(--main-radius);
7279
color: var(--main-color);
80+
padding: 8px var(--gap);
81+
#input-box {
82+
padding: 8px var(--gap);
83+
}
7384
}
7485
}
7586
}
76-
.lhs {
77-
direction: rtl;
78-
me-tpc {
79-
direction: ltr;
80-
}
81-
}
82-
me-wrapper {
83-
display: block;
84-
pointer-events: none;
85-
}
86-
me-children,
87-
me-parent {
88-
display: inline-block;
89-
vertical-align: middle;
90-
}
91-
me-parent {
87+
}
88+
me-wrapper {
89+
display: block;
90+
pointer-events: none;
91+
}
92+
me-children,
93+
me-parent {
94+
display: inline-block;
95+
vertical-align: middle;
96+
}
97+
me-parent {
98+
position: relative;
99+
cursor: pointer;
100+
padding: 6px var(--gap);
101+
margin-top: 10px;
102+
me-tpc {
92103
position: relative;
93-
cursor: pointer;
94-
padding: 6px var(--gap);
95-
margin-top: 10px;
96-
me-tpc {
97-
position: relative;
98-
display: block;
99-
border-radius: 3px;
100-
color: var(--color);
101-
pointer-events: all;
102-
max-width: 800px;
103-
white-space: pre-wrap;
104-
line-height: 1.2; // assure the line-height consistency between different languages
105-
.tags {
106-
direction: ltr;
107-
span {
108-
display: inline-block;
109-
border-radius: 3px;
110-
padding: 2px 4px;
111-
background: #d6f0f8;
112-
color: #276f86;
113-
margin: 0px;
114-
font-size: 12px;
115-
height: 16px;
116-
line-height: 16px;
117-
margin-right: 3px;
118-
margin-top: 2px;
119-
}
120-
}
121-
.icons {
104+
display: block;
105+
border-radius: 3px;
106+
color: var(--color);
107+
pointer-events: all;
108+
max-width: 800px;
109+
white-space: pre-wrap;
110+
line-height: 1.2; // assure the line-height consistency between different languages
111+
.tags {
112+
direction: ltr;
113+
span {
122114
display: inline-block;
123-
direction: ltr;
124-
margin-right: 10px;
125-
}
126-
// drag preview
127-
.insert-preview {
128-
position: absolute;
129-
width: 100%;
130-
left: 0px;
131-
z-index: 9;
132-
}
133-
.show {
134-
background: #7ad5ff;
135-
pointer-events: none; // 不加会识别为不可移动
136-
opacity: 0.7;
137-
}
138-
.before {
139-
height: 14px;
140-
top: -14px;
141-
}
142-
.in {
143-
height: 100%;
144-
top: 0px;
145-
}
146-
.after {
147-
height: 14px;
148-
bottom: -14px;
115+
border-radius: 3px;
116+
padding: 2px 4px;
117+
background: #d6f0f8;
118+
color: #276f86;
119+
margin: 0px;
120+
font-size: 12px;
121+
height: 16px;
122+
line-height: 16px;
123+
margin-right: 3px;
124+
margin-top: 2px;
149125
}
150126
}
151-
me-epd {
127+
.icons {
128+
display: inline-block;
129+
direction: ltr;
130+
margin-right: 10px;
131+
}
132+
// drag preview
133+
.insert-preview {
152134
position: absolute;
153-
height: 18px;
154-
width: 18px;
155-
opacity: 0.8;
156-
background-image: url('./icons/add-circle.svg');
157-
background-repeat: no-repeat;
158-
background-size: contain;
159-
background-position: center;
160-
161-
pointer-events: all;
135+
width: 100%;
136+
left: 0px;
162137
z-index: 9;
163-
&.minus {
164-
background-image: url('./icons/minus-circle.svg') !important;
165-
transition: all 0.3s;
166-
opacity: 0;
167-
&:hover {
168-
opacity: 0.8;
169-
}
138+
}
139+
.show {
140+
background: #7ad5ff;
141+
pointer-events: none; // 不加会识别为不可移动
142+
opacity: 0.7;
143+
}
144+
.before {
145+
height: 14px;
146+
top: -14px;
147+
}
148+
.in {
149+
height: 100%;
150+
top: 0px;
151+
}
152+
.after {
153+
height: 14px;
154+
bottom: -14px;
155+
}
156+
}
157+
me-epd {
158+
position: absolute;
159+
height: 18px;
160+
width: 18px;
161+
opacity: 0.8;
162+
background-image: url('./icons/add-circle.svg');
163+
background-repeat: no-repeat;
164+
background-size: contain;
165+
background-position: center;
166+
167+
pointer-events: all;
168+
z-index: 9;
169+
&.minus {
170+
background-image: url('./icons/minus-circle.svg') !important;
171+
transition: all 0.3s;
172+
opacity: 0;
173+
&:hover {
174+
opacity: 0.8;
170175
}
171176
}
172177
}
173178
}
179+
174180
// iconfont
175181
.icon {
176182
width: 1em;
@@ -225,20 +231,21 @@
225231
direction: ltr;
226232
user-select: auto;
227233
}
228-
}
229234

230-
me-tpc > img {
231-
pointer-events: none;
232-
display: block;
233-
}
235+
me-tpc > img {
236+
pointer-events: none;
237+
display: block;
238+
margin-top: 8px;
239+
}
234240

235-
.circle {
236-
position: absolute;
237-
height: 10px;
238-
width: 10px;
239-
margin-top: -5px;
240-
margin-left: -5px;
241-
border-radius: 100%;
242-
background: #aaa;
243-
cursor: pointer;
241+
.circle {
242+
position: absolute;
243+
height: 10px;
244+
width: 10px;
245+
margin-top: -5px;
246+
margin-left: -5px;
247+
border-radius: 100%;
248+
background: #aaa;
249+
cursor: pointer;
250+
}
244251
}

‎src/linkDiv.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export default function linkDiv(mainNode: Wrapper) {
163163
}
164164

165165
// core function of generate subLines
166-
function traverseChildren(children: HTMLCollection, parent: Parent, isFirst?: boolean): string {
166+
const traverseChildren: TraverseChildrenFunc = function (children, parent, isFirst) {
167167
let path = ''
168168
const pT = parent.offsetTop
169169
const pL = parent.offsetLeft
@@ -184,9 +184,9 @@ function traverseChildren(children: HTMLCollection, parent: Parent, isFirst?: bo
184184
if (expander) {
185185
expander.style.bottom = -(expander.offsetHeight / 2) + 'px'
186186
if (direction === 'lhs') {
187-
expander.style.left = -10 + 'px'
187+
expander.style.left = 0 + 'px'
188188
} else if (direction === 'rhs') {
189-
expander.style.left = childT.offsetWidth - 10 + 'px'
189+
expander.style.left = childT.offsetWidth + 'px'
190190
}
191191
// this property is added in the layout phase
192192
if (!expander.expanded) continue

‎types/mind-elixir/function.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ type ReshapeNode = (this: MindElixirInstance, tpc: Topic, patchData: NodeObj) =>
2727
type Layout = (this: MindElixirInstance) => void
2828
type LayoutChildren = (this: MindElixirInstance, data: NodeObj[], container?: Children, direction?) => Children
2929
type LinkDiv = (this: MindElixirInstance, mainNode?: Wrapper) => void
30+
type TraverseChildrenFunc = (children: HTMLCollection, parent: Parent, isFirst?: boolean) => string
3031
type JudgeDirection = (this: MindElixirInstance, mainNode: Wrapper, obj: NodeObj) => void
3132

3233
type ExpandNode = (this: MindElixirInstance, el: Topic, isExpand: boolean) => void

0 commit comments

Comments
 (0)