@tsparticles/updater-stroke-color
Advanced tools
Comparing version 3.0.0-alpha.1 to 3.0.0-beta.0
import { StrokeColorUpdater } from "./StrokeColorUpdater"; | ||
export async function loadStrokeColorUpdater(engine) { | ||
await engine.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater(container)); | ||
export async function loadStrokeColorUpdater(engine, refresh = true) { | ||
await engine.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater(container), refresh); | ||
} |
@@ -1,62 +0,3 @@ | ||
import { getHslAnimationFromHsl, getRangeValue, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "@tsparticles/engine"; | ||
function updateColorValue(delta, value, valueAnimation, max, decrease) { | ||
var _a, _b; | ||
const colorValue = value; | ||
if (!colorValue || | ||
!colorValue.enable || | ||
(colorValue.loops !== undefined && | ||
colorValue.maxLoops !== undefined && | ||
colorValue.maxLoops > 0 && | ||
colorValue.loops >= colorValue.maxLoops)) { | ||
return; | ||
} | ||
const offset = randomInRange(valueAnimation.offset), velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6, decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1; | ||
if (!decrease || colorValue.status === "increasing") { | ||
colorValue.value += velocity; | ||
if (colorValue.value > max) { | ||
if (!colorValue.loops) { | ||
colorValue.loops = 0; | ||
} | ||
colorValue.loops++; | ||
if (decrease) { | ||
colorValue.status = "decreasing"; | ||
colorValue.value -= colorValue.value % max; | ||
} | ||
} | ||
} | ||
else { | ||
colorValue.value -= velocity; | ||
if (colorValue.value < 0) { | ||
if (!colorValue.loops) { | ||
colorValue.loops = 0; | ||
} | ||
colorValue.loops++; | ||
colorValue.status = "increasing"; | ||
colorValue.value += colorValue.value; | ||
} | ||
} | ||
if (colorValue.velocity && decay !== 1) { | ||
colorValue.velocity *= decay; | ||
} | ||
if (colorValue.value > max) { | ||
colorValue.value %= max; | ||
} | ||
} | ||
function updateStrokeColor(particle, delta) { | ||
if (!particle.strokeColor || !particle.strokeAnimation) { | ||
return; | ||
} | ||
const h = particle.strokeColor.h; | ||
if (h) { | ||
updateColorValue(delta, h, particle.strokeAnimation.h, 360, false); | ||
} | ||
const s = particle.strokeColor.s; | ||
if (s) { | ||
updateColorValue(delta, s, particle.strokeAnimation.s, 100, true); | ||
} | ||
const l = particle.strokeColor.l; | ||
if (l) { | ||
updateColorValue(delta, l, particle.strokeAnimation.l, 100, true); | ||
} | ||
} | ||
import { getHslAnimationFromHsl, getRangeValue, itemFromSingleOrMultiple, rangeColorToHsl, } from "@tsparticles/engine"; | ||
import { updateStrokeColor } from "./Utils"; | ||
export class StrokeColorUpdater { | ||
@@ -67,9 +8,8 @@ constructor(container) { | ||
init(particle) { | ||
var _a, _b, _c; | ||
const container = this.container; | ||
const stroke = itemFromSingleOrMultiple(particle.options.stroke, particle.id, particle.options.reduceDuplicates); | ||
const container = this.container, options = particle.options; | ||
const stroke = itemFromSingleOrMultiple(options.stroke, particle.id, options.reduceDuplicates); | ||
particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio; | ||
particle.strokeOpacity = getRangeValue((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1); | ||
particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation; | ||
const strokeHslColor = (_c = rangeColorToHsl(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor(); | ||
particle.strokeOpacity = getRangeValue(stroke.opacity ?? 1); | ||
particle.strokeAnimation = stroke.color?.animation; | ||
const strokeHslColor = rangeColorToHsl(stroke.color) ?? particle.getFillColor(); | ||
if (strokeHslColor) { | ||
@@ -80,10 +20,9 @@ particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor); | ||
isEnabled(particle) { | ||
var _a, _b, _c; | ||
const color = particle.strokeAnimation; | ||
const color = particle.strokeAnimation, { strokeColor } = particle; | ||
return (!particle.destroyed && | ||
!particle.spawning && | ||
!!color && | ||
((((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable) || | ||
(((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable) || | ||
(((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable))); | ||
((strokeColor?.h.value !== undefined && strokeColor.h.enable) || | ||
(strokeColor?.s.value !== undefined && strokeColor.s.enable) || | ||
(strokeColor?.l.value !== undefined && strokeColor.l.enable))); | ||
} | ||
@@ -90,0 +29,0 @@ update(particle, delta) { |
"use strict"; | ||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
return new (P || (P = Promise))(function (resolve, reject) { | ||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
}); | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.loadStrokeColorUpdater = void 0; | ||
const StrokeColorUpdater_1 = require("./StrokeColorUpdater"); | ||
function loadStrokeColorUpdater(engine) { | ||
return __awaiter(this, void 0, void 0, function* () { | ||
yield engine.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater_1.StrokeColorUpdater(container)); | ||
}); | ||
async function loadStrokeColorUpdater(engine, refresh = true) { | ||
await engine.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater_1.StrokeColorUpdater(container), refresh); | ||
} | ||
exports.loadStrokeColorUpdater = loadStrokeColorUpdater; |
@@ -5,62 +5,3 @@ "use strict"; | ||
const engine_1 = require("@tsparticles/engine"); | ||
function updateColorValue(delta, value, valueAnimation, max, decrease) { | ||
var _a, _b; | ||
const colorValue = value; | ||
if (!colorValue || | ||
!colorValue.enable || | ||
(colorValue.loops !== undefined && | ||
colorValue.maxLoops !== undefined && | ||
colorValue.maxLoops > 0 && | ||
colorValue.loops >= colorValue.maxLoops)) { | ||
return; | ||
} | ||
const offset = (0, engine_1.randomInRange)(valueAnimation.offset), velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6, decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1; | ||
if (!decrease || colorValue.status === "increasing") { | ||
colorValue.value += velocity; | ||
if (colorValue.value > max) { | ||
if (!colorValue.loops) { | ||
colorValue.loops = 0; | ||
} | ||
colorValue.loops++; | ||
if (decrease) { | ||
colorValue.status = "decreasing"; | ||
colorValue.value -= colorValue.value % max; | ||
} | ||
} | ||
} | ||
else { | ||
colorValue.value -= velocity; | ||
if (colorValue.value < 0) { | ||
if (!colorValue.loops) { | ||
colorValue.loops = 0; | ||
} | ||
colorValue.loops++; | ||
colorValue.status = "increasing"; | ||
colorValue.value += colorValue.value; | ||
} | ||
} | ||
if (colorValue.velocity && decay !== 1) { | ||
colorValue.velocity *= decay; | ||
} | ||
if (colorValue.value > max) { | ||
colorValue.value %= max; | ||
} | ||
} | ||
function updateStrokeColor(particle, delta) { | ||
if (!particle.strokeColor || !particle.strokeAnimation) { | ||
return; | ||
} | ||
const h = particle.strokeColor.h; | ||
if (h) { | ||
updateColorValue(delta, h, particle.strokeAnimation.h, 360, false); | ||
} | ||
const s = particle.strokeColor.s; | ||
if (s) { | ||
updateColorValue(delta, s, particle.strokeAnimation.s, 100, true); | ||
} | ||
const l = particle.strokeColor.l; | ||
if (l) { | ||
updateColorValue(delta, l, particle.strokeAnimation.l, 100, true); | ||
} | ||
} | ||
const Utils_1 = require("./Utils"); | ||
class StrokeColorUpdater { | ||
@@ -71,9 +12,8 @@ constructor(container) { | ||
init(particle) { | ||
var _a, _b, _c; | ||
const container = this.container; | ||
const stroke = (0, engine_1.itemFromSingleOrMultiple)(particle.options.stroke, particle.id, particle.options.reduceDuplicates); | ||
const container = this.container, options = particle.options; | ||
const stroke = (0, engine_1.itemFromSingleOrMultiple)(options.stroke, particle.id, options.reduceDuplicates); | ||
particle.strokeWidth = (0, engine_1.getRangeValue)(stroke.width) * container.retina.pixelRatio; | ||
particle.strokeOpacity = (0, engine_1.getRangeValue)((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1); | ||
particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation; | ||
const strokeHslColor = (_c = (0, engine_1.rangeColorToHsl)(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor(); | ||
particle.strokeOpacity = (0, engine_1.getRangeValue)(stroke.opacity ?? 1); | ||
particle.strokeAnimation = stroke.color?.animation; | ||
const strokeHslColor = (0, engine_1.rangeColorToHsl)(stroke.color) ?? particle.getFillColor(); | ||
if (strokeHslColor) { | ||
@@ -84,10 +24,9 @@ particle.strokeColor = (0, engine_1.getHslAnimationFromHsl)(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor); | ||
isEnabled(particle) { | ||
var _a, _b, _c; | ||
const color = particle.strokeAnimation; | ||
const color = particle.strokeAnimation, { strokeColor } = particle; | ||
return (!particle.destroyed && | ||
!particle.spawning && | ||
!!color && | ||
((((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable) || | ||
(((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable) || | ||
(((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable))); | ||
((strokeColor?.h.value !== undefined && strokeColor.h.enable) || | ||
(strokeColor?.s.value !== undefined && strokeColor.s.enable) || | ||
(strokeColor?.l.value !== undefined && strokeColor.l.enable))); | ||
} | ||
@@ -98,5 +37,5 @@ update(particle, delta) { | ||
} | ||
updateStrokeColor(particle, delta); | ||
(0, Utils_1.updateStrokeColor)(particle, delta); | ||
} | ||
} | ||
exports.StrokeColorUpdater = StrokeColorUpdater; |
import { StrokeColorUpdater } from "./StrokeColorUpdater"; | ||
export async function loadStrokeColorUpdater(engine) { | ||
await engine.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater(container)); | ||
export async function loadStrokeColorUpdater(engine, refresh = true) { | ||
await engine.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater(container), refresh); | ||
} |
@@ -1,62 +0,3 @@ | ||
import { getHslAnimationFromHsl, getRangeValue, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "@tsparticles/engine"; | ||
function updateColorValue(delta, value, valueAnimation, max, decrease) { | ||
var _a, _b; | ||
const colorValue = value; | ||
if (!colorValue || | ||
!colorValue.enable || | ||
(colorValue.loops !== undefined && | ||
colorValue.maxLoops !== undefined && | ||
colorValue.maxLoops > 0 && | ||
colorValue.loops >= colorValue.maxLoops)) { | ||
return; | ||
} | ||
const offset = randomInRange(valueAnimation.offset), velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6, decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1; | ||
if (!decrease || colorValue.status === "increasing") { | ||
colorValue.value += velocity; | ||
if (colorValue.value > max) { | ||
if (!colorValue.loops) { | ||
colorValue.loops = 0; | ||
} | ||
colorValue.loops++; | ||
if (decrease) { | ||
colorValue.status = "decreasing"; | ||
colorValue.value -= colorValue.value % max; | ||
} | ||
} | ||
} | ||
else { | ||
colorValue.value -= velocity; | ||
if (colorValue.value < 0) { | ||
if (!colorValue.loops) { | ||
colorValue.loops = 0; | ||
} | ||
colorValue.loops++; | ||
colorValue.status = "increasing"; | ||
colorValue.value += colorValue.value; | ||
} | ||
} | ||
if (colorValue.velocity && decay !== 1) { | ||
colorValue.velocity *= decay; | ||
} | ||
if (colorValue.value > max) { | ||
colorValue.value %= max; | ||
} | ||
} | ||
function updateStrokeColor(particle, delta) { | ||
if (!particle.strokeColor || !particle.strokeAnimation) { | ||
return; | ||
} | ||
const h = particle.strokeColor.h; | ||
if (h) { | ||
updateColorValue(delta, h, particle.strokeAnimation.h, 360, false); | ||
} | ||
const s = particle.strokeColor.s; | ||
if (s) { | ||
updateColorValue(delta, s, particle.strokeAnimation.s, 100, true); | ||
} | ||
const l = particle.strokeColor.l; | ||
if (l) { | ||
updateColorValue(delta, l, particle.strokeAnimation.l, 100, true); | ||
} | ||
} | ||
import { getHslAnimationFromHsl, getRangeValue, itemFromSingleOrMultiple, rangeColorToHsl, } from "@tsparticles/engine"; | ||
import { updateStrokeColor } from "./Utils"; | ||
export class StrokeColorUpdater { | ||
@@ -67,9 +8,8 @@ constructor(container) { | ||
init(particle) { | ||
var _a, _b, _c; | ||
const container = this.container; | ||
const stroke = itemFromSingleOrMultiple(particle.options.stroke, particle.id, particle.options.reduceDuplicates); | ||
const container = this.container, options = particle.options; | ||
const stroke = itemFromSingleOrMultiple(options.stroke, particle.id, options.reduceDuplicates); | ||
particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio; | ||
particle.strokeOpacity = getRangeValue((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1); | ||
particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation; | ||
const strokeHslColor = (_c = rangeColorToHsl(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor(); | ||
particle.strokeOpacity = getRangeValue(stroke.opacity ?? 1); | ||
particle.strokeAnimation = stroke.color?.animation; | ||
const strokeHslColor = rangeColorToHsl(stroke.color) ?? particle.getFillColor(); | ||
if (strokeHslColor) { | ||
@@ -80,10 +20,9 @@ particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor); | ||
isEnabled(particle) { | ||
var _a, _b, _c; | ||
const color = particle.strokeAnimation; | ||
const color = particle.strokeAnimation, { strokeColor } = particle; | ||
return (!particle.destroyed && | ||
!particle.spawning && | ||
!!color && | ||
((((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable) || | ||
(((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable) || | ||
(((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable))); | ||
((strokeColor?.h.value !== undefined && strokeColor.h.enable) || | ||
(strokeColor?.s.value !== undefined && strokeColor.s.enable) || | ||
(strokeColor?.l.value !== undefined && strokeColor.l.enable))); | ||
} | ||
@@ -90,0 +29,0 @@ update(particle, delta) { |
{ | ||
"name": "@tsparticles/updater-stroke-color", | ||
"version": "3.0.0-alpha.1", | ||
"version": "3.0.0-beta.0", | ||
"description": "tsParticles particles stroke color updater", | ||
@@ -76,8 +76,9 @@ "homepage": "https://particles.js.org", | ||
"types": "types/index.d.ts", | ||
"sideEffects": false, | ||
"dependencies": { | ||
"@tsparticles/engine": "^3.0.0-beta.0" | ||
}, | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"dependencies": { | ||
"@tsparticles/engine": "^3.0.0-alpha.1" | ||
} | ||
} | ||
} |
@@ -5,5 +5,5 @@ [![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org) | ||
[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-updater-stroke-color/badge)](https://www.jsdelivr.com/package/npm/tsparticles-updater-stroke-color) | ||
[![npmjs](https://badge.fury.io/js/tsparticles-updater-stroke-color.svg)](https://www.npmjs.com/package/tsparticles-updater-stroke-color) | ||
[![npmjs](https://img.shields.io/npm/dt/tsparticles-updater-stroke-color)](https://www.npmjs.com/package/tsparticles-updater-stroke-color) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) | ||
[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/updater-stroke-color/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/updater-stroke-color) | ||
[![npmjs](https://badge.fury.io/js/@tsparticles/updater-stroke-color.svg)](https://www.npmjs.com/package/@tsparticles/updater-stroke-color) | ||
[![npmjs](https://img.shields.io/npm/dt/@tsparticles/updater-stroke-color)](https://www.npmjs.com/package/@tsparticles/updater-stroke-color) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni) | ||
@@ -30,3 +30,3 @@ [tsParticles](https://github.com/matteobruni/tsparticles) updater plugin for stroke color animations. | ||
(async () => { | ||
await loadStrokeColorUpdater(); | ||
await loadStrokeColorUpdater(tsParticles); | ||
@@ -47,3 +47,3 @@ await tsParticles.load({ | ||
```shell | ||
$ npm install tsparticles-updater-stroke-color | ||
$ npm install @tsparticles/updater-stroke-color | ||
``` | ||
@@ -54,3 +54,3 @@ | ||
```shell | ||
$ yarn add tsparticles-updater-stroke-color | ||
$ yarn add @tsparticles/updater-stroke-color | ||
``` | ||
@@ -61,6 +61,8 @@ | ||
```javascript | ||
const { tsParticles } = require("tsparticles-engine"); | ||
const { loadStrokeColorUpdater } = require("tsparticles-updater-stroke-color"); | ||
const { tsParticles } = require("@tsparticles/engine"); | ||
const { loadStrokeColorUpdater } = require("@tsparticles/updater-stroke-color"); | ||
loadStrokeColorUpdater(tsParticles); | ||
(async () => { | ||
await loadStrokeColorUpdater(tsParticles); | ||
})(); | ||
``` | ||
@@ -71,6 +73,8 @@ | ||
```javascript | ||
import { tsParticles } from "tsparticles-engine"; | ||
import { loadStrokeColorUpdater } from "tsparticles-updater-stroke-color"; | ||
import { tsParticles } from "@tsparticles/engine"; | ||
import { loadStrokeColorUpdater } from "@tsparticles/updater-stroke-color"; | ||
loadStrokeColorUpdater(tsParticles); | ||
(async () => { | ||
await loadStrokeColorUpdater(tsParticles); | ||
})(); | ||
``` |
@@ -7,3 +7,3 @@ /*! | ||
* How to use? : Check the GitHub README | ||
* v3.0.0-alpha.1 | ||
* v3.0.0-beta.0 | ||
*/ | ||
@@ -95,3 +95,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
__webpack_require__.d(__webpack_exports__, { | ||
"loadStrokeColorUpdater": () => (/* binding */ loadStrokeColorUpdater) | ||
loadStrokeColorUpdater: () => (/* binding */ loadStrokeColorUpdater) | ||
}); | ||
@@ -101,13 +101,20 @@ | ||
var engine_root_window_ = __webpack_require__(533); | ||
;// CONCATENATED MODULE: ./dist/browser/StrokeColorUpdater.js | ||
;// CONCATENATED MODULE: ./dist/browser/Utils.js | ||
function updateColorValue(delta, value, valueAnimation, max, decrease) { | ||
var _a, _b; | ||
const colorValue = value; | ||
if (!colorValue || !colorValue.enable || colorValue.loops !== undefined && colorValue.maxLoops !== undefined && colorValue.maxLoops > 0 && colorValue.loops >= colorValue.maxLoops) { | ||
function updateColorValue(delta, colorValue, valueAnimation, max, decrease) { | ||
if (!colorValue || !valueAnimation.enable || (colorValue.maxLoops ?? 0) > 0 && (colorValue.loops ?? 0) > (colorValue.maxLoops ?? 0)) { | ||
return; | ||
} | ||
if (!colorValue.time) { | ||
colorValue.time = 0; | ||
} | ||
if ((colorValue.delayTime ?? 0) > 0 && colorValue.time < (colorValue.delayTime ?? 0)) { | ||
colorValue.time += delta.value; | ||
} | ||
if ((colorValue.delayTime ?? 0) > 0 && colorValue.time < (colorValue.delayTime ?? 0)) { | ||
return; | ||
} | ||
const offset = (0,engine_root_window_.randomInRange)(valueAnimation.offset), | ||
velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6, | ||
decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1; | ||
velocity = (colorValue.velocity ?? 0) * delta.factor + offset * 3.6, | ||
decay = colorValue.decay ?? 1; | ||
if (!decrease || colorValue.status === "increasing") { | ||
@@ -147,15 +154,25 @@ colorValue.value += velocity; | ||
} | ||
const h = particle.strokeColor.h; | ||
const { | ||
h, | ||
s, | ||
l | ||
} = particle.strokeColor, | ||
{ | ||
h: hAnimation, | ||
s: sAnimation, | ||
l: lAnimation | ||
} = particle.strokeAnimation; | ||
if (h) { | ||
updateColorValue(delta, h, particle.strokeAnimation.h, 360, false); | ||
updateColorValue(delta, h, hAnimation, 360, false); | ||
} | ||
const s = particle.strokeColor.s; | ||
if (s) { | ||
updateColorValue(delta, s, particle.strokeAnimation.s, 100, true); | ||
updateColorValue(delta, s, sAnimation, 100, true); | ||
} | ||
const l = particle.strokeColor.l; | ||
if (l) { | ||
updateColorValue(delta, l, particle.strokeAnimation.l, 100, true); | ||
updateColorValue(delta, l, lAnimation, 100, true); | ||
} | ||
} | ||
;// CONCATENATED MODULE: ./dist/browser/StrokeColorUpdater.js | ||
class StrokeColorUpdater { | ||
@@ -166,9 +183,9 @@ constructor(container) { | ||
init(particle) { | ||
var _a, _b, _c; | ||
const container = this.container; | ||
const stroke = (0,engine_root_window_.itemFromSingleOrMultiple)(particle.options.stroke, particle.id, particle.options.reduceDuplicates); | ||
const container = this.container, | ||
options = particle.options; | ||
const stroke = (0,engine_root_window_.itemFromSingleOrMultiple)(options.stroke, particle.id, options.reduceDuplicates); | ||
particle.strokeWidth = (0,engine_root_window_.getRangeValue)(stroke.width) * container.retina.pixelRatio; | ||
particle.strokeOpacity = (0,engine_root_window_.getRangeValue)((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1); | ||
particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation; | ||
const strokeHslColor = (_c = (0,engine_root_window_.rangeColorToHsl)(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor(); | ||
particle.strokeOpacity = (0,engine_root_window_.getRangeValue)(stroke.opacity ?? 1); | ||
particle.strokeAnimation = stroke.color?.animation; | ||
const strokeHslColor = (0,engine_root_window_.rangeColorToHsl)(stroke.color) ?? particle.getFillColor(); | ||
if (strokeHslColor) { | ||
@@ -179,5 +196,7 @@ particle.strokeColor = (0,engine_root_window_.getHslAnimationFromHsl)(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor); | ||
isEnabled(particle) { | ||
var _a, _b, _c; | ||
const color = particle.strokeAnimation; | ||
return !particle.destroyed && !particle.spawning && !!color && (((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable || ((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable || ((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable); | ||
const color = particle.strokeAnimation, | ||
{ | ||
strokeColor | ||
} = particle; | ||
return !particle.destroyed && !particle.spawning && !!color && (strokeColor?.h.value !== undefined && strokeColor.h.enable || strokeColor?.s.value !== undefined && strokeColor.s.enable || strokeColor?.l.value !== undefined && strokeColor.l.enable); | ||
} | ||
@@ -193,4 +212,4 @@ update(particle, delta) { | ||
async function loadStrokeColorUpdater(engine) { | ||
await engine.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container)); | ||
async function loadStrokeColorUpdater(engine, refresh = true) { | ||
await engine.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container), refresh); | ||
} | ||
@@ -197,0 +216,0 @@ })(); |
/*! For license information please see tsparticles.updater.stroke-color.min.js.LICENSE.txt */ | ||
!function(o,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var t="object"==typeof exports?e(require("@tsparticles/engine")):e(o.window);for(var r in t)("object"==typeof exports?exports:o)[r]=t[r]}}(this,(o=>(()=>{"use strict";var e={533:e=>{e.exports=o}},t={};function r(o){var i=t[o];if(void 0!==i)return i.exports;var n=t[o]={exports:{}};return e[o](n,n.exports,r),n.exports}r.d=(o,e)=>{for(var t in e)r.o(e,t)&&!r.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:e[t]})},r.o=(o,e)=>Object.prototype.hasOwnProperty.call(o,e),r.r=o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})};var i={};return(()=>{r.r(i),r.d(i,{loadStrokeColorUpdater:()=>n});var o=r(533);function e(e,t,r,i,n){var l,s;const a=t;if(!a||!a.enable||void 0!==a.loops&&void 0!==a.maxLoops&&a.maxLoops>0&&a.loops>=a.maxLoops)return;const u=(0,o.randomInRange)(r.offset),d=(null!==(l=t.velocity)&&void 0!==l?l:0)*e.factor+3.6*u,c=null!==(s=t.decay)&&void 0!==s?s:1;n&&"increasing"!==a.status?(a.value-=d,a.value<0&&(a.loops||(a.loops=0),a.loops++,a.status="increasing",a.value+=a.value)):(a.value+=d,a.value>i&&(a.loops||(a.loops=0),a.loops++,n&&(a.status="decreasing",a.value-=a.value%i))),a.velocity&&1!==c&&(a.velocity*=c),a.value>i&&(a.value%=i)}class t{constructor(o){this.container=o}init(e){var t,r,i;const n=this.container,l=(0,o.itemFromSingleOrMultiple)(e.options.stroke,e.id,e.options.reduceDuplicates);e.strokeWidth=(0,o.getRangeValue)(l.width)*n.retina.pixelRatio,e.strokeOpacity=(0,o.getRangeValue)(null!==(t=l.opacity)&&void 0!==t?t:1),e.strokeAnimation=null===(r=l.color)||void 0===r?void 0:r.animation;const s=null!==(i=(0,o.rangeColorToHsl)(l.color))&&void 0!==i?i:e.getFillColor();s&&(e.strokeColor=(0,o.getHslAnimationFromHsl)(s,e.strokeAnimation,n.retina.reduceFactor))}isEnabled(o){var e,t,r;const i=o.strokeAnimation;return!o.destroyed&&!o.spawning&&!!i&&(void 0!==(null===(e=o.strokeColor)||void 0===e?void 0:e.h.value)&&o.strokeColor.h.enable||void 0!==(null===(t=o.strokeColor)||void 0===t?void 0:t.s.value)&&o.strokeColor.s.enable||void 0!==(null===(r=o.strokeColor)||void 0===r?void 0:r.l.value)&&o.strokeColor.l.enable)}update(o,t){this.isEnabled(o)&&function(o,t){if(!o.strokeColor||!o.strokeAnimation)return;const r=o.strokeColor.h;r&&e(t,r,o.strokeAnimation.h,360,!1);const i=o.strokeColor.s;i&&e(t,i,o.strokeAnimation.s,100,!0);const n=o.strokeColor.l;n&&e(t,n,o.strokeAnimation.l,100,!0)}(o,t)}}async function n(o){await o.addParticleUpdater("strokeColor",(o=>new t(o)))}})(),i})())); | ||
!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],o);else{var t="object"==typeof exports?o(require("@tsparticles/engine")):o(e.window);for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(this,(e=>(()=>{"use strict";var o={533:o=>{o.exports=e}},t={};function r(e){var i=t[e];if(void 0!==i)return i.exports;var n=t[e]={exports:{}};return o[e](n,n.exports,r),n.exports}r.d=(e,o)=>{for(var t in o)r.o(o,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},r.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{r.r(i),r.d(i,{loadStrokeColorUpdater:()=>n});var e=r(533);function o(o,t,r,i,n){if(!t||!r.enable||(t.maxLoops??0)>0&&(t.loops??0)>(t.maxLoops??0))return;if(t.time||(t.time=0),(t.delayTime??0)>0&&t.time<(t.delayTime??0)&&(t.time+=o.value),(t.delayTime??0)>0&&t.time<(t.delayTime??0))return;const a=(0,e.randomInRange)(r.offset),l=(t.velocity??0)*o.factor+3.6*a,s=t.decay??1;n&&"increasing"!==t.status?(t.value-=l,t.value<0&&(t.loops||(t.loops=0),t.loops++,t.status="increasing",t.value+=t.value)):(t.value+=l,t.value>i&&(t.loops||(t.loops=0),t.loops++,n&&(t.status="decreasing",t.value-=t.value%i))),t.velocity&&1!==s&&(t.velocity*=s),t.value>i&&(t.value%=i)}class t{constructor(e){this.container=e}init(o){const t=this.container,r=o.options,i=(0,e.itemFromSingleOrMultiple)(r.stroke,o.id,r.reduceDuplicates);o.strokeWidth=(0,e.getRangeValue)(i.width)*t.retina.pixelRatio,o.strokeOpacity=(0,e.getRangeValue)(i.opacity??1),o.strokeAnimation=i.color?.animation;const n=(0,e.rangeColorToHsl)(i.color)??o.getFillColor();n&&(o.strokeColor=(0,e.getHslAnimationFromHsl)(n,o.strokeAnimation,t.retina.reduceFactor))}isEnabled(e){const o=e.strokeAnimation,{strokeColor:t}=e;return!e.destroyed&&!e.spawning&&!!o&&(void 0!==t?.h.value&&t.h.enable||void 0!==t?.s.value&&t.s.enable||void 0!==t?.l.value&&t.l.enable)}update(e,t){this.isEnabled(e)&&function(e,t){if(!e.strokeColor||!e.strokeAnimation)return;const{h:r,s:i,l:n}=e.strokeColor,{h:a,s:l,l:s}=e.strokeAnimation;r&&o(t,r,a,360,!1),i&&o(t,i,l,100,!0),n&&o(t,n,s,100,!0)}(e,t)}}async function n(e,o=!0){await e.addParticleUpdater("strokeColor",(e=>new t(e)),o)}})(),i})())); |
@@ -1,8 +0,1 @@ | ||
/*! | ||
* Author : Matteo Bruni | ||
* MIT license: https://opensource.org/licenses/MIT | ||
* Demo / Generator : https://particles.js.org/ | ||
* GitHub : https://www.github.com/matteobruni/tsparticles | ||
* How to use? : Check the GitHub README | ||
* v3.0.0-alpha.1 | ||
*/ | ||
/*! tsParticles Stroke Color Updater v3.0.0-beta.0 by Matteo Bruni */ |
import type { Engine } from "@tsparticles/engine"; | ||
export declare function loadStrokeColorUpdater(engine: Engine): Promise<void>; | ||
export declare function loadStrokeColorUpdater(engine: Engine, refresh?: boolean): Promise<void>; |
@@ -1,5 +0,3 @@ | ||
import type { Container, HslAnimation, IDelta, IParticleUpdater, Particle } from "@tsparticles/engine"; | ||
type StrokeParticle = Particle & { | ||
strokeAnimation?: HslAnimation; | ||
}; | ||
import { type Container, type IDelta, type IParticleUpdater, type Particle } from "@tsparticles/engine"; | ||
import type { StrokeParticle } from "./Types"; | ||
export declare class StrokeColorUpdater implements IParticleUpdater { | ||
@@ -12,2 +10,1 @@ private readonly container; | ||
} | ||
export {}; |
@@ -14,6 +14,6 @@ (function (factory) { | ||
const StrokeColorUpdater_1 = require("./StrokeColorUpdater"); | ||
async function loadStrokeColorUpdater(engine) { | ||
await engine.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater_1.StrokeColorUpdater(container)); | ||
async function loadStrokeColorUpdater(engine, refresh = true) { | ||
await engine.addParticleUpdater("strokeColor", (container) => new StrokeColorUpdater_1.StrokeColorUpdater(container), refresh); | ||
} | ||
exports.loadStrokeColorUpdater = loadStrokeColorUpdater; | ||
}); |
@@ -7,3 +7,3 @@ (function (factory) { | ||
else if (typeof define === "function" && define.amd) { | ||
define(["require", "exports", "@tsparticles/engine"], factory); | ||
define(["require", "exports", "@tsparticles/engine", "./Utils"], factory); | ||
} | ||
@@ -15,62 +15,3 @@ })(function (require, exports) { | ||
const engine_1 = require("@tsparticles/engine"); | ||
function updateColorValue(delta, value, valueAnimation, max, decrease) { | ||
var _a, _b; | ||
const colorValue = value; | ||
if (!colorValue || | ||
!colorValue.enable || | ||
(colorValue.loops !== undefined && | ||
colorValue.maxLoops !== undefined && | ||
colorValue.maxLoops > 0 && | ||
colorValue.loops >= colorValue.maxLoops)) { | ||
return; | ||
} | ||
const offset = (0, engine_1.randomInRange)(valueAnimation.offset), velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6, decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1; | ||
if (!decrease || colorValue.status === "increasing") { | ||
colorValue.value += velocity; | ||
if (colorValue.value > max) { | ||
if (!colorValue.loops) { | ||
colorValue.loops = 0; | ||
} | ||
colorValue.loops++; | ||
if (decrease) { | ||
colorValue.status = "decreasing"; | ||
colorValue.value -= colorValue.value % max; | ||
} | ||
} | ||
} | ||
else { | ||
colorValue.value -= velocity; | ||
if (colorValue.value < 0) { | ||
if (!colorValue.loops) { | ||
colorValue.loops = 0; | ||
} | ||
colorValue.loops++; | ||
colorValue.status = "increasing"; | ||
colorValue.value += colorValue.value; | ||
} | ||
} | ||
if (colorValue.velocity && decay !== 1) { | ||
colorValue.velocity *= decay; | ||
} | ||
if (colorValue.value > max) { | ||
colorValue.value %= max; | ||
} | ||
} | ||
function updateStrokeColor(particle, delta) { | ||
if (!particle.strokeColor || !particle.strokeAnimation) { | ||
return; | ||
} | ||
const h = particle.strokeColor.h; | ||
if (h) { | ||
updateColorValue(delta, h, particle.strokeAnimation.h, 360, false); | ||
} | ||
const s = particle.strokeColor.s; | ||
if (s) { | ||
updateColorValue(delta, s, particle.strokeAnimation.s, 100, true); | ||
} | ||
const l = particle.strokeColor.l; | ||
if (l) { | ||
updateColorValue(delta, l, particle.strokeAnimation.l, 100, true); | ||
} | ||
} | ||
const Utils_1 = require("./Utils"); | ||
class StrokeColorUpdater { | ||
@@ -81,9 +22,8 @@ constructor(container) { | ||
init(particle) { | ||
var _a, _b, _c; | ||
const container = this.container; | ||
const stroke = (0, engine_1.itemFromSingleOrMultiple)(particle.options.stroke, particle.id, particle.options.reduceDuplicates); | ||
const container = this.container, options = particle.options; | ||
const stroke = (0, engine_1.itemFromSingleOrMultiple)(options.stroke, particle.id, options.reduceDuplicates); | ||
particle.strokeWidth = (0, engine_1.getRangeValue)(stroke.width) * container.retina.pixelRatio; | ||
particle.strokeOpacity = (0, engine_1.getRangeValue)((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1); | ||
particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation; | ||
const strokeHslColor = (_c = (0, engine_1.rangeColorToHsl)(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor(); | ||
particle.strokeOpacity = (0, engine_1.getRangeValue)(stroke.opacity ?? 1); | ||
particle.strokeAnimation = stroke.color?.animation; | ||
const strokeHslColor = (0, engine_1.rangeColorToHsl)(stroke.color) ?? particle.getFillColor(); | ||
if (strokeHslColor) { | ||
@@ -94,10 +34,9 @@ particle.strokeColor = (0, engine_1.getHslAnimationFromHsl)(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor); | ||
isEnabled(particle) { | ||
var _a, _b, _c; | ||
const color = particle.strokeAnimation; | ||
const color = particle.strokeAnimation, { strokeColor } = particle; | ||
return (!particle.destroyed && | ||
!particle.spawning && | ||
!!color && | ||
((((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable) || | ||
(((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable) || | ||
(((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable))); | ||
((strokeColor?.h.value !== undefined && strokeColor.h.enable) || | ||
(strokeColor?.s.value !== undefined && strokeColor.s.enable) || | ||
(strokeColor?.l.value !== undefined && strokeColor.l.enable))); | ||
} | ||
@@ -108,3 +47,3 @@ update(particle, delta) { | ||
} | ||
updateStrokeColor(particle, delta); | ||
(0, Utils_1.updateStrokeColor)(particle, delta); | ||
} | ||
@@ -111,0 +50,0 @@ } |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
314670
27
691
75
1