Quote from luishp on October 20, 2021, 4:51 pm

Hi @christian-giebel, DuplicateObject have some limitations as I have not found a method to change the "id" of a duplicated object once created. that's the reason I created a custom attribute: "visualneowebname". Most object commands can work with an "id" or a "visualneowebname".

This is the JavaScript code executed by DuplicateObject command:

$scope.DuplicateObject = function(objId,objName,containerId){
 //Deletes the new object if already exists.
 if($App.NAB[objName]){
  $App.NAB[objName].remove();
  delete $App.NAB[objName];
 }else{
  $("#"+objName).remove();
  delete $App.NAB[objName];
 }
 
 if($App.NAB[objId]){
  $App.NAB[objName] = $App.NAB[objId].clone().appendTo("#"+containerId);
 }else if($App[objId]){
  //Drawing
  $App.NAB[objName] = $("#"+objId).clone().appendTo("#"+containerId);
  $App.NAB[objName].attr("id", "");
 }else{
  $App.NAB[objName] = $("#"+objId).clone().appendTo("#"+containerId);
 }
 $App.NAB[objName].attr("VisualNEOWebName", objName);
 $App.NAB[objName].attr("ng-style","NAB."+objName+"_style");
 $App.NAB[objName].attr("ng-hide","NAB."+objName+"_hidden");
 $App.NAB[objName].attr("ng-disabled","NAB."+objName+"_disabled");
 
 //$App.NAB[objName].attr("id",objName);
 
 var e = document.getElementById(containerId);
 $compile(e)($scope);
 
};

I hope it helps.

Quote from Christian Giebel on October 21, 2021, 10:59 am

Thank you, Luis. I was able to solve the problem with your sources of DuplicateObject.
I created DuplicateObjectEx with an additional parameter to set the "InnerHTML".  With this change its possible to create objects with content dynamically.

I still have 2 issues:

• The numbering is little strange. The numbering of the first and the last duplicated object are mixed up. Click "duplicate" button multiple times to see the numbering captions.
• I was not able to allow dragging the duplicated objects with "neoDragInit". See "duplicate button" sources.

Quote from luishp on October 21, 2021, 2:09 pm

Thank you @christian-giebel!
I will take a look as soon as I can and will get back to you.

Regards.

Quote from Christian Giebel on October 21, 2021, 2:30 pm

Please see attached demo.

It shows an issue with duplicated objects that seem to have the wrong id attached (of its successors). This forum ticket tests the functionality of VisualNeo Web to handle dynamic objects created at runtime.

Who is interested in the issue might want to look into this demo.

Quote from luishp on October 22, 2021, 9:38 am

Hi @christian-giebel I have done an additional change to your  subroutine and now it seems to work better (see attachment)
Anyway I think the whole DuplicateObject idea as it is, is probably not a good one. It's probably better to create a completely new Container (div) at run time and then copy, transform (replacing id's) a paste the inner HTML of any other Container.
What do you think?

Regards.

Quote from Christian Giebel on October 31, 2021, 9:46 am

Thank you very much.

Now DuplicateObject works fine. Duplicated objects are now fully embedded within the VisualNeo Web Runtime and can be attached to functions and events. Thats a big step because now complex objects can be created dynamically. For example we could visualize a complex behavior tree from a database query.

[It's probably better to create a completely new Container ... use inner HTML of other containers]

I think DublicatedObject can now be used to create a new container dynamically and fill it with innerHTML from other sources.

Quote from luishp on October 31, 2021, 1:31 pm

Now DuplicateObject works fine.

Great. Then I'm going to replace the core command with the new code.
Thanks!!

Quote from Christian Giebel on October 31, 2021, 5:51 pm

The command "SetObjectHTML" in your modified demo above does not add the "HTML" into the div of the duplicated container. It adds an extra "div" outside of the duplicated object. This leads to strange behavior. I solved it with a new string parameter in "DuplicateObjectEx" that expects as input the HTML that should be added to the "div" of the duplicated object.

See "$App.NAB[objName].attr("style", objStyle);"

The new string parameter "objStyle" adds the HTML. Following you see a sample with 4 parameters
DuplicateObjectEx "Container2" "myContainer[n]" "Container1" "position:absolute;width:156px;height:121px;padding:3px;border-width: 1px; border-style: solid;font-family:verdana"

So the new DuplicateObjectEx looks like this:

if($App.NAB[objName]){
$App.NAB[objName].remove();
delete $App.NAB[objName];
}else{
$("#"+objName).remove();
delete $App.NAB[objName];
}

if($App.NAB[objId]){
$App.NAB[objName] = $App.NAB[objId].clone().appendTo("#"+containerId);
}else if($App[objId]){
//Drawing
$App.NAB[objName] = $("#"+objId).clone().appendTo("#"+containerId);
$App.NAB[objName].attr("id", "");
}else{

$App.NAB[objName] = $("#"+objId).clone().appendTo("#"+containerId);
$App.NAB[objName].attr("id", objName);
$App.NAB[objName].atyle=document.getElementById(objId).style;

}
$App.NAB[objName].attr("VisualNEOWebName", objName);
$App.NAB[objName].attr("ng-style","NAB."+objName+"_style");
$App.NAB[objName].attr("ng-hide","NAB."+objName+"_hidden");
$App.NAB[objName].attr("ng-disabled","NAB."+objName+"_disabled");
$App.NAB[objName].attr("style", objStyle);

var e = document.getElementById(containerId);
$compile(e)($scope);

Quote from luishp on November 1, 2021, 9:29 am

@christian-giebel great, thanks for sharing!
Then I will keep DuplicateObject as it was for backward compatibility and add DuplicateObjectEx as a new core command.
Please, let me know if you find any other issue.

Thank you!

Quote from roccocogliano on October 23, 2023, 12:57 pm

The Duplicate Object command works fine if it is not thrown into the project property "auto-size content to fit device width" or "auto-size content to fit device height". Is it possible to fix this problem?

Thanks so much in advance
Rocco