lexgui 0.1.28 → 0.1.29

package/build/lexgui.css

@@ -27,6 +27,7 @@
   --transition-time: 1000;
   --code-editor-font-size: 14px;
   --code-editor-row-height: 20px;
+  --graphnode-background: 17, 17, 17;
 } 
 
 /* Some global colors */
@@ -319,7 +320,7 @@ body.noevents * {
 }
 
 .lexdialog.pocket.dockable {
-  transition: ease-out left 0.2s, ease-out top 0.2s;
+  transition: ease-out left 0.2s, ease-out top 0.2s, ease-in transform 0.2s;
 }
 
 .lexdialog.pocket .lexdialogtitle {
@@ -637,8 +638,18 @@ body.noevents * {
   transition: border-color 0.1s linear;
 }
 
-.lexwidget .lextext, .lexwidget .lexnumber {
-  padding-left: 4px;
+.lexwidget .lextext {
+  border-radius: 6px;
+  position: relative;
+  transition: 0.1s linear;
+}
+
+.lexwidget .lextext:not(:has(div)) {
+  background-color: var(--global-button-color);
+}
+
+.lexwidget .lextext:not(:has(div)):hover {
+  background-color: var(--global-button-color-hovered);
 }
 
 .lexwidget .lextext input {
@@ -647,6 +658,8 @@ body.noevents * {
 
 .lexwidget .lextext div {
   color: #b2b2b5d6;
+  padding: 2px;
+  padding-left: 6px;
 }
 
 .lexwidget .lextext.lexwarning div {
@@ -660,13 +673,13 @@ body.noevents * {
 }
 
 .lexwidget .lextext input:focus {
-  border-color: var(--global-selected);
+  border: 2px solid var(--global-selected);
 }
 
 .lexwidget .inputicon {
-  padding: 4px;
-  font-size: 11px;
-  margin-top: 2px;
+  padding: 6px;
+  font-size: 10px;
+  margin-top: 4px;
 }
 
 .lexwidget textarea {
@@ -1811,8 +1824,8 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexcontextmenubox:before {
-  content:"";
-  position:absolute;
+  content: "";
+  position: absolute;
   width: 100%;
   height: 100%;
   top:0;
@@ -1865,6 +1878,9 @@ meter::-webkit-meter-even-less-good-value {
   margin-right: 10px;
   margin-top: 2px;
   font-size: var(--global-font-size);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .lexcontextmenubox .lexcontextmenuentry .lexentryname.disabled {
@@ -2903,6 +2919,10 @@ ul.lexassetscontent {
   overflow: scroll;
 }
 
+.lexcodeeditor .codetabsarea.no-code-info {
+  height: calc( 100% - 28px ) !important;
+}
+
 .lexcodeeditor .codetabsarea::-webkit-scrollbar {
   display: none;
 }
@@ -3248,16 +3268,64 @@ pre .line-gutter {
 
 .lexgraph {
   overflow: hidden;
+  position: relative;
+  outline: none;
+  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA4lJREFUWEftl1FIk1EUx/9qOGtNU4wkC1RQEc2hD9P5oigqH1PxIQqhgYI+iHtIE0ZQKoZo6BDniFScsIcgCSEILMPhJBRCh6G+qKSopHy2iVnOudniyDdZY3NTJ/rghcvGuPvO7/zP/557Pz+c8/A75/i4cAAERNPGzTMXyFEBfwAB6+vrqoiIiMcA9gFYzhrEEeAKgKC1tbX6nZ2dh3t7e3UJCQnvAJgBWM8KxBkgWKvV3g8KCnoZFxfHZ1l2fHV1tS4vL+8rgD1OFZ+WxREgAMCN0tLSex0dHR9DQkJ4ra2tkMlkFoPBoGppaWlTqVQGrix/fUXhCEDfQwDcMRqNY9nZ2YKpqSkkJydDoVBYExMTN7a3t5vi4+M1AHZ9VRbnbXgdQOTs7OzbtrY2YV9f32GiUqkU7e3tFpPJNL6ystKckZExyvmDzHri4QxwFUDE2NhYvV6vL5HJZIHOT6ay1NTU2FiW7RoYGFBUVVWtnKYszgAU8KZarS5JSkpqEIlEfFepRUdHo7e3dzclJWVrc3NTERMT8/qkZXEGICOGSSQSYX9//yCfz6et6XYUFxdDrVbTNp1YWlpqT01NHTxuWZwB7Ea8y7LsF4ZhgicnJ90C8Hg8ZGZmQiwWo6GhAQaD4VV4ePgTDoK6qcfh6iw4MOL09PSbzs7O1O7u7v8eEhsbC4lEgtzcXLNYLPa32WyW5eXlaaPR+Hlubm64srJyAsAOAK+2qisAMuItnU73fH5+/lF5efmhEaurq9HY2GhZWFhYWlxcnNRqtd9UKtUsgF8AqEf8BLDF+eHEClDA8J6engcikahJKBReIwnS0tIwMjKyL5fLXyiVSqoLBfrDZWsCQJMyt/cIj/LTAlcKkBFDs7KykoaGhoYDAwPpkIJOp9u1Wq0fcnJyOgFscFlTMGrRdFbQpJ7glfR2OlcAjkbUMQwTWlBQgLKystWoqCgpgGVObsqYgh4roLMs7i4kZMTbMzMzGqVSmdbV1UXt+Gltbe17AD8A/PbVweQO4MCIo6OjcoFAIDWbzZ/S09ObAVDX2+Rk96rGnha5AyAjhmk0msL8/PxnDMOU6fX67wBYzmxeOdxTcHcmpN/JiILCwsLIiooKcVFR0TCX+bavpD/KhHYwHt2QAFA7JqfbHe9NYl6vOepWfHBHBECftL1o+kx6Twp4ncFpF16494LTJnTs/18qcKnAPygqQzAAgQjBAAAAAElFTkSuQmCC) 4 4, auto !important;
 }
 
-.lexgraph .lexgraphnodes {
+.lexgraph .lexdropdown ul {
+  max-height: unset;
+}
+
+.lexgraph .lexgraphnodes, .lexgraph .lexgraphlinks {
   width: 100%;
   height: 100%;
-  position: relative;
+  position: absolute;
 }
 
-.lexgraph .background-svg {
+.lexgraph .lexgraphlinks {
+  pointer-events: none;
+}
+
+.lexgraph .lexgraphlinks path {
+  stroke-width: 3px;
+  stroke-opacity: 0.9;
+}
+
+.lexgraph .lexgraphlinks path.running {
+  stroke-dasharray: 5px;
+  stroke-linecap: round;
+  stroke-dashoffset: 50;
+  animation: dash 1s linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.lexgraph svg {
   position: absolute;
+  overflow: visible;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.lexgraph .box-selection-svg {
+  stroke-width: 3px;
+  stroke: var(--global-selected);
+  border-radius: 8px;
+  fill: var(--global-selected);
+  fill-opacity: 0.2;
+}
+
+.lexgraph .box-selection-svg.removing {
+  stroke-dasharray: 6px;
+  stroke-linecap: round;
 }
 
 .lexgraphnode {
@@ -3270,26 +3338,72 @@ pre .line-gutter {
   min-width: 96px;
   min-height: 32px;
   border-radius: 10px;
-  background-color: #111;
-  border: 2px solid var(--global-color-transparent);
+  
+  /* background-color: rgba(var(--graphnode-background), 0.75); */
+  background: linear-gradient(15deg, #161616da 10%, #080808da);
+  background-color: unset; background-origin: border-box;
+
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  border: 3px solid var(--global-color-transparent);
   transition: border 0.05s linear;
   padding: 4px;
 }
 
+.lexgraphnode.math {
+  background: linear-gradient(15deg, #0687d1da 10%, #00ffccda);
+  background-color: unset; background-origin: border-box;
+}
+
+.lexgraphnode.logic {
+  background: linear-gradient(15deg, #FB4D3Dda 10%, #A74482da);
+  background-color: unset; background-origin: border-box;
+}
+
+.lexgraphnode.inputs {
+  background: linear-gradient(15deg, #84e100da 10%, #79a095da);
+  background-color: unset; background-origin: border-box;
+}
+
+.lexgraphnode.variables {
+  background: linear-gradient(15deg, #f1e643da 10%, #e78b8bda);
+  background-color: unset; background-origin: border-box;
+}
+
+.lexgraphnode.events {
+  background: linear-gradient(15deg, #ec49d7da 10%, #8dc0b8da);
+  background-color: unset; background-origin: border-box;
+}
+
+
 .lexgraphnode.selected {
-  border: 2px solid var(--global-selected);
+  border: 3px solid var(--global-selected-dark);
+  border: 3px solid #ffc107;
   box-shadow: 0 2px 6px 0 rgba(0,0,0,.14);
 }
 
-.lexgraphnode .lexgraphnodeheader {
+.lexgraphnode .lexgraphnodeheader, .lexgraphnode .lexgraphnodeproperties {
   font-family: var(--global-title-font);
   font-weight: 700;
   font-size: 13px;
   color: #d9d9e3;
-  text-shadow: 0px 1px 4px #2222228f;
-  border-bottom: 1px solid var(--global-blur-background);
+  text-shadow: 0px 0px 2px #1b1b1bdc;
+  border-bottom: 1px solid #ffffff46;
   margin-bottom: 2px;
   pointer-events: none;
+  text-align: -webkit-center;
+  text-align: center;
+  margin-left: -7px;
+  width: calc(100% + 14px);
+}
+
+.lexgraphnode.selected .lexgraphnodeheader, .lexgraphnode.selected .lexgraphnodeproperties {
+  margin-left: -4px;
+  width: calc(100% + 8px);
+}
+
+.lexgraphnode .lexgraphnodeproperties {
+  pointer-events: all;
 }
 
 .lexgraphnode .lexgraphnodeios {
@@ -3298,61 +3412,197 @@ pre .line-gutter {
 }
 
 .lexgraphnode .lexgraphnodeios .lexgraphnodeinputs {
-  margin-right: 12px;
+  margin-right: 6px;
 }
 
 .lexgraphnode .lexgraphnodeios .lexgraphnodeoutputs {
-  margin-left: 12px;
+  margin-left: 6px;
 }
 
 .lexgraphnode .lexgraphnodeio {
   font-family: var(--global-title-font);
   font-weight: 500;
-  font-size: 11px;
+  font-size: 10px;
   color: #d9d9e3;
   text-shadow: 0px 1px 6px #22222283;
   display: flex;
   min-height: 18px;
 }
 
-.lexgraphnode .lexgraphnodeio.output {
+.lexgraphnode .lexgraphnodeio.iooutput {
   justify-content: right;
 }
 
 .lexgraphnode .lexgraphnodeio .io__type {
   font-size: 7px;
   font-weight: 700;
-  line-height: 11px;
-  min-width: 12px;
-  min-height: 12px;
+  line-height: 10px;
+  min-width: 11px;
+  max-width: 11px;
+  min-height: 10px;
+  max-height: 10px;
   background-color: #afafaf;
   align-self: center;
   margin-right: 3px;
   border-radius: 3px;
+  padding-top: 1px;
   text-align: -webkit-center;
   text-align: center;
-  border: 1px solid var(--global-text-terciary);
+  border: 1px solid #afafaf6b;
+  color: var(--global-color-primary);
+  pointer-events: all;
+}
+
+.lexgraphnode .lexgraphnodeio .io__type span {
+  pointer-events: none;
+}
+
+.lexgraphnode .lexgraphnodeio .io__typedesc {
+  position: absolute;
+  margin-left: -30px;
+  font-weight: 600;
+  margin-top: 3px;
+  background-color: #afafaf;
   color: var(--global-color-primary);
-  pointer-events: all !important;
+  font-size: 8px;
+  border-radius: 4px;
+  width: 28px;
+  text-align: center;
+  opacity: 0;
+  transition: opacity ease-in 0.1s;
 }
 
-.lexgraphnode .lexgraphnodeio .io__type.vec2 { background-color: #63a9ee; }
-.lexgraphnode .lexgraphnodeio .io__type.vec3 { background-color: #e75d4e; }
-.lexgraphnode .lexgraphnodeio .io__type.bool { background-color: #cc8ce5; }
+.lexgraphnode .lexgraphnodeio .io__typedesc.output {
+  margin-right: -30px;
+}
+
+.lexgraphnode .lexgraphnodeio .io__type.vec2,
+.lexgraphnode .lexgraphnodeio .io__typedesc.vec2 { background-color: #ecea4c; }
+.lexgraphnode .lexgraphnodeio .io__type.vec3,
+.lexgraphnode .lexgraphnodeio .io__typedesc.vec3 { background-color: #ee87e5; }
+.lexgraphnode .lexgraphnodeio .io__type.vec4,
+.lexgraphnode .lexgraphnodeio .io__typedesc.vec4 { background-color: #9d56d8; }
+.lexgraphnode .lexgraphnodeio .io__type.string,
+.lexgraphnode .lexgraphnodeio .io__typedesc.string { background-color: #79cc9c; }
+.lexgraphnode .lexgraphnodeio .io__type.mat,
+.lexgraphnode .lexgraphnodeio .io__typedesc.mat { background-color: #56a8d8; }
+
+.lexgraphnode .lexgraphnodeio .io__name {
+  margin-top: 2px;
+}
 
 .lexgraphnode .lexgraphnodeio .io__type.output {
   margin-right: unset;
   margin-left: 3px;
 }
 
+.lexgraphnode .lexgraphnodeio:hover .io__typedesc {
+  opacity: 1;
+}
+
 .lexgraphnode .lexgraphnodeio .io__type:hover {
-  filter: opacity(0.75);
+  filter: brightness(1.2);
 }
 
-.lexgraphnode .lexgraphnodeio .io__type.active {
-  background-color: var(--global-text-primary);
+.lexgraphnode .lexgraphnodeio[data-active] .io__type:hover {
+  background-color: rgba(255, 58, 58, 0.829);
 }
 
-.lexgraphnode .lexgraphnodeio .io__name {
-  margin-top: 1px;
-}
+.lexgraphnode .lexgraphnodeio[data-active] .io__type:hover span {
+  display: none;
+}
+
+.lexgraphnode .lexgraphnodeio[data-active] .io__type:hover::after {
+  content: 'X';
+}
+
+.lexgraphnode .lexgraphnodeio[data-active] .io__type {
+  filter: brightness(1.4);
+}
+
+.lexgraph .lexgraphpropdialog {
+  transform: translateY(-96px);
+}
+
+.lexgraph .lexgraphpropdialog.opened {
+  transform: translateY(0px);
+}
+
+.lexgraph .lexgraphgroups {
+  z-index: 1;
+}
+
+.lexgraphgroup {
+  position: absolute;
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Standard syntax */
+  cursor: pointer;
+  min-width: 96px;
+  min-height: 32px;
+  border-radius: 8px;
+  
+  background: linear-gradient(35deg, #949292 10%, #a7c4bd);
+  background-color: unset; background-origin: border-box;
+
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  border: 1px solid var(--global-text-primary);
+  transition: border 0.05s linear;
+  opacity: 0.5;
+}
+
+.lexgraphgroup .lexgraphgrouptitle {
+  font-size: 14px;
+  margin: 8px;
+  font-weight: 800;
+  color: var(--global-color-primary);
+  font-family: var(--global-title-font);
+  outline: none;
+  border: none;
+  background: none;
+  max-width: 128px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid var(--global-color-primary);
+}
+
+.lexgraphgroup .lexgraphgrouptitle:disabled {
+  pointer-events: none;
+  border: none;
+}
+
+.lexgraphgroup .lexgraphgroupresizer {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 12px;
+  height: 12px;
+  border-bottom: 2px solid var(--global-color-primary);
+  border-right: 2px solid var(--global-color-primary);
+  border-bottom-right-radius: 8px;
+}
+
+.lexgraphgroup .lexgraphgroupresizer:hover {
+  border-bottom: 2px solid #4b4b4ba8;
+  border-right: 2px solid #4b4b4ba8;
+}
+
+/* .lexgraphnodeproperties .lexwidget .numberbox, .lexgraphnodeproperties .lexwidget .lextext {
+  margin: unset;
+  background-color: unset;
+}
+
+.lexgraphnodeproperties .lexwidget.nobranch {
+  padding: 0px;
+}
+
+.lexgraphnodeproperties .lexwidget input {
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--global-color-primary); 
+  font-family: var(--global-title-font);
+  max-width: 64px;
+} */