CODEWITHSUNDEEP
cssiframedraw2d
A. Davis
A. Davis

Reputation: 35

Is there a way to have an iframe element on a Draw2D powered canvas?

I am building custom objects with Draw2D and would like to take advantage of the CSS based material design icons from Microsoft (https://cdn.materialdesignicons.com/3.6.95/). The only way I think I can achieve this is an internal frame to load the css class.

this.img = new draw2d.shape.basic.Rectangle({
  stroke: 2,
  bgColor: "#ffffff",
  color: "#343F48",
  resizeable: true
});

//replace this with MDI css icons
/ var icon = new draw2d.shape.icon.Db({
/   height: 20,
/   width: 20
/ });
/ icon.setBackgroundColor("#e0ba23");
//

var centerLocator = new draw2d.layout.locator.CenterLocator();
this.img.add(icon, centerLocator);

Upvotes: 0

Views: 124

Answers (1)

A. Davis
A. Davis

Reputation: 35

On init of the shape I called this function to add and position an inserted DOM element.

positionIcon: function () {
  this.img.overlay = $("<div class='mdi mdi-database overlay'></div>");
  this.img.overlay.css({
    "top": this.getY(),
    "left": this.getX(),
    "color": "#e0ba23",
    "fontSize": 16,
    "padding": 7
  });
  $("#canvas").append(this.img.overlay);
}

The css class overlay that you see is just position: absolute.

Upvotes: 0

Related Questions