Skip to content

Commit

Permalink
Add proper JCanvasLayer type
Browse files Browse the repository at this point in the history
  • Loading branch information
@caleb531
caleb531 committed May 27, 2024
1 parent 3a9f9ea commit c44b840
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 96 deletions.
34 changes: 17 additions & 17 deletions src/jcanvas-handles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $.extend($.jCanvas.defaults, {
});

// Determines if the given layer is a rectangular layer
function isRectLayer(layer: JCanvasObject) {
function isRectLayer(layer: JCanvasLayer) {
const method = layer._method;
return (
method === $.fn.drawRect ||
Expand All @@ -29,7 +29,7 @@ function isRectLayer(layer: JCanvasObject) {
}

// Determines if the given layer is a rectangular layer
function isPathLayer(layer: JCanvasObject) {
function isPathLayer(layer: JCanvasLayer) {
const method = layer._method;
return (
method === $.fn.drawLine ||
Expand All @@ -41,7 +41,7 @@ function isPathLayer(layer: JCanvasObject) {
// Add a single handle to line path
function addPathHandle(
$canvas: JQuery<HTMLCanvasElement>,
parent: JCanvasObject,
parent: JCanvasLayer,
xProp: string,
yProp: string
) {
Expand Down Expand Up @@ -81,7 +81,7 @@ function addPathHandle(
dragcancel: function (layer) {
$(this).triggerLayerEvent(layer._parent, "handlecancel");
},
} as Partial<JCanvasObject>
} as Partial<JCanvasLayer>
);
$canvas.draw(handle);
// Add handle to parent layer's list of handles
Expand All @@ -91,7 +91,7 @@ function addPathHandle(
// Add a single handle to rectangle
function addRectHandle(
$canvas: JQuery<HTMLCanvasElement>,
parent: JCanvasObject,
parent: JCanvasLayer,
px: number,
py: number
) {
Expand Down Expand Up @@ -215,7 +215,7 @@ function addRectHandle(
const parent = layer._parent;
$(this).triggerLayerEvent(parent, "handlecancel");
},
} as Partial<JCanvasObject>
} as Partial<JCanvasLayer>
);
$canvas.draw(handle);
// Add handle to parent layer's list of handles
Expand All @@ -225,7 +225,7 @@ function addRectHandle(
// Add all handles to rectangle
function addRectHandles(
$canvas: JQuery<HTMLCanvasElement>,
parent: JCanvasObject
parent: JCanvasLayer
) {
const handlePlacement = parent.handlePlacement;
const nonNullWidth = parent.width || 0;
Expand Down Expand Up @@ -255,7 +255,7 @@ function addRectHandles(
}

// Update handle guides for rectangular layer
function updateRectGuides(parent: JCanvasObject) {
function updateRectGuides(parent: JCanvasLayer) {
const guide = parent._guide;
if (guide) {
guide.x = parent.x;
Expand All @@ -269,7 +269,7 @@ function updateRectGuides(parent: JCanvasObject) {
// Add handle guides to rectangular layer
function addRectGuides(
$canvas: JQuery<HTMLCanvasElement>,
parent: JCanvasObject
parent: JCanvasLayer
) {
const guideProps = $.extend({}, parent.guide, {
layer: true,
Expand All @@ -287,7 +287,7 @@ function addRectGuides(
// Add handles to line path
function addPathHandles(
$canvas: JQuery<HTMLCanvasElement>,
parent: JCanvasObject
parent: JCanvasLayer
) {
for (const key in parent) {
if (Object.prototype.hasOwnProperty.call(parent, key)) {
Expand All @@ -308,7 +308,7 @@ function addPathHandles(
}

// Update handle guides for line path
function updatePathGuides(parent: JCanvasObject) {
function updatePathGuides(parent: JCanvasLayer) {
let handles = parent._handles;
const guides = parent._guides;

Expand Down Expand Up @@ -343,7 +343,7 @@ function updatePathGuides(parent: JCanvasObject) {
// Add guides to path layer
function addPathGuides(
$canvas: JQuery<HTMLCanvasElement>,
parent: JCanvasObject
parent: JCanvasLayer
) {
const handles = parent._handles;
const guideProps = $.extend({}, parent.guide, {
Expand Down Expand Up @@ -394,7 +394,7 @@ function addPathGuides(

// Update position of handles according to
// size and dimensions of rectangular layer
function updateRectHandles(parent: JCanvasObject) {
function updateRectHandles(parent: JCanvasLayer) {
const nonNullWidth = parent.width || 0;
const nonNullHeight = parent.height || 0;
if (parent._handles) {
Expand All @@ -416,7 +416,7 @@ function updateRectHandles(parent: JCanvasObject) {

// Update position of handles according to
// coordinates and dimensions of path layer
function updatePathHandles(parent: JCanvasObject) {
function updatePathHandles(parent: JCanvasLayer) {
const handles = parent._handles;
if (handles) {
// Move handles when dragging
Expand All @@ -430,7 +430,7 @@ function updatePathHandles(parent: JCanvasObject) {
}

// Add drag handles to all four corners of rectangle layer
function addHandles(parent: JCanvasObject) {
function addHandles(parent: JCanvasLayer) {
const $canvas = $(parent.canvas);

// If parent's list of handles doesn't exist
Expand All @@ -449,7 +449,7 @@ function addHandles(parent: JCanvasObject) {
}

// Remove handles if handle property was removed
function removeHandles(layer: JCanvasObject) {
function removeHandles(layer: JCanvasLayer) {
const $canvas = $(layer.canvas);
if (layer._handles) {
// Remove handles from layer
Expand Down Expand Up @@ -493,7 +493,7 @@ $.extend($.jCanvas.eventHooks, {
}
},
// Update handle positions when changing parent layer's dimensions
change: function (layer, props: Partial<JCanvasObject>) {
change: function (layer, props: Partial<JCanvasLayer>) {
if (props.handle || objectContainsPathCoords(props)) {
// Add handles if handle property was added
removeHandles(layer);
Expand Down
50 changes: 34 additions & 16 deletions src/jcanvas.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ interface JCanvasPx {
}

type JCanvasLayerCallbackWithProps = (
layer: JCanvasObject,
layer: JCanvasLayer,
props?: Partial<JCanvasObject>
) => void;

Expand Down Expand Up @@ -75,19 +75,32 @@ interface JQueryEventWithFix extends JQuery.EventExtensions {
fix: (event: Event) => Event;
}

type JCanvasLayerId = JCanvasObject | string | number | RegExp | undefined;
type jCanvasLayerGroupId = JCanvasObject[] | string | RegExp;
type JCanvasLayerCallback = (layer: JCanvasObject) => void;
type JCanvasGetLayersCallback = (layer: JCanvasObject) => any;
type JCanvasLayerId = JCanvasLayer | string | number | RegExp | undefined;
type jCanvasLayerGroupId = JCanvasLayer[] | string | RegExp;
type JCanvasLayerCallback = (layer: JCanvasLayer) => void;
type JCanvasGetLayersCallback = (layer: JCanvasLayer) => any;
type JCanvasStyleFunction = (
layer: JCanvasObject
layer: JCanvasLayer
) => string | CanvasGradient | CanvasPattern;

type JCanvasObjectFunction = {
new (this: JCanvasObject, args?: Partial<JCanvasObject>): JCanvasObject;
(this: JCanvasObject, args?: Partial<JCanvasObject>): JCanvasObject;
};

type JCanvasLayerFunction = {
new (
this: JCanvasLayer,
canvas: HTMLCanvasElement,
params: JCanvasObject
): JCanvasLayer;
(
this: JCanvasLayer,
canvas: HTMLCanvasElement,
params: JCanvasObject
): JCanvasLayer;
};

interface JQueryStatic {
jCanvas: JCanvas;
jCanvasObject: JCanvasObjectFunction;
Expand All @@ -96,18 +109,18 @@ interface JQueryStatic {
interface JQuery {
getEventHooks(): JCanvasEventHooks;
setEventHooks(eventHooks: JCanvasEventHooks): JQuery;
getLayers(callback?: JCanvasGetLayersCallback): JCanvasObject[];
getLayer(layerId: JCanvasLayerId): JCanvasObject | undefined;
getLayerGroup(groupId: jCanvasLayerGroupId): JCanvasObject[] | undefined;
getLayers(callback?: JCanvasGetLayersCallback): JCanvasLayer[];
getLayer(layerId: JCanvasLayerId): JCanvasLayer | undefined;
getLayerGroup(groupId: jCanvasLayerGroupId): JCanvasLayer[] | undefined;
getLayerIndex(layerId: JCanvasLayerId): number;
setLayer(layerId: JCanvasLayerId, props: Partial<JCanvasObject>): JQuery;
setLayers(
props: Partial<JCanvasObject>,
props: Partial<JCanvasLayer>,
callback: JCanvasGetLayersCallback
): JQuery;
setLayerGroup(
groupId: jCanvasLayerGroupId,
props: Partial<JCanvasObject>
props: Partial<JCanvasLayer>
): JQuery;
moveLayer(layerId: JCanvasLayerId, index: number): JQuery;
removeLayer(layerId: JCanvasLayerId): JQuery;
Expand Down Expand Up @@ -277,8 +290,8 @@ interface JCanvasDefaults {
dragstop?: JCanvasLayerCallback;
drag?: JCanvasLayerCallback;
dragcancel?: JCanvasLayerCallback;
updateDragX?: (layer: JCanvasObject, newX: number) => number;
updateDragY?: (layer: JCanvasObject, newY: number) => number;
updateDragX?: (layer: JCanvasLayer, newX: number) => number;
updateDragY?: (layer: JCanvasLayer, newY: number) => number;
pointerdown?: JCanvasLayerCallback;
pointerup?: JCanvasLayerCallback;
pointermove?: JCanvasLayerCallback;
Expand All @@ -288,7 +301,7 @@ interface JCanvasDefaults {
change?: JCanvasLayerCallbackWithProps;
move?: JCanvasLayerCallback;
animatestart?: JCanvasLayerCallback;
animate?: (layer: JCanvasObject, fx: JQuery.Tween) => void;
animate?: (layer: JCanvasLayer, fx: JQuery.Tween) => void;
animateend?: JCanvasLayerCallback;
stop?: JCanvasLayerCallback;
delay?: JCanvasLayerCallback;
Expand All @@ -305,14 +318,19 @@ interface JCanvasDefaults {

interface JCanvasObject extends JCanvasDefaults {}

interface JCanvasLayer extends JCanvasObject {
canvas: NonNullable<JCanvasObject["canvas"]>;
_layer?: true;
}

interface JCanvasPropHooks {
[key: string]: JQuery.PropHook<JCanvasObject>;
}

type NumberProperties = {
type JCanvasNumberParams = {
[K in keyof JCanvasObject]: JCanvasObject[K] extends number ? K : never;
};

type JCanvasAnimatableProps = {
[K in keyof NumberProperties]: NumberProperties[K] | number | string;
[K in keyof JCanvasNumberParams]: NumberProperties[K] | number | string;
};
Loading

0 comments on commit c44b840

Please sign in to comment.