openchemlib 8.14.0 → 8.16.0

package/full.d.ts

@@ -5,5 +5,12 @@ export {
   SVGRenderer,
   AtomHighlightCallback,
   BondHighlightCallback,
-  ChangeListenerCallback
+  ChangeListenerCallback,
+  OnChangeEventType,
+  OnChangeEvent,
+  OnChangeListenerCallback,
+  CanvasEditorMode,
+  CanvasEditorOptions,
+  CanvasEditor,
+  registerCustomElement,
 } from './types';

package/full.js

@@ -2,6 +2,11 @@
 
 const OCL = require('./dist/openchemlib-full.js');
 
+require('./lib/canvas_editor/init')(OCL);
+
+exports.CanvasEditor = OCL.CanvasEditor;
+exports.registerCustomElement = OCL.registerCustomElement;
+
 exports.default = OCL;
 exports.CanonizerUtil = OCL.CanonizerUtil;
 exports.ConformerGenerator = OCL.ConformerGenerator;

package/full.pretty.d.ts

@@ -0,0 +1 @@
+export * from './full';

package/full.pretty.js

@@ -2,6 +2,11 @@
 
 const OCL = require('./dist/openchemlib-full.pretty.js');
 
+require('./lib/canvas_editor/init')(OCL);
+
+exports.CanvasEditor = OCL.CanvasEditor;
+exports.registerCustomElement = OCL.registerCustomElement;
+
 exports.default = OCL;
 exports.CanonizerUtil = OCL.CanonizerUtil;
 exports.ConformerGenerator = OCL.ConformerGenerator;

package/lib/canvas_editor/clipboard_handler.js

@@ -0,0 +1,15 @@
+'use strict';
+
+class ClipboardHandler {
+  copyMolecule(molecule) {
+    const data = molecule.getIDCodeAndCoordinates();
+    navigator.clipboard.writeText(`${data.idCode} ${data.coordinates}`);
+  }
+
+  pasteMolecule() {
+    // TODO: find a way to implement this in a synchronous way.
+    return null;
+  }
+}
+
+module.exports = ClipboardHandler;

package/lib/canvas_editor/create_editor.js

@@ -0,0 +1,152 @@
+'use strict';
+
+const EditorArea = require('./editor_area');
+const getEditorStylesheet = require('./editor_stylesheet');
+const { addPointerListeners, addKeyboardListeners } = require('./events');
+const Toolbar = require('./toolbar');
+const UIHelper = require('./ui_helper');
+
+function createEditor(
+  parentElement,
+  options,
+  onChange,
+  JavaEditorArea,
+  JavaEditorToolbar,
+  JavaUIHelper,
+  Molecule,
+  Reaction,
+) {
+  const {
+    readOnly = false,
+    initialMode = 'molecule',
+    initialFragment = false,
+  } = options;
+
+  const rootElement = document.createElement('div');
+  Object.assign(rootElement.style, {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'start',
+    backgroundColor: 'white',
+    // Prevent side effects of pointer events, like scrolling the page or text
+    // selection.
+    touchAction: 'none',
+    userSelect: 'none',
+    webkitUserSelect: 'none',
+  });
+
+  const shadowRoot = rootElement.attachShadow({ mode: 'closed' });
+
+  shadowRoot.adoptedStyleSheets = [getEditorStylesheet()];
+
+  let toolbarCanvas = null;
+  if (!readOnly) {
+    toolbarCanvas = document.createElement('canvas');
+    shadowRoot.append(toolbarCanvas);
+  }
+
+  const editorContainer = document.createElement('div');
+  Object.assign(editorContainer.style, {
+    width: '100%',
+    height: '100%',
+  });
+  shadowRoot.append(editorContainer);
+
+  const editorCanvas = document.createElement('canvas');
+  editorCanvas.tabIndex = 0;
+  Object.assign(editorCanvas.style, {
+    outline: 'none',
+  });
+  editorContainer.append(editorCanvas);
+
+  parentElement.append(rootElement);
+
+  const uiHelper = new JavaUIHelper(
+    new UIHelper(editorCanvas, editorContainer, JavaEditorArea),
+  );
+
+  const editorArea = new JavaEditorArea(
+    computeMode(initialMode, JavaEditorArea),
+    new EditorArea(editorCanvas, onChange),
+    uiHelper,
+  );
+  if (initialFragment) {
+    if (initialMode === 'molecule') {
+      const fragmentMolecule = new Molecule(0, 0);
+      fragmentMolecule.setFragment(true);
+      editorArea.setMolecule(fragmentMolecule);
+    } else {
+      const fragmentReaction = Reaction.create();
+      fragmentReaction.setFragment(true);
+      editorArea.setReaction(fragmentReaction);
+    }
+  }
+
+  uiHelper.setEditorArea(editorArea);
+
+  const toolbar = readOnly
+    ? null
+    : new JavaEditorToolbar(editorArea, new Toolbar(toolbarCanvas));
+
+  const containerSize = editorContainer.getBoundingClientRect();
+  editorCanvas.width = containerSize.width;
+  editorCanvas.height = containerSize.height;
+
+  editorArea.repaint();
+
+  const resizeObserver = new ResizeObserver(([entry]) => {
+    editorCanvas.width = entry.contentRect.width;
+    editorCanvas.height = entry.contentRect.height;
+    editorArea.repaint();
+  });
+  resizeObserver.observe(editorContainer);
+
+  let removePointerListeners = null;
+  let removeKeyboardListeners = null;
+  let removeToolbarPointerListeners = null;
+
+  if (!readOnly) {
+    removePointerListeners = addPointerListeners(
+      editorCanvas,
+      editorArea,
+      JavaEditorArea,
+    );
+    removeKeyboardListeners = addKeyboardListeners(
+      editorCanvas,
+      editorArea,
+      JavaEditorArea,
+    );
+    removeToolbarPointerListeners = addPointerListeners(
+      toolbarCanvas,
+      toolbar,
+      JavaEditorArea,
+    );
+  }
+
+  function destroy() {
+    rootElement.remove();
+    resizeObserver.disconnect();
+    removePointerListeners?.();
+    removeKeyboardListeners?.();
+    removeToolbarPointerListeners?.();
+  }
+
+  return { editorArea, toolbar, uiHelper, destroy };
+}
+
+function computeMode(initialMode, JavaEditorArea) {
+  switch (initialMode) {
+    case 'molecule':
+      return 0;
+    case 'reaction':
+      return (
+        JavaEditorArea.MODE_REACTION | JavaEditorArea.MODE_MULTIPLE_FRAGMENTS
+      );
+    default:
+      throw new Error(`Invalid initial mode: ${initialMode}`);
+  }
+}
+
+module.exports = createEditor;

