Merge pull request #120 from retejs/fix-node-sizing

fix: node sizing

Author: Ni55aN

src/presets/classic/components/control/control.component.sass

@@ -1,9 +1,10 @@
 @import "../../vars"
 
 input
-  width: $node-width - 50px
+  width: 100%
   border-radius: 30px
   background-color: white
   padding: 2px 6px
   border: 1px solid #999
   font-size: 110%
+  box-sizing: border-box

src/presets/classic/components/node/node.component.sass

@@ -8,7 +8,7 @@
   border-radius: 10px
   cursor: pointer
   box-sizing: border-box
-  min-width: $node-width
+  width: $node-width
   height: auto
   padding-bottom: 6px
   position: relative

src/presets/classic/components/node/node.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, HostBinding, ChangeDetectorRef, OnChanges } from '@an
 import { ClassicPreset as Classic } from 'rete';
 import { KeyValue } from '@angular/common';
 
+type NodeExtraData = { width?: number, height?: number }
 type SortValue<N extends Classic.Node> = (N['controls'] | N['inputs'] | N['outputs'])[string]
 
 @Component({
@@ -12,12 +13,20 @@ type SortValue<N extends Classic.Node> = (N['controls'] | N['inputs'] | N['outpu
   }
 })
 export class NodeComponent implements OnChanges {
-  @Input() data!: Classic.Node;
+  @Input() data!: Classic.Node & NodeExtraData;
   @Input() emit!: (data: any) => void
   @Input() rendered!: () => void
 
   seed = 0
 
+  @HostBinding('style.width.px') get width() {
+    return this.data.width
+  }
+
+  @HostBinding('style.height.px') get height() {
+    return this.data.height
+  }
+
   @HostBinding('class.selected') get selected() {
     return this.data.selected
   }