@tsparticles/engine 3.0.0-beta.2 → 3.0.0-beta.4

package/browser/Core/Particles.js

@@ -7,16 +7,29 @@ import { Rectangle } from "./Utils/Rectangle.js";
 import { errorPrefix } from "./Utils/Constants.js";
 const qTreeCapacity = 4;
 const qTreeRectangle = (canvasSize) => {
-    return new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2);
+    const { height, width } = canvasSize, posOffset = -0.25, sizeFactor = 1.5;
+    return new Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
 };
 export class Particles {
     constructor(engine, container) {
         this._applyDensity = (options, manualCount, group) => {
+            const numberOptions = options.number;
             if (!options.number.density?.enable) {
+                if (group === undefined) {
+                    this._limit = numberOptions.limit.value;
+                }
+                else {
+                    this._groupLimits.set(group, numberOptions.limit.value);
+                }
                 return;
             }
-            const numberOptions = options.number, densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter((t) => t.group === group).length);
-            this.limit = numberOptions.limit * densityFactor;
+            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > 0 ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter((t) => t.group === group).length);
+            if (group === undefined) {
+                this._limit = numberOptions.limit.value * densityFactor;
+            }
+            else {
+                this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
+            }
             if (particlesCount < particlesNumber) {
                 this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
             }
@@ -34,7 +47,7 @@ export class Particles {
         };
         this._pushParticle = (position, overrideOptions, group, initializer) => {
             try {
-                let particle = this.pool.pop();
+                let particle = this._pool.pop();
                 if (particle) {
                     particle.init(this._nextId, position, overrideOptions, group);
                 }
@@ -73,7 +86,7 @@ export class Particles {
             const zIdx = this._zArray.indexOf(particle);
             this._array.splice(index, 1);
             this._zArray.splice(zIdx, 1);
-            this.pool.push(particle);
+            this._pool.push(particle);
             this._engine.dispatchEvent("particleRemoved", {
                 container: this._container,
                 data: {
@@ -87,10 +100,11 @@ export class Particles {
         this._nextId = 0;
         this._array = [];
         this._zArray = [];
-        this.pool = [];
-        this.limit = 0;
-        this.needsSort = false;
-        this.lastZIndex = 0;
+        this._pool = [];
+        this._limit = 0;
+        this._groupLimits = new Map();
+        this._needsSort = false;
+        this._lastZIndex = 0;
         this._interactionManager = new InteractionManager(engine, container);
         const canvasSize = container.canvas.size;
         this.quadTree = new QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
@@ -107,17 +121,21 @@ export class Particles {
         }
     }
     addParticle(position, overrideOptions, group, initializer) {
-        this.pushing = true;
-        const container = this._container, options = container.actualOptions, limit = options.particles.number.limit;
+        const limitOptions = this._container.actualOptions.particles.number.limit, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count;
         if (limit > 0) {
-            const countToRemove = this.count + 1 - limit;
-            if (countToRemove > 0) {
-                this.removeQuantity(countToRemove);
+            if (limitOptions.mode === "delete") {
+                const countToRemove = currentCount + 1 - limit;
+                if (countToRemove > 0) {
+                    this.removeQuantity(countToRemove);
+                }
+            }
+            else if (limitOptions.mode === "wait") {
+                if (currentCount >= limit) {
+                    return;
+                }
             }
         }
-        const res = this._pushParticle(position, overrideOptions, group, initializer);
-        this.pushing = false;
-        return res;
+        return this._pushParticle(position, overrideOptions, group, initializer);
     }
     clear() {
         this._array = [];
@@ -154,8 +172,8 @@ export class Particles {
     }
     init() {
         const container = this._container, options = container.actualOptions;
-        this.lastZIndex = 0;
-        this.needsSort = false;
+        this._lastZIndex = 0;
+        this._needsSort = false;
         let handled = false;
         this.updaters = this._engine.getUpdaters(container, true);
         this._interactionManager.init();
@@ -217,6 +235,13 @@ export class Particles {
         }
         this._applyDensity(options.particles, options.manualParticles.length);
     }
+    setLastZIndex(zIndex) {
+        this._lastZIndex = zIndex;
+        this._needsSort = this._needsSort || this._lastZIndex < zIndex;
+    }
+    setResizeFactor(factor) {
+        this._resizeFactor = factor;
+    }
     async update(delta) {
         const container = this._container, particlesToDelete = new Set();
         this.quadTree = new QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
@@ -224,10 +249,10 @@ export class Particles {
             pathGenerator.update();
         }
         for (const [, plugin] of container.plugins) {
-            plugin.update && plugin.update(delta);
+            plugin.update && (await plugin.update(delta));
         }
+        const resizeFactor = this._resizeFactor;
         for (const particle of this._array) {
-            const resizeFactor = container.canvas.resizeFactor;
             if (resizeFactor && !particle.ignoresResizeRatio) {
                 particle.position.x *= resizeFactor.width;
                 particle.position.y *= resizeFactor.height;
@@ -255,7 +280,7 @@ export class Particles {
             const checkDelete = (p) => !particlesToDelete.has(p);
             this._array = this.filter(checkDelete);
             this._zArray = this._zArray.filter(checkDelete);
-            this.pool.push(...particlesToDelete);
+            this._pool.push(...particlesToDelete);
         }
         await this._interactionManager.externalInteract(delta);
         for (const particle of this._array) {
@@ -266,12 +291,12 @@ export class Particles {
                 await this._interactionManager.particlesInteract(particle, delta);
             }
         }
-        delete container.canvas.resizeFactor;
-        if (this.needsSort) {
+        delete this._resizeFactor;
+        if (this._needsSort) {
             const zArray = this._zArray;
             zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-            this.lastZIndex = zArray[zArray.length - 1].position.z;
-            this.needsSort = false;
+            this._lastZIndex = zArray[zArray.length - 1].position.z;
+            this._needsSort = false;
         }
     }
 }

package/browser/Core/Retina.js

@@ -17,13 +17,11 @@ export class Retina {
             canvas.size.height = element.offsetHeight * ratio;
         }
         const particles = options.particles, moveOptions = particles.move;
-        this.attractDistance = getRangeValue(moveOptions.attract.distance) * ratio;
         this.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
         this.sizeAnimationSpeed = getRangeValue(particles.size.animation.speed) * ratio;
     }
     initParticle(particle) {
         const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
-        props.attractDistance = getRangeValue(moveOptions.attract.distance) * ratio;
         props.moveDrift = getRangeValue(moveOptions.drift) * ratio;
         props.moveSpeed = getRangeValue(moveOptions.speed) * ratio;
         props.sizeAnimationSpeed = getRangeValue(options.size.animation.speed) * ratio;

package/browser/Core/Utils/QuadTree.js

@@ -8,7 +8,7 @@ export class QuadTree {
         this._subdivide = () => {
             const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
             for (let i = 0; i < 4; i++) {
-                this._subs.push(new QuadTree(new Rectangle(x + (width / 2) * (i % 2), y + (height / 2) * (Math.round(i / 2) - (i % 2)), width / 2, height / 2), capacity));
+                this._subs.push(new QuadTree(new Rectangle(x + width * 0.5 * (i % 2), y + height * 0.5 * (Math.round(i * 0.5) - (i % 2)), width * 0.5, height * 0.5), capacity));
             }
             this._divided = true;
         };

package/browser/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -14,8 +14,7 @@ export class BackgroundMask {
             this.composite = data.composite;
         }
         if (data.cover !== undefined) {
-            const cover = data.cover;
-            const color = (isString(data.cover) ? { color: data.cover } : data.cover);
+            const cover = data.cover, color = (isString(data.cover) ? { color: data.cover } : data.cover);
             this.cover.load(cover.color !== undefined ? cover : { color: color });
         }
         if (data.enable !== undefined) {

package/browser/Options/Classes/ColorAnimation.js

@@ -1,38 +1,18 @@
+import { AnimationOptions } from "./AnimationOptions.js";
 import { setRangeValue } from "../../Utils/NumberUtils.js";
-export class ColorAnimation {
+export class ColorAnimation extends AnimationOptions {
     constructor() {
-        this.count = 0;
-        this.enable = false;
+        super();
         this.offset = 0;
-        this.speed = 1;
-        this.delay = 0;
-        this.decay = 0;
         this.sync = true;
     }
     load(data) {
+        super.load(data);
         if (!data) {
             return;
         }
-        if (data.count !== undefined) {
-            this.count = setRangeValue(data.count);
-        }
-        if (data.enable !== undefined) {
-            this.enable = data.enable;
-        }
         if (data.offset !== undefined) {
             this.offset = setRangeValue(data.offset);
         }
-        if (data.speed !== undefined) {
-            this.speed = setRangeValue(data.speed);
-        }
-        if (data.decay !== undefined) {
-            this.decay = setRangeValue(data.decay);
-        }
-        if (data.delay !== undefined) {
-            this.delay = setRangeValue(data.delay);
-        }
-        if (data.sync !== undefined) {
-            this.sync = data.sync;
-        }
     }
 }

package/browser/Options/Classes/Particles/Bounce/ParticlesBounceFactor.js

@@ -2,7 +2,6 @@ import { ValueWithRandom } from "../../ValueWithRandom.js";
 export class ParticlesBounceFactor extends ValueWithRandom {
     constructor() {
         super();
-        this.random.minimumValue = 0.1;
         this.value = 1;
     }
 }

package/browser/Options/Classes/Particles/Effect/Effect.js

@@ -0,0 +1,32 @@
+import { deepExtend } from "../../../../Utils/Utils.js";
+export class Effect {
+    constructor() {
+        this.close = true;
+        this.fill = true;
+        this.options = {};
+        this.type = [];
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        const options = data.options;
+        if (options !== undefined) {
+            for (const effect in options) {
+                const item = options[effect];
+                if (item) {
+                    this.options[effect] = deepExtend(this.options[effect] ?? {}, item);
+                }
+            }
+        }
+        if (data.close !== undefined) {
+            this.close = data.close;
+        }
+        if (data.fill !== undefined) {
+            this.fill = data.fill;
+        }
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+    }
+}

package/browser/Options/Classes/Particles/Number/ParticlesNumber.js

@@ -1,8 +1,9 @@
 import { ParticlesDensity } from "./ParticlesDensity.js";
+import { ParticlesNumberLimit } from "./ParticlesNumberLimit.js";
 export class ParticlesNumber {
     constructor() {
         this.density = new ParticlesDensity();
-        this.limit = 0;
+        this.limit = new ParticlesNumberLimit();
         this.value = 0;
     }
     load(data) {
@@ -10,10 +11,7 @@ export class ParticlesNumber {
             return;
         }
         this.density.load(data.density);
-        const limit = data.limit;
-        if (limit !== undefined) {
-            this.limit = limit;
-        }
+        this.limit.load(data.limit);
         if (data.value !== undefined) {
             this.value = data.value;
         }

package/browser/Options/Classes/Particles/Number/ParticlesNumberLimit.js

@@ -0,0 +1,17 @@
+export class ParticlesNumberLimit {
+    constructor() {
+        this.mode = "delete";
+        this.value = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
+        if (data.value !== undefined) {
+            this.value = data.value;
+        }
+    }
+}

package/browser/Options/Classes/Particles/Opacity/Opacity.js

@@ -1,10 +1,9 @@
 import { OpacityAnimation } from "./OpacityAnimation.js";
-import { ValueWithRandom } from "../../ValueWithRandom.js";
-export class Opacity extends ValueWithRandom {
+import { RangedAnimationValueWithRandom } from "../../ValueWithRandom.js";
+export class Opacity extends RangedAnimationValueWithRandom {
     constructor() {
         super();
         this.animation = new OpacityAnimation();
-        this.random.minimumValue = 0.1;
         this.value = 1;
     }
     load(data) {

package/browser/Options/Classes/Particles/ParticlesOptions.js

@@ -1,6 +1,7 @@
 import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.js";
 import { AnimatableColor } from "../AnimatableColor.js";
 import { Collisions } from "./Collisions/Collisions.js";
+import { Effect } from "./Effect/Effect.js";
 import { Move } from "./Move/Move.js";
 import { Opacity } from "./Opacity/Opacity.js";
 import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
@@ -18,6 +19,7 @@ export class ParticlesOptions {
         this.collisions = new Collisions();
         this.color = new AnimatableColor();
         this.color.value = "#fff";
+        this.effect = new Effect();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
@@ -35,6 +37,7 @@ export class ParticlesOptions {
         }
         this.bounce.load(data.bounce);
         this.color.load(AnimatableColor.create(this.color, data.color));
+        this.effect.load(data.effect);
         if (data.groups !== undefined) {
             for (const group in data.groups) {
                 const item = data.groups[group];

package/browser/Options/Classes/Particles/Size/Size.js

@@ -1,10 +1,9 @@
+import { RangedAnimationValueWithRandom } from "../../ValueWithRandom.js";
 import { SizeAnimation } from "./SizeAnimation.js";
-import { ValueWithRandom } from "../../ValueWithRandom.js";
-export class Size extends ValueWithRandom {
+export class Size extends RangedAnimationValueWithRandom {
     constructor() {
         super();
         this.animation = new SizeAnimation();
-        this.random.minimumValue = 1;
         this.value = 3;
     }
     load(data) {

package/browser/Options/Classes/ValueWithRandom.js

@@ -1,24 +1,15 @@
 import { AnimationOptions, RangedAnimationOptions } from "./AnimationOptions.js";
-import { Random } from "./Random.js";
-import { isBoolean } from "../../Utils/Utils.js";
 import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class ValueWithRandom {
     constructor() {
-        this.random = new Random();
         this.value = 0;
     }
     load(data) {
         if (!data) {
             return;
         }
-        if (isBoolean(data.random)) {
-            this.random.enable = data.random;
-        }
-        else {
-            this.random.load(data.random);
-        }
         if (data.value !== undefined) {
-            this.value = setRangeValue(data.value, this.random.enable ? this.random.minimumValue : undefined);
+            this.value = setRangeValue(data.value);
         }
     }
 }

package/browser/Utils/CanvasUtils.js

@@ -5,13 +5,6 @@ export function drawLine(context, begin, end) {
     context.lineTo(end.x, end.y);
     context.closePath();
 }
-export function drawTriangle(context, p1, p2, p3) {
-    context.beginPath();
-    context.moveTo(p1.x, p1.y);
-    context.lineTo(p2.x, p2.y);
-    context.lineTo(p3.x, p3.y);
-    context.closePath();
-}
 export function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
     context.fillRect(0, 0, dimension.width, dimension.height);
@@ -39,7 +32,6 @@ export function drawParticle(data) {
         d: rotateData.cos * (transform.d ?? 1),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
-    context.beginPath();
     if (backgroundMask) {
         context.globalCompositeOperation = composite;
     }
@@ -58,39 +50,55 @@ export function drawParticle(data) {
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    drawShape(container, context, particle, radius, opacity, delta);
+    const drawData = { container, context, particle, radius, opacity, delta };
+    context.beginPath();
+    drawShape(drawData);
+    if (particle.shapeClose) {
+        context.closePath();
+    }
     if (strokeWidth > 0) {
         context.stroke();
     }
-    if (particle.close) {
-        context.closePath();
-    }
-    if (particle.fill) {
+    if (particle.shapeFill) {
         context.fill();
     }
-    drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
+    drawShapeAfterDraw(drawData);
+    drawEffect(drawData);
     context.globalCompositeOperation = "source-over";
     context.setTransform(1, 0, 0, 1, 0, 0);
 }
-export function drawShape(container, context, particle, radius, opacity, delta) {
+export function drawEffect(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
+    if (!particle.effect) {
+        return;
+    }
+    const drawer = container.effectDrawers.get(particle.effect);
+    if (!drawer) {
+        return;
+    }
+    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+}
+export function drawShape(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.drawers.get(particle.shape);
+    const drawer = container.shapeDrawers.get(particle.shape);
     if (!drawer) {
         return;
     }
-    drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
-export function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
+export function drawShapeAfterDraw(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.drawers.get(particle.shape);
-    if (!drawer || !drawer.afterEffect) {
+    const drawer = container.shapeDrawers.get(particle.shape);
+    if (!drawer || !drawer.afterDraw) {
         return;
     }
-    drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.afterDraw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
 export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {

package/browser/Utils/ColorUtils.js

@@ -4,24 +4,6 @@ const randomColorValue = "random", midColorValue = "mid", colorManagers = new Ma
 export function addColorManager(manager) {
     colorManagers.set(manager.key, manager);
 }
-function hue2rgb(p, q, t) {
-    if (t < 0) {
-        t += 1;
-    }
-    if (t > 1) {
-        t -= 1;
-    }
-    if (t < 1 / 6) {
-        return p + (q - p) * 6 * t;
-    }
-    if (t < 1 / 2) {
-        return q;
-    }
-    if (t < 2 / 3) {
-        return p + (q - p) * (2 / 3 - t) * 6;
-    }
-    return p;
-}
 function stringToRgba(input) {
     for (const [, manager] of colorManagers) {
         if (input.startsWith(manager.stringPrefix)) {
@@ -91,7 +73,7 @@ export function rangeColorToHsl(color, index, useIndex = true) {
 export function rgbToHsl(color) {
     const r1 = color.r / 255, g1 = color.g / 255, b1 = color.b / 255, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
         h: 0,
-        l: (max + min) / 2,
+        l: (max + min) * 0.5,
         s: 0,
     };
     if (max !== min) {
@@ -119,26 +101,30 @@ export function stringToRgb(input) {
     return stringToRgba(input);
 }
 export function hslToRgb(hsl) {
-    const result = { b: 0, g: 0, r: 0 }, hslPercent = {
-        h: hsl.h / 360,
-        l: hsl.l / 100,
-        s: hsl.s / 100,
-    };
-    if (!hslPercent.s) {
-        result.r = result.g = result.b = hslPercent.l;
+    const h = ((hsl.h % 360) + 360) % 360, s = Math.max(0, Math.min(100, hsl.s)), l = Math.max(0, Math.min(100, hsl.l)), hNormalized = h / 360, sNormalized = s / 100, lNormalized = l / 100;
+    if (s === 0) {
+        const grayscaleValue = Math.round(lNormalized * 255);
+        return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
     }
-    else {
-        const q = hslPercent.l < 0.5
-            ? hslPercent.l * (1 + hslPercent.s)
-            : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s, p = 2 * hslPercent.l - q;
-        result.r = hue2rgb(p, q, hslPercent.h + 1 / 3);
-        result.g = hue2rgb(p, q, hslPercent.h);
-        result.b = hue2rgb(p, q, hslPercent.h - 1 / 3);
-    }
-    result.r = Math.floor(result.r * 255);
-    result.g = Math.floor(result.g * 255);
-    result.b = Math.floor(result.b * 255);
-    return result;
+    const channel = (temp1, temp2, temp3) => {
+        if (temp3 < 0) {
+            temp3 += 1;
+        }
+        if (temp3 > 1) {
+            temp3 -= 1;
+        }
+        if (temp3 * 6 < 1) {
+            return temp1 + (temp2 - temp1) * 6 * temp3;
+        }
+        if (temp3 * 2 < 1) {
+            return temp2;
+        }
+        if (temp3 * 3 < 2) {
+            return temp1 + (temp2 - temp1) * (2 / 3 - temp3) * 6;
+        }
+        return temp1;
+    }, temp1 = lNormalized < 0.5 ? lNormalized * (1 + sNormalized) : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = 2 * lNormalized - temp1, red = Math.min(255, 255 * channel(temp2, temp1, hNormalized + 1 / 3)), green = Math.min(255, 255 * channel(temp2, temp1, hNormalized)), blue = Math.min(255, 255 * channel(temp2, temp1, hNormalized - 1 / 3));
+    return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
 }
 export function hslaToRgba(hsla) {
     const rgbResult = hslToRgb(hsla);

package/browser/Utils/NumberUtils.js

@@ -1,5 +1,5 @@
-import { isBoolean, isNumber } from "./Utils.js";
 import { Vector } from "../Core/Utils/Vector.js";
+import { isNumber } from "./Utils.js";
 let _random = Math.random;
 const easings = new Map();
 export function addEasing(name, easing) {
@@ -52,15 +52,6 @@ export function setRangeValue(source, value) {
         }
         : setRangeValue(min, max);
 }
-export function getValue(options) {
-    const random = options.random, { enable, minimumValue } = isBoolean(random)
-        ? {
-            enable: random,
-            minimumValue: 0,
-        }
-        : random;
-    return enable ? getRangeValue(setRangeValue(options.value, minimumValue)) : getRangeValue(options.value);
-}
 export function getDistances(pointA, pointB) {
     const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
     return { dx: dx, dy: dy, distance: Math.sqrt(dx ** 2 + dy ** 2) };
@@ -74,21 +65,21 @@ export function getParticleDirectionAngle(direction, position, center) {
     }
     switch (direction) {
         case "top":
-            return -Math.PI / 2;
+            return -Math.PI * 0.5;
         case "top-right":
-            return -Math.PI / 4;
+            return -Math.PI * 0.25;
         case "right":
             return 0;
         case "bottom-right":
-            return Math.PI / 4;
+            return Math.PI * 0.25;
         case "bottom":
-            return Math.PI / 2;
+            return Math.PI * 0.5;
         case "bottom-left":
-            return (3 * Math.PI) / 4;
+            return Math.PI * 0.75;
         case "left":
             return Math.PI;
         case "top-left":
-            return (-3 * Math.PI) / 4;
+            return -Math.PI * 0.75;
         case "inside":
             return Math.atan2(center.y - position.y, center.x - position.x);
         case "outside":