@kws3/ui 2.0.4 → 2.1.0

package/internal/DrawingPad.js

@@ -0,0 +1,306 @@
+import UndoManager from "./UndoManager";
+
+/**
+ * @typedef {import('@kws3/ui/types').DrawingPadOptions} DrawingPadOptions
+ */
+
+var passiveSupported = false;
+
+try {
+  let options = Object.defineProperty({}, "passive", {
+    get: () => (passiveSupported = !0),
+  });
+  typeof window !== "undefined" &&
+    window.addEventListener("test", null, options);
+} catch (err) {
+  console.log(err);
+}
+
+var eventOpts = passiveSupported ? { passive: false, capture: false } : false;
+
+export class DrawingPad {
+  /**
+   * DrawingPad constructor
+   * @param {{CANVAS:HTMLCanvasElement, fire:(string, object)=>void}} app
+   * @param {DrawingPadOptions} opts - Parameter description.
+   */
+  constructor(app, opts) {
+    this.app = app;
+    this.canvas = this.app.CANVAS;
+    this.context = this.canvas.getContext("2d");
+    this.drawing = false;
+    this.currentPos = { x: 0, y: 0 };
+    this.lastPos = this.currentPos;
+    this.scaleFactor = opts.initialScale;
+    this.drawingType = "Pen";
+
+    this.penColor = opts.penColor;
+    this.penWidth = opts.penWidth;
+    this.eraserWidth = opts.eraserWidth;
+    this.readonly = opts.readonly;
+    this.image = opts.image;
+    this.tools = opts.tools;
+
+    if (opts.expanded) {
+      this.scaleFactor = opts.expand;
+    }
+
+    this.undoManager = new UndoManager();
+    this.prevState = null;
+
+    this.START = this.start.bind(this);
+    this.MOVE = this.move.bind(this);
+    this.END = this.end.bind(this);
+    this.RENDER = this.render.bind(this);
+  }
+
+  prevent(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+  }
+
+  getPosition(e) {
+    let x, y;
+    let rect = this.canvas.getBoundingClientRect();
+
+    if (e.type.indexOf("touch") !== -1) {
+      // Touch event
+      x = e.touches[0].clientX - rect.left;
+      y = e.touches[0].clientY - rect.top;
+    } else {
+      // Mouse event
+      x = e.clientX - rect.left;
+      y = e.clientY - rect.top;
+    }
+
+    return { x: x / this.scaleFactor, y: y / this.scaleFactor };
+  }
+
+  render() {
+    this.draw();
+    if (this.drawing) {
+      typeof window !== "undefined" &&
+        window.setTimeout(() => this.render(), 1000 / 60);
+    }
+  }
+
+  draw() {
+    if (this.drawing) {
+      this.context.strokeStyle = this.penColor;
+      this.context.lineWidth = this.penWidth;
+      if (this.drawingType === "Eraser") {
+        this.context.lineWidth = this.eraserWidth;
+      }
+      this.tools[this.drawingType].draw(this);
+    }
+  }
+
+  move(e) {
+    this.prevent(e);
+    this.currentPos = this.getPosition(e);
+  }
+
+  end(e) {
+    this.prevent(e);
+    this.drawing = false;
+
+    this.addHistory();
+
+    document.removeEventListener("touchmove", this.MOVE);
+    document.removeEventListener("mousemove", this.MOVE);
+    document.removeEventListener("touchend", this.END);
+    document.removeEventListener("mouseup", this.END);
+
+    this.fire("change");
+  }
+
+  start(e) {
+    this.prevent(e);
+    this.drawing = true;
+    this.currentPos = this.getPosition(e);
+    this.lastPos = this.currentPos;
+
+    document.addEventListener("touchmove", this.MOVE, eventOpts);
+    document.addEventListener("mousemove", this.MOVE, eventOpts);
+    document.addEventListener("touchend", this.END, eventOpts);
+    document.addEventListener("mouseup", this.END, eventOpts);
+
+    this.prevState = this.getImageData();
+
+    this.render();
+  }
+
+  addHistory() {
+    let nextStack = this.getImageData();
+    let prevStack = this.prevState;
+    this.undoManager.add({
+      undo: () => {
+        this.setImageData(prevStack.data);
+      },
+      redo: () => {
+        this.setImageData(nextStack.data);
+      },
+    });
+  }
+
+  resetHistory() {
+    this.undoManager.clear();
+  }
+
+  getImageData() {
+    return this.context.getImageData(
+      0,
+      0,
+      this.canvas.width,
+      this.canvas.height
+    );
+  }
+
+  setImageData(data) {
+    let imageData = this.getImageData();
+    for (let i = 0; i < imageData.data.length; i++) {
+      imageData.data[i] = data[i];
+    }
+    this.context.putImageData(imageData, 0, 0);
+  }
+
+  setImage(imgSrc, callBackFn) {
+    if (imgSrc) {
+      let img = new Image();
+      img.src = imgSrc;
+      img.onload = () => {
+        this.context.drawImage(
+          img,
+          0,
+          0,
+          img.width,
+          img.height,
+          0,
+          0,
+          this.canvas.width,
+          this.canvas.height
+        );
+        if (callBackFn) {
+          callBackFn();
+        }
+
+        this.fire("change");
+      };
+    }
+  }
+
+  fire(type) {
+    switch (type) {
+      case "change":
+        this.app.fire("change", {
+          canUndo: this.canUndo(),
+          canRedo: this.canRedo(),
+          canvasImage: this.canvas.toDataURL(),
+        });
+        break;
+    }
+  }
+
+  canUndo() {
+    return this.undoManager.hasUndo();
+  }
+
+  canRedo() {
+    return this.undoManager.hasRedo();
+  }
+
+  init() {
+    this.is_readonly = this.readonly || false;
+    this.imageDataUrl = this.image || "";
+
+    this.resetHistory();
+
+    this.setImage(this.imageDataUrl);
+
+    this.addEvent();
+  }
+
+  syncImage(imgData) {
+    let curUrl = this.canvas.toDataURL();
+    if (curUrl !== imgData) {
+      this.prevState = this.getImageData();
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.setImage(imgData, () => {
+        this.addHistory();
+      });
+    }
+  }
+
+  addEvent() {
+    if (!this.is_readonly) {
+      this.canvas.addEventListener("touchstart", this.START, false);
+      this.canvas.addEventListener("mousedown", this.START, false);
+    }
+  }
+
+  removeEvent() {
+    this.canvas.removeEventListener("touchstart", this.START);
+    this.canvas.removeEventListener("mousedown", this.START);
+  }
+
+  undo() {
+    if (this.canUndo()) {
+      this.undoManager.undo();
+      this.fire("change");
+    }
+  }
+
+  redo() {
+    if (this.canRedo()) {
+      this.undoManager.redo();
+      this.fire("change");
+    }
+  }
+
+  reset() {
+    this.prevState = this.getImageData();
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.addHistory();
+    this.fire("change");
+  }
+
+  setScaleFactor(f) {
+    this.scaleFactor = f;
+  }
+
+  setTool(toolType) {
+    this.drawingType = toolType;
+  }
+
+  setColor(color) {
+    this.penColor = color;
+  }
+}
+
+export let Pen = {
+  name: "Pen",
+  icon: "pencil",
+  draw: (instance) => {
+    instance.context.beginPath();
+    instance.context.moveTo(instance.lastPos.x, instance.lastPos.y);
+    instance.context.lineCap = "round";
+    instance.context.lineTo(instance.currentPos.x, instance.currentPos.y);
+    instance.context.stroke();
+    instance.context.globalCompositeOperation = "source-over";
+    instance.lastPos = instance.currentPos;
+  },
+};
+
+export let Eraser = {
+  name: "Eraser",
+  icon: "eraser",
+  draw: (instance) => {
+    instance.context.beginPath();
+    instance.context.moveTo(instance.lastPos.x, instance.lastPos.y);
+    instance.context.lineTo(instance.currentPos.x, instance.currentPos.y);
+    instance.context.stroke();
+    instance.context.globalCompositeOperation = "destination-out";
+    instance.lastPos = instance.currentPos;
+  },
+};

