feat: add Playground story (#5)

* feat(): Add gravity playground. Add some fixes and features for playground

* fix(Block): fix block's selection

* fix(Block): fix growing zIndex on select block

* fix(Selection) fix ts in SelectionArea

---------

Co-authored-by: evtaranov <[email protected]>

Author: draedful

.storybook/styles/global.css

@@ -1,7 +1,47 @@
 
+@mixin nv-legacy-text {
+  @font-face {
+    font-family: "YS Text";
+    src: url("https://yastatic.net/s3/home/fonts/ys/1/text-light.woff2") format("woff2");
+    font-weight: 300;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "YS Text";
+    src: url("https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff2") format("woff2");
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "YS Text";
+    src: url("https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff2") format("woff2");
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: "YS Text";
+    src: url("https://yastatic.net/s3/home/fonts/ys/1/text-bold.woff2") format("woff2");
+    font-weight: bold;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: swap;
+  }
+}
+
+
 .sb-show-main {
   padding: 0 !important;
-  margin: 0;  
+  margin: 0;
+  font-family: "YS Text";
 }
 
 .toolbox {

package-lock.json

@@ -39,6 +39,7 @@
     }
   ],
   "dependencies": {
+    "@monaco-editor/react": "^4.6.0",
     "@preact/signals-core": "^1.5.1",
     "intersects": "^2.7.2",
     "lodash-es": "^4.17.21",

package.json

@@ -1,5 +1,5 @@
 import { EventedComponent } from "../../../mixins/withEvents";
-import { withHitTest } from "../../../mixins/withHitTest";
+import { debugHitBox, withHitTest } from "../../../mixins/withHitTest";
 import { ECameraScaleLevel } from "../../../services/camera/CameraService";
 import { frameDebouncer } from "../../../services/optimizations/frameDebouncer";
 import { AnchorState, EAnchorType } from "../../../store/anchor/Anchor";
@@ -13,7 +13,7 @@ export type TAnchor = {
   id: string;
   blockId: TBlockId;
   type: EAnchorType | string;
-  index: number;
+  index?: number;
 };
 
 export type TAnchorProps = TAnchor & {
@@ -30,6 +30,9 @@ type TAnchorState = {
 };
 
 export class Anchor extends withHitTest(EventedComponent) {
+
+  public readonly cursor = 'pointer';
+
   public get zIndex() {
     // @ts-ignore this.__comp.parent instanceOf Block
     return this.__comp.parent.zIndex + 1;
@@ -45,7 +48,7 @@ export class Anchor extends withHitTest(EventedComponent) {
 
   private shift: number;
 
-  private hitBoxHash: number;
+  private hitBoxHash: string;
 
   private debouncedSetHitBox: (...args: any[]) => void;
 
@@ -75,6 +78,10 @@ export class Anchor extends withHitTest(EventedComponent) {
     this.shift = this.props.size / 2 + props.lineWidth;
   }
 
+  public getPosition() {
+    return this.props.getPosition(this.props);
+  }
+
   protected subscribe() {
     return [
       this.connectedState.$selected.subscribe((selected) => {
@@ -95,9 +102,21 @@ export class Anchor extends withHitTest(EventedComponent) {
 
   public willIterate() {
     super.willIterate();
+
     const { x, y, width, height } = this.hitBox.getRect();
 
     this.shouldRender = width && height ? this.context.camera.isRectVisible(x, y, width, height) : true;
+    
+  }
+
+  public didIterate(): void {
+    const { x: poxX, y: posY } = this.props.getPosition(this.props);
+    const hash = `${poxX}/${posY}/${this.shift}`;
+
+    if (this.hitBoxHash !== hash) {
+      this.hitBoxHash = hash;
+      this.debouncedSetHitBox();
+    }
   }
 
   public handleEvent(event: MouseEvent | KeyboardEvent) {
@@ -108,14 +127,16 @@ export class Anchor extends withHitTest(EventedComponent) {
       case "click":
         this.toggleSelected();
         break;
-      case "mouseenter":
+      case "mouseenter":{
         this.setState({ raised: true });
         this.computeRenderSize(this.props.size, true);
         break;
-      case "mouseleave":
+      }
+      case "mouseleave": {
         this.setState({ raised: false });
         this.computeRenderSize(this.props.size, false);
         break;
+      }
     }
   }
 
@@ -124,18 +145,6 @@ export class Anchor extends withHitTest(EventedComponent) {
     this.setHitBox(x - this.shift, y - this.shift, x + this.shift, y + this.shift);
   }
 
-  public didRender() {
-    super.didRender();
-    const { x, y } = this.props.getPosition(this.props);
-
-    const hash = x / y + this.shift;
-
-    if (this.hitBoxHash !== hash) {
-      this.hitBoxHash = hash;
-      this.debouncedSetHitBox();
-    }
-  }
-
   private computeRenderSize(size: number, raised: boolean) {
     if (raised) {
       this.setState({ size: size * 1.8 });
@@ -145,25 +154,21 @@ export class Anchor extends withHitTest(EventedComponent) {
   }
 
   protected render() {
-    // debugHitBox(this.context.ctx, this);
-
     if (this.context.camera.getCameraBlockScaleLevel() === ECameraScaleLevel.Detailed) {
       return;
     }
     const { x, y } = this.props.getPosition(this.props);
-    render(this.context.ctx, (ctx) => {
-      ctx.save();
-      ctx.fillStyle = this.context.colors.anchor.background;
-      ctx.beginPath();
-      ctx.arc(x, y, this.state.size * 0.5, 0, 2 * Math.PI);
-      ctx.fill();
-
-      if (this.state.selected) {
-        ctx.strokeStyle = this.context.colors.anchor.selectedBorder;
-        ctx.lineWidth = this.props.lineWidth + 3;
-        ctx.stroke();
-      }
-      ctx.closePath();
-    })
+    const ctx = this.context.ctx;
+    ctx.fillStyle = this.context.colors.anchor.background;
+    ctx.beginPath();
+    ctx.arc(x, y, this.state.size * 0.5, 0, 2 * Math.PI);
+    ctx.fill();
+
+    if (this.state.selected) {
+      ctx.strokeStyle = this.context.colors.anchor.selectedBorder;
+      ctx.lineWidth = this.props.lineWidth + 3;
+      ctx.stroke();
+    }
+    ctx.closePath();
   }
 }