search

ZachSaucier / Disintegrate

A small JS library to break DOM elements into animated Canvas particles.
MIT License
320 stars 47 forks source link

Having trouble getting library working #8

Open InfinitDarknes opened 3 weeks ago

InfinitDarknes commented 3 weeks ago

Hi Is this how this library supposed to work ? i have a to do list when you right click on one of the to do's and click delete on custom context menu this code will run witch will apply the needed data- attribute for this library and then initiates disintegrate.init() but for my case nothing happens. const Element = document.getElementById(ID); Element.setAttribute("data-dis-type", "self-container"); disintegrate.init(); i included both dependencies at end of my html file like this `

`

ZachSaucier commented 3 weeks ago

Hey InfinitDarknes. The demos still work. It's likely a setup issue. How about you start from one of the demos and then progress to what you're trying to do?

InfinitDarknes commented 2 weeks ago

Hey InfinitDarknes. The demos still work. It's likely a setup issue. How about you start from one of the demos and then progress to what you're trying to do?

function DeleteTask(ID) { if (AppObj.SelectMode) { ReturnSelectedTasks().forEach((Task) => { const Element = document.querySelector(Task.ID); Element.style.animation = "DeleteAnimation 700ms"; AllTasksArray.splice(FindIndexOfTask(Task.ID), 1); Task.Selected = false; }); } else { const Element = document.getElementById(ID); Element.setAttribute("data-dis-type", "self-contained"); Element.classList.add("clickable"); disintegrate.init(); // Element.style.animation = "DeleteAnimation 700ms"; let Index = FindIndexOfTask(ID); AllTasksArray.splice(Index, 1); } SaveAll(); setTimeout(() => { UpdateInbox(); }, 500); } Hi , not sure what you exactly mean by starting from demos i added the dependencies to my project witch are the disintegrator.min.js and htmlcanvas and then I set the "self-contained" attribute to the element i want to remove followed by calling the disintegrator.init() method and all it does is what you see in this picture , it deletes most part of the element all at once before my setTimeout kicks in and removes it completely , perhaps there are some css files i need to link ?

Here is how it looks when i use the library , the upper element is normal task and below is after it is deleted by disintegrator image

ZachSaucier commented 2 weeks ago

Sorry, without a minimal demo there's not much I can do to try and help you

InfinitDarknes commented 17 hours ago

Hello again i got the demo working first i made this small dummy project with an image that gets disintegrated when you click on it here are the HTML/JS code for it and it works perfectly i am able to see some console.logs that indicates the library is working and i can use it

disintegrate.init();
document.querySelector("img").addEventListener("click", (Event) => {
  const DisObject = disintegrate.getDisObj(Event.target);
  disintegrate.createSimultaneousParticles(DisObject);
  Event.target.remove();
});
const thanosSnap = function () {
  this.name = "thanosSnap";
  this.animationDuration = 1500;
  this.size = 3;
  this.speedX = Math.random();
  this.speedY = Math.random() * -1;
  this.startX = 0; // Add startX property
  this.startY = 0; // Add startY property
  this.start = 0; // Add start property
  this.rgbArray = [255, 0, 0]; // Define rgbArray with sample values
  this.first = true;
  this.draw = (ctx, percentComplete) => {
    if (this.first) {
      this.startY += (Math.random() - 0.5) * 10;
      this.startX += (Math.random() - 0.5) * 10;
      this.first = false;
    }
    ctx.beginPath();
    ctx.fillRect(this.startX - this.size / 2, this.startY - this.size / 2, this.size, this.size);
    const r = this.rgbArray[0];
    const g = this.rgbArray[1];
    const b = this.rgbArray[2];
    const a = 1 - percentComplete;
    ctx.fillStyle = `rgba(${r}, ${g}, ${b},${a})`;
    ctx.fill();
    this.speedX *= 1.07;
    this.speedY *= 1.07;
    this.size *= 0.95;
    this.startX += this.speedX;
    this.startY += this.speedY;
  };
};
disintegrate.addParticleType(thanosSnap);

And the HTML so you can see order of files

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <img src="NSFWBG.jpg" data-dis-type="simultaneous" data-dis-particle-type="thanosSnap" data-dis-reduction-factor="35" alt="" />
  </body>
  <script src="html2canvas.min.js" defer></script>
  <script src="disintegrate.js" defer></script>
  <script src="code.js" defer></script>
</html>

But then i try to use on my real project witch is my to do list i do everything exactly write except for one thing and that is initializing the disintegrate.init() I know this because when I manually call it on console and then proceed to use disintegrator it works fine but for whatever reason when i put disintegrate.init() on top of my JS file or window.onloadit will not work.

JS codes

let Strings;
let TextArray;
let ThemeObj;
let DPStrings; // Date Picker Strings
window.onload = async function () {
  Strings = await FetchAppJsonFiles("Json/Lang.json");
  ThemeObj = await FetchAppJsonFiles("Json/Theme.json");
  TextArray = await FetchAppJsonFiles("Json/TextArray.json");
  DPStrings = await FetchAppJsonFiles("Json/DatePickerStrings.json");
  InitializeApp();
};

function InitializeApp() {
  disintegrate.init();
  LoadSave();
  PreLoader();
  LoadCurrentDate();
  FixDirection();
  LoadSavedNotes();
  LoadAppComponents();
  ShowDateAndClock();
  setInterval(GetTime, 1000);
  setInterval(ShowDateAndClock, 1000);
  InsertRules();
  AutoWriter();
}

This is the top my file named Engine.js I have tried it in InitializeApp() and window.onload as well as simply putting it on top of the file.

and here is the HTML code

<script type="text/javascript" src="JavaScript/AppObj.js" defer></script>
<script type="text/javascript" src="Libraries/html2canvas.min.js" defer></script>
<script type="text/javascript" src="Libraries/disintegrate.js" defer></script>
<script type="text/javascript" src="Libraries/farvardin.js-master/dist/farvardin.min.js" defer></script>
<script type="text/javascript" src="Libraries/tinymce/tinymce.min.js" defer></script>
<script src="JavaScript/Engine.js" defer></script>
<script src="JavaScript/SubApps.js" defer></script>
<script src="JavaScript/Theme.js" defer></script>
<script src="JavaScript/MessageBox.js" defer></script>
<script src="JavaScript/DatePicker.js" defer></script>
<script src="JavaScript/Settings.js" defer></script>
<script src="JavaScript/UGCM.js" defer></script>
<script src="JavaScript/TaskManager.js" defer></script>
<script src="JavaScript/ContextMenu.js" defer></script>
<script src="JavaScript/Notes.js" defer></script>
<script src="JavaScript/DOMManager.js" defer></script>
<script src="JavaScript/ModalManager.js" defer></script>

And you can watch this video to help you understand my issue better.

https://github.com/ZachSaucier/Disintegrate/assets/157070373/cb55bde1-b23d-4247-a7cf-8b8a51c9e50c

InfinitDarknes commented 16 hours ago

Update : I finally figured the problem. disintegrate.init() looks and fetches for disintegratable elements so bassically everytime i add/remove on of my to dos i have to call it so it will include them. and it works fine but the problem is it is so CPU and RAM intensive when the number of elements exceeds 5 or 6 it is impossible to work with the app and eventually the windows will give a black screen. you have any idea about this ?