package/internal/UndoManager.d.ts

@@ -0,0 +1,17 @@
+export default UndoManager;
+declare class UndoManager {
+    commands: any[];
+    index: number;
+    isExecuting: boolean;
+    callback: any;
+    execute(command: any, action: any): UndoManager;
+    add(command: any): UndoManager;
+    setCallback(callbackFunc: any): void;
+    undo(): UndoManager;
+    redo(): UndoManager;
+    clear(): void;
+    hasUndo(): boolean;
+    hasRedo(): boolean;
+    getCommands(): any[];
+}
+//# sourceMappingURL=UndoManager.d.ts.map

package/internal/UndoManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UndoManager.d.ts","sourceRoot":"","sources":["UndoManager.js"],"names":[],"mappings":";AAAA;IAEI,gBAAkB;IAClB,cAAe;IACf,qBAAwB;IACxB,cAAoB;IAGtB,gDAQC;IAED,+BAcC;IAED,qCAEC;IAED,oBAWC;IAED,oBAWC;IAED,cAOC;IACD,mBAEC;IACD,mBAEC;IACD,qBAEC;CACF"}

package/internal/UndoManager.js

@@ -0,0 +1,84 @@
+class UndoManager {
+  constructor() {
+    this.commands = [];
+    this.index = -1;
+    this.isExecuting = false;
+    this.callback = null;
+  }
+
+  execute(command, action) {
+    if (!command || typeof command[action] !== "function") {
+      return this;
+    }
+    this.isExecuting = true;
+    command[action]();
+    this.isExecuting = false;
+    return this;
+  }
+
+  add(command) {
+    if (this.isExecuting) {
+      return this;
+    }
+
+    // If we are here after having called undo, invalidate items higher on the stack.
+    this.commands.splice(this.index + 1, this.commands.length - this.index);
+    this.commands.push(command);
+    // Set the current index to the end.
+    this.index = this.commands.length - 1;
+    if (this.callback) {
+      this.callback();
+    }
+    return this;
+  }
+
+  setCallback(callbackFunc) {
+    this.callback = callbackFunc;
+  }
+
+  undo() {
+    const command = this.commands[this.index];
+    if (!command) {
+      return this;
+    }
+    this.execute(command, "undo");
+    this.index -= 1;
+    if (this.callback) {
+      this.callback();
+    }
+    return this;
+  }
+
+  redo() {
+    const command = this.commands[this.index + 1];
+    if (!command) {
+      return this;
+    }
+    this.execute(command, "redo");
+    this.index += 1;
+    if (this.callback) {
+      this.callback();
+    }
+    return this;
+  }
+
+  clear() {
+    const prev_size = this.commands.length;
+    this.commands = [];
+    this.index = -1;
+    if (this.callback && prev_size > 0) {
+      this.callback();
+    }
+  }
+  hasUndo() {
+    return this.index !== -1;
+  }
+  hasRedo() {
+    return this.index < this.commands.length - 1;
+  }
+  getCommands() {
+    return this.commands;
+  }
+}
+
+export default UndoManager;

