v2.0.5 (#73)

v2.0.5

Author: w8r

.eslintrc.js

@@ -1,105 +1,16 @@
-const common = {
-  env: {
-    node: true,
-    es6: true,
-  },
-  plugins: ["prettier", "markdown"],
+module.exports = {
+  env: { browser: true, es2020: true },
   extends: [
-    "airbnb-base",
-    "plugin:jest/all",
-    "plugin:markdown/recommended", // REF: https://github.com/eslint/eslint-plugin-markdown/blob/main/lib/index.js
-    "prettier",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ["node_modules/", "dist/", "coverage/"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  plugins: ["react-refresh"],
   rules: {
-    "prettier/prettier": "error",
-    "jest/no-disabled-tests": "warn",
-    "jest/no-focused-tests": "error",
-    "jest/no-identical-title": "error",
-    "jest/prefer-to-have-length": "warn",
-    "jest/valid-expect": "error",
-    "jest/expect-expect": "off",
-    "jest/prefer-expect-assertions": "off",
-    "jest/no-test-return-statement": "off",
-    "import/prefer-default-export": "off",
-    "import/extensions": "off",
-    "no-console": "off",
-    "no-iterator": "off",
-    "no-restricted-syntax": "off",
-    "no-await-in-loop": "off",
-    "consistent-return": "off",
-    "no-shadow": "off",
-    "no-unused-vars": "off",
+    "react-refresh/only-export-components": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-interface": "off",
   },
 };
-
-module.exports = {
-  // ...common,
-  root: true,
-  overrides: [
-    {
-      /*
-      eslint-plugin-markdown only finds javascript code block snippet.
-      For specific spec, refer to https://github.com/eslint/eslint-plugin-markdown
-      */
-      ...common,
-      files: ["**/*.js"],
-    },
-    {
-      /*
-      eslint-plugin-markdown only finds javascript code block snippet.
-      For specific spec, refer to https://github.com/eslint/eslint-plugin-markdown
-      */
-      files: ["**/*.md"],
-      processor: "markdown/markdown",
-    },
-    {
-      ...common,
-      // In eslint-plugin-markdown v2, configuration for fenced code blocks is separate from the
-      // containing Markdown file. Each code block has a virtual filename
-      // appended to the Markdown file's path.
-      files: ["**/*.md/*.js"],
-      // Configuration for fenced code blocks goes with the override for
-      // the code block's virtual filename, for example:
-      parserOptions: {
-        ecmaFeatures: {
-          impliedStrict: true,
-        },
-      },
-      rules: {
-        ...common.rules,
-        "import/no-unresolved": "off",
-        "import/no-extraneous-dependencies": "off",
-      },
-    },
-    {
-      ...common,
-      files: ["**/*.ts"],
-      parser: "@typescript-eslint/parser",
-      parserOptions: {
-        project: "./tsconfig.json", // REF: https://www.npmjs.com/package/eslint-config-airbnb-typescript
-      },
-      env: common.env,
-      plugins: [...common.plugins, "@typescript-eslint"],
-      extends: [
-        ...common.extends,
-        "airbnb-typescript/base", // "base" does not include tsx rules. REF: https://www.npmjs.com/package/eslint-config-airbnb-typescript
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/errors",
-        "plugin:import/warnings",
-        "plugin:import/typescript",
-        "prettier", // Let prettier have high priority
-      ],
-      rules: {
-        ...common.rules,
-        "@typescript-eslint/explicit-function-return-type": "off",
-        "@typescript-eslint/explicit-module-boundary-types": "off",
-      },
-      settings: {
-        "import/resolver": {
-          typescript: {},
-        },
-      },
-    },
-  ],
-};

README.md

@@ -4,6 +4,17 @@
 
 This plugin allows you to export the visualization with better quality and more settings.
 
+## Table of contents
+
+- [Configuarion](#configuration)
+- [Export settings](#export-settings)
+- [Snapping](#snapping)
+- [Full-size export](#full-size-export)
+- [Pre-defined formats](#pre-defined-formats)
+- [Background Export](#background-export)
+- [Choosing format](#choosing-format)
+- [Annotations](#annotations)
+
 ## Configuration
 
 Plugin is available through a custom action:
@@ -33,7 +44,8 @@ This will open the plugin in another tab in your browser. In the plugin, you can
   - **Pre-defined sizes** - you can also go for the pre-defined document sizes (for instance, for printing) and _fit_ your visualization into it, using panning and zooming. If you are aiming at embedding your exported images into presentations, please refer to the [pre-defined PowerPoint slide sizes](https://support.microsoft.com/en-us/office/change-the-size-of-your-slides-040a811c-be43-40b9-8d04-0de5ed79987e) - for the modern system that would be `Widescreen`. For printing, you have a selection of popular document sizes, from A3 to letterhead. It is preferable to use SVG file format for printing, as it is vectorial and will produce higher quality prints. Note that if you select the pre-defined document size, the parts of the graph that are not fitting into it, will be clipped.
 
 ## Snapping
-Snapping allows you to manually align each node linearly with other nodes in the visualization.  
+
+Snapping allows you to manually align each node linearly with other nodes in the visualization.
 
 ## Full-size export
 
@@ -69,3 +81,40 @@ Currently the plugin offers two formats: SVG and PNG. You can choose the format
 
 - <abbr title="Scalable Vector Graphics">SVG</abbr> - this is the vector format that would offer the best quality and file size for printing and sharing on the web. It has all the fonts and images embedded into the document. It is also editable by the popular vector graphics applications such as [Adobe Illustrator](https://www.adobe.com/), [Inkscape](https://inkscape.org/) and lots of others. They can also be resized and embedded into the presentations and documents without any quality loss.
 - <abbr title="Portable Network Graphics">PNG</abbr> - this is the raster format and its advantage is that it can be viewed by more applications, such as default image viewers on any operating system. Resizing the PNG documents will cause blurriness and degraded quality.
+
+## Annotations
+
+You can add annotations to the exported image. To do that, you need to select a type of annotation from the annotations bar
+
+<img src="./images/annotations-bar.png" alt="Annotations bar" />
+
+Currently, the plugin supports the following types of annotations:
+
+- Text box
+- Arrow
+
+### Adding text boxes
+
+To add a text box, click on the "Text box" button in the annotations bar. Then, draw a rectangle on the screen. The text box will be added to the image.
+
+<img src="./images/adding-text-annotation.gif" alt="Adding text annotation" />
+
+You can change the text in the text box by clicking and focusing on the text box. You can also change the size of the text box by dragging the corners of the rectangle, or move it around by grabbing the box by one of the sides. You can also delete the text box by selecting it and pressing the <kbd>Backspace</kbd> key.
+
+<img src="./images/editing-text-annotation.gif" alt="Text box editing" />
+
+You can change the style of the text, including the font, font size, font color, and background color. To do that, click on the text box and select the "Text" tab in the settings panel.
+
+### Adding arrows
+
+To add an arrow, click on the "Arrow" button in the annotations bar. Then, click on the start point of the arrow and drag it to the end point. The arrow will be added to the image.
+
+<img src="./images/adding-arrow-annotation.gif" alt="Adding arrow annotation" />
+
+You can edit the arrow by clicking on it and selecting the "Arrow" tab in the settings panel. You can change the color, the width, and the direction of an arrow.
+
+### Combining text boxes and arrows
+
+You can combine and connect text boxes with arrows and lines. For that, you need to drag one of the endpoints of the line close to the text box. The line will snap to the text box and will be connected to it. Now you can move the text box around and the line will follow it.
+
+<img src="./images/connect-arrow-text.gif" alt="Combining annotations" />

tests/e2e/codecept.conf.js renamed to codecept.conf.ts

@@ -1,6 +1,5 @@
-require("ts-node/register");
-
-const { setHeadlessWhen, setWindowSize } = require("@codeceptjs/configure");
+/// <reference types='codeceptjs' />
+import { setHeadlessWhen, setWindowSize } from "@codeceptjs/configure";
 
 setHeadlessWhen(process.env.CI);
 
@@ -14,8 +13,11 @@ const emulateOptions = process.env.TEST_RETINA
   ? { isMobile: false, deviceScaleFactor: 2 }
   : { isMobile: false, deviceScaleFactor: 1 };
 
-exports.config = {
-  output: "../../reports/html/e2e",
+/** @type {CodeceptJS.MainConfig} */
+export const config: CodeceptJS.MainConfig = {
+  // this is irreleavnt by the way
+  tests: "./tests/e2e/*_test.ts",
+  output: "./reports/html/e2e",
   timeout: 25,
   helpers: {
     Playwright: {
@@ -30,12 +32,12 @@ exports.config = {
       },
     },
     CustomHelper: {
-      require: "./helpers/customHelper",
+      require: "./tests/e2e/helpers/customHelper",
     },
   },
   gherkin: {
-    features: "./features/**/*.feature",
-    steps: "./steps/**/*.ts",
+    features: "./tests/e2e/features/**/*.feature",
+    steps: "./tests/e2e/steps/**/*.ts",
   },
   name: "lkeplugin-image-export",
   grep: process.env.GREP,
@@ -47,7 +49,7 @@ exports.config = {
     },
     stepByStepReport: {
       enabled: process.env.CI,
-      output: "../../reports/html/e2e",
+      output: "./reports/html/e2e",
       ignoreSteps: ["grab*", "wait*"],
       fullPageScreenshots: true,
     },

images/adding-arrow-annotation.gif

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Image export plugin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="./src/assets/favicon.ico" />
+  </head>
+
+  <body>
+    <div class="page-container" id="root"></div>
+    <script src="./src/main.tsx" type="module"></script>
+  </body>
+</html>