Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-03-02 13:07:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Mergin better performance branch

Browse Source
This commit is contained in:
barsdeveloper
2022-09-04 14:33:22 +02:00
parent 47c15fbf8d
commit 715dee6a5a
97 changed files with 2725 additions and 2833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/export.scss
View File

@@ -2,4 +2,4 @@
@use "ueb-node.scss";
@use "ueb-pin.scss";
@use "ueb-link.scss";
@use "ueb-type-color.scss";
@use "ueb-type-color.scss";

54
scss/style.scss
View File

@@ -15,6 +15,8 @@
}
ueb-blueprint {
--ueb-scale: 1;
--ueb-grid-actual-size: var(--ueb-grid-size);
display: block;
position: relative;
font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;
@@ -60,8 +62,8 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body {
position: absolute;
min-width: 100%;
min-height: 100%;
width: calc((100% + var(--ueb-additional-x) * 1px) / var(--ueb-scale));
height: calc((100% + var(--ueb-additional-y) * 1px) / var(--ueb-scale));
width: calc((100% + 2 * var(--ueb-grid-expand)) / var(--ueb-scale));
height: calc((100% + 2 * var(--ueb-grid-expand)) / var(--ueb-scale));
background-color: #262626;
background-image:
/* Axis lines */
@@ -108,101 +110,95 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body {
overflow: hidden;
}
ueb-blueprint[data-drag-scrolling="true"] .ueb-grid {
ueb-blueprint[data-scrolling="true"] .ueb-grid {
cursor: grabbing;
}
ueb-blueprint[data-drag-scrolling="false"] .ueb-grid {
ueb-blueprint[data-scrolling="false"] .ueb-grid {
cursor: default;
}
.ueb-zoom--.ueb,
.ueb {
--ueb-scale: 1;
--ueb-grid-actual-size: var(--ueb-grid-size);
}
.ueb-zoom-7.ueb {
ueb-blueprint[data-zoom="7"] {
--ueb-scale: 2;
}
.ueb-zoom-6.ueb {
ueb-blueprint[data-zoom="6"] {
--ueb-scale: 1.875;
}
.ueb-zoom-5.ueb {
ueb-blueprint[data-zoom="5"] {
--ueb-scale: 1.75;
}
.ueb-zoom-4.ueb {
ueb-blueprint[data-zoom="4"] {
--ueb-scale: 1.675;
}
.ueb-zoom-3.ueb {
ueb-blueprint[data-zoom="3"] {
--ueb-scale: 1.5;
}
.ueb-zoom-2.ueb {
ueb-blueprint[data-zoom="2"] {
--ueb-scale: 1.375;
}
.ueb-zoom-1.ueb {
ueb-blueprint[data-zoom="1"] {
--ueb-scale: 1.25;
}
.ueb-zoom--1.ueb {
ueb-blueprint[data-zoom="-1"] {
--ueb-scale: 0.875;
}
.ueb-zoom--2.ueb {
ueb-blueprint[data-zoom="-2"] {
--ueb-scale: 0.75;
}
.ueb-zoom--3.ueb {
ueb-blueprint[data-zoom="-3"] {
--ueb-scale: 0.675;
}
.ueb-zoom--4.ueb {
ueb-blueprint[data-zoom="-4"] {
--ueb-scale: 0.5;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
}
.ueb-zoom--5.ueb {
ueb-blueprint[data-zoom="-5"] {
--ueb-scale: 0.375;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
}
.ueb-zoom--6.ueb {
ueb-blueprint[data-zoom="-6"] {
--ueb-scale: 0.333333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--7.ueb {
ueb-blueprint[data-zoom="-7"] {
--ueb-scale: 0.3;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--8.ueb {
ueb-blueprint[data-zoom="-8"] {
--ueb-scale: 0.266666;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--9.ueb {
ueb-blueprint[data-zoom="-9"] {
--ueb-scale: 0.233333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--10.ueb {
ueb-blueprint[data-zoom="-10"] {
--ueb-scale: 0.2;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--11.ueb {
ueb-blueprint[data-zoom="-11"] {
--ueb-scale: 0.166666;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
}
.ueb-zoom--12.ueb {
ueb-blueprint[data-zoom="-12"] {
--ueb-scale: 0.133333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
}

10
scss/ueb-link.scss
View File

@@ -1,14 +1,18 @@
@use "style.scss";
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);
display: block;
margin-left: calc(var(--ueb-link-start) * -1px);
min-width: calc(var(--ueb-link-min-width) * 1px);
/*
* This makes the element transparent to the hover events so that multiple path elements can stand nearby and have
* their hover behavior correctly firing.
*/
visibility: hidden;
@extend .ueb-positioned;
}
ueb-link svg {
@@ -24,17 +28,17 @@ ueb-link svg {
ueb-link svg path {
visibility: visible;
stroke: var(--ueb-pin-color);
stroke: var(--ueb-link-color);
stroke-width: 1;
}
ueb-link.ueb-link-dragging svg path,
ueb-link[data-dragging="true"] svg path,
ueb-link svg g:hover path {
stroke-width: 5;
transition: stroke-width 0.8s;
}
ueb-link-message {
.ueb-link-message {
display: block;
visibility: visible;
position: absolute;

9
scss/ueb-node.scss
View File

@@ -7,7 +7,7 @@ ueb-node {
font-weight: lighter;
}
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
ueb-blueprint[data-scrolling="false"][data-selecting="false"] ueb-node {
cursor: move;
}
@@ -17,7 +17,7 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
border-radius: calc(var(--ueb-node-radius) * 1.4);
}
.ueb-selected>.ueb-node-border {
ueb-node[data-selected="true"]>.ueb-node-border {
background-image:
linear-gradient(to right, #f1b000 0%, #f1b000 100%),
linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),
@@ -41,7 +41,8 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
.ueb-node-top {
padding: 0.3em 0.7em;
box-shadow: inset 5px 1px 5px -3px #83b37b,
box-shadow:
inset 5px 1px 5px -3px #83b37b,
inset 0 1px 0 0 #111311,
inset 0 2px 0 0 #83b37b;
border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0;
@@ -108,7 +109,7 @@ ueb-node[data-enabled-state="DevelopmentOnly"] .ueb-node-developmentonly {
vertical-align: middle;
}
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] .ueb-node-expansion:hover {
ueb-blueprint[data-scrolling="false"][data-selecting="false"] .ueb-node-expansion:hover {
background-color: #656765;
cursor: pointer;
}

14
scss/ueb-pin.scss
View File

@@ -8,7 +8,7 @@ ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] {
.ueb-pin-wrapper {
display: inline-block;
margin: 6px 0 0 0;
margin: 5px 0 0 0;
padding: 2px 2px;
&>* {
@@ -17,7 +17,7 @@ ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] {
}
}
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] .ueb-pin-wrapper:hover {
ueb-blueprint[data-scrolling="false"][data-selecting="false"] .ueb-pin-wrapper:hover {
background: var(--ueb-pin-background);
cursor: crosshair;
}
@@ -52,11 +52,11 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] .ueb-pin-wrap
border-radius: 50%;
}
ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before {
ueb-pin[data-linked="true"] .ueb-pin-icon-value::before {
background: var(--ueb-pin-color);
}
ueb-pin.ueb-pin-fill .ueb-pin-tofill {
ueb-pin[data-linked="true"] .ueb-pin-tofill {
fill: currentColor;
}
@@ -78,7 +78,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill {
vertical-align: middle;
}
.ueb-pin-exec .ueb-pin-name {
ueb-pin[data-type="exec"] .ueb-pin-name {
display: none;
}
@@ -100,7 +100,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill {
}
}
.ueb-pin-type-bool .ueb-pin-input {
ueb-pin[data-type="bool"] .ueb-pin-input {
appearance: none;
padding: 0;
height: 18px;
@@ -109,7 +109,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill {
color: var(--ueb-pin-color);
}
.ueb-pin-type-bool .ueb-pin-input:checked {
ueb-pin[data-type="bool"] .ueb-pin-input:checked {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="%230070e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M 5 10 l 3 3 l 6 -6" /></svg>');
}

73
scss/ueb-type-color.scss
View File

@@ -1,60 +1,61 @@
@mixin pin-style($color) {
--ueb-pin-color : #{$color};
ueb-blueprint {
--ueb-pin-dim-color: #afafaf;
}
ueb-link {
--ueb-link-color: rgb(var(--ueb-link-color-rgb));
}
ueb-pin {
--ueb-pin-background: linear-gradient(90deg,
#{transparentize($color, 0.85)},
#{transparentize($color, 0.2)} 15%,
#{transparentize($color, 0.5)} 60%,
#{transparentize($color, 0.65)} 95%,
transparent);
rgba(var(--ueb-pin-color-rgb), 0.15),
rgba(var(--ueb-pin-color-rgb), 0.8) 15%,
rgba(var(--ueb-pin-color-rgb), 0.5) 60%,
rgba(var(--ueb-pin-color-rgb), 0.35) 95%,
transparent);
--ueb-pin-color: rgb(var(--ueb-pin-color-rgb));
}
.ueb {
$ueb-pin-color: white;
$ueb-pin-dim-color: #afafaf;
--ueb-pin-color : #{$ueb-pin-color};
--ueb-pin-dim-color: #{$ueb-pin-dim-color};
ueb-pin[data-type="bool"] {
--ueb-pin-color-rgb: var(--ueb-pin-bool-color);
}
.ueb-pin-type-bool {
@include pin-style(#750000);
ueb-pin[data-type="class"] {
--ueb-pin-color-rgb: var(--ueb-pin-class-color);
}
.ueb-pin-type-class {
@include pin-style(#5800bb);
ueb-pin[data-type="exec"] {
--ueb-pin-color-rgb: var(--ueb-pin-exec-color);
}
.ueb-pin-type-exec {
@include pin-style(#a7a7a7);
ueb-pin[data-type="int"] {
--ueb-pin-color-rgb: var(--ueb-pin-int-color);
}
.ueb-pin-type-int {
@include pin-style(#1fe0ad);
ueb-pin[data-type="name"] {
--ueb-pin-color-rgb: var(--ueb-pin-name-color);
}
.ueb-pin-type-name {
@include pin-style(#cb81fc);
ueb-pin[data-type="object"] {
--ueb-pin-color-rgb: var(--ueb-pin-object-color);
}
.ueb-pin-type-object {
@include pin-style(#00a8f2);
ueb-pin[data-type="real"] {
--ueb-pin-color-rgb: var(--ueb-pin-real-color);
}
.ueb-pin-type-real {
@include pin-style(#32bb00);
ueb-pin[data-type="rotator"] {
--ueb-pin-color-rgb: var(--ueb-pin-rotator-color);
}
.ueb-pin-type-rotator {
@include pin-style(#9eb1fc);
ueb-pin[data-type="string"] {
--ueb-pin-color-rgb: var(--ueb-pin-string-color);
}
.ueb-pin-type-string {
@include pin-style(#d500b1);
ueb-pin[data-type="struct"] {
--ueb-pin-color-rgb: var(--ueb-pin-struct-color);
}
.ueb-pin-type-struct {
@include pin-style(#034ca8);
}
.ueb-pin-type-vector {
@include pin-style(#fcc823);
ueb-pin[data-type="vector"] {
--ueb-pin-color-rgb: var(--ueb-pin-vector-color);
}