package/internal/fuzzy.d.ts

@@ -0,0 +1,24 @@
+/**
+ * fuzzy.js v0.1.0
+ * (c) 2016 Ben Ripkens
+ * @license: MIT
+ * @params
+ *  term : haystack
+ *  query : needle
+ *  opts: {
+ *   analyzeSubTerms,
+ *   analyzeSubTermDepth
+ *   highlighting
+ *  }
+ */
+/**
+ *
+ * Adapted from fuzzy.js for @kws3/ui to work with vite prebundling
+ */
+export function fuzzy(term: any, query: any, opts?: {}): {
+    score: number;
+    term: any;
+    query: any;
+    highlightedTerm: string;
+};
+//# sourceMappingURL=fuzzy.d.ts.map

package/internal/fuzzy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuzzy.d.ts","sourceRoot":"","sources":["fuzzy.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH;;;GAGG;AAsBH;;;;;EA+BC"}

package/internal/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Detect whether a user has pressed Enter.
+ * @param {object} [e=[]] - Event object., Default: `[]`
+ */
+export function isEnterKey(e?: object): boolean;
+/**
+ * Detect whether a user has pressed Escape key.
+ * @param {object} [e=[]] - Event object., Default: `[]`
+ */
+export function isEscKey(e?: object): boolean;
+export { scrollIntoActiveElement } from "./scrollIntoActiveElement";
+export { fuzzy } from "./fuzzy.js";
+export { default as UndoManager } from "./UndoManager";
+export const IS_MAC: boolean;
+export { DrawingPad, Pen, Eraser } from "./DrawingPad";
+//# sourceMappingURL=index.d.ts.map

package/internal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAKA;;;GAGG;AACH,+BAFW,MAAM,WAIhB;AAED;;;GAGG;AACH,6BAFW,MAAM,WAIhB;;;;AAED,6BAWY"}

