Skip to content

Commit

Permalink
Fix typing of arguments to most jCanvas methods
Browse files Browse the repository at this point in the history
  • Loading branch information
@caleb531
caleb531 committed May 26, 2024
1 parent 5709f4b commit e1005e1
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 42 deletions.
49 changes: 28 additions & 21 deletions src/jcanvas.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,13 @@ interface JCanvasBaseTransforms {
masks: JCanvasObject[];
}

interface JCanvasPx {
r: number;
g: number;
b: number;
a: number;
}

type JCanvasEventHooks = Record<string, (layer: JCanvasObject) => void>;

interface JCanvas {
Expand Down Expand Up @@ -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;

Expand All @@ -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<JCanvasObject>): JQuery;
setLayers(
Expand All @@ -107,7 +114,7 @@ interface JQuery {
index?: number;
complete?: () => void;
}): void;
addLayer(args: JCanvasObject): void;
addLayer(args: Partial<JCanvasObject>): void;
animateLayer(
layerId: JCanvasLayerId,
props: Partial<JCanvasObject>,
Expand All @@ -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<JCanvasObject>): 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<JCanvasObject>): void;
drawArc(args: Partial<JCanvasObject>): void;
drawEllipse(args: Partial<JCanvasObject>): void;
drawPolygon(args: Partial<JCanvasObject>): void;
drawSlice(args: Partial<JCanvasObject>): void;
drawLine(args: Partial<JCanvasObject>): void;
drawQuadratic(args: Partial<JCanvasObject>): void;
drawBezier(args: Partial<JCanvasObject>): void;
drawVector(args: Partial<JCanvasObject>): void;
drawPath(args: Partial<JCanvasObject>): void;
drawText(args: Partial<JCanvasObject>): void;
measureText(args: JCanvasLayerId): void;
drawImage(args: Partial<JCanvasObject>): void;
createPattern(args: Partial<JCanvasObject>): void;
createGradient(args: Partial<JCanvasObject>): void;
setPixels(args: Partial<JCanvasObject>): void;
getCanvasImage(type: string, quality?: number): void;
detectPixelRatio(callback?: (ratio: number) => void): void;
}
Expand Down
42 changes: 21 additions & 21 deletions src/jcanvas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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

Expand All @@ -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
Expand All @@ -946,7 +944,7 @@ $.fn.getLayerGroup = function getLayerGroup(groupId) {

if (idType === "array") {
// Return layer group if given
return groupId as Exclude<typeof groupId, string>;
return groupId as Exclude<typeof groupId, string | RegExp>;
} else if (idType === "regexp") {
const groupPattern = groupId as RegExp;
// Get canvas data
Expand Down Expand Up @@ -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
Expand All @@ -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);

Expand Down Expand Up @@ -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;
};
Expand Down Expand Up @@ -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);
}
Expand All @@ -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);
Expand Down Expand Up @@ -1733,10 +1733,10 @@ $.fn.drawLayers = function drawLayers(args) {
function _addLayer(
canvas: HTMLCanvasElement,
params: JCanvasObject,
args?: JCanvasObject,
args?: Partial<JCanvasObject>,
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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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];
Expand Down

0 comments on commit e1005e1

Please sign in to comment.