Skip to content

Commit 38f4da2

Browse files
easylogiceasylogic
committed
Refactoring.....
1 parent 000a134 commit 38f4da2

File tree

15 files changed

+129
-398
lines changed

15 files changed

+129
-398
lines changed

‎docs/bundle.css‎

Lines changed: 17 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -3368,9 +3368,9 @@ html, body {
33683368
width: 100%;
33693369
}
33703370
.csseditor .border-item {
3371+
display: grid;
33713372
grid-template-columns: 1fr 3fr;
33723373
grid-column-gap: 10px;
3373-
height: 85px;
33743374
}
33753375
.csseditor .border-item .border-direction {
33763376
position: relative;
@@ -3482,14 +3482,16 @@ html, body {
34823482
border-radius: 100%;
34833483
}
34843484
.csseditor .border-slice-item {
3485-
grid-template-columns: 0.6fr 3fr !important;
3485+
display: grid;
3486+
grid-template-columns: 50px 1fr;
3487+
grid-column-gap: 2px;
34863488
}
3487-
.csseditor .border-slice-item.has-list {
3488-
grid-template-columns: 1fr !important;
3489+
.csseditor .border-slice-item.full {
3490+
grid-template-columns: 1fr;
34893491
}
34903492
.csseditor .border-slice-item .slice-selector {
3491-
display: flex;
3492-
grid-template-columns: 1fr;
3493+
display: grid;
3494+
grid-template-columns: 1fr 1fr;
34933495
}
34943496
.csseditor .border-slice-item .slice-selector[data-selected-value=all] button[data-value=all] {
34953497
background-color: black;
@@ -3528,37 +3530,13 @@ html, body {
35283530
.csseditor .border-slice-item .slice-selector button svg path {
35293531
fill: #cccccc;
35303532
}
3531-
.csseditor .border-slice-item .slice-value {
3532-
display: grid;
3533-
grid-template-columns: 2fr 1fr 1fr;
3534-
grid-column-gap: 3px;
3535-
}
3536-
.csseditor .border-slice-item .slice-value input,
3537-
.csseditor .border-slice-item .slice-value select {
3538-
width: 100%;
3539-
outline: none;
3540-
}
35413533
.csseditor .border-slice-item .slice-setting-box {
35423534
display: grid;
35433535
grid-template-columns: repeat(1, 1fr);
35443536
grid-column-gap: 4px;
35453537
grid-row-gap: 2px;
35463538
}
3547-
.csseditor .border-slice-item .slice-setting-box > div {
3548-
display: grid;
3549-
grid-template-columns: 46px 1fr 60px 60px;
3550-
grid-column-gap: 4px;
3551-
text-align: center;
3552-
}
3553-
.csseditor .border-slice-item .slice-setting-box > div > * {
3554-
vertical-align: middle;
3555-
}
3556-
.csseditor .border-slice-item .slice-setting-box > div input,
3557-
.csseditor .border-slice-item .slice-setting-box > div select {
3558-
width: 100%;
3559-
outline: none;
3560-
}
3561-
.csseditor .border-slice-item .slice-setting-box > div label {
3539+
.csseditor .border-slice-item .slice-setting-box > div > label {
35623540
display: inline-block;
35633541
vertical-align: middle;
35643542
margin-right: 2px;
@@ -3568,7 +3546,7 @@ html, body {
35683546
margin-top: 2px;
35693547
text-align: right;
35703548
}
3571-
.csseditor .border-slice-item .slice-setting-box > div label.title {
3549+
.csseditor .border-slice-item .slice-setting-box > div > label.title {
35723550
font-weight: bold;
35733551
text-align: left;
35743552
}
@@ -4575,12 +4553,16 @@ html, body {
45754553
width: 100%;
45764554
height: 100%;
45774555
}
4578-
.csseditor .border-radius-editor {
4556+
.csseditor .border-radius-editor .border-radius-item {
4557+
display: grid;
4558+
grid-template-columns: 50px 1fr;
4559+
}
4560+
.csseditor .border-radius-editor .border-radius-item.full {
45794561
grid-template-columns: 1fr;
45804562
}
45814563
.csseditor .border-radius-editor .radius-selector {
4582-
display: flex;
4583-
grid-template-columns: 1fr;
4564+
display: grid;
4565+
grid-template-columns: 1fr 1fr;
45844566
}
45854567
.csseditor .border-radius-editor .radius-selector[data-selected-value=all] button[data-value=all] {
45864568
background-color: black;
@@ -4619,60 +4601,6 @@ html, body {
46194601
.csseditor .border-radius-editor .radius-selector button svg path {
46204602
fill: #cccccc;
46214603
}
4622-
.csseditor .border-radius-editor .radius-value {
4623-
display: grid;
4624-
grid-template-columns: 2fr 1fr 1fr;
4625-
grid-column-gap: 3px;
4626-
}
4627-
.csseditor .border-radius-editor .radius-value input,
4628-
.csseditor .border-radius-editor .radius-value select {
4629-
width: 100%;
4630-
outline: none;
4631-
}
4632-
.csseditor .border-radius-editor .radius-setting-box {
4633-
display: grid;
4634-
grid-template-columns: repeat(2, 1fr);
4635-
grid-template-rows: repeat(2, 1fr);
4636-
grid-column-gap: 4px;
4637-
grid-row-gap: 2px;
4638-
}
4639-
.csseditor .border-radius-editor .radius-setting-box > div {
4640-
display: grid;
4641-
grid-template-columns: 20px 1fr 1.4fr;
4642-
text-align: center;
4643-
}
4644-
.csseditor .border-radius-editor .radius-setting-box > div > * {
4645-
vertical-align: middle;
4646-
}
4647-
.csseditor .border-radius-editor .radius-setting-box > div input,
4648-
.csseditor .border-radius-editor .radius-setting-box > div select {
4649-
width: 100%;
4650-
outline: none;
4651-
}
4652-
.csseditor .border-radius-editor .radius-setting-box > div label {
4653-
width: 16px;
4654-
height: 16px;
4655-
display: inline-block;
4656-
vertical-align: middle;
4657-
border: 2px solid #333;
4658-
margin-right: 2px;
4659-
cursor: pointer;
4660-
outline: none;
4661-
position: relative;
4662-
margin-top: 2px;
4663-
}
4664-
.csseditor .border-radius-editor .radius-setting-box > div label.border-top-left-radius {
4665-
border-top-left-radius: 10px;
4666-
}
4667-
.csseditor .border-radius-editor .radius-setting-box > div label.border-top-right-radius {
4668-
border-top-right-radius: 10px;
4669-
}
4670-
.csseditor .border-radius-editor .radius-setting-box > div label.border-bottom-left-radius {
4671-
border-bottom-left-radius: 10px;
4672-
}
4673-
.csseditor .border-radius-editor .radius-setting-box > div label.border-bottom-right-radius {
4674-
border-bottom-right-radius: 10px;
4675-
}
46764604
.csseditor .transform-editor .label {
46774605
height: 20px;
46784606
margin-top: 2px;

‎docs/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/csseditor/ui/control/panel/property/BorderImageProperty.js‎

Lines changed: 26 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import icon from "../../../icon/icon";
77
import { EMPTY_STRING } from "../../../../../util/css/types";
88
import { EVENT } from "../../../../../util/UIElement";
99
import { CHANGE_SELECTION, CHANGE_ARTBOARD, CHANGE_EDITOR } from "../../../../types/event";
10+
import RangeEditor from "../../shape/property-editor/RangeEditor";
1011

1112
const typeList = [
1213
{ key: "top", title: "Top" },
@@ -20,7 +21,6 @@ const keyList = typeList.map(it => it.key);
2021

2122
const names = {
2223
image: "Image",
23-
static: "Static",
2424
"static-gradient": "Static",
2525
"linear-gradient": "Linear",
2626
"repeating-linear-gradient": `${icon.repeat} Linear`,
@@ -41,7 +41,14 @@ const types = {
4141
"repeating-conic-gradient": "gradient"
4242
};
4343

44+
45+
4446
export default class BorderImageProperty extends BaseProperty {
47+
components() {
48+
return {
49+
RangeEditor
50+
}
51+
}
4552
getTitle() {
4653
return "Border Image";
4754
}
@@ -122,6 +129,17 @@ export default class BorderImageProperty extends BaseProperty {
122129
`
123130
}
124131

132+
[EVENT('changeBorderImage')] (key, value) {
133+
134+
if (key === 'border-image-slice') {
135+
keyList.forEach(type => {
136+
this.children[`$${type}Slice`].setValue(value)
137+
});
138+
}
139+
140+
this.setBorderImageProperty()
141+
}
142+
125143
getBody() {
126144

127145
var current = editor.selection.current || {borderImage: { image: {}}} ;
@@ -137,52 +155,25 @@ export default class BorderImageProperty extends BaseProperty {
137155
</button>
138156
</div>
139157
<div class="slice-value">
140-
<input type="range" min="0" max="100" ref="$range" value="0" />
141-
<input type="number" min="0" max="100" ref="$number" value="0" />
142-
<select ref="$unit">
143-
<option value="px">px</option>
144-
<option value="%">%</option>
145-
<option value="em">em</option>
146-
</select>
158+
<RangeEditor ref='$allSlice' key='border-image-slice' onchange='changeBorderImage' />
147159
</div>
148160
</div>
149161
<div
150-
class="property-item border-slice-item has-list"
162+
class="property-item border-slice-item full has-list"
151163
ref="$partitialSetting"
152164
style="display: none;"
153165
>
154-
<label></label>
155166
<div class="slice-setting-box" ref="$sliceSettingBox">
156167
${typeList.map(it => {
157168
return `
158169
<div>
159170
<label class='title'>${it.title}</label>
160171
</div>
161172
<div>
162-
<label>Slice</label>
163-
<input type="range" ref="$${
164-
it.key
165-
}SliceRange" min="0" value="0" data-key="${it.key}" data-type='Slice' />
166-
<input type="number" ref="$${
167-
it.key
168-
}Slice" min="0" value="0" data-key="${it.key}" data-type='Slice' />
169-
<select ref="$${it.key}SliceUnit" data-key="${it.key}">
170-
<option value='px'>px</option>
171-
<option value='%'>%</option>
172-
</select>
173+
<RangeEditor ref='$${it.key}Slice' label='Slice' key='border-image-slice-${it.key}' onchange='changeBorderImage' />
173174
</div>
174175
<div>
175-
<label>Width</label>
176-
<input type="range" ref="$${
177-
it.key
178-
}WidthRange" min="0" value="0" data-key="${it.key}" data-type='Width'/>
179-
<input type="number" ref="$${
180-
it.key
181-
}Width" min="0" value="0" data-key="${it.key}" data-type='Width' />
182-
<select ref="$${it.key}WidthUnit" data-key="${it.key}">
183-
<option value='px'>px</option>
184-
<option value='%'>%</option>
185-
</select>
176+
<RangeEditor ref='$${it.key}Width' label='Width' key='border-image-width-${it.key}' onchange='changeBorderImage' />
186177
</div>
187178
`;
188179
})}
@@ -191,48 +182,6 @@ export default class BorderImageProperty extends BaseProperty {
191182
`;
192183
}
193184

194-
[INPUT("$range")](e) {
195-
var value = this.getRef("$range").value;
196-
this.getRef("$number").val(value);
197-
198-
keyList.forEach(type => {
199-
this.getRef("$", type, "Slice").val(value);
200-
this.getRef("$", type, "SliceRange").val(value);
201-
});
202-
203-
this.setBorderImageProperty();
204-
}
205-
206-
[INPUT("$number")](e) {
207-
var value = this.getRef("$number").value;
208-
this.getRef("$range").val(value);
209-
210-
keyList.forEach(type => {
211-
this.getRef("$", type, "Slice").val(value);
212-
this.getRef("$", type, "SliceRange").val(value);
213-
});
214-
this.setBorderImageProperty();
215-
}
216-
217-
[CHANGE("$unit")](e) {
218-
var unit = this.getRef("$unit").value;
219-
keyList.forEach(type => {
220-
this.getRef("$", type, "SliceUnit").val(unit);
221-
});
222-
this.setBorderImageProperty();
223-
}
224-
225-
[INPUT("$el input[type=range][data-key]")](e) {
226-
var [key, type] = e.$delegateTarget.attrs('data-key', 'data-type');
227-
this.getRef('$', key, `${type}`).val(e.$delegateTarget.value);
228-
this.setBorderImageProperty();
229-
}
230-
231-
[INPUT("$el input[type=number][data-key]")](e) {
232-
var [key, type] = e.$delegateTarget.attrs('data-key', 'data-type');
233-
this.getRef('$', key, `${type}Range`).val(e.$delegateTarget.value);
234-
this.setBorderImageProperty();
235-
}
236185

237186
[CHANGE("$sliceSettingBox select")](e) {
238187
this.setBorderImageProperty();
@@ -396,7 +345,7 @@ export default class BorderImageProperty extends BaseProperty {
396345
var type = this.refs.$selector.attr("data-selected-value");
397346

398347
if (type === "all") {
399-
var len = new Length(this.getRef("$range").value, this.getRef("$unit").value)
348+
var len = this.children.$allSlice.getValue()
400349
borderImage.reset({
401350
slice: {
402351
top: len.clone(),
@@ -408,15 +357,8 @@ export default class BorderImageProperty extends BaseProperty {
408357

409358
} else {
410359
keyList.forEach(type => {
411-
borderImage.slice[type] = new Length(
412-
this.getRef("$", type, "Slice").value,
413-
this.getRef("$", type, "SliceUnit").value
414-
);
415-
416-
borderImage.width[type] = new Length(
417-
this.getRef("$", type, "Width").value,
418-
this.getRef("$", type, "WidthUnit").value
419-
);
360+
borderImage.slice[type] = this.children[`$${type}Slice`].getValue()
361+
borderImage.width[type] = this.children[`$${type}Width`].getValue()
420362
});
421363
}
422364

‎src/csseditor/ui/control/panel/property/FontProperty.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default class FontProperty extends BaseProperty {
5353
/>
5454
</div>
5555
<div class='property-item'>
56-
<RangeEditor ref='$size' label='line-height' key="font-size" onchange="changeRangeEditor" />
56+
<RangeEditor ref='$lineHeight' label='line-height' key="font-size" onchange="changeRangeEditor" />
5757
</div>
5858
<div class='property-item'>
5959
<SelectEditor

‎src/csseditor/ui/control/panel/property/FontSpacingProperty.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@ export default class FontSpacingProperty extends BaseProperty {
3131
getBody() {
3232
return `
3333
<div class="property-item font-item">
34-
<RangeEditor ref='$size' label='Letter' key="letter-spacing" onchange="changeRangeEditor" />
34+
<RangeEditor ref='$letter' label='Letter' key="letter-spacing" onchange="changeRangeEditor" />
3535
</div>
3636
3737
<div class="property-item font-item">
38-
<RangeEditor ref='$size' label='Word' key="word-spacing" onchange="changeRangeEditor" />
38+
<RangeEditor ref='$word' label='Word' key="word-spacing" onchange="changeRangeEditor" />
3939
</div>
4040
4141
<div class="property-item font-item">
42-
<RangeEditor ref='$size' label='Indent' key="text-indent" onchange="changeRangeEditor" />
42+
<RangeEditor ref='$indent' label='Indent' key="text-indent" onchange="changeRangeEditor" />
4343
</div>
4444
`;
4545
}

‎src/csseditor/ui/control/panel/property/TextShadowProperty.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default class TextShadowProperty extends BaseProperty {
2727
<div class="property-item full text-shadow-item" ref="$shadowList"></div>
2828
`;
2929
}
30-
30+
3131
[LOAD("$shadowList")]() {
3232
var current = editor.selection.current || {};
3333
return `

0 commit comments

Comments
 (0)