@svgedit/svgcanvas 7.2.7 → 7.4.2

package/package.json

@@ -1,58 +1,59 @@
 {
-    "name": "@svgedit/svgcanvas",
-    "version": "7.2.7",
-    "description": "SVG Canvas",
-    "main": "dist/svgcanvas.js",
-    "author": "Narendra Sisodiya",
-    "publishConfig": {
-        "access": "public"
-    },
-    "bugs": {
-        "url": "https://github.com/SVG-Edit/svgedit/issues"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/SVG-Edit/svgedit.git"
-    },
-    "homepage": "https://github.com/SVG-Edit/svgedit#readme",
-    "contributors": [
-        "Pavol Rusnak",
-        "Jeff Schiller",
-        "Vidar Hokstad",
-        "Alexis Deveria",
-        "Brett Zamir",
-        "Fabien Jacq",
-        "OptimistikSAS"
+  "name": "@svgedit/svgcanvas",
+  "version": "7.4.2",
+  "description": "SVG Canvas",
+  "main": "dist/svgcanvas.js",
+  "types": "svgcanvas.d.ts",
+  "author": "Narendra Sisodiya",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/SVG-Edit/svgedit/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SVG-Edit/svgedit.git"
+  },
+  "homepage": "https://github.com/SVG-Edit/svgedit#readme",
+  "contributors": [
+    "Pavol Rusnak",
+    "Jeff Schiller",
+    "Vidar Hokstad",
+    "Alexis Deveria",
+    "Brett Zamir",
+    "Fabien Jacq",
+    "OptimistikSAS"
+  ],
+  "keywords": [
+    "svg-editor",
+    "javascript",
+    "svg-edit",
+    "svg",
+    "svgcanvas"
+  ],
+  "license": "MIT",
+  "browserslist": [
+    "defaults",
+    "not IE 11",
+    "not OperaMini all"
+  ],
+  "standard": {
+    "ignore": [
+      "dist"
     ],
-    "keywords": [
-        "svg-editor",
-        "javascript",
-        "svg-edit",
-        "svg",
-        "svgcanvas"
+    "globals": [
+      "cy",
+      "assert"
     ],
-    "license": "MIT",
-    "browserslist": [
-        "defaults",
-        "not IE 11",
-        "not OperaMini all"
-    ],
-    "standard": {
-        "ignore": [
-            "dist"
-        ],
-        "globals": [
-            "cy",
-            "assert"
-        ],
-        "env": [
-            "mocha",
-            "browser"
-        ]
-    },
-    "scripts": {
-        "build": "rollup -c",
-        "prebuild": "standard . && npm i",
-        "prepublishOnly": "npm run build"
-    }
+    "env": [
+      "mocha",
+      "browser"
+    ]
+  },
+  "scripts": {
+    "build": "vite build",
+    "prebuild": "standard . && npm i",
+    "prepublishOnly": "npm run build"
+  }
 }

package/publish.md

@@ -1,6 +1 @@
-## To publish this package
-1. update the version number in package.json
-2. run 'npm install' to update the corresponding package-lock.json
-3. update the CHANGES.md
-4. run 'npm publish' (that will automate the build)
-5. create a commit with above changes called 'release x.y.z'
+see docs/ReleaseInstructions.md

package/svgcanvas.d.ts

@@ -0,0 +1,225 @@
+/**
+ * TypeScript definitions for @svgedit/svgcanvas
+ * @module @svgedit/svgcanvas
+ */
+
+// Core types
+export interface SVGElementJSON {
+  element: string
+  attr: Record<string, string>
+  curStyles?: boolean
+  children?: SVGElementJSON[]
+  namespace?: string
+}
+
+export interface Config {
+  canvasName?: string
+  canvas_expansion?: number
+  initFill?: {
+    color?: string
+    opacity?: number
+  }
+  initStroke?: {
+    width?: number
+    color?: string
+    opacity?: number
+  }
+  text?: {
+    stroke_width?: number
+    font_size?: number
+    font_family?: string
+  }
+  selectionColor?: string
+  imgPath?: string
+  extensions?: string[]
+  initTool?: string
+  wireframe?: boolean
+  showlayers?: boolean
+  no_save_warning?: boolean
+  imgImport?: boolean
+  baseUnit?: string
+  snappingStep?: number
+  gridSnapping?: boolean
+  gridColor?: string
+  dimensions?: [number, number]
+  initOpacity?: number
+  colorPickerCSS?: string | null
+  initRight?: string
+  initBottom?: string
+  show_outside_canvas?: boolean
+  selectNew?: boolean
+}
+
+export interface Resolution {
+  w: number
+  h: number
+  zoom?: number
+}
+
+export interface BBox {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface EditorContext {
+  getSvgContent(): SVGSVGElement
+  addSVGElementsFromJson(data: SVGElementJSON): Element
+  getSelectedElements(): Element[]
+  getDOMDocument(): HTMLDocument
+  getDOMContainer(): HTMLElement
+  getSvgRoot(): SVGSVGElement
+  getBaseUnit(): string
+  getSnappingStep(): number | string
+}
+
+// Paint types
+export interface PaintOptions {
+  alpha?: number
+  solidColor?: string
+  type?: 'solidColor' | 'linearGradient' | 'radialGradient' | 'none'
+}
+
+// History command types
+export interface HistoryCommand {
+  apply(handler: HistoryEventHandler): void | true
+  unapply(handler: HistoryEventHandler): void | true
+  elements(): Element[]
+  type(): string
+}
+
+export interface HistoryEventHandler {
+  handleHistoryEvent(eventType: string, cmd: HistoryCommand): void
+}
+
+export interface UndoManager {
+  getUndoStackSize(): number
+  getRedoStackSize(): number
+  getNextUndoCommandText(): string
+  getNextRedoCommandText(): string
+  resetUndoStack(): void
+}
+
+// Logger types
+export enum LogLevel {
+  NONE = 0,
+  ERROR = 1,
+  WARN = 2,
+  INFO = 3,
+  DEBUG = 4
+}
+
+export interface Logger {
+  LogLevel: typeof LogLevel
+  setLogLevel(level: LogLevel): void
+  setLoggingEnabled(enabled: boolean): void
+  setLogPrefix(prefix: string): void
+  error(message: string, error?: Error | any, context?: string): void
+  warn(message: string, data?: any, context?: string): void
+  info(message: string, data?: any, context?: string): void
+  debug(message: string, data?: any, context?: string): void
+  getConfig(): { currentLevel: LogLevel; enabled: boolean; prefix: string }
+}
+
+// Main SvgCanvas class
+export default class SvgCanvas {
+  constructor(container: HTMLElement, config?: Partial<Config>)
+  
+  // Core methods
+  getSvgContent(): SVGSVGElement
+  getSvgRoot(): SVGSVGElement
+  getSvgString(): string
+  setSvgString(xmlString: string, preventUndo?: boolean): boolean
+  clearSelection(noCall?: boolean): void
+  selectOnly(elements: Element[], showGrips?: boolean): void
+  getResolution(): Resolution
+  setResolution(width: number | string, height: number | string): boolean
+  getZoom(): number
+  setZoom(zoomLevel: number): void
+  
+  // Element manipulation
+  moveSelectedElements(dx: number, dy: number, undoable?: boolean): void
+  deleteSelectedElements(): void
+  cutSelectedElements(): void
+  copySelectedElements(): void
+  pasteElements(type?: string, x?: number, y?: number): void
+  groupSelectedElements(type?: string, urlArg?: string): Element | null
+  ungroupSelectedElement(): void
+  moveToTopSelectedElement(): void
+  moveToBottomSelectedElement(): void
+  moveUpDownSelected(dir: 'Up' | 'Down'): void
+  
+  // Path operations
+  pathActions: {
+    clear: () => void
+    resetOrientation: (path: SVGPathElement) => boolean
+    zoomChange: () => void
+    getNodePoint: () => {x: number, y: number}
+    linkControlPoints: (linkPoints: boolean) => void
+    clonePathNode: () => void
+    deletePathNode: () => void
+    smoothPolylineIntoPath: () => void
+    setSegType: (type: number) => void
+    moveNode: (attr: string, newValue: number) => void
+    selectNode: (node?: Element) => void
+    opencloseSubPath: () => void
+  }
+  
+  // Layer operations
+  getCurrentDrawing(): any
+  getNumLayers(): number
+  getLayer(name: string): any
+  getCurrentLayerName(): string
+  setCurrentLayer(name: string): boolean
+  renameCurrentLayer(newName: string): boolean
+  setCurrentLayerPosition(newPos: number): boolean
+  setLayerVisibility(name: string, bVisible: boolean): void
+  moveSelectedToLayer(layerName: string): void
+  cloneLayer(name?: string): void
+  deleteCurrentLayer(): boolean
+  
+  // Drawing modes
+  setMode(name: string): void
+  getMode(): string
+  
+  // Undo/Redo
+  undoMgr: UndoManager
+  undo(): void
+  redo(): void
+  
+  // Events
+  call(event: string, args?: any[]): void
+  bind(event: string, callback: Function): void
+  unbind(event: string, callback: Function): void
+  
+  // Attribute manipulation
+  changeSelectedAttribute(attr: string, val: string | number, elems?: Element[]): void
+  changeSelectedAttributeNoUndo(attr: string, val: string | number, elems?: Element[]): void
+  
+  // Canvas properties
+  contentW: number
+  contentH: number
+  
+  // Text operations
+  textActions: any
+  
+  // Extensions
+  addExtension(name: string, extFunc: Function): void
+  
+  // Export
+  getSvgString(): string
+  embedImage(dataURI: string): Promise<Element>
+  
+  // Other utilities
+  getPrivateMethods(): any
+}
+
+// Export additional utilities
+export * from './common/logger.js'
+export { NS } from './core/namespaces.js'
+export * from './core/math.js'
+export * from './core/units.js'
+export * from './core/utilities.js'
+export { sanitizeSvg } from './core/sanitize.js'
+export { default as dataStorage } from './core/dataStorage.js'

package/svgcanvas.js

@@ -201,7 +201,9 @@ class SvgCanvas {
           this.curConfig.initFill.color,
         fill_paint: null,
         fill_opacity: this.curConfig.initFill.opacity,
-        stroke: '#' + this.curConfig.initStroke.color,
+        stroke:
+          (this.curConfig.initStroke.color === 'none' ? '' : '#') +
+          this.curConfig.initStroke.color,
         stroke_paint: null,
         stroke_opacity: this.curConfig.initStroke.opacity,
         stroke_width: this.curConfig.initStroke.width,
@@ -288,9 +290,9 @@ class SvgCanvas {
      */
     const storageChange = ev => {
       if (!ev.newValue) return // This is a call from removeItem.
-      if (ev.key === CLIPBOARD_ID + '_startup') {
+      if (ev.key === `${CLIPBOARD_ID}_startup`) {
         // Another tab asked for our sessionStorage.
-        localStorage.removeItem(CLIPBOARD_ID + '_startup')
+        localStorage.removeItem(`${CLIPBOARD_ID}_startup`)
         this.flashStorage()
       } else if (ev.key === CLIPBOARD_ID) {
         // Another tab sent data.
@@ -301,7 +303,7 @@ class SvgCanvas {
     // Listen for changes to localStorage.
     window.addEventListener('storage', storageChange, false)
     // Ask other tabs for sessionStorage (this is ONLY to trigger event).
-    localStorage.setItem(CLIPBOARD_ID + '_startup', Math.random())
+    localStorage.setItem(`${CLIPBOARD_ID}_startup`, Math.random())
 
     pasteInit(this)
 
@@ -902,7 +904,7 @@ class SvgCanvas {
     })
     Object.values(attrs).forEach(val => {
       if (val?.startsWith('url(')) {
-        const id = getUrlFromAttr(val).substr(1)
+        const id = getUrlFromAttr(val).slice(1)
         const ref = getElement(id)
         if (!ref) {
           findDefs().append(this.removedElements[id])
@@ -1138,11 +1140,11 @@ class SvgCanvas {
    * @returns {void}
    */
   setPaintOpacity (type, val, preventUndo) {
-    this.curShape[type + '_opacity'] = val
+    this.curShape[`${type}_opacity`] = val
     if (!preventUndo) {
-      this.changeSelectedAttribute(type + '-opacity', val)
+      this.changeSelectedAttribute(`${type}-opacity`, val)
     } else {
-      this.changeSelectedAttributeNoUndo(type + '-opacity', val)
+      this.changeSelectedAttributeNoUndo(`${type}-opacity`, val)
     }
   }
 
@@ -1167,7 +1169,7 @@ class SvgCanvas {
     if (elem) {
       const filterUrl = elem.getAttribute('filter')
       if (filterUrl) {
-        const blur = getElement(elem.id + '_blur')
+        const blur = getElement(`${elem.id}_blur`)
         if (blur) {
           val = blur.firstChild.getAttribute('stdDeviation')
         } else {

package/vite.config.mjs

@@ -0,0 +1,20 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    sourcemap: true,
+    lib: {
+      entry: resolve(__dirname, 'svgcanvas.js'),
+      formats: ['es'],
+      fileName: () => 'svgcanvas.js'
+    },
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true
+      }
+    }
+  }
+})

package/rollup.config.mjs

@@ -1,38 +0,0 @@
-/* eslint-env node */
-// This rollup script is run by the command:
-// 'npm run build'
-
-import { rimraf } from 'rimraf'
-import babel from '@rollup/plugin-babel'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-
-// import progress from 'rollup-plugin-progress';
-import filesize from 'rollup-plugin-filesize'
-
-// remove existing distribution
-await rimraf('./dist')
-console.info('recreating dist')
-
-// config for svgedit core module
-const config = [{
-  input: ['./svgcanvas.js'],
-  output: [
-    {
-      format: 'es',
-      inlineDynamicImports: true,
-      sourcemap: true,
-      file: 'dist/svgcanvas.js'
-    }
-  ],
-  plugins: [
-    nodeResolve({
-      browser: true,
-      preferBuiltins: false
-    }),
-    commonjs(),
-    babel({ babelHelpers: 'bundled', exclude: [/\/core-js\//] }), // exclude core-js to avoid circular dependencies.
-    filesize()
-  ]
-}]
-export default config