From e1005e19d11bd3c2e957cbec4dac6baaca6f9617 Mon Sep 17 00:00:00 2001 From: Caleb Evans Date: Sun, 26 May 2024 09:56:59 -0700 Subject: [PATCH] Fix typing of arguments to most jCanvas methods --- src/jcanvas.d.ts | 49 +++++++++++++++++++++++++++--------------------- src/jcanvas.ts | 42 ++++++++++++++++++++--------------------- 2 files changed, 49 insertions(+), 42 deletions(-) diff --git a/src/jcanvas.d.ts b/src/jcanvas.d.ts index 6c1c962..aab4012 100644 --- a/src/jcanvas.d.ts +++ b/src/jcanvas.d.ts @@ -31,6 +31,13 @@ interface JCanvasBaseTransforms { masks: JCanvasObject[]; } +interface JCanvasPx { + r: number; + g: number; + b: number; + a: number; +} + type JCanvasEventHooks = Record void>; interface JCanvas { @@ -63,7 +70,7 @@ interface JQueryEventWithFix extends JQuery.EventExtensions { fix: (event: Event) => Event; } -type JCanvasLayerId = JCanvasObject | string | number | RegExp; +type JCanvasLayerId = JCanvasObject | string | number | RegExp | undefined; type jCanvasLayerGroupId = JCanvasObject[] | string | RegExp; type JCanvasLayerCallback = (layer: JCanvasObject) => any; @@ -81,8 +88,8 @@ interface JQuery { getEventHooks(): JCanvasEventHooks; setEventHooks(eventHooks: JCanvasEventHooks): JQuery; getLayers(callback?: JCanvasLayerCallback): JCanvasObject[]; - getLayer(layerId: JCanvasLayerId): JCanvasObject; - getLayerGroup(groupId: jCanvasLayerGroupId): JCanvasObject[]; + getLayer(layerId: JCanvasLayerId): JCanvasObject | undefined; + getLayerGroup(groupId: jCanvasLayerGroupId): JCanvasObject[] | undefined; getLayerIndex(layerId: JCanvasLayerId): number; setLayer(layerId: JCanvasLayerId, props: Partial): JQuery; setLayers( @@ -107,7 +114,7 @@ interface JQuery { index?: number; complete?: () => void; }): void; - addLayer(args: JCanvasObject): void; + addLayer(args: Partial): void; animateLayer( layerId: JCanvasLayerId, props: Partial, @@ -122,29 +129,29 @@ interface JQuery { delayLayerGroup(groupId: jCanvasLayerGroupId, duration: number): void; stopLayer(layerId: JCanvasLayerId, clearQueue?: boolean): void; stopLayerGroup(groupId: jCanvasLayerGroupId, clearQueue?: boolean): void; - draw(args: JCanvasObject): JQuery; + draw(args: Partial): JQuery; clearCanvas(args?: JCanvasObject): void; saveCanvas(args?: JCanvasObject): void; restoreCanvas(args?: JCanvasObject): void; rotateCanvas(args?: JCanvasObject): void; scaleCanvas(args?: JCanvasObject): void; translateCanvas(args?: JCanvasObject): void; - drawRect(args: JCanvasObject): void; - drawArc(args: JCanvasObject): void; - drawEllipse(args: JCanvasObject): void; - drawPolygon(args: JCanvasObject): void; - drawSlice(args: JCanvasObject): void; - drawLine(args: JCanvasObject): void; - drawQuadratic(args: JCanvasObject): void; - drawBezier(args: JCanvasObject): void; - drawVector(args: JCanvasObject): void; - drawPath(args: JCanvasObject): void; - drawText(args: JCanvasObject): void; - measureText(args: JCanvasObject): void; - drawImage(args: JCanvasObject): void; - createPattern(args: JCanvasObject): void; - createGradient(args: JCanvasObject): void; - setPixels(args: JCanvasObject): void; + drawRect(args: Partial): void; + drawArc(args: Partial): void; + drawEllipse(args: Partial): void; + drawPolygon(args: Partial): void; + drawSlice(args: Partial): void; + drawLine(args: Partial): void; + drawQuadratic(args: Partial): void; + drawBezier(args: Partial): void; + drawVector(args: Partial): void; + drawPath(args: Partial): void; + drawText(args: Partial): void; + measureText(args: JCanvasLayerId): void; + drawImage(args: Partial): void; + createPattern(args: Partial): void; + createGradient(args: Partial): void; + setPixels(args: Partial): void; getCanvasImage(type: string, quality?: number): void; detectPixelRatio(callback?: (ratio: number) => void): void; } diff --git a/src/jcanvas.ts b/src/jcanvas.ts index 44048d3..cf57270 100644 --- a/src/jcanvas.ts +++ b/src/jcanvas.ts @@ -567,7 +567,7 @@ class JCanvasInternalData { // All layers that intersect with the event coordinates (regardless of visibility) intersecting: JCanvasObject[] = []; // The topmost layer whose area contains the event coordinates - lastIntersected = null; + lastIntersected: JCanvasObject | null = null; cursor: string; // Properties for the current drag event drag = { @@ -613,7 +613,7 @@ class JCanvasInternalData { // Retrieved the stored jCanvas data for a canvas element function _getCanvasData(canvas: HTMLCanvasElement) { const dataCache = caches.dataCache; - let data; + let data: JCanvasInternalData; if (dataCache._canvas === canvas && dataCache._data) { // Retrieve canvas data from cache if possible data = dataCache._data; @@ -884,12 +884,11 @@ $.fn.getLayers = function getLayers(callback) { // Get a single jCanvas layer object $.fn.getLayer = function getLayer(layerId) { const $canvases = this; - let layer; if ($canvases.length !== 0) { const canvas = $canvases[0]; if (!_isCanvas(canvas)) { - return null; + return undefined; } const data = _getCanvasData(canvas); const layers = data.layers; @@ -902,7 +901,7 @@ $.fn.getLayer = function getLayer(layerId) { layerId.layer ) { // Return the actual layer object if given - layer = layerId as JCanvasObject; + return layerId; } else if (idType === "number") { // Retrieve the layer using the given index @@ -913,24 +912,23 @@ $.fn.getLayer = function getLayer(layerId) { layerIndex = layers.length + layerIndex; } // Get layer with the given index - layer = layers[layerIndex]; + return layers[layerIndex]; } else if (idType === "regexp") { const layerPattern = layerId as RegExp; // Get layer with the name that matches the given regex for (let l = 0; l < layers.length; l += 1) { + const layer = layers[l]; // Check if layer matches name - if (isString(layers[l].name) && layers[l].name.match(layerPattern)) { - layer = layers[l]; - break; + if (isString(layer.name) && layer.name.match(layerPattern)) { + return layer; } } } else { const layerName = layerId as string; // Get layer with the given name - layer = data.layer.names[layerName]; + return data.layer.names[layerName]; } } - return layer; }; // Get all layers in the given group @@ -946,7 +944,7 @@ $.fn.getLayerGroup = function getLayerGroup(groupId) { if (idType === "array") { // Return layer group if given - return groupId as Exclude; + return groupId as Exclude; } else if (idType === "regexp") { const groupPattern = groupId as RegExp; // Get canvas data @@ -1218,7 +1216,7 @@ $.fn.addLayerToGroup = function addLayerToGroup(layerId, groupName) { const layer = $canvas.getLayer(layerId); // If layer is not already in group - if (layer.groups) { + if (layer?.groups) { // Clone groups list groups = layer.groups.slice(0); // If layer is not already in group @@ -1243,7 +1241,7 @@ $.fn.removeLayerFromGroup = function removeLayerFromGroup(layerId, groupName) { const $canvas = $($canvases[e]); const layer = $canvas.getLayer(layerId); - if (layer.groups) { + if (layer && layer.groups) { // Find index of layer in group const index = inArray(groupName, layer.groups); @@ -1552,7 +1550,9 @@ $.fn.drawLayer = function drawLayer(layerId) { continue; } const layer = $canvas.getLayer(layerId); - _drawLayer($canvas, ctx, layer); + if (layer) { + _drawLayer($canvas, ctx, layer); + } } return $canvases; }; @@ -1644,7 +1644,7 @@ $.fn.drawLayers = function drawLayers(args) { let eventType = eventCache.type; // If jCanvas has detected a dragstart - if (data.drag.layer) { + if (data.drag.layer && eventType) { // Handle dragging of layer _handleLayerDrag($canvas, data, eventType); } @@ -1665,7 +1665,7 @@ $.fn.drawLayers = function drawLayers(args) { _resetCursor($canvas, data); } - if (layer) { + if (layer && eventType) { // Use mouse event callbacks if no touch event callbacks are given if (!layer[eventType]) { eventType = _getMouseEventName(eventType); @@ -1733,10 +1733,10 @@ $.fn.drawLayers = function drawLayers(args) { function _addLayer( canvas: HTMLCanvasElement, params: JCanvasObject, - args?: JCanvasObject, + args?: Partial, method?: (args: JCanvasObject) => JQuery ) { - let layer = params._layer ? args : params; + let layer = params._layer ? (args as JCanvasObject) : params; // Store arguments object for later use params._args = args; @@ -1791,7 +1791,7 @@ function _addLayer( layer.data = {}; } // If layer stores a list of associated groups - if (layer.groups !== null) { + if (layer.groups) { // Clone list layer.groups = layer.groups.slice(0); } else { @@ -3991,7 +3991,7 @@ $.fn.measureText = function measureText(args) { let params = $canvases.getLayer(args); // If layer does not exist or if returned object is not a jCanvas layer if (!params || (params && !params._layer)) { - params = new jCanvasObject(args); + params = new jCanvasObject(args as JCanvasObject); } const canvas = $canvases[0];