memgraph · tonilastre · Jul 14, 2023 · Jun 14, 2023 · Jun 14, 2023 · Jun 14, 2023
@@ -40,7 +40,7 @@ npm install @memgraph/orb
 ```
 
 Below you can find a simple Typescript example using Orb to visualize a small graph. Feel
-free to check other Javascript examples in `examples/` directory.
+free to check other JavaScript examples in `examples/` directory.
 
 ```typescript
 import { Orb } from '@memgraph/orb';
@@ -84,8 +84,8 @@ orb.view.render(() => {
 <script src="https://unpkg.com/@memgraph/orb/dist/browser/orb.min.js"></script>
 ```
 
-Below you can find a simple Javascript example using Orb to visualize a small graph. Feel
-free to check other Javascript examples in `examples/` directory.
+Below you can find a simple JavaScript example using Orb to visualize a small graph. Feel
+free to check other JavaScript examples in `examples/` directory.
 
 ```html
 <!DOCTYPE html>

@@ -168,7 +168,7 @@ import { Color } from '@memgraph/orb';
 // Constructor always receives a color HEX code
 const red = new Color('#FF0000');
 
-// Returns darker or ligher color by input factor (default is 0.3)
+// Returns darker or lighter color by input factor (default is 0.3)
 const darkerRed = red.getDarkerColor();
 const lighterRed = red.getLighterColor();
 
@@ -183,7 +183,7 @@ const randomColor = Color.getRandomColor();
 ```
 
 If you would like to have a lighter/darker tone of a node on node select/hover, then you can easily do
-that with `getLigherColor` or `getDarkerColor` functions:
+that with `getLighterColor` or `getDarkerColor` functions:
 
 ```typescript
 const nodeBaseColor = new Color('#FF0000');

@@ -260,7 +260,7 @@ export class CanvasRenderer<N extends INodeBase, E extends IEdgeBase> extends Em
   /**
    * Returns the visible rectangle view in the simulation coordinates.
    *
-   * @return {IRectangle} Visible view in teh simulation coordinates
+   * @return {IRectangle} Visible view in the simulation coordinates
    */
   getSimulationViewRectangle(): IRectangle {
     const topLeftPosition = this.getSimulationPosition({ x: 0, y: 0 });

@@ -36,7 +36,7 @@ export const getCurvedArrowShape = <N extends INodeBase, E extends IEdgeBase>(ed
 
   const controlPoint = edge.getCurvedControlPoint();
   const arrowPoint = findBorderPoint(edge, target);
-  const guidePos = getPointBrezier(edge, Math.max(0.0, Math.min(1.0, arrowPoint.t + guideOffset)), controlPoint);
+  const guidePos = getPointBezier(edge, Math.max(0.0, Math.min(1.0, arrowPoint.t + guideOffset)), controlPoint);
   const angle = Math.atan2(arrowPoint.y - guidePos.y, arrowPoint.x - guidePos.x);
 
   const length = 1.5 * scaleFactor + 3 * lineWidth; // 3* lineWidth is the width of the edge.
@@ -55,10 +55,10 @@ export const getCurvedArrowShape = <N extends INodeBase, E extends IEdgeBase>(ed
  *
  * @param {EdgeCurved} edge Edge
  * @param {number} percentage Percentage of the line to get position from
- * @param {IPosition} viaNode Brezier node on the curved line
+ * @param {IPosition} viaNode Bezier node on the curved line
  * @return {IPosition} Position on the line
  */
-const getPointBrezier = <N extends INodeBase, E extends IEdgeBase>(
+const getPointBezier = <N extends INodeBase, E extends IEdgeBase>(
   edge: EdgeCurved<N, E>,
   percentage: number,
   viaNode: IPosition,
@@ -111,7 +111,7 @@ const findBorderPoint = <N extends INodeBase, E extends IEdgeBase>(
   while (low <= high && iteration < maxIterations) {
     middle = (low + high) * 0.5;
 
-    pos = { ...getPointBrezier(edge, middle, viaNode), t: 0 };
+    pos = { ...getPointBezier(edge, middle, viaNode), t: 0 };
     // angle = Math.atan2(nodePoints.y - pos.y, nodePoints.x - pos.x);
     // distanceToBorder = node.getDistanceToBorder(angle);
     distanceToBorder = node.getDistanceToBorder();

@@ -64,7 +64,7 @@ export interface IRenderer<N extends INodeBase, E extends IEdgeBase> extends IEm
   /**
    * Returns the visible rectangle view in the simulation coordinates.
    *
-   * @return {IRectangle} Visible view in teh simulation coordinates
+   * @return {IRectangle} Visible view in the simulation coordinates
    */
   getSimulationViewRectangle(): IRectangle;
 

@@ -16,13 +16,13 @@ export interface IEmitter<T extends IEventMap> {
   removeAllListeners<K extends IEventKey<T>>(eventName?: K): IEmitter<T>;
 }
 
-interface IEmmiterListener<T extends IEventMap> {
+interface IEmitterListener<T extends IEventMap> {
   callable: IEventReceiver<T[any]>;
   isOnce?: boolean;
 }
 
 export class Emitter<T extends IEventMap> implements IEmitter<T> {
-  private readonly _listeners = new Map<IEventKey<T>, IEmmiterListener<T>[]>();
+  private readonly _listeners = new Map<IEventKey<T>, IEmitterListener<T>[]>();
 
   /**
    * Adds a one-time listener function for the event named eventName. The next time eventName is
@@ -34,7 +34,7 @@ export class Emitter<T extends IEventMap> implements IEmitter<T> {
    * @return {IEmitter} Reference to the EventEmitter, so that calls can be chained
    */
   once<K extends IEventKey<T>>(eventName: K, func: IEventReceiver<T[K]>): IEmitter<T> {
-    const newListener: IEmmiterListener<T> = {
+    const newListener: IEmitterListener<T> = {
       callable: func,
       isOnce: true,
     };
@@ -61,7 +61,7 @@ export class Emitter<T extends IEventMap> implements IEmitter<T> {
    * @return {IEmitter} Reference to the EventEmitter, so that calls can be chained
    */
   on<K extends IEventKey<T>>(eventName: K, func: IEventReceiver<T[K]>): IEmitter<T> {
-    const newListener: IEmmiterListener<T> = {
+    const newListener: IEmitterListener<T> = {
       callable: func,
     };
 

@@ -2,7 +2,7 @@
  * A key-value model that keeps an order of the elements by
  * the input sort function.
  *
- * Insipration by NgRx/EntityState: https://github.com/ngrx/platform
+ * Inspired by NgRx/EntityState: https://github.com/ngrx/platform
  */
 export interface IEntityState<K, V> {
   getOne(id: K): V | undefined;

@@ -17,7 +17,7 @@ export const setupContainer = (container: HTMLElement, areCollapsedDimensionsAll
         "[Orb] The graph container element and its parent don't have defined width properties.",
         'If you are using percentage values,',
         'please make sure that the parent element of the graph container has a defined position and width.',
-        "Setting the width of the graph container to an arbirtrary value of '400px'...",
+        "Setting the width of the graph container to an arbitrary value of '400px'...",
       );
     } else {
       console.warn("[Orb] The graph container element doesn't have defined width. Setting width to 100%...");