package/internal/index.js

@@ -1,5 +1,7 @@
 export { scrollIntoActiveElement } from "./scrollIntoActiveElement";
 export { fuzzy } from "./fuzzy.js";
+export { default as UndoManager } from "./UndoManager";
+export { DrawingPad, Pen, Eraser } from "./DrawingPad";
 
 /**
  * Detect whether a user has pressed Enter.
@@ -21,8 +23,10 @@ export const IS_MAC =
   typeof window !== "undefined"
     ? "navigator" in window
       ? /mac/i.test(
+          //@ts-ignore
           window.navigator.userAgentData
-            ? window.navigator.userAgentData.platform
+            ? //@ts-ignore
+              window.navigator.userAgentData.platform
             : window.navigator.platform
         )
       : false

package/internal/scrollIntoActiveElement.d.ts

@@ -0,0 +1,2 @@
+export function scrollIntoActiveElement(listElement: any, activeElelement: any): void;
+//# sourceMappingURL=scrollIntoActiveElement.d.ts.map

package/internal/scrollIntoActiveElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollIntoActiveElement.d.ts","sourceRoot":"","sources":["scrollIntoActiveElement.js"],"names":[],"mappings":"AAAA,sFAqBC"}

package/keyboard/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @param {string | number} definition - can be a string like 'Enter', 'Tab' or number as keyCode, also allow combination key like 'ctrl+d', 'ctrl+alt+x'
+ * @param {boolean} CommandKey - if true, in mac 'ctrl' key binding will be shift on 'command' key.
+ * @returns {import("svelte/action").Action} .
+ */
+export function makeKeyDefinition(definition: string | number, CommandKey?: boolean): import("svelte/action").Action;
+export let enter: import("svelte/action").Action<HTMLElement, any, any>;
+export let tab: import("svelte/action").Action<HTMLElement, any, any>;
+export let escape: import("svelte/action").Action<HTMLElement, any, any>;
+export let space: import("svelte/action").Action<HTMLElement, any, any>;
+export let leftarrow: import("svelte/action").Action<HTMLElement, any, any>;
+export let rightarrow: import("svelte/action").Action<HTMLElement, any, any>;
+export let downarrow: import("svelte/action").Action<HTMLElement, any, any>;
+export let uparrow: import("svelte/action").Action<HTMLElement, any, any>;
+export let backspace: import("svelte/action").Action<HTMLElement, any, any>;
+export let del: import("svelte/action").Action<HTMLElement, any, any>;
+declare namespace _default {
+    export { enter };
+    export { tab };
+    export { escape };
+    export { space };
+    export { leftarrow };
+    export { rightarrow };
+    export { downarrow };
+    export { uparrow };
+    export { backspace };
+    export { del };
+}
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/keyboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,8CALW,MAAM,GAAG,MAAM,eACf,OAAO,GACL,OAAO,eAAe,EAAE,MAAM,CA0D1C;AAED,wEAA8C;AAC9C,sEAA0C;AAC1C,yEAAgD;AAChD,wEAA0C;AAC1C,4EAAsD;AACtD,6EAAwD;AACxD,4EAAsD;AACtD,0EAAkD;AAClD,4EAAsD;AACtD,sEAA6C"}

package/keyboard/index.js

@@ -9,7 +9,7 @@ const ctrlKeys = {
 /**
  * @param {string | number} definition - can be a string like 'Enter', 'Tab' or number as keyCode, also allow combination key like 'ctrl+d', 'ctrl+alt+x'
  * @param {boolean} CommandKey - if true, in mac 'ctrl' key binding will be shift on 'command' key.
- * @returns {function} .
+ * @returns {import("svelte/action").Action} .
  */
 
 export function makeKeyDefinition(definition, CommandKey = false) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -24,7 +24,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "types": "types/index.d.ts",
+  "types": "./index.d.ts",
   "dependencies": {
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
@@ -32,5 +32,8 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "499097fc9ed767630977388f4502c9a9e119f886"
+  "devDependencies": {
+    "typescript": "^5.0.4"
+  },
+  "gitHead": "1df9160ff743e55eb266d3e0b4a8c23287b7a23d"
 }

package/resizeObserver/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Usage: `<div use:resizeObserver on:resize={resizeHandler}>`
+ * @param {HTMLElement} node
+ * @returns {Object}
+ */
+export function resizeObserver(node: HTMLElement): any;
+export const hasResizeObserver: boolean;
+//# sourceMappingURL=index.d.ts.map

package/resizeObserver/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,qCAHW,WAAW,OAmBrB;AA1BD,wCAGY"}

package/search/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @typedef {import('@kws3/ui/types').SearchOptions} SearchOptions - contains search options and fuzzy lib options
+ * @typedef {import('@kws3/ui/types').SearchHelper} SearchHelper - returned search helper function which take unction take params `needle` and `haystack`.
+ */
+/**
+ * @param {SearchOptions} opts
+ */
+export function makeSearchEngine(opts: SearchOptions): (needle: string, haystack: any[]) => any[];
+/**
+ * - contains search options and fuzzy lib options
+ */
+export type SearchOptions = import('@kws3/ui/types').SearchOptions;
+/**
+ * - returned search helper function which take unction take params `needle` and `haystack`.
+ */
+export type SearchHelper = import('@kws3/ui/types').SearchHelper;
+//# sourceMappingURL=index.d.ts.map

package/search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAEA;;;GAGG;AAEH;;GAEG;AACH,uCAFW,aAAa,YAQX,MAAM,4BAmClB;;;;4BAhDY,OAAO,gBAAgB,EAAE,aAAa;;;;2BACtC,OAAO,gBAAgB,EAAE,YAAY"}

package/settings.d.ts

@@ -0,0 +1,22 @@
+/**
+ * - `defaultIconFamily`: `"fa"` - default icon family
+ * - `defaultToastPlacement`: `"bottom"` - default placement of toast notifications
+ * - `defaultSnackbarPlacement`: `"bottom-right"` - default placement of snackbar notifications
+ * - `defaultNotificationPlacement`: `"top-right"` - default placement of floating notifications
+ * - `hasTransitions`: `true` - Transitions are applied
+ * - `defaultChartColors`: `["#284BED", "#ED6134", "#1DAFEC", "#EDB405", "#11EDB7", "#77ED11"]` - default colors for charts
+ * @param {SettingOptions} obj
+ *
+ */
+export function applySettings(obj: SettingOptions): void;
+export type SettingOptions = import('@kws3/ui/types').SettingOptions;
+/**
+ * @typedef {import('@kws3/ui/types').SettingOptions} SettingOptions
+ */
+export const defaultIconFamily: import("svelte/store").Writable<string>;
+export const defaultToastPlacement: import("svelte/store").Writable<string>;
+export const defaultSnackbarPlacement: import("svelte/store").Writable<string>;
+export const defaultNotificationPlacement: import("svelte/store").Writable<string>;
+export const hasTransitions: import("svelte/store").Writable<boolean>;
+export const defaultChartColors: import("svelte/store").Writable<string[]>;
+//# sourceMappingURL=settings.d.ts.map

package/settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["settings.js"],"names":[],"mappings":"AAsCA;;;;;;;;;GASG;AAEH,mCAJW,cAAc,QAQxB;6BAlDY,OAAO,gBAAgB,EAAE,cAAc;AADpD;;GAEG;AAEH,wEAAyC;AACzC,4EAAiD;AACjD,+EAA0D;AAC1D,mFAA2D;AAC3D,sEAAsC;AACtC,2EAOG"}

package/settings.js

@@ -1,5 +1,9 @@
 import { writable } from "svelte/store";
 
+/**
+ * @typedef {import('@kws3/ui/types').SettingOptions} SettingOptions
+ */
+
 const defaultIconFamily = writable("fa");
 const defaultToastPlacement = writable("bottom");
 const defaultSnackbarPlacement = writable("bottom-right");
@@ -39,9 +43,10 @@ export {
  * - `defaultNotificationPlacement`: `"top-right"` - default placement of floating notifications
  * - `hasTransitions`: `true` - Transitions are applied
  * - `defaultChartColors`: `["#284BED", "#ED6134", "#1DAFEC", "#EDB405", "#11EDB7", "#77ED11"]` - default colors for charts
+ * @param {SettingOptions} obj
  *
- * @param {*} obj containing all settings
  */
+
 export function applySettings(obj) {
   Object.entries(obj).forEach(([k, v]) => {
     SETTINGS[k] && SETTINGS[k].set(v);