[WIP] V1

.eslintignore

@@ -1,3 +1,3 @@
-node_modules
-dist
-dist-*
+node_modules
+dist
+dist-*

.eslintrc.js → .eslintrc.cjs

@@ -1,36 +1,20 @@
-module.exports = {
-  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
-  extends: [
-    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-  ],
-  parserOptions: {
-    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
-    sourceType: "module" // Allows for the use of imports
-  },
-  rules: {
-    // Error
-    "arrow-parens": ["error", "as-needed", { requireForBlockBody: false }],
-    "comma-dangle": ["error", "never"],
-    "max-lines": ["error", 600],
-    "no-console": ["error", { allow: ["warn", "error", "info"] }],
-    "no-param-reassign": ["error", { props: false }],
-    "@typescript-eslint/no-use-before-define": ["error", { functions: false }]
-  },
-  overrides: [
-    {
-      files: ["*.js", "*.jsx"],
-      rules: {
-        "@typescript-eslint/no-var-requires": "off"
-      }
-    },
-    {
-      files: ["*.js", "*.jsx", "*.ts", "*.tsx"],
-      rules: {
-        "@typescript-eslint/explicit-member-accessibility": "off",
-        "@typescript-eslint/explicit-function-return-type": "off"
-      }
-    }
-  ]
-};
+module.exports = {
+  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+  extends: [
+    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: "module" // Allows for the use of imports
+  },
+  rules: {
+    // Error
+    "arrow-parens": ["error", "as-needed", { requireForBlockBody: false }],
+    "comma-dangle": ["error", "never"],
+    "max-lines": ["error", 5000],
+    "no-console": ["error", { allow: ["warn", "error", "info"] }],
+    "no-param-reassign": "off",
+    "@typescript-eslint/no-use-before-define": ["error", { functions: false }]
+  }
+};

.github/workflows/main.yml

@@ -0,0 +1,41 @@
+name: CI
+
+on: [pull_request]
+
+env:
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+jobs:
+  build:
+    name: CI on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        node: ["14.x"]
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Test
+        run: npm test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: npm run build
+
+      - name: Check size
+        run: npm run size

.github/workflows/release.yml

@@ -0,0 +1,34 @@
+name: Release
+
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+      - "v*" # Push events to matching v*, i.e. v1.0, v20.15.10
+
+env:
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+jobs:
+  build:
+    name: Build and publish to NPM
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Build
+        run: npm run build
+
+      - name: Publish
+        run: |
+          echo -e "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" >  ${{ github.workspace }}/.npmrc
+          npm publish

.gitignore

@@ -1,31 +1,25 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-.nyc_output
-coverage
-
-# production
-/build
-/dist
-/dist-*
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-.cache
-.rts2_cache_cjs
-.rts2_cache_es
-.rts2_cache_umd
+node_modules
+dist
+dist-ssr
+*.local
+coverage
+docs
+
+# Editor directories and files
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint-staged

.nvmrc

@@ -0,0 +1 @@
+18.10.0

.prettierrc.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+  printWidth: 80,
+  semi: true,
+  singleQuote: false,
+  trailingComma: "none",
+  useTabs: false,
+  bracketSpacing: true,
+  arrowParens: "avoid",
+  endOfLine: "auto"
+};

.vscode/settings.json

@@ -1,7 +1,10 @@
-{
-  "editor.tabSize": 2,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "eslint.validate": ["javascript", "typescript"],
-}
+{
+  "editor.tabSize": 2,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.validate": ["javascript", "typescript"],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

example/index.ts

@@ -0,0 +1,147 @@
+import { createGraphView, GraphEdge, GraphNode, GraphView } from "../src";
+import { edgeShapes, nodeShapes } from "./shapes";
+
+function getRandomInt(min: number, max: number) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+
+  return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
+}
+
+const graphDiv = document.getElementById("graph") as HTMLDivElement;
+const nodeCountInput = document.getElementById(
+  "node-count-input"
+) as HTMLInputElement;
+const generateButton = document.getElementById(
+  "generate-button"
+) as HTMLButtonElement;
+const toggleModeButton = document.getElementById(
+  "toggle-mode-button"
+) as HTMLButtonElement;
+const deleteButton = document.getElementById(
+  "delete-button"
+) as HTMLButtonElement;
+
+let graphView: GraphView<GraphNode, GraphEdge>;
+
+let lastId = 0;
+let mode: "move" | "create" = "move";
+
+function generate(nodeCount = 100) {
+  let id = 1;
+
+  graphView.clear();
+
+  const columns = Math.ceil(Math.sqrt(nodeCount));
+
+  for (let i = 0; i < nodeCount; i++) {
+    const row = (i / columns) | 0;
+    const col = i % columns;
+
+    graphView.addNode(
+      {
+        id,
+        x: col * 320,
+        y: row * 320
+      },
+      nodeShapes[getRandomInt(0, nodeShapes.length)]
+    );
+
+    id++;
+
+    if (i > 0) {
+      graphView.addEdge(
+        {
+          id,
+          sourceId: id - (i > 1 ? 3 : 2),
+          targetId: id - 1
+        },
+        edgeShapes[getRandomInt(0, edgeShapes.length)]
+      );
+
+      id++;
+    }
+  }
+
+  lastId = id - 1;
+}
+
+function main() {
+  graphView = createGraphView(graphDiv);
+
+  generate(100);
+
+  generateButton.addEventListener("click", () => {
+    const len = parseInt(nodeCountInput.value, 10);
+
+    generate(len);
+  });
+
+  toggleModeButton.addEventListener("click", () => {
+    if (mode === "create") mode = "move";
+    else mode = "create";
+  });
+
+  deleteButton.addEventListener("click", () => {
+    const selectedIds = graphView.getSelection();
+
+    for (const id of selectedIds) {
+      graphView.remove(id);
+    }
+  });
+
+  graphDiv.addEventListener("mousedown", e => {
+    const pos = graphView.getViewPosFromWindowPos(e.x, e.y);
+    const hoveredId = graphView.getHoveredId();
+
+    if (hoveredId) {
+      graphView.addSelection(hoveredId);
+      // graphView.select(hoveredId);
+    } else {
+      graphView.clearSelection();
+    }
+
+    if (mode === "move") {
+      if (!hoveredId) graphView.beginMoveView();
+      else
+        graphView.beginMoveNodes(
+          graphView.getSelectedNodeIds(),
+          pos[0],
+          pos[1]
+        );
+    } else if (mode === "create") {
+      if (!hoveredId) {
+        lastId++;
+
+        graphView.addNode(
+          { id: lastId, x: pos[0], y: pos[1] },
+          nodeShapes[getRandomInt(0, nodeShapes.length)]
+        );
+      } else {
+        graphView.beginDragLine();
+      }
+    }
+  });
+
+  graphDiv.addEventListener("mouseup", () => {
+    graphView.endMoveView();
+    graphView.endMoveNodes();
+
+    const dragLineNodes = graphView.endDragLine();
+
+    if (dragLineNodes) {
+      lastId++;
+
+      graphView.addEdge(
+        {
+          id: lastId,
+          sourceId: dragLineNodes[0].id,
+          targetId: dragLineNodes[1].id
+        },
+        edgeShapes[getRandomInt(0, edgeShapes.length)]
+      );
+    }
+  });
+}
+
+main();