Drag and Drop SVG Icon

@Malli1231 wrote:

Hi..I'm not able to drag and drop the SVG Icon.Please help me to solve this Issue.

import {Component, ElementRef, AfterViewInit, ViewChild} from '@angular/core';
import * as go from "gojs";
import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
import {SidebarModule} from 'primeng/sidebar';
import {ButtonModule} from 'primeng/button';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AngularFontAwesomeModule } from 'angular-font-awesome';

@Component({
selector: 'app-flowchart',
templateUrl: './flowchart.component.html',
styleUrls: ['./flowchart.component.css']
})

export class FlowchartComponent implements AfterViewInit {
visibleSidebar2;
countryForm: FormGroup = null;
name = 'GoJS';
// constructor(private fb: FormBuilder) {
// this.initCountryForm();

// }
@ViewChild('myDiagramDiv')
element: ElementRef;
// initCountryForm() {
// this.countryForm = this.fb.group({
// countryForm.countryId: [country ? countryForm. : 0, Validators.required],

// });
// }
ngAfterViewInit() {
var _this = this;
const $ = go.GraphObject.make;

  var colors = {
    blue:   "#00B5CB",
    orange: "#F47321",
    green:  "#C8DA2B",
    gray:   "#888",
    white:  "#F5F5F5"
  }
  var icons = {

    "play":
    "M6 4l20 12-20 12z",

    "user":
    "M8 10c0-4.418 3.582-8 8-8s8 3.582 8 8c0 4.418-3.582 8-8 8s-8-3.582-8-8zM24 20h-16c-4.418 0-8 3.582-8 8v2h32v-2c0-4.418-3.582-8-8-8z",

    "diamonds":
    "M16 0l-10 16 10 16 10-16z",

    "alarm":
    "M16 4c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14zM16 29.25c-6.213 0-11.25-5.037-11.25-11.25s5.037-11.25 11.25-11.25c6.213 0 11.25 5.037 11.25 11.25s-5.037 11.25-11.25 11.25zM29.212 8.974c0.501-0.877 0.788-1.892 0.788-2.974 0-3.314-2.686-6-6-6-1.932 0-3.65 0.913-4.747 2.331 4.121 0.851 7.663 3.287 9.96 6.643zM12.748 2.331c-1.097-1.418-2.816-2.331-4.748-2.331-3.314 0-6 2.686-6 6 0 1.082 0.287 2.098 0.788 2.974 2.297-3.356 5.838-5.792 9.96-6.643zM14 10h2v10h-2v-10zM16 18h6v2h-6v-2z",

    "stop":
    "M4 4h24v24h-24z"      


  };
  // The first Diagram showcases what the Nodes might look like "in action"
  const myDiagram: go.Diagram = $(go.Diagram, "myDiagramDiv",
                {
                  initialContentAlignment: go.Spot.Center,
                  "undoManager.isEnabled": true,
                  layout: $(go.TreeLayout)
                });
                //myDiagram.allowDrop = true;
  // "icons" is defined in icons.js
  // A data binding conversion function. Given an icon name, return a Geometry.
  // This assumes that all icons want to be filled.
  // This caches the Geometry, because the Geometry may be shared by multiple Shapes.
  function geoFunc(geoname) {
    var geo = icons[geoname];
    if (geo === undefined) geo = "heart";  // use this for an unknown icon name
    if (typeof geo === "string") {
      geo = icons[geoname] = go.Geometry.parse(geo, true);  // fill each geometry
    }
    return geo;
  }
  // Define a simple template consisting of the icon surrounded by a filled circle
  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Circle",
          { fill: "lightcoral", strokeWidth: 4, stroke: colors["gray"], width: 60, height: 60 },
          new go.Binding("fill", "color")),
      $(go.Shape,
        { margin: 3, fill: colors["white"], strokeWidth: 0 },
        new go.Binding("geometry", "geo", geoFunc)),
      // Each node has a tooltip that reveals the name of its icon
      { toolTip:
          $(go.Adornment, "Auto",
            $(go.Shape, { fill: "LightYellow", stroke: colors["gray"], strokeWidth: 2 }),
            $(go.TextBlock, { margin: 8, stroke: colors["gray"], font: "bold 16px sans-serif" },
              new go.Binding("text", "geo")))
      }
    );

  // The second Diagram showcases every icon in icons.js
  const myDiagram2: go.Diagram = $(go.Diagram, "myDiagramDiv2",
                { // share node templates between both Diagrams
                  nodeTemplate: myDiagram.nodeTemplate,
                  // simple grid layout
                  layout: $(go.GridLayout)
                });

                myDiagram2.allowDrop = true;
  // Convert the icons collection into an Array of JavaScript objects
  var nodeArray = [];
  for (var k in icons) {
    nodeArray.push({ geo: k, color: colors["blue"] });
  }
  myDiagram2.model.nodeDataArray = nodeArray;

  function customFocus() {
    const x = window.scrollX || window.pageXOffset;
    const y = window.scrollY || window.pageYOffset;
    go.Diagram.prototype.doFocus.call(this);
    window.scrollTo(x, y);
  }
  myDiagram.doFocus = customFocus;
}
}

Posts: 1

Participants: 1

Read full topic