From 2a8b5ea3fb6b3a62ed53d367b6d16d1515422ab9 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Ulrich-Matthias=20Sch=C3=A4fer?= Date: Sun, 3 Sep 2023 14:09:36 +0200 Subject: [PATCH] add more events to sugar (fixes #1217) --- package-lock.json | 8 +-- package.json | 2 +- src/modules/optional/sugar.js | 9 ++- svg.js.d.ts | 131 ++++++++++++++++++++-------------- tsconfig.json | 1 + 5 files changed, 93 insertions(+), 58 deletions(-) create mode 100644 tsconfig.json diff --git a/package-lock.json b/package-lock.json index c0a6394..93e35f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,7 +38,7 @@ "rollup": "^3.25.1", "rollup-plugin-filesize": "^10.0.0", "svgdom": "^0.1.16", - "typescript": "^5.1.3", + "typescript": "^5.2.2", "yargs": "^17.7.2" }, "funding": { @@ -12763,9 +12763,9 @@ } }, "node_modules/typescript": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.3.tgz", - "integrity": "sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", "dev": true, "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index af08c2b..6e3fb0b 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "rollup": "^3.25.1", "rollup-plugin-filesize": "^10.0.0", "svgdom": "^0.1.16", - "typescript": "^5.1.3", + "typescript": "^5.2.2", "yargs": "^17.7.2" }, "browserslist": ">0.3%, last 2 version, not dead, not op_mini all" diff --git a/src/modules/optional/sugar.js b/src/modules/optional/sugar.js index aa5fb82..7ce3bd4 100644 --- a/src/modules/optional/sugar.js +++ b/src/modules/optional/sugar.js @@ -174,7 +174,14 @@ const methods = [ 'touchmove', 'touchleave', 'touchend', - 'touchcancel' + 'touchcancel', + 'contextmenu', + 'wheel', + 'pointerdown', + 'pointermove', + 'pointerup', + 'pointerleave', + 'pointercancel' ].reduce(function (last, event) { // add event to Element const fn = function (f) { diff --git a/svg.js.d.ts b/svg.js.d.ts index d941fed..4bfec8f 100644 --- a/svg.js.d.ts +++ b/svg.js.d.ts @@ -1339,6 +1339,8 @@ declare module '@svgdotjs/svg.js' { isRoot(): boolean } + type EventHandler = (event: T) => void + interface Sugar { fill(): string fill(fill: FillData): this @@ -1371,6 +1373,28 @@ declare module '@svgdotjs/svg.js' { font(a: string): string font(a: string, v: string | number): this font(a: object): this + + click(cb: EventHandler): this + dblclick(cb: EventHandler): this + mousedown(cb: EventHandler): this + mouseup(cb: EventHandler): this + mouseover(cb: EventHandler): this + mouseout(cb: EventHandler): this + mousemove(cb: EventHandler): this + mouseenter(cb: EventHandler): this + mouseleave(cb: EventHandler): this + touchstart(cb: EventHandler): this + touchmove(cb: EventHandler): this + touchleave(cb: EventHandler): this + touchend(cb: EventHandler): this + touchcancel(cb: EventHandler): this + contextmenu(cb: EventHandler): this + wheel(cb: EventHandler): this + pointerdown(cb: EventHandler): this + pointermove(cb: EventHandler): this + pointerup(cb: EventHandler): this + pointerleave(cb: EventHandler): this + pointercancel(cb: EventHandler): this } // Symbol.js @@ -1402,7 +1426,6 @@ declare module '@svgdotjs/svg.js' { before(element: Element): Element center(x: number, y: number): this classes(): string[] - click(cb: Function | null): this clipper(): ClipPath clipWith(element: Element): this clone(deep?: boolean, assignNewIds?: boolean): this @@ -1414,24 +1437,14 @@ declare module '@svgdotjs/svg.js' { data(name: string, value: any, sustain?: boolean): this data(name: string): any data(val: object): this - dblclick(cb: Function | null): this defs(): Defs dmove(x: NumberAlias, y: NumberAlias): this dx(x: NumberAlias): this dy(y: NumberAlias): this event(): Event | CustomEvent - fill(): any - fill(color: string): this - fill(color: Color | ColorLike): this - fill(color: FillData): this - fill(pattern: Element): this + fire(event: Event): this fire(event: string, data?: any): this - flip(a: string, offset?: number): this - flip(offset?: number): this - font(a: object): this - font(a: string, v: string | number): this - font(a: string): string forget(...keys: string[]): this forget(): this forward(): this @@ -1451,41 +1464,13 @@ declare module '@svgdotjs/svg.js' { maskWith(element: Element): this maskWith(mask: Mask): this matches(selector: string): boolean - matrix(): Matrix - matrix( - a?: number, - b?: number, - c?: number, - d?: number, - e?: number, - f?: number - ): this - matrix( - mat: MatrixAlias, - b?: number, - c?: number, - d?: number, - e?: number, - f?: number - ): this matrixify(): Matrix memory(): object - mousedown(cb: Function | null): this - mousemove(cb: Function | null): this - mouseout(cb: Function | null): this - mouseover(cb: Function | null): this - mouseup(cb: Function | null): this - mouseenter(cb: Function | null): this - mouseleave(cb: Function | null): this move(x: NumberAlias, y: NumberAlias): this native(): LinkedHTMLElement next(): Element // off(events?: string | Event[], cb?: EventListener | number): this; // on(event: string, cb: Function, context?: object): this; - opacity(): number - opacity(o: number): this - relative(x: number, y: number): this - shear(lam: Matrix, cx: number, cy: number): this toRoot(): Svg /** * By default parents will return a list of elements up until the root svg. @@ -1517,14 +1502,11 @@ declare module '@svgdotjs/svg.js' { remove(): this removeClass(name: string): this root(): Svg - rotate(d: number, cx?: number, cy?: number): this - scale(x?: number, y?: number, cx?: number, cy?: number): this screenCTM(): Matrix setData(data: object): this show(): this show(): this size(width?: NumberAlias, height?: NumberAlias): this - skew(x?: number, y?: number, cx?: number, cy?: number): this stop(jumpToEnd: boolean, clearQueue: boolean): Animation stop( offset?: NumberAlias | string, @@ -1536,23 +1518,14 @@ declare module '@svgdotjs/svg.js' { color?: NumberAlias opacity?: NumberAlias }): Stop - stroke(): any - stroke(color: string): this - stroke(stroke: StrokeData): this timeline(): Timeline timeline(tl: Timeline): this toggleClass(name: string): this toParent(parent: Dom): this toParent(parent: Dom, i: number): this toSvg(): this - touchcancel(cb: Function | null): this - touchend(cb: Function | null): this - touchleave(cb: Function | null): this - touchmove(cb: Function | null): this - touchstart(cb: Function | null): this transform(): MatrixExtract transform(t: MatrixAlias, relative?: boolean): this - translate(x: number, y: number): this unclip(): this unmask(): this untransform(): this @@ -1563,6 +1536,60 @@ declare module '@svgdotjs/svg.js' { x(x: NumberAlias): this y(): NumberAlias y(y: NumberAlias): this + + fill(): string + fill(fill: FillData): this + fill(color: string): this + fill(pattern: Element): this + fill(image: Image): this + stroke(): string + stroke(stroke: StrokeData): this + stroke(color: string): this + matrix(): Matrix + matrix( + a: number, + b: number, + c: number, + d: number, + e: number, + f: number + ): this + matrix(mat: MatrixAlias): this + rotate(degrees: number, cx?: number, cy?: number): this + skew(skewX?: number, skewY?: number, cx?: number, cy?: number): this + scale(scaleX?: number, scaleY?: number, cx?: number, cy?: number): this + translate(x: number, y: number): this + shear(lam: number, cx: number, cy: number): this + relative(x: number, y: number): this + flip(direction?: string, around?: number): this + flip(around: number): this + opacity(): number + opacity(value: number): this + font(a: string): string + font(a: string, v: string | number): this + font(a: object): this + + click(cb: EventHandler): this + dblclick(cb: EventHandler): this + mousedown(cb: EventHandler): this + mouseup(cb: EventHandler): this + mouseover(cb: EventHandler): this + mouseout(cb: EventHandler): this + mousemove(cb: EventHandler): this + mouseenter(cb: EventHandler): this + mouseleave(cb: EventHandler): this + touchstart(cb: EventHandler): this + touchmove(cb: EventHandler): this + touchleave(cb: EventHandler): this + touchend(cb: EventHandler): this + touchcancel(cb: EventHandler): this + contextmenu(cb: EventHandler): this + wheel(cb: EventHandler): this + pointerdown(cb: EventHandler): this + pointermove(cb: EventHandler): this + pointerup(cb: EventHandler): this + pointerleave(cb: EventHandler): this + pointercancel(cb: EventHandler): this } // ellipse.js diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1 @@ +{} -- 2.39.5