init

NateScarlet · Aug 17, 2019 · f051da8 · f051da8
commit f051da8
Show file tree

Hide file tree

Showing 28 changed files with 9,028 additions and 0 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+dist
+*.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'prettier/@typescript-eslint',
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+  plugins: ['@typescript-eslint'],
+  parser: '@typescript-eslint/parser',
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+/.vscode/*
+!/.vscode/cspell.json
+!/.vscode/extensions.json
+
+node_modules
+/dist
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5"
+}
diff --git a/.vscode/cspell.json b/.vscode/cspell.json
@@ -0,0 +1,12 @@
+// cSpell Settings
+{
+    // Version of the setting file.  Always 0.1
+    "version": "0.1",
+    "// language": [
+        "\n    // language - current active spelling language"
+    ],
+    // words - list of words to be always considered correct
+    "words": [
+        "esnext"
+    ]
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,12 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "streetsidesoftware.code-spell-checker"
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# SVG Variable width line
+
+Create svg `path` with each point can have variable width.
+
+Can create line with `PointerEvent.pressure`.
+
+```javascript
+import * as svgVariableWidthLine from 'svg-variable-width-line';
+
+svgVariableWidthLine.compute({
+  points: [{ x: 0, y: 0, w: 1 }, { x: 1, y: 0, w: 0 }],
+});
+// { d: '<Will be path `d` data>' }
+```
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/env'],
+};
diff --git a/demo/index.css b/demo/index.css
@@ -0,0 +1,17 @@
+svg#canvas {
+  width: 800px;
+  height: 600px;
+  max-width: 100%;
+  max-height: 100%;
+  margin: auto;
+  border: 1px solid black;
+}
+svg#canvas path {
+  fill: black;
+  fill-rule: nonzero;
+  stroke: red 1px;
+}
+
+body {
+  text-align: center;
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>SVG Variable Width Line Demo</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <svg
+      id="canvas"
+      viewBox="0 0 800 600"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="red"
+    ></svg>
+    <p>Draw in above area with pressure supported device.</p>
+    <p>Refresh page to clear canvas.</p>
+    <p>Pressure: <span id="pressure"></span></p>
+  </body>
+</html>
diff --git a/demo/index.ts b/demo/index.ts
@@ -0,0 +1,81 @@
+import * as svgVariableWidthLine from '@';
+
+class DrawingHandler {
+  public el: SVGSVGElement;
+  public isDrawing = false;
+  public points: svgVariableWidthLine.Point[] = [];
+  public target?: SVGPathElement;
+  public width = 20;
+  public lastDrawTime?: number;
+
+  public constructor(el: SVGSVGElement) {
+    this.el = el;
+  }
+  onPointerdown(e: PointerEvent): void {
+    e.preventDefault();
+    this.isDrawing = true;
+    this.points = [];
+    const target = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'path'
+    );
+    this.el.appendChild(target);
+    this.target = target;
+  }
+  get mustTarget(): SVGPathElement {
+    if (!this.target) {
+      throw new Error('Should has target');
+    }
+    return this.target;
+  }
+  onPointermove(e: PointerEvent): void {
+    if (!this.isDrawing) {
+      return;
+    }
+    e.preventDefault();
+    if (this.lastDrawTime && Date.now() - this.lastDrawTime < 4) {
+      return;
+    }
+    this.lastDrawTime = Date.now();
+    const p = svgVariableWidthLine.util.translatePoint(this.el, e);
+    p.w = e.pressure * this.width;
+    const lastPoint = this.points.slice(-1)[0];
+    if (
+      lastPoint &&
+      svgVariableWidthLine.vector2.length(lastPoint, p) < this.width
+    ) {
+      return;
+    }
+    this.points.push(p);
+    this.update();
+  }
+  onPointerup(e: PointerEvent): void {
+    e.preventDefault();
+    this.isDrawing = false;
+    delete this.target;
+  }
+  install(): void {
+    this.el.addEventListener('pointerdown', this.onPointerdown.bind(this));
+    this.el.addEventListener('pointermove', this.onPointermove.bind(this));
+    this.el.addEventListener('pointerup', this.onPointerup.bind(this));
+  }
+  update(): void {
+    const { d } = svgVariableWidthLine.compute(...this.points);
+    this.mustTarget.setAttribute('d', d);
+  }
+}
+
+((): void => {
+  const el = document.querySelector('svg#canvas');
+  if (!(el instanceof SVGSVGElement)) {
+    throw Error('Missing canvas element');
+  }
+  new DrawingHandler(el).install();
+  el.addEventListener('pointermove', e => {
+    const el = document.querySelector('#pressure');
+    if (!el) {
+      return;
+    }
+    el.textContent = e.pressure.toString();
+  });
+})();
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts"]
+}
diff --git a/mochapack.opts b/mochapack.opts
@@ -0,0 +1 @@
+tests/**/*.spec.ts