From cd8987231c8d1db0816effb32473f2e0b73b7d6d Mon Sep 17 00:00:00 2001 From: Caleb Evans Date: Sun, 26 May 2024 15:31:38 -0700 Subject: [PATCH] Define types for all event callbacks --- src/jcanvas-handles.ts | 40 +++++++++++++++++---------------- src/jcanvas.d.ts | 50 ++++++++++++++++++++++++++++++++++++++---- src/jcanvas.ts | 4 ++-- 3 files changed, 69 insertions(+), 25 deletions(-) diff --git a/src/jcanvas-handles.ts b/src/jcanvas-handles.ts index 79480c3..c57493a 100644 --- a/src/jcanvas-handles.ts +++ b/src/jcanvas-handles.ts @@ -65,23 +65,23 @@ function addPathHandle( _yProp: yProp, fromCenter: true, // Adjust line path when dragging a handle - dragstart: function (layer: JCanvasObject) { + dragstart: function (layer) { $(this).triggerLayerEvent(layer._parent, "handlestart"); }, - drag: function (layer: JCanvasObject) { + drag: function (layer) { const parent = layer._parent; parent[layer._xProp] = layer.x - parent.x; parent[layer._yProp] = layer.y - parent.y; updatePathGuides(parent); $(this).triggerLayerEvent(parent, "handlemove"); }, - dragstop: function (layer: JCanvasObject) { + dragstop: function (layer) { $(this).triggerLayerEvent(layer._parent, "handlestop"); }, - dragcancel: function (layer: JCanvasObject) { + dragcancel: function (layer) { $(this).triggerLayerEvent(layer._parent, "handlecancel"); }, - } + } as Partial ); $canvas.draw(handle); // Add handle to parent layer's list of handles @@ -133,11 +133,11 @@ function addRectHandle( _px: px, _py: py, fromCenter: true, - dragstart: function (layer: JCanvasObject) { + dragstart: function (layer) { $(this).triggerLayerEvent(layer._parent, "handlestart"); }, // Resize rectangle when dragging a handle - drag: function (layer: JCanvasObject) { + drag: function (layer) { const parent = layer._parent; if (parent.width + layer.dx * layer._px < parent.minWidth) { @@ -207,15 +207,15 @@ function addRectHandle( updateRectHandles(parent); $(this).triggerLayerEvent(parent, "handlemove"); }, - dragstop: function (layer: JCanvasObject) { + dragstop: function (layer) { const parent = layer._parent; $(this).triggerLayerEvent(parent, "handlestop"); }, - dragcancel: function (layer: JCanvasObject) { + dragcancel: function (layer) { const parent = layer._parent; $(this).triggerLayerEvent(parent, "handlecancel"); }, - } + } as Partial ); $canvas.draw(handle); // Add handle to parent layer's list of handles @@ -381,9 +381,11 @@ function addPathGuides( if (otherHandle !== null) { $canvas.addLayer(guideProps); const guide = $canvas.getLayer(-1); - guide._handles = [handle, otherHandle]; - parent._guides.push(guide); - $canvas.moveLayer(guide, -handles.length - 1); + if (guide) { + guide._handles = [handle, otherHandle]; + parent._guides.push(guide); + $canvas.moveLayer(guide, -handles.length - 1); + } } } } @@ -473,13 +475,13 @@ function objectContainsPathCoords(obj: object) { $.extend($.jCanvas.eventHooks, { // If necessary, add handles when layer is added - add: function (layer: JCanvasObject) { + add: function (layer) { if (layer.handle) { addHandles(layer); } }, // Remove handles of layer is removed - remove: function (layer: JCanvasObject) { + remove: function (layer) { if (layer._handles) { const $canvas = $(this); // Remove handles from layer @@ -491,7 +493,7 @@ $.extend($.jCanvas.eventHooks, { } }, // Update handle positions when changing parent layer's dimensions - change: function (layer: JCanvasObject, props: any) { + change: function (layer, props: Partial) { if (props.handle || objectContainsPathCoords(props)) { // Add handles if handle property was added removeHandles(layer); @@ -515,7 +517,7 @@ $.extend($.jCanvas.eventHooks, { } }, // Update handle positions when animating parent layer - animate: function (layer: JCanvasObject, fx: any) { + animate: function (layer, fx: any) { // If layer is a rectangle or ellipse layer if (isRectLayer(layer)) { // If width or height are animated @@ -537,11 +539,11 @@ $.extend($.jCanvas.eventHooks, { } }, // Update handle positions when dragging parent layer - drag: function (layer: JCanvasObject) { + drag: function (layer) { if (isRectLayer(layer)) { updateRectHandles(layer); } else if (isPathLayer(layer)) { updatePathHandles(layer); } }, -}); +} as typeof $.jCanvas.eventHooks); diff --git a/src/jcanvas.d.ts b/src/jcanvas.d.ts index aab4012..000b4df 100644 --- a/src/jcanvas.d.ts +++ b/src/jcanvas.d.ts @@ -38,7 +38,12 @@ interface JCanvasPx { a: number; } -type JCanvasEventHooks = Record void>; +type JCanvasLayerCallbackWithProps = ( + layer: JCanvasObject, + props?: Partial +) => void; + +type JCanvasEventHooks = Record; interface JCanvas { defaults: JCanvasDefaults; @@ -72,7 +77,8 @@ interface JQueryEventWithFix extends JQuery.EventExtensions { type JCanvasLayerId = JCanvasObject | string | number | RegExp | undefined; type jCanvasLayerGroupId = JCanvasObject[] | string | RegExp; -type JCanvasLayerCallback = (layer: JCanvasObject) => any; +type JCanvasLayerCallback = (layer: JCanvasObject) => void; +type JCanvasGetLayersCallback = (layer: JCanvasObject) => any; type JCanvasObjectFunction = { new (this: JCanvasObject, args?: Partial): JCanvasObject; @@ -87,14 +93,14 @@ interface JQueryStatic { interface JQuery { getEventHooks(): JCanvasEventHooks; setEventHooks(eventHooks: JCanvasEventHooks): JQuery; - getLayers(callback?: JCanvasLayerCallback): JCanvasObject[]; + getLayers(callback?: JCanvasGetLayersCallback): JCanvasObject[]; getLayer(layerId: JCanvasLayerId): JCanvasObject | undefined; getLayerGroup(groupId: jCanvasLayerGroupId): JCanvasObject[] | undefined; getLayerIndex(layerId: JCanvasLayerId): number; setLayer(layerId: JCanvasLayerId, props: Partial): JQuery; setLayers( props: Partial, - callback: JCanvasLayerCallback + callback: JCanvasGetLayersCallback ): JQuery; setLayerGroup( groupId: jCanvasLayerGroupId, @@ -241,6 +247,42 @@ interface JCanvasDefaults { width: number | null; x: number; y: number; + each?: ( + this: HTMLCanvasElement, + px: JCanvasPx, + params: JCanvasObject + ) => void; + load?: ( + this: HTMLCanvasElement, + arg: JCanvasObject | CanvasPattern | null + ) => void; + click?: JCanvasLayerCallback; + dblclick?: JCanvasLayerCallback; + mousedown?: JCanvasLayerCallback; + mouseup?: JCanvasLayerCallback; + mousemove?: JCanvasLayerCallback; + mouseover?: JCanvasLayerCallback; + mouseout?: JCanvasLayerCallback; + touchstart?: JCanvasLayerCallback; + touchend?: JCanvasLayerCallback; + touchmove?: JCanvasLayerCallback; + dragstart?: JCanvasLayerCallback; + dragstop?: JCanvasLayerCallback; + drag?: JCanvasLayerCallback; + dragcancel?: JCanvasLayerCallback; + pointerdown?: JCanvasLayerCallback; + pointerup?: JCanvasLayerCallback; + pointermove?: JCanvasLayerCallback; + contextmenu?: JCanvasLayerCallback; + add?: JCanvasLayerCallback; + remove?: JCanvasLayerCallback; + change?: JCanvasLayerCallbackWithProps; + move?: JCanvasLayerCallback; + animatestart?: JCanvasLayerCallback; + animate?: (layer: JCanvasObject, fx: JQuery.Tween) => void; + animateend?: JCanvasLayerCallback; + stop?: JCanvasLayerCallback; + delay?: JCanvasLayerCallback; [key: string]: any; } diff --git a/src/jcanvas.ts b/src/jcanvas.ts index cf57270..e9b8bea 100644 --- a/src/jcanvas.ts +++ b/src/jcanvas.ts @@ -4155,7 +4155,7 @@ $.fn.drawImage = function drawImage(args) { if (params.layer && layer) { // Trigger 'load' event for layers _triggerLayerEvent($canvas, data, layer, "load"); - } else if (params.load) { + } else if (params.load && layer) { // Run 'load' callback for non-layers params.load.call($canvas[0], layer); } @@ -4247,7 +4247,7 @@ $.fn.createPattern = function createPattern(args) { // Create pattern pattern = ctx.createPattern(img, params.repeat); // Run callback function if defined - if (params.load) { + if (params.load && pattern) { params.load.call($canvases[0], pattern); } }