Hi,
As you know, when a property value changes, the “update” function is executed again, this should update the values of the properties, but it does not, I mean, no matter how many changes happen, the value of the property will stick with the first one. I don’t use any flag that prevents any part of the function from being executed again and again, any Ideas? is this a bug?
more info about what are you doing or your code can help people to help you. the update function is called with updated properties. if you don’t see them it’s a problem in your code or a bug to report to bubble with a reproduction example
Thank you @dorilama و
I have made some attempts since I published the post, and I am still surprised by the unexpected results that occur, which differ from the results that occur in an external IDE.
Now the value of the property began to change, but it now sticks to the highest value it obtained from the input without getting smaller if the value of the input became smaller.
In a canvas, circles can be drawn, and the radius of these circles is determined by a property, I use slider input for this, so when the value of the input increases, the circles become bigger, but when the value of the value of the input decrease, the size of the circles stick with biggest size.
In the following snippet, I shortened the code as much as possible while the problem remained:
function(instance, properties, context) {
const ctx = instance.data.context;
const radius = properties.radius;
instance.data.canvas.addEventListener('mousedown', startDrawing);
instance.data.canvas.addEventListener('mousemove', draw);
instance.data.canvas.addEventListener('mouseup', endDrawing);
instance.data.canvas.addEventListener('mouseout', endDrawing);
// Variables to track drawing state
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// start drawing
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX || e.touches[0].clientX, e.offsetY || e.touches[0].clientY];
}
// draw a circle between two points
// r is the radius
function drawCircle(x1, y1, x2, y2,r) {
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
const step = 5; // density of circles
const steps = Math.ceil(distance / step);
for (let i = 0; i <= steps; i++) {
const progress = i / steps;
const xPos = x1 + (x2 - x1) * progress;
const yPos = y1 + (y2 - y1) * progress;
ctx.beginPath();
ctx.arc(xPos, yPos, r, 0, Math.PI * 2);
ctx.fillStyle = properties.color;
ctx.fill();
}
}
// draw
function draw(e) {
if (!isDrawing) return;
e.preventDefault();
const x = e.offsetX || e.touches[0].clientX;
const y = e.offsetY || e.touches[0].clientY;
drawCircle(lastX, lastY, x, y, radius);
lastX = x;
lastY = y;
}
// end drawing
function endDrawing() {
if (isDrawing) {
isDrawing = false;
}
}
}
I hope this is clear and I appreciate any suggestions.
you have multiple problems.
because the update function will run multiple time you are adding event listeners multiple times. you need to add a guard to add them only once.
you get the update property but your process of drawing on the canvas does not reset the drawing so of course you don’t see the smaller circle, it’s because it’s covered by the previous big circle. if you follow some tutorial about drawing on the canvas and play a bit with it outside bubble you should be able to fix the code.
@dorilama The problem of the event listeners is because I have simplified the code for demonstration, but I managed them like you say I my original code.
The code is work as expected outside bubble: Canvas Drawing App (w3spaces.com)
I mean when the input’s value increased the circles become bigger (drawn lines become thicker), and when the input’s value decreased the circles become smaller (drawn lines become thinner).
but in bubble, while the the drawn lines become thicker when input’s value increased , when the input’s value decreased the drawn lines still as thick as the thickest line drawn.
Do you still think this issue is because my code?
if you want to be sure log the properties to the console and check that the values are changing. if that is ok then it is something in your code
They are changing indeed, and I need to figure out what is in my code that makes it work outside Bubble but not inside it.
from a quick look I suppose your event handler will always reference the initial radius (assuming you are not adding multiple listeners in your real code like you said)
When I add a flag, the radius will stick with the initial radius, but when, and when Instead of the flag I remove the event listener and then re-add it, multi-layer circles will be drawn.
I mean when I start with 10 for the radius, one layer of circles will be drawn, and if I increase the radius to maybe 15, two layers of circles will be drawn on top of each other (one of them at the radius of 15 and the other at the radius of 10), so the smaller circles will not be seen because of the bigger circles (as you mentioned earlier), I added some transparency so I saw them.
and if I decreased the radius to maybe 5, three layer of circles will be drawn, one at 5r, and one at 10r, and one at 15r, and of course, the bigger circles will not let me see the smaller circles.
Also if the initialize value of the radius was maybe 10, and before drawing I decreased it to maybe 5, the same thing will happen.
I can’t find a way to manage the event listeners besides the flag or removing and then adding, I thought the second should work if the problem is because of the event listeners.
I am now trying to make an array of the drawn circles so I can make a process of clear-draw!