package/lib/canvas_editor/cursor_manager_16.js

@@ -0,0 +1,41 @@
+'use strict';
+
+// This code is unused for now and is kept for reference in case we want to
+// support low definition cursors in the future.
+
+const computedCursors = Object.create(null);
+
+class CursorManager {
+  constructor(JavaEditorArea, javaUiHelper) {
+    this.IMAGE_DATA_16 = JavaEditorArea.IMAGE_DATA_16;
+    this.HOTSPOT_16 = JavaEditorArea.HOTSPOT_16;
+    this.cPointerCursor = JavaEditorArea.cPointerCursor;
+    this.cTextCursor = JavaEditorArea.cTextCursor;
+    this.javaUiHelper = javaUiHelper;
+  }
+
+  getCursor(cursor) {
+    if (computedCursors[cursor]) {
+      return computedCursors[cursor];
+    }
+    if (this.IMAGE_DATA_16[cursor]) {
+      return this.buildCursor(cursor);
+    }
+    switch (cursor) {
+      case this.cPointerCursor:
+        return 'default';
+      case this.cTextCursor:
+        return 'text';
+      default:
+        throw new Error(`Unknown cursor: ${cursor}`);
+    }
+  }
+
+  buildCursor(cursor) {
+    const cursorImage = this.javaUiHelper.build16x16CursorImage(cursor);
+    const dataURL = cursorImage.toDataURL();
+    return `url(${dataURL}) ${this.HOTSPOT_16[cursor * 2]} ${this.HOTSPOT_16[cursor * 2 + 1]}, default`;
+  }
+}
+
+module.exports = CursorManager;

package/lib/canvas_editor/cursor_manager_24.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const cursors = require('./cursors_24px');
+
+const computedCursors = Object.create(null);
+
+const scaleFactor = 3 / 4;
+
+class CursorManager {
+  constructor(JavaEditorArea) {
+    this.HOTSPOT_32 = JavaEditorArea.HOTSPOT_32;
+    this.IMAGE_NAME_32 = JavaEditorArea.IMAGE_NAME_32;
+    this.cPointerCursor = JavaEditorArea.cPointerCursor;
+    this.cTextCursor = JavaEditorArea.cTextCursor;
+  }
+
+  getCursor(cursor) {
+    if (computedCursors[cursor]) {
+      return computedCursors[cursor];
+    }
+    if (this.IMAGE_NAME_32[cursor]) {
+      return this.buildCursor(cursor);
+    }
+    switch (cursor) {
+      case this.cPointerCursor:
+        return 'default';
+      case this.cTextCursor:
+        return 'text';
+      default:
+        throw new Error(`Unknown cursor: ${cursor}`);
+    }
+  }
+
+  buildCursor(cursor) {
+    const cursorName = this.IMAGE_NAME_32[cursor];
+    const cursorUrl = cursors[cursorName];
+    const builtCursor = `${cursorUrl} ${this.HOTSPOT_32[cursor * 2] * scaleFactor} ${this.HOTSPOT_32[cursor * 2 + 1] * scaleFactor}, default`;
+    computedCursors[cursor] = builtCursor;
+    return builtCursor;
+  }
+}
+
+module.exports = CursorManager;

package/lib/canvas_editor/cursors_24px.js

@@ -0,0 +1,21 @@
+'use strict';
+
+// This file is generated by scripts/create_24px_cursors.js
+// Do not modify it manually
+
+const cursors = {
+  'chain.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAB+klEQVR4XmNgGCaAkQEbZGJAhyBVQMDEwMrAhgHZGbBBVogGNrgkF4MkoyyTEAMHFijHKMfIh6qBiyGB8bHeg6hdwtJoGngY8hnfOn2wXQxyE8IGScYnurN3m7+50HCJG9WOBsb3oQHP5pz6bwbXwM2gxPhLYfEmsd8M/+3e3Sq7ySEOtyWB9WEo50+2v8UX/ptCNXACHfNEZ8lGlZ/c/9OOM/93fH2larcQSAsPQynjjTDDhwz/M8+/DJoPc5IgwyvN+VuEfnP+X9r+TSNzD8N/49dXK25ycDDUMn4OkH/D+D/n9vugFez8DAw6DD84fon9UF22Rvwnz5+2mff5ZBmf6PmdZfzv9OJe4T/+B8FCX3j+Vl744TeZCRT4DP85rxQ3Hyg6o/Cd8X/f9LtixkBn2DI+1k8/yPjf4cWeacb3mf8XXnjptwionAOswTrmOes/5v8M/xf3vuaUYeACe1WJ8atm8hGG/4I/Gf7n3/vgv5ZVlIETqsFb9wcDUDnDf+9bzEihr8f4wtj3AvvfjMtfA6cATeeEa9CsvST0j++//Z0HpuxwDZwM/AzZTG8NZ0x+5t/AAlEOs4Hpo+uROYcWfXT4yIKILJA0L4MsoxybHDM3VDlUAwODE8Nexn2MZUiJDVtKAomxA5MpGDBiJGTMpA0RASfvIQ8AAq+nV0XS18QAAAAASUVORK5CYII=)',
+  'eraser.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAC1klEQVR4Xn2TS0wTURSGz1gRikIRAy5ooUpijEYDgQULA1sfSxJDYoyLGvEdtupa1FATFBKiEVERShR5yDNYQdpqVKhEEEsk0UIl5RHBUoZ2aOcezx1apCD2djGT+b7z/3MnFxCmwLXBCgBuwZiJiKeEd0I9NEATtEA7dEAXdEMPWMAGg+BL/VRuN8o6JzjgG4yCk1T610MVPIYaqIPnJDZDG40wwyR40q11Ob6D8+8rAvpxwr/DOExwoYHwagV/QTmtSkovBJNt1XsCGtyOm7C/Qk4ZgzHC3Vxopumm0PRWmt4NQyCmWqpyxVgsRhMmYLrXfFdOmaHUX1xooenPKOcllemAV/AO/Lutpky/Gp8i/1kwihR7RVA/B3NcaFfKhLvbeJlHB5bisVTBl5UEKvaxXNZ6udChvCrvboYBQdTbHvIyN1dwfmHCbbjX01OKySR0KWU6qYwVRL21hpepicD5zVbcgde/YDYJZqV7N3UPJtkqM/0aLFmDL2IBJRx1/zyPAgk9NL2LPpOU8rYyd0G9Dkc8jdGYP/Xjsj+O8XewUEYv+BOXCo5JGqxbVyYP1XhictLA1AyQCzbaXzmp/071m69PtGIcjq5SRDxJ7Y+4XRdRJROuCIOwsMt+L2teYGcdTW1pXh2+XlFO4WY8Pu28FKQyHCchAJLW/mCnJKCAKnbGYTepUBdKycVYLJhyG1h0GCcBEz6U7VvguLLYlc92U5o3DvvQQPhht7OIRf3FuZB1bXgFV5RCR2ObVtQQTmWK5PjlKuEFGDNyK2NOoPuwpmLnhoefCpg/M1HIoiNxSvAD0w4Z93siU64OjN+fNPhj1uLKLrmFRd1ISd70agXkkTKWuBhRJrRLLjp8XsB4R8nqlKq+QAbjPdctSuCHzweSbvB29qwgCZLad6PXk/MvOPThnMpZ/S0w7diFWmOtsbFYPCSp/iO4lLM6A7MgAwutjXCEP+qfgSn0LjMHAAAAAElFTkSuQmCC)',
+  'fist.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAABmUlEQVR4Xu2SXStlYRTH1+O84IyLIXEhHaZIzc3IkblUknIjczGdKxk+gpIbTVMuTxHl5QMopWSapiivKVdyQ804hdyMlzBjJiPj2D9rnzlMs59NPoC12k/tp/9vrWe9iDxZugMheSsJ6XpMN4w8V38VpoDIhemXN9Ii0QdA05affJE0u3H26CdMDS+vA6OSfS9iVuLMq6ybCz4SZZVZSk6l8D6g2tDFH+rpUeATFXxjhxghcjCfJWxjGaCHYcWW6eCYXc33jj7ykWc+QIiESn/wHYffKk+xzWsWWafUAkoinTkfshniGvRzT0fPSzY5Z40yL2AmamkiNwOo+s5cbIMqD1AaPBrQ6yiD6dj/A3CgwTw1BJbec8acFul4APf3nLhVw3izxkn5yB29O6PVAoqLmPGJ7TbA4ZBGCwhIolNT+z3I0fHVWYCReOHJolXy3+auajvswWXJQox9K4dbwwjBKV16yyrLf47ps67Sg7v1FL9ov8rrlSwbCJrJmO7nF5Js8TXjW4xStB9q8N/YiEwLXs9D5v7JbwDwWqDxPOOKJwAAAABJRU5ErkJggg==)',
+  'hand.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAB8klEQVR4XqWTvWuTURTGnzeviEWpQjBSbWot2EwOTiIiATcLxcXBFq2aiOig4Og/IEVcFOnkYMFBBIfuDmp1qKhUK61INo2g2KKt0TRfP8+NSfX9iIvncuHl5fye59xzz5X+J3ylHL5Jd/ewl250USPK/EPRV3JYU3og7jPHYUQGzelcZySVYB8H8XjKV46S5QtDaLojkEhlTLnIANMsc8yAn5xCM+rRdnkxmJfazRsDBteAMjm0ohd6qa4OwDwfDHjUciiT5wAT9KGHscAg83w04MkakOMQJU50BhaawOMWsMoZA1Y5iRdw6FU+gS57vW2HP0DegO+MhRxuD3CW/op3K2MlfWaYZ6wwwiXTdkA5AkxdsL5P2EXtMqBKwTQrvOWTpbqSqgYkAiVN7jfFIjvYaUDNVoN6c9dM6FvzDMEuZbusLyUrywEutcHvqPLDvqsGBB02+wtXzX7SgNdNIBiViIN0J2slLZt++S99Wqg7Q7CtUl/30j3Tjqo7qMJx1odu2teNnI1aXDTs/yhbI6MxlF56ZQ7haFinFu1mdD08S2nNjlmnguFaW2eWfrQxOnyj22yGgh1y6fCcdCzQs+79ebN3SBtzV1djnA3F2PegI8nFmzYSBdvvWqvAFbbUvWvy4x6qp9MqyWYqtGaUbKf/ArRKFFCzSnv0AAAAAElFTkSuQmCC)',
+  'handPlus.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAACDUlEQVR4XqWTz2sTQRiGv01ELEoVgpFqU2vB5uTBk6hIwJuF4sWDLRo1EdGDisf+AYqIBxXpyYMFDyJ46F2wWj1UVKqVViQ3jaDYUltj06Tp4zubbGXzw4sz7OzsMs/7fvPNN2b/06IWd/gme7iHvbRjl2zAkv9QjFqs30btifGYKY5gJLEpO98aiUfYxyE8XjLPMVL8oA8bbwlE4kkp5+lhnAWOC1jiNDZhHbbdvCaYF9/NBwG9a0CRDLZob+yttbUApvki4FnNoUiWgwzThY01BXqZ5quAF2tAhsMUONkamPGB5zVgmbMCljmFF3LotGwEG/I6A4e/QFbAL9J1Dvd7OEd3ybuXVEjf6ecViwxwRdoOKDYAoxeV92Ed1C4BZXLSLPGRb1rqQioLiIRCGtkvxTw72ClgRX3Vfyoa5/np7yGcpVSb8lJQWA6oaOkqQzwFaf/WvCwg7LA5OnND9iMC3vsACu+qxmorNTiYPUgppAXpF339AHAz55OuS6tZV/vcI2k79ct+Nw747zH9KXGC9XUnHbU7GZWaaxbqtwQsMcjWhtLoS8y9k0PQqntwjivM6mTsdn0tJWwyrUyFAZfaCpN0Yxsbi29wm2qous1g0245vCbRFOhY9/mC7B0SYO7oVrjOhnzT+2BHY7N3VRI5PZ9qPcc1tlS8mxZtdlE9O2OFcJb8rwmLBcv/ADEL/+BUjuGhAAAAAElFTkSuQmCC)',
+  'invisible.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAACgklEQVR4XnWU3W9LYRzHv/+Gt7AEwY0bErELN/RGQuzCW7igtcy8X7pzLUiwZRIXIiIWZjGbdanqsq1cYEaXYF1ss+6YpUGLrrPurD7P01Nrl8qv6Xn7fV9+3+c5R3lNKfGfyilPOWVPae9Si1r1SO3qVFAhRdStXkUVU1Zv1C9XY/qguIY5JsSvRbd0W3fVrAcA2/QEirC+Kq0+bZNPr5TTOO0j/DsG0Er7Hdv+EJ0Oq9KjOTQ2aqmWaBM6rj5TjiYNoA32ex57B+wRDSoDu0/rdFkXtVrbAbtKovrNANphv4/OY8wE9VQvNEP7Vm3A6rR+qlFrtEMDaP6gAHRaM0XvUWtmC003NKuUJpigEZXNdvxfBhC0oxrvYXgytPu0Xtd5mNIQyUyhcsWqPCdkACFrpgszfdZ7tTWTRT5OMjFo8nrP3VW6VACErfcI3ufgqIargfbftn2YsY2to1quWo4W0A17CKY/QHywGzNJzJjcm0nGUR0kpzRKGPMG0ItGDxezukDuO2nOkfmI3uo8tiZ0QFU6B3CesgpRLly9Y5JRBbRMx1keV5/0jIkcHdNK7iRode3O4jSG3wGdVA1mXsqvFToLJG03Qp3Wwj7GdIbdAnJ479ch7aL26CqjBoDUA3C0n2QWzHiAPOy1tt1UjW4C8WPMryN4PwF7wXuxOGnS7n8AA7mGsQCbrkpnaC84LwMMY6CoUDDWQEb1tH8p4/YsmWwHS0wVjY2T3cwidi+lSfbkEMOVqhzUR4imKwPirGweyMLoe9nyuQp2PAXz8mUJN6bTBLlPh3k70hW4vRkSJGGWKAWjw4q8Zs0zwMuzKUnJfGLMu5rUdyI0mZfnvhj4F66Aq+VLQn5cAAAAAElFTkSuQmCC)',
+  'lasso.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAADf0lEQVR4Xl1Uf0xTZxS90MfWUqiLYzhRNhIhTdmyP5iiYVv/IM7pIIuQyBLnogmrxhmCJBqDYZtzJhijWxeMW2Lm5jAsmomQTYLGDCYMqAM26/hlRFCU+kClBR99r+17Z/f1h3R79yXfe989537nO7m5RGQkUzSQjU2olp0P6icbJhse1MtOVPNOdixvJH6MdIdmyGvGGu+BzuZDI5vlJaBoLMFm+dBIZ7P3AGfNM4xkionhyNDK+5rLxOWaDk2CXXXMO+btalKYuFwrE/uatXJkzDCaX2+6WtnqXsQpk1YmdbgkZ6hGcSiOUI3k7HBtlcxcZhFa3WqlN50JOwXFcbKfkIoNouuKUiHbnyy7KNRQDTUIvcuG7EqF68oGMZXLnexXHDsFQt618ysCBuybmKrzri6yrE0ooS4ajca9BFiweqpu34QBKwLXziOPULVHJKyX5475bU30N4ebfCz9DrVRIHZ729yx9TJhj4gq8n9lZY03Lo0VNgrtMQCv7VREF0iN7AgovHGJYNX8TvKcYVWaenDAMkhhk6LRTsmUT0MkRf4t6sFVnGa0p56Qr4W+QNoCWP9qJ4GK6T3qoyApJFvUz9+KEPxfWvnctm6UwhRP0Ql1NEZOGqThpHtvX79MyNYloeKTMUJWcLgR7/6fcJxFPiIpMfDmwxMFfr60B5X0j3X0xzf4p0AaOhf60F8kFSvvaK8grfNZgY4TDHhB3Xrzpw8eJ8Ia7P+ZbTWRWnK1JY/1FchV7vLxbXd3jXzzx+1T06W1L/a+hHWPa8/0rGJ/c/FDl7L9s0Qm+FLULb2tcQbBiKXyb33YLx359XrhkxQuVqQMnwvt8KWFe4mbL79xlJAzm6MYsNf3Z9eR+8+pRqRH/ESu9P3A7GEUwxhtPp1QP0n4+la3a91cJo4O/vJXRpCQgrXB3Xcbfp/4VtuILCSAS8dOWHmzKRNm7XklmS1+BilaIqq8Q2dnjwa2a68zU4j4t0BI1Xb0tJR6Xpu3BazBpaw5F94TsHMLM2z26fUWCHp3589/NH54uG7gu6aOl5nS04Y1ugyQ+LRl4gmEBLehW+DDzfKnu8YJJdOB92NSYj32X8KCr6+2XF6s5cxNV7O/4d1peki93LlhQmQIxIcvdfBUZiBLvl3rYyP1eERT5OE1PATix0xknNiSQx+Lp8XTIYfNGBswkVWH/wt8N0KJ2YuJdAAAAABJRU5ErkJggg==)',
+  'lassoPlus.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAADo0lEQVR4Xm1UbUxTZxQ+0EJaCnXZHCpShxHSlJD96AY0uPYH+Dn8sZoME7ZFllqNM4SRuBiM29SZaYwfNSzOxKhzGMzM5CMzBI2ROYxQLVWrlI8MReuoF6S04KX33t57z85tqZhl99zk3Pc953nf5zz35ACABrRzhvn4KTZwrhdNY81jzS+aOBc20E5+Mq4BejTwFKYgrENLeO+t9gND1dwihDlbhNXcgaFb7eG9FNVNUSZBtJSOObKjr72KyZWV1DS0Sc5Z56xNSosDc+Uqpq9ddmDOFGXTG86W6jp9CyiklavYbjfrEvfwTt4p7mFd3e7NrI6OWYCdPqkunE2A7WreedoLmIXrGfd1vpazvVral9tqbjXfyPUsHbDxte7r65ksOu60l3duVwOa71xeIahwV2C8MVxaqV+VYge/1eF1eCetI/A8BfVYOt64K6DCFcKdy2gGrN/JAK7jZo5GTW1wn8wHEWsRU8RMWYVk9aaZo+s4wJ0M1kP0uJE4Prz6pLxF/SfgYrSQVSuAUDWnfC8mNmosf3gV0ChHXRC8QKxkaX+/3g+EtDi8pYHSQIaQISje4SWIco9e2l9MYcoONgGWyOIPuDAesNj9y0PLQ+liuqh4u5+1xIAHTi/tsyYA0WNGCbCrBzeilgAGrCCrUSh11XgqpIpWgx8G056vfnANMF+hhLXfPgHMiw224Mevf3G86N3Wn4jkJLCpwkcvT5ZFqegg1sEj48ivK2lRxg5cEr+IVrIb+LXyl/an9mEFgCp8V9o8fPGzUCoaY97fSVYtSPa/OszEr4yr9zlGa57tGPr50eOb+GNXsWcZrgkdvNBbTPoW4i+3+a3fpxIgkil97ulMSq54DS7hbvThbvbwlQflrzLpsEp+8JK4LbIw3kvUfCUtI4AF0wW8Cr+J3L19+J+3JA1mJ/TEQvZc//Qh3ICaueZTAE1jgCf+7nGvmTHgEf8f93JigJm4Kvb1s+abgVPyJ5iHKUhHJ2/4cLjNgDr5HT6DJE7HTDkV68MDv00fEbbKHxBSndBvHpAlb+vt2Bh8f9YkGGNLiHMhhk+ijVqY0qZflzcPULq7ZHbL6KHBxv4zbd3vEaS3i5qCaCAwSsv85wZlmeJT9ajpch333Y5RQPuEsClJ5f8B87oWdVx7Wy6YmWggfeO7E/ASPCAlakgMgTctkuU/axDyuMcHIySkYpMwDkHy8SHw5phJjBNThvgVc545LzpNmuSASXgl/V9J4ld/LrRv/QAAAABJRU5ErkJggg==)',
+  'pointingHand.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADfElEQVR4Xq2WSUhbURSGbdI0mgoOlSg2deEiomidxTorVcEBJYJEQbAiKG4Uq4ILLSIOqAuRglsFxV1t6qYIETFI6coEsdVVHSG4EI1xjv4950IkyEsaqRceeXm593z3nPPf/8XHx81QqVTq/Px8REREICgo6GpgYOAj3cvdzX/085aWltni4mJsbGygp6cHCQkJsy9pPDqQuwVFRUWm1tZWXFxcYGFhAfHx8euBgYGaJwNQeUwdHR24vLyE0WhEQUEBwsLCYp8MkJWVZerq6roH5ObmoqKiIik9PV3xJBAKKDK4urrC0tIS4uLiUF1d/aWsrOyzWq1O/G/IQwCpCjqdjrOARqMxlpeX65OTk6vGxsbSAgICHq8uVwD3gIJhc3MT6+vriI2NBUuYYaWlpcdRUVFvQ0JC3tBngEwm8y65h4Ds7GxYrVbs7u4iJSUFc3Nz2NraAqmNgVuU1S+a810ulyslCUR+3d3d/buxsdFMkxPy8vJMnZ2dQqaLi4tixwzY398Hw8xmM87OzlBXVycUNjMzg8zMTDQ3Ny9LApRK5RQ1ELW1tYiOjrbk5OT8YQDLlJvM5WDA3t4eSkpKsLa2JgD19fUYGhoSG+nv70doaKg0gKgGXrSzswMKDmocGHB+fo6joyNYLBYRhIPy7k9OTmC32wVgfHxcbIQaDn9/f2mAr6+vYXBwEA6HA5OTk6BagmXKAfkZX3d3d+K6vb3Fzc0Nrq+vsb29jcPDQyFnBpCbSAOojlNarRYHBweieeHh4fcZcECpwTDn4AxGRkbg5+cnDaCyvIuJiYHBYIDNZkNDQwPa29tFWVwDSZLoIWcwOjoKOi9ue+BDjrnc1taG09NTkQXrnhd6CxgeHkZwcLB7QGJiYi032BmY687l8QbAJerr6+NT7h5AjX1BEv02MTEhgnITvQHwXFYbZ0+bdA9QKBSympqaT3q93nF8fHwf3JsMeH5VVRWampo8ZuBTWVn5njzFOj8/LwBOebprLj/nDbCFZGRkIC0tTefRjMgyZHTkl9jcWN9O7XsC8G8mkwn0rgAt//drlXxHS5K1TU9Pi9o6++CEuUL5ng9db28v28kPKrO02bmmFRkZ+Zz+SejZc1ZWVoR9sMm5XlwS/s6fq6urSE1NtSclJX14RsMrvybrUBUWFn6low9aA1rk8SIX/Uku++ph8L9NTKvfLVkZnAAAAABJRU5ErkJggg==)',
+  'rect.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAACqklEQVR4XoWUTUhUURTHf4SQoGFBBSVhb1GL8LnqYxvlolrcVQQ3ESntQxAjC6OFNAWh5KJUCCktXAghgh+VlTpk9uFXswgizdBMVBwzM0NtnGZe572ZsVER5888Dufc33vnnHvupZJORx1MM0Q75VwnGy3KFqucV3yTSEd4VSViWASZpZcKWZRCnCiRnaJEx04Rb4VEZ2WdJattICmo5/Wo7tGNukH+LbpLe0RdYoU8PRKd15a2khzAb6o+B19Dqs9vCjDIsAAxgSzPWiprGjYHkULrBYjzWWl+w23ki24Y40amcdrwG9Z/pVkuy1VvDkEteQ4wo/Lw4HMUJJl46dFvsew8gwTVRPF0UZ5ZCwVoB/iqXjIpwUfcEW1jHXvJpzpSmIrzqT5tFkB6GPiuZpzgAaJ/exgJIWEgHXuTQjWo6CYlEyN7cIxc6pjBj0/ZNWjzHNzm1KrABX7yQJL8Qr8DZJjF8JbSVYFcSWaODzxkSu0fyekqNN3gxeMAo2qMZ/RIAnOSQoB3kpINBPnLKGNODe3mOBKYdIBGdYkSaaWLUp7wiW52CLAgL3xDDg3qVnNNzZQ5bI9GwAHuq1jpfTwb2cAWTvJCMv/Iawpl/GKpdGoI2qMhwxf+Qipb2U0R97jMJlK5SCb7SJCpPUOvk5IVDfQrN1Uc5AStNLNLNi5B9vuowI8ZkLauAGpVhmR/hc2SwiHWc5y7tPCZP1K0DIgzGku+0Jp2xDgcVqpx1eg2fEZw2fAtAeyi7AEfKLFcT6uzPNfaIp6ZQstVVZflKWtaAdhD01lhuW66sZK9NmB7vMX2qySrxaKT5PBFKaDH9HPdpid0IOxd0LP6h/4VOaLLT6ZfurRdOtQm2xaK+eRkeJkKXQKRayZ02djyyICc5bw83y/6IrFK/gE6XvK0B9+OJQAAAABJRU5ErkJggg==)',
+  'rectPlus.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAACwElEQVR4XoWUXUhUQRTH/4mhsIZFFpSE3SKJ2OtTH69RPlTQPEUwikhpH4IUWRg9SFsQSj6UCiHlFj5cCBH8qCzUJbMPNb0PcQNN0Ux0cc3MNmxbt73Tmdld84Pw/tnlcM787j3nzJmBG91KXZjFKDpRjRsoACcVkFWNV/hCka7oKjfIELAxh37U0KIMOEip2E5KVXYGeWsoOkfrBK2WQJrNA3yC9/Jm3kS/Nt7DTVIPWRFPL0UDXHCRpoCQzgYUvorYQEgnYARjBMSH883VVNUypo+ACm0kwBEU2SHNoxWTbmqTWp52Wgtp4p+yhUu4GvVRoB5FCvCzIpgIKtlwIol69JMsmacNm02Vz5YV6fVACbgCPrOXmKbgY9wlbUEc9qIYRqww5giyAa6XADlR4Cvzq+ABqMcg0bMH4xEkCuRAblKkBra4SU4r3nLgGC6gAX6EEGSyBq6fA+7g1H+Bi/iOh5TkEAYVkKuXA29RuQTIMpyW00oMrAnEWRutLOMXPuARZtj+8cKeUt0D+GAqYIJ58Ry9OG7stHZbCQuAjT+YgFfV0KlPAu8wrYBmdhkV1EoXKvEUOyyHtY0qmKcXvkEhmtjt1rq6GX1MjkZYAQ9YIvU+CeuxDpuw1kq3hvARr1FK45cIt6rBlqNBwxf9QiY2Ix1luI8r2GCkGJeQh31Ipqk9g36VklgMDDIPanEQJ9GOVuyijUum/T5K8BMMU1tXAPUsl7K/ihRK4RAScAL30IZP+E1F04Co0VjyhfbsI9rhqDK1a9p7LajZy4ZvCSCLkgM+XCFcz4x883pHzOMvFa7ahnyzqmUFIIemu0a4bnkgnD4JSI+vXL6KslooOo0O3yKFuZe/4B18ioej3nk+x7/xH7EjuvxkhqhLW6lDHbRtkViQToYPM5FLIHbNRC4bKZMG5CzO03/fgi8Wc+MvzYn905eo3YcAAAAASUVORK5CYII=)',
+  'zoom.png': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAACVklEQVR4XpWU32uSURjHv2pqFngpLIyGUoiFMBZ4IUIgQSMEu4mi4f8QBLKLwMuuFL0JuxrVFCyMupCwaKUbW744KAZDF06HmkPe2tT54833PT3vfpT9ovk+vBfn8HzOeZ5zvt+DFbyieI03eIs0xSKWsIwsOHzEV2yjjj79BazjE4oog5IfUjxGDE+QVW+amu6Cn4tkopkoFyn4m+6SqaHeQRV5gorYPATmMI+qUfAmkp6yrT0+GJPGpPGBre0pJ5KCt2/sYQsblF4BFTNH8UwhWUvB6S4YmIppJK2oFTWSikZg091SULIKCp72+QysKd+bs2ek8+lZRwtMLzn5QDYV58JcOBUPZJ28XgJztNKzhFBHDYCZF6PPk6sPHC0V04mhXMVXs7gMLj2FoWap+EI5nagipBTsG1toEWC9t6zc2xosmhNv2o9j6JvU7E69eKcT5cIEb0PdB6razKNTNCHHrWbljv3EMABcU+9OhXJyYYlkybQGLGBjZmJHTj8nJV72rtiP/QoAk5qKz8mDecpN9wroorqXrxcV7GJnITa4dFf5e7o8rlkCWRWztQt+6mEJW2dj81f53H1xYuZv2TTnMqTiGroXLiKARLB6sn2Dv/309IXh1RNI/KRdei6sFcekTFQCaSY/AsAgS2yEkgjYHqlpAr6MdKwENEa4OGYiYBRpMLUMHFl8zCjrBx1lz8wfSd77CiWnVtHD+n8NxBQ/gDI6EMiC/7bofjEHQJG8Wqf3oY0P4NT5Px4BOhlqdQgo71m7TmV9o51kT3UwwIFBhhIPke9kQenbD+jECQAAAABJRU5ErkJggg==)',
+};
+
+module.exports = cursors;

package/lib/canvas_editor/draw_context.js

@@ -0,0 +1,156 @@
+'use strict';
+
+const { toHex } = require('./utils');
+
+class DrawContext {
+  /**
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   */
+  constructor(ctx) {
+    this.ctx = ctx;
+
+    this.ctx.textAlign = 'left';
+    this.ctx.textBaseline = 'top';
+
+    this.currentFontSize = 12;
+    this.currentFont = '12px sans-serif';
+    this.ctx.font = this.currentFont;
+
+    this.currentColor = '#000000';
+    this.currentLineWidth = 1;
+  }
+
+  clearRect(x, y, w, h) {
+    this.ctx.clearRect(x, y, w, h);
+  }
+
+  getBackgroundRGB() {
+    return 0xffffff;
+  }
+
+  getForegroundRGB() {
+    return 0x000000;
+  }
+
+  getSelectionBackgroundRGB() {
+    // return 0xeb8282; // arbitrary color
+    // return 0x000080; // color from java default AquaLookAndFeel "TextArea.selectionBackground"
+    return 0xbbd6fc; // color from default macos highlight-accent color (blue)
+  }
+
+  getLineWidth() {
+    return this.currentLineWidth;
+  }
+
+  setRGB(rgb) {
+    const r = (rgb >>> 16) & 0xff;
+    const g = (rgb >>> 8) & 0xff;
+    const b = (rgb >>> 0) & 0xff;
+    this.currentColor = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    this.ctx.fillStyle = this.currentColor;
+    this.ctx.strokeStyle = this.currentColor;
+  }
+
+  setFont(size, isBold, isItalic) {
+    this.currentFontSize = size;
+    this.currentFont = `${isBold ? 'bold' : ''} ${
+      isItalic ? 'italic' : ''
+    } ${size}px sans-serif`;
+    this.ctx.font = this.currentFont;
+  }
+
+  getFontSize() {
+    return this.currentFontSize;
+  }
+
+  getBounds(s, rect) {
+    const metrics = this.ctx.measureText(s);
+    rect.set(
+      metrics.actualBoundingBoxLeft,
+      metrics.actualBoundingBoxAscent,
+      metrics.actualBoundingBoxRight,
+      metrics.actualBoundingBoxAscent,
+    );
+  }
+
+  drawString(x, y, s) {
+    this.ctx.fillText(s, x, y);
+  }
+
+  drawCenteredString(x, y, s) {
+    this.ctx.textAlign = 'center';
+    this.ctx.textBaseline = 'middle';
+    this.ctx.fillText(s, x, y);
+    this.ctx.textAlign = 'left';
+    this.ctx.textBaseline = 'top';
+  }
+
+  setLineWidth(lineWidth) {
+    this.currentLineWidth = lineWidth;
+    this.ctx.lineWidth = lineWidth;
+  }
+
+  fillRectangle(x, y, w, h) {
+    this.ctx.fillRect(x, y, w, h);
+  }
+
+  fillCircle(x, y, d) {
+    const r = d / 2;
+    this.ctx.beginPath();
+    this.ctx.arc(x + r, y + r, r, 0, 2 * Math.PI);
+    this.ctx.fill();
+  }
+
+  drawLine(x1, y1, x2, y2) {
+    this.ctx.beginPath();
+    this.ctx.moveTo(x1, y1);
+    this.ctx.lineTo(x2, y2);
+    this.ctx.stroke();
+  }
+
+  drawPolygon(p) {
+    this.ctx.beginPath();
+    this.ctx.moveTo(p.getX(0), p.getY(0));
+    for (let i = 1; i < p.getSize(); i++) {
+      this.ctx.lineTo(p.getX(i), p.getY(i));
+    }
+    this.ctx.stroke();
+  }
+
+  drawRectangle(x, y, w, h) {
+    this.ctx.strokeRect(x, y, w, h);
+  }
+
+  fillPolygon(p) {
+    this.ctx.beginPath();
+    this.ctx.moveTo(p.getX(0), p.getY(0));
+    for (let i = 1; i < p.getSize(); i++) {
+      this.ctx.lineTo(p.getX(i), p.getY(i));
+    }
+    this.ctx.fill();
+  }
+
+  drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) {
+    if (arguments.length !== 9) {
+      throw new Error(
+        `drawImage call with ${arguments.length} arguments unimplemented`,
+      );
+    }
+    const fullScaleCanvas = document.createElement('canvas');
+    /** @type {ImageData} */
+    const imageData = image.imageData;
+    fullScaleCanvas.width = imageData.width;
+    fullScaleCanvas.height = imageData.height;
+    const fullScaleContext = fullScaleCanvas.getContext('2d');
+    fullScaleContext.globalAlpha = 0;
+    fullScaleContext.putImageData(imageData, 0, 0);
+    this.ctx.drawImage(fullScaleCanvas, sx, sy, sw, sh, dx, dy, dw, dh);
+  }
+
+  isDarkBackground() {
+    return false;
+  }
+}
+
+module.exports = DrawContext;

package/lib/canvas_editor/editor_area.js

@@ -0,0 +1,31 @@
+'use strict';
+
+const ClipboardHandler = require('./clipboard_handler');
+const DrawContext = require('./draw_context');
+
+class EditorArea {
+  constructor(canvasElement, onChange) {
+    this.canvasElement = canvasElement;
+    this.changeListener = onChange;
+  }
+  getBackgroundRGB() {
+    return 0xffffff;
+  }
+  getCanvasWidth() {
+    return this.canvasElement.width;
+  }
+  getCanvasHeight() {
+    return this.canvasElement.height;
+  }
+  getDrawContext() {
+    return new DrawContext(this.canvasElement.getContext('2d'));
+  }
+  onChange(what, isUserEvent) {
+    this.changeListener?.({ what, isUserEvent });
+  }
+  getClipboardHandler() {
+    return new ClipboardHandler();
+  }
+}
+
+module.exports = EditorArea;