@xifu/shader-graph-glsl 0.3.0 → 0.4.1

package/dist/editor/index.css

@@ -1,4 +1,4 @@
-/* packages/editor/src/editor.css */
+/* packages/editor/src/editor.less */
 .rete-node-view:hover {
   z-index: 1;
 }
@@ -432,6 +432,9 @@
   left: 0;
   will-change: transform;
 }
+.sg-popup-can {
+  position: relative;
+}
 .sg-popup-mask {
   position: fixed;
   top: 0;
@@ -985,3 +988,1091 @@
 .sg-popup-title {
   color: white;
 }
+
+/* src/view/Block.less */
+.sg-block {
+  min-width: 180px;
+}
+
+/* src/view/common/ContextIO.less */
+.sg-context-input {
+  margin: 0 10px;
+}
+.sg-context-input-can {
+  position: absolute;
+  top: -13px;
+  left: 0;
+  right: 0;
+  height: 0;
+  display: flex;
+  justify-content: center;
+}
+.sg-context-input-title {
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 13px;
+  transform: translate(calc(100% + 5px), -100%);
+}
+.sg-context-output {
+  margin: 0 10px;
+}
+.sg-context-output-can {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 13px;
+  height: 0;
+  display: flex;
+  justify-content: center;
+}
+.sg-context-output-title {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  transform: translate(calc(100% + 5px), 100%);
+  font-size: 13px;
+}
+
+/* src/view/common/Socket.less */
+.sg-socket {
+  border: 1px solid white;
+  border-radius: 100%;
+  width: 10px;
+  height: 10px;
+  z-index: 2;
+  box-sizing: border-box;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+.sg-socket-can {
+  cursor: pointer;
+  padding: 8px 6px;
+  position: relative;
+}
+.sg-socket-can[data-type=default] {
+  pointer-events: none;
+}
+.sg-socket-can[data-type=output]::before,
+.sg-socket-can[data-type=input]::before {
+  content: " ";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+}
+.sg-socket-can[data-type=output]::before {
+  transform: translate(0%, -50%) scale(2, 1.3);
+}
+.sg-socket-can[data-type=input]::before {
+  transform: translate(-100%, -50%) scale(2, 1.3);
+}
+.sg-socket-can[data-vertical]::before {
+  transform: translate(-50%, -50%) scale(1.2);
+}
+.sg-socket-can:hover .sg-socket-inner,
+.sg-socket[data-connected=true] .sg-socket-inner {
+  opacity: 1;
+}
+.sg-socket[data-type=default] {
+  cursor: unset;
+  border-color: rgba(0, 0, 0, 0.822) !important;
+}
+.sg-socket[data-type=default] .sg-socket-inner {
+  opacity: 1 !important;
+}
+.sg-socket-inner {
+  width: 5px;
+  height: 5px;
+  border-radius: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  opacity: 0;
+}
+
+/* src/view/common/IO.less */
+.sg-node-io-can {
+  display: flex;
+  width: 100%;
+  user-select: none;
+}
+.sg-node-io-can[data-gap-top=true] {
+  border-top: 1px solid rgba(0, 0, 0, 0.5);
+}
+.sg-node-io-can[data-gap-bottom=true] {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+}
+.sg-node-io-gap {
+  width: 1px;
+  flex: none;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.sg-node-input {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  padding: 4px 10px 4px 0;
+}
+.sg-node-input-can {
+  flex: 1;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.sg-node-input-control {
+  position: absolute;
+  left: 0;
+  transform: translateX(-100%);
+}
+.sg-node-input-title {
+  white-space: nowrap;
+}
+.sg-node-output {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  padding: 4px 0px 4px 10px;
+}
+.sg-node-output-can {
+  flex: 1;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.sg-node-output-title {
+  white-space: nowrap;
+}
+
+/* src/view/controls/DefaultValueCan.less */
+.sg-default-value-can {
+  background-color: rgba(255, 255, 255, 0.1);
+  transform: translateX(-10px);
+  display: flex;
+  flex-wrap: nowrap;
+  border-radius: 2px;
+  align-items: center;
+  border: 1px solid #202020;
+  cursor: default;
+}
+.sg-default-value-line {
+  width: 24px;
+  height: 4px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  transform: translateX(calc(100% - 7px));
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* src/view/controls/ChannelMixerControl.less */
+.sg-channelmixer-channels {
+  display: flex;
+  justify-content: space-between;
+}
+.sg-channelmixer-btn {
+  flex: 1;
+  margin: 10px 2px;
+  border-radius: 5px;
+  background-color: #676767;
+  position: relative;
+  text-align: center;
+}
+.sg-channelmixer-btn::after {
+  content: " ";
+  display: block;
+  border-radius: 5px;
+  width: 100%;
+  height: 10px;
+  background-color: #242424;
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  bottom: -10px;
+}
+.sg-channelmixer-btn[data-aria-selected=true] {
+  background-color: #85aef4;
+}
+
+/* src/view/controls/CustomFunctionControl.less */
+.sg-custom-fn {
+  position: absolute;
+  left: 100%;
+}
+.sg-custom-fn-can {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  transform-origin: top left;
+  background-color: #2b2b2b;
+}
+.sg-custom-fn-btn {
+  user-select: none;
+  cursor: pointer;
+}
+.sg-custom-fn-btn-toogle {
+  width: 35px;
+  height: 35px;
+  font-size: 25px;
+  text-align: center;
+  line-height: 35px;
+  position: absolute;
+}
+.sg-custom-fn-btn-help {
+  margin: 0 5px;
+}
+.sg-custom-fn-head {
+  height: 35px;
+  display: flex;
+  align-items: center;
+  padding-left: 35px;
+}
+.sg-custom-fn-name {
+  margin: 0 5px;
+}
+.sg-custom-fn-editor {
+  text-align: left;
+  min-height: 300px;
+  height: 300px;
+  width: 600px;
+  position: relative;
+}
+.sg-custom-fn-editor .cm-tooltip {
+  position: absolute !important;
+  top: unset !important;
+  left: 0 !important;
+  bottom: 0 !important;
+  transform: translateY(100%);
+}
+.sg-custom-fn-textarea-fallback {
+  width: 100%;
+  height: 300px !important;
+  background: #1e1e1e;
+  color: #ccc;
+  border: 1px solid #333;
+  padding: 8px;
+  font-family: monospace;
+  font-size: 13px;
+  resize: vertical;
+}
+
+/* src/view/common/Moveable.less */
+.sg-popup-movable {
+  position: absolute;
+  top: 0;
+  left: 0;
+  will-change: transform;
+}
+
+/* src/view/common/Popup.less */
+.sg-popup-can {
+  position: relative;
+}
+.sg-popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+.sg-popup-title {
+  user-select: none;
+  padding: 3px 5px 0 5px;
+}
+
+/* src/view/common/Preview.less */
+.sg-preview {
+  background-color: rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+.sg-preview-btn {
+  width: 50px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+.sg-preview-btn:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.sg-preview-btn[data-aria-expanded=true] {
+  transform: rotate(180deg);
+  position: absolute;
+  top: 10px;
+  left: 0;
+  right: 0;
+  width: 20px;
+  height: 20px;
+  font-size: 18px;
+  margin: auto;
+  border: 1px solid white;
+  border-radius: 2px;
+  display: inline-flex;
+  align-items: center;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.sg-preview-btn[data-aria-expanded=true]:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+  opacity: 1 !important;
+}
+.sg-preview-canvas {
+  width: 200px;
+  height: 200px;
+}
+.sg-preview-canvas-can {
+  background-color: #2b2b2b;
+}
+.sg-node:hover .sg-preview-btn[data-aria-expanded=true] {
+  opacity: 0.5;
+}
+
+/* src/view/common/Tree.less */
+.sg-tree-item {
+  display: flex;
+  user-select: none;
+}
+.sg-tree-item-name {
+  color: #bababa;
+  margin-right: 5px;
+  text-align: left;
+}
+.sg-tree-item-name span[data-highlighted=true] {
+  color: #eec670;
+}
+.sg-tree-item-name:nth-child(1):hover {
+  color: white;
+}
+.sg-tree-item-head {
+  flex: none;
+}
+.sg-tree-item-body {
+  flex: 1;
+}
+.sg-tree-item-btn-expand {
+  color: #686868;
+  margin-right: 5px;
+  opacity: 0;
+  display: inline-block;
+}
+.sg-tree-item-btn-expand[data-aria-expanded=true] {
+  transform: rotate(90deg);
+}
+.sg-tree-item-btn-expand[data-visible=true] {
+  cursor: pointer;
+  opacity: 1;
+}
+.sg-tree-item-btn-expand:hover {
+  color: white;
+}
+
+/* src/view/common/Title.less */
+.sg-title {
+  flex: auto;
+  text-align: left;
+  padding: 8px 12px;
+}
+.sg-title-can {
+  display: flex;
+  position: relative;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.sg-title-can .sg-btn-fold {
+  margin-right: 12px;
+}
+.sg-btn-fold {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  cursor: pointer;
+  transform: rotate(90deg);
+}
+.sg-btn-fold:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.sg-node:hover .sg-btn-fold {
+  opacity: 1 !important;
+}
+.sg-btn-fold[data-aria-disabled=true] {
+  background-color: transparent !important;
+  color: gray;
+}
+.sg-btn-fold[data-aria-expanded=true] {
+  transform: rotate(0deg);
+}
+
+/* src/view/common/Select.less */
+.sg-select {
+  margin: 5px;
+}
+
+/* src/view/common/Label.less */
+.sg-label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+}
+.sg-label-can {
+  width: 100%;
+  display: flex;
+}
+.sg-label[data-aria-disabled=true] {
+  color: gray;
+}
+
+/* src/view/common/MenuList.less */
+.sg-menu-list {
+  background-color: #ececec;
+  user-select: none;
+  padding: 5px;
+  border-radius: 5px;
+  position: absolute;
+  z-index: 1;
+}
+.sg-menu-list-can {
+  opacity: 0;
+}
+.sg-menu-item {
+  text-align: left;
+  display: flex;
+  color: black;
+  padding: 0 5px;
+  border-radius: 5px;
+  font-size: 14px;
+  min-width: 80px;
+  position: relative;
+  z-index: 0;
+}
+.sg-menu-item-name {
+  flex: 1;
+}
+.sg-menu-item[data-aria-disabled=true] {
+  color: #acacac;
+}
+.sg-menu-item[data-aria-disabled=true]:hover {
+  color: #acacac;
+  background-color: unset;
+}
+.sg-menu-item:hover {
+  color: white;
+  background-color: #2667d9;
+}
+.sg-menu-item:hover .sg-menu-submenu {
+  display: block;
+}
+.sg-menu-submenu {
+  position: absolute;
+  top: -5px;
+  display: none;
+}
+.sg-menu-submenu[data-position=right] {
+  right: 0;
+  transform: translateX(100%);
+}
+.sg-menu-submenu[data-position=left] {
+  left: 0;
+  transform: translateX(-100%);
+}
+.sg-menu-divider {
+  margin: 5px;
+  height: 1px;
+  background-color: #d2d2d2;
+}
+
+/* src/view/common/InputFloat.less */
+.sg-float-input {
+  min-width: 0;
+  width: 26px;
+}
+.sg-float-label {
+  padding: 0 8px;
+  cursor: ew-resize;
+}
+
+/* src/view/common/InputAsset.less */
+.sg-input-asset {
+  border: 1px solid #202020;
+  border-radius: 5px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  max-width: 200px;
+  width: 100%;
+}
+.sg-input-asset:hover {
+  border-color: #656565;
+}
+.sg-input-asset-icon {
+  flex: none;
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #2d6cc2;
+  margin: 0 5px;
+  border-radius: 2px;
+}
+.sg-input-asset-label {
+  flex: auto;
+  flex-shrink: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: white;
+}
+.sg-input-asset-btn {
+  flex: none;
+  flex-shrink: 0;
+  width: 28px;
+  height: 100%;
+  min-height: 25px;
+  position: relative;
+  z-index: 0;
+  cursor: pointer;
+}
+.sg-input-asset-btn:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.sg-input-asset-btn::after,
+.sg-input-asset-btn::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  border: 1px solid #c4c4c4;
+  border-radius: 100%;
+}
+.sg-input-asset-btn::after {
+  width: 12px;
+  height: 12px;
+}
+.sg-input-asset-btn::before {
+  width: 3px;
+  height: 3px;
+  background-color: #c4c4c4;
+}
+
+/* src/view/common/Tab.less */
+.sg-tab-head {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow: auto;
+}
+.sg-tab-title {
+  padding: 2px 6px;
+  position: relative;
+  z-index: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.sg-tab-title:hover {
+  background-color: unset;
+}
+.sg-tab-title[data-aria-selected=true] {
+  background-color: unset;
+}
+.sg-tab-title[data-aria-selected=true]::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-top: 2px solid #4979b6;
+}
+
+/* src/view/common/InputGrid.less */
+.sg-input-grid {
+  width: 100%;
+}
+.sg-input-grid-item {
+  width: 30px;
+  margin: 2px;
+}
+
+/* src/view/common/InputList.less */
+.sg-input-list {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  overflow: hidden;
+}
+.sg-input-list-label {
+  background-color: #b6b6b6;
+  padding: 2px 5px;
+  color: #0c0c0c;
+  border-bottom: 1px solid #a4a4a4;
+  font-size: 14.5px;
+}
+.sg-input-list-body {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  overflow: hidden;
+  background-color: #c8c8c8;
+}
+.sg-input-list-body-placeholder {
+  color: #0c0c0c;
+  padding: 2px 5px;
+  font-size: 14px;
+}
+.sg-input-list-btn {
+  width: 30px;
+  height: 20px;
+  text-align: center;
+  line-height: 16px;
+  background-color: #c8c8c8;
+  overflow: hidden;
+  color: #555555;
+  font-weight: bold;
+  cursor: pointer;
+}
+.sg-input-list-btn:hover {
+  background-color: #c1c1c1;
+}
+.sg-input-list-btn[data-aria-disabled=true] {
+  color: #8e8e8e;
+  cursor: default;
+}
+.sg-input-list-btn[data-aria-disabled=true]:hover {
+  background-color: #c8c8c8;
+}
+.sg-input-list-btn-add {
+  border-bottom-left-radius: 3px;
+}
+.sg-input-list-btn-del {
+  border-bottom-right-radius: 3px;
+}
+.sg-input-list-btn-can {
+  display: flex;
+  justify-content: right;
+  padding-right: 10px;
+}
+
+/* src/view/common/Settings.less */
+.sg-inspector-setting {
+  display: flex;
+  font-size: 16px;
+  align-items: center;
+  margin: 2px 10px;
+}
+.sg-inspector-setting-select {
+  margin: 0;
+}
+.sg-inspector-setting-label {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 120px;
+}
+.sg-inspector-setting-body,
+.sg-inspector-setting-select {
+  width: 100%;
+}
+
+/* src/view/common/Slider.less */
+.sg-slider-range {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 2px;
+  background: #5e5e5e;
+  outline: none;
+  margin: 12px 10px;
+}
+.sg-slider-range:hover::-moz-range-thumb {
+  background: #eaeaea;
+}
+.sg-slider-range:hover::-webkit-slider-thumb {
+  background: #eaeaea;
+}
+.sg-slider-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 13px;
+  height: 13px;
+  background: #999999;
+  cursor: pointer;
+  border-radius: 100%;
+}
+.sg-slider-range::-moz-range-thumb {
+  width: 13px;
+  height: 13px;
+  background: #999999;
+  cursor: pointer;
+  border-radius: 100%;
+}
+.sg-slider-number {
+  width: 40px;
+}
+
+/* src/view/Node.less */
+.sg-node {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  user-select: none;
+}
+.sg-node::after {
+  content: " ";
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  position: absolute;
+  top: -2.5px;
+  left: -2.5px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  z-index: -1;
+}
+.sg-node:hover::after {
+  border-color: #306782;
+}
+.sg-node.selected::after,
+.sg-node.highlight::after {
+  border-color: #268bbd;
+  border-width: 2px;
+  top: -3.5px;
+  left: -3.5px;
+}
+.sg-node.highlight::after {
+  border-color: #17d3dd !important;
+}
+.sg-node-control-can {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+/* src/view/Rete.less */
+.rete-node-view:hover {
+  z-index: 1;
+}
+.rete-area-select {
+  border: 1.5px dashed #7b5622;
+  position: absolute;
+  top: 0;
+  left: 0;
+  will-change: width, height;
+  pointer-events: none;
+  opacity: 0;
+}
+.rete-area-select.rete-area-select-active {
+  opacity: 1;
+}
+
+/* src/view/Context.less */
+.sg-context {
+  padding: 8px 14px 5px 14px;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  user-select: none;
+  position: relative;
+  z-index: 0;
+}
+.sg-context::after {
+  content: " ";
+  display: block;
+  width: calc(100% + 0px);
+  height: calc(100% + 0px);
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  z-index: -1;
+}
+.sg-context:hover::after {
+  border-color: #306782;
+}
+.sg-context[data-aria-selected=true]::after {
+  border-color: #268bbd;
+  border-width: 2px;
+  top: -2px;
+  left: -2px;
+}
+.sg-context-title {
+  text-align: left;
+  margin-bottom: 5px;
+}
+.sg-context-block {
+  margin-bottom: 10px;
+  position: relative;
+  z-index: 0;
+}
+.sg-context-block-can {
+  cursor: grab;
+}
+.sg-context-block[data-indicator-show=top]::before,
+.sg-context-block[data-indicator-show=bottom]::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 5px;
+  background-color: #ca9934;
+}
+.sg-context-block[data-indicator-show=top]::before {
+  top: -5px;
+}
+.sg-context-block[data-indicator-show=bottom]::before {
+  bottom: -5px;
+}
+.sg-context-block-placeholder {
+  min-width: 150px;
+  padding: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.3);
+  margin-bottom: 8px;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+/* src/view/Parameter.less */
+.sg-parameter {
+  border-radius: 15px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  background-color: #545455;
+  padding: 3px 8px 3px 10px;
+}
+.sg-parameter:hover {
+  outline: 1px solid #67bff9;
+}
+.sg-parameter.selected {
+  outline: 2px solid #67bff9;
+}
+.sg-parameter-output {
+  padding: 0 !important;
+}
+.sg-parameter-output-can {
+  background: unset !important;
+}
+
+/* src/plugins/connect-plugin/index.less */
+.connection {
+  overflow: visible !important;
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+.rete-connection-path {
+  cursor: pointer;
+  fill: none;
+  stroke-width: 5px;
+  pointer-events: all;
+}
+.rete-connection-path:hover {
+  stroke-width: 7px;
+}
+.rete-connection-path.selected {
+  stroke: #67bff9 !important;
+}
+.rete-connection-path.disable-hover {
+  pointer-events: none;
+}
+svg,
+svg * {
+  pointer-events: none;
+}
+
+/* src/plugins/PreviewPlugin/PreviewServer.less */
+.sg-preview-server-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 100;
+  display: block;
+}
+
+/* src/view/popups/PopupNodeAdd.less */
+.sg-popup-node-add {
+  background-color: #272727;
+  border: 1px solid #060606;
+  border-radius: 2px;
+}
+.sg-popup-node-add-search {
+  display: flex;
+  align-items: center;
+  margin: 0 5px 5px 5px;
+  background-color: #454545;
+  border-radius: 5px;
+}
+.sg-popup-node-add-search::before {
+  content: "\1f50d";
+  margin: 0 3px 0 5px;
+  flex: none;
+}
+.sg-popup-node-add-search-input {
+  border: none;
+  display: block;
+  min-width: 0px;
+  flex: 1;
+  background-color: unset;
+}
+.sg-popup-node-add-search-input:focus {
+  outline: none;
+}
+.sg-popup-node-add-tree {
+  padding-left: 10px;
+  background-color: #383838;
+  overflow-y: auto;
+  height: 220px;
+  min-width: 210px;
+}
+.sg-popup-title {
+  color: white;
+}
+
+/* src/view/popups/BlackBoard.less */
+.sg-blackboard {
+  background-color: #2b2b2b;
+  border: 1px solid #191919;
+  border-radius: 5px;
+  user-select: none;
+  overflow: hidden;
+}
+.sg-blackboard-head {
+  background-color: #393939;
+  padding: 5px 10px;
+}
+.sg-blackboard-body {
+  min-height: 250px;
+  max-height: 500px;
+  min-width: 220px;
+  overflow: auto;
+}
+.sg-blackboard-title {
+  font-size: 20px;
+}
+.sg-blackboard-h2 {
+  display: flex;
+  align-items: center;
+}
+.sg-blackboard-subtitle {
+  color: #5f5f5f;
+  flex: 1;
+  margin-right: 10px;
+}
+.sg-blackboard-btn-add {
+  width: 30px;
+  height: 30px;
+  border: 1px solid transparent;
+  text-align: center;
+  line-height: 27px;
+  border-radius: 5px;
+  font-size: 20px;
+  cursor: pointer;
+}
+.sg-blackboard-btn-add:hover {
+  border-color: #191919;
+  background-color: #676767;
+}
+.sg-parameter-item {
+  border-radius: 15px;
+  width: fit-content;
+  flex: none;
+  display: flex;
+  align-items: center;
+  padding: 0px 10px;
+  background-color: #3e3e3f;
+  cursor: grab;
+}
+.sg-parameter-item:hover {
+  outline: 1px solid #67bff9;
+}
+.sg-parameter-item-head {
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.sg-parameter-item-exposed {
+  width: 5px;
+  height: 5px;
+  background-color: #acea78;
+  margin-right: 5px;
+  border-radius: 5px;
+}
+.sg-parameter-item-type {
+  flex: 1;
+  text-align: right;
+  color: #7c7c7c;
+  margin: 0 10px;
+}
+.sg-parameter-item-btn-expand {
+  flex: none;
+  font-size: 13px;
+  padding: 3px;
+  cursor: pointer;
+  color: #7c7c7c;
+  margin: 0 3px;
+}
+.sg-parameter-item-btn-expand:hover {
+  color: white;
+}
+.sg-parameter-item-btn-expand[data-aria-expanded=true] {
+  transform: rotate(90deg);
+}
+.sg-parameter-item-input {
+  min-width: 0px;
+  width: 150px;
+}
+.sg-parameter-item-body {
+  padding: 5px;
+  margin-left: 20px;
+}
+.sg-parameter-item-setting {
+  display: flex;
+  color: #7c7c7c;
+}
+.sg-parameter-item-setting-label {
+  width: 80px;
+}
+
+/* src/view/popups/MainPreview.less */
+.sg-main-preview {
+  background-color: #2b2b2b;
+  border: 1px solid #191919;
+  user-select: none;
+  border-radius: 5px;
+  overflow: hidden;
+}
+.sg-main-preview-title {
+  background-color: rgba(255, 255, 255, 0.12);
+  color: #b4b4b4;
+  padding: 5px 13px;
+}
+.sg-main-preview-canvas {
+  width: 200px;
+  height: 200px;
+  display: block;
+}
+.sg-main-preview-canvas-can {
+  background-color: #2b2b2b;
+}
+
+/* src/view/popups/Inspector.less */
+.sg-inspector-title {
+  padding: 5px 5px 10px 5px;
+  font-size: 17px;
+}
+.sg-inspector-body {
+  max-height: 300px !important;
+}

package/dist/editor/index.js

@@ -2988,7 +2988,7 @@ var Moveable = ({ gap = 0, children, x = 0, y = 0, z, containerEl }) => {
       let canRect = [0, 0, innerWidth, innerHeight, 0, 0];
       if (containerEl) {
         const { x: x2, y: y2, width, height } = containerEl.getBoundingClientRect();
-        const { x: offsetLeft, y: offsetTop } = getOffset(el.parentElement, document.body, 100);
+        const { left: offsetLeft, top: offsetTop } = el.parentElement.getBoundingClientRect();
         canRect = [x2, y2, width, height, offsetLeft, offsetTop];
       }
       canRectCache = canRect;
@@ -3369,19 +3369,23 @@ var MenuList = ({ items, x, y, z, root }) => {
     const resizeObserver = new ResizeObserver((entries) => {
       const { width, height } = entries[0].contentRect;
       const gap = 20;
+      let boundW = innerWidth;
+      let boundH = innerHeight;
       let px = x;
       let py = y;
       if (root) {
         const rootRect = root.getBoundingClientRect();
         px -= rootRect.left;
         py -= rootRect.top;
+        boundW = rootRect.width;
+        boundH = rootRect.height;
       }
-      const nx = Math.min(innerWidth - width - gap, px);
-      const ny = Math.min(innerHeight - height - gap, py);
+      const nx = Math.min(boundW - width - gap, px);
+      const ny = Math.min(boundH - height - gap, py);
       el.style.top = ny + "px";
       el.style.left = nx + "px";
       el.style.opacity = "1";
-      if (x > innerWidth - width * 2 - gap) setSubmenuPosition("left");
+      if (x > boundW - width * 2 - gap) setSubmenuPosition("left");
     });
     resizeObserver.observe(el);
     return () => resizeObserver.disconnect();
@@ -14158,7 +14162,7 @@ var ListIOItem = ({ list, value, onChange }) => {
 // package.json
 var package_default = {
   name: "@xifu/shader-graph-glsl",
-  version: "0.3.0",
+  version: "0.4.1",
   description: "Shader Graph GLSL \u2014 visual node-based shader editor & runtime engine",
   type: "module",
   private: false,
@@ -14173,9 +14177,9 @@ var package_default = {
     },
     "./editor": {
       types: "./dist/editor/index.d.ts",
-      style: "./dist/editor/index.css",
       import: "./dist/editor/index.js"
-    }
+    },
+    "./dist/*": "./dist/*"
   },
   scripts: {
     dev: "vite",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xifu/shader-graph-glsl",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Shader Graph GLSL — visual node-based shader editor & runtime engine",
   "type": "module",
   "private": false,
@@ -15,9 +15,9 @@
     },
     "./editor": {
       "types": "./dist/editor/index.d.ts",
-      "style": "./dist/editor/index.css",
       "import": "./dist/editor/index.js"
-    }
+    },
+    "./dist/*": "./dist/*"
   },
   "scripts": {
     "dev": "vite",