Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-05-18 03:27:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Simplify positioned style computation

Browse Source
This commit is contained in:
barsdeveloper
2022-10-18 20:25:42 +02:00
parent e8a35c81d0
commit 14d376d447
13 changed files with 127 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
dist/css/ueb-style.css vendored
View File

@@ -183,17 +183,7 @@ ueb-blueprint[data-zoom="-12"] {
}
.ueb-positioned, ueb-link, ueb-blueprint[data-selecting=true] ueb-selector {
--ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x));
--ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x));
--ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y));
--ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y));
--ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));
--ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y));
position: absolute;
top: calc(var(--ueb-computed-min-y) * 1px);
left: calc(var(--ueb-computed-min-x) * 1px);
width: calc(var(--ueb-computed-width) * 1px);
height: calc(var(--ueb-computed-height) * 1px);
}
ueb-selector {
@@ -227,7 +217,7 @@ ueb-selector > * {
ueb-link {
--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
/* when from-y > to-y */
--ueb-y-opposite: clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);
--ueb-y-reflected: clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);
display: block;
margin-left: calc(var(--ueb-link-start) * -1px);
min-width: calc(var(--ueb-link-min-width) * 1px);
@@ -239,14 +229,12 @@ ueb-link {
}
ueb-link svg {
--ueb-y-opposite-coefficient: calc(2 * var(--ueb-y-opposite) - 1);
--ueb-y-reflected-coefficient: calc(2 * var(--ueb-y-reflected) - 1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 1px;
transform: scaleY(calc(var(--ueb-y-opposite-coefficient) * var(--ueb-from-input-coefficient)));
transform: scaleY(calc(var(--ueb-y-reflected-coefficient) * var(--ueb-from-input-coefficient)));
}
ueb-link svg path {
@@ -265,7 +253,7 @@ ueb-link svg g:hover path {
display: block;
visibility: visible;
position: absolute;
top: calc(100% * (1 - var(--ueb-y-opposite)) + 22px);
top: calc(100% * (1 - var(--ueb-y-reflected)) + 22px);
left: calc((1 - var(--ueb-from-input)) * 100% + (var(--ueb-from-input-coefficient)) * var(--ueb-start-percentage) + 15px);
border: 1px solid #000;
padding: 4px 8px;