Skip to main content
Inspiring
February 27, 2022
Question

HTML5 Canvas - Remove Child Questions

  • February 27, 2022
  • 1 reply
  • 1858 views

I am adding a MC symbol to another MC symbol as a child.  This is one of six possible MCs that can be added as a child to that parent.

 

createjs.Touch.enable(stage);

var Lenses = [this.ConcaveSphereLens, this.ConvexSphereLens, this.ConcaveCylinderLens, this.ConvexCylinderLens, this.PrismLens, this.AccessoryLens];

	// Apply the same code for each lens MovieClip symbol in the array Lenses with a For Loop
for(var i = 0; i<Lenses.length; i++){	
	Lenses[i].on("mousedown", onMouseDown.bind(this));
	Lenses[i].on("pressmove", onMouseMove.bind(this));
	Lenses[i].on("pressup", onMouseUp.bind(this));
	Lenses[i].LFLensHolder = this.LFLensHolder;
	Lenses[i].lensParentLeft = this.lensParentLeft;
	Lenses[i].originX = Lenses[i].x;
	Lenses[i].originY = Lenses[i].y;
}

function onMouseDown(evt){
	var item = evt.currentTarget;
	item.offset = {x:0, y:0};
	var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
	item.offset.x = pt.x - item.x;
	item.offset.y = pt.y - item.y;
	item.drag = true;
}

function onMouseUp(evt){
	var item = evt.currentTarget;
	item.drag = false;
	var pt = item.localToLocal(item.dot.x, item.dot.y, item.LFLensHolder.hitBox);
	if(item.LFLensHolder.hitBox.hitTest(pt.x, pt.y) ){
		item.x = item.LFLensHolder.x;
		item.y = item.LFLensHolder.y;
		item.lensParentLeft.addChild(item);
		item.x-=item.lensParentLeft.x-9.5;
		item.y-=item.lensParentLeft.y-9.5;
		item.scale = 0.54;
	}
}

function onMouseMove(evt){
	var item = evt.currentTarget;
	if (item.drag){
		var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
		item.x = pt.x - item.offset.x;
		item.y = pt.y - item.offset.y;
	}
}

 

Now I need to enable the child/children to be removed from the parent when either:

 

  • The child is dragged away from item.LFLensHolder.hitBox (or similar...) presumably in the onMouseMove function, and
  • The nested 'close' buttons in the child MCs are clicked.  Currently these 'close' buttons just move the symbol off stage, but they would also need to remove the child from the parent.  The code for the nested close buttons is:

 

this.closeLens.addEventListener("click", closeThisLens.bind(this));

function closeThisLens()
{
	this.x = -200;
	this.y = -850;
}

 

How would I do this?

    This topic has been closed for replies.

    1 reply

    kglad
    Community Expert
    Community Expert
    February 27, 2022

    you can always use:

     

    evt.currentTarget.parent.removeChild(evt.currentTarget.);  //add evt argument to closeThisLens()

     

    but you probably want to reparent the lens.

    FlatChatAuthor
    Inspiring
    February 28, 2022

    @kglad   Thanks.  Re "but you probably want to reparent the lens." does that mean I don't need to use removeChild, and just do a reparent , e.g. to the stage?  So using addChild removes from the current parent...

     

     

    kglad
    Community Expert
    Community Expert
    February 28, 2022

    yes, reparenting removes from the current parent and adds to the new parent.

     

    if you only use removeChild, the object will not be visible.