Dropped Item

Hello ,
I would buy gojs but are now being tested.

My question is:

  1. you can not count items dragged so that they disappear from the palette
    or make them “no selectable”?

  2. objects and arrows are programmable for the adapter?

  3. how can implement a contextmenu?

thanks for the answer

@roberto

Yes, you can easily delete nodes dragged from a source diagram after dropping them into a target diagram. You’ll need to implement an “ExternalObjectsDropped” DiagramEvent listener to do that. Two samples demonstrate that: the Seating Chart sample, Seating Chart, and the Two Diagrams sample, Two Diagrams.

Alternatively, if you want to mark the source nodes unselectable, you can set Part.selectable to false rather than delete them. And you can add a binding on the node’s opacity to make them partly transparent when “selectable” is false. Or do other appearance customizations based on “selectable”.

I’m not sure what you mean by “adapter”. In any case I am confident that what you want is possible to implement, because nodes and links are infinitely customizable. See the range of kinds of diagrams shown by the samples, GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software.

For context menus, read GoJS Context Menus -- Northwoods Software.

Hello @walter,

I want some object “cloned” when is dropped
and some object no, but this code not work correctly
definitely something wrong, this is my code:

function init() {
if (window.goSamples) goSamples(); // init for these samples – you don’t need to call this
var $ = go.GraphObject.make; // for conciseness in defining templates

myDiagram =
  $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
    {
      grid: $(go.Panel, "Grid",
              $(go.Shape, "LineH", { stroke: "white", strokeWidth: 0.5 }),
              $(go.Shape, "LineH", { stroke: "white", strokeWidth: 0.5, interval: 10 }),
              $(go.Shape, "LineV", { stroke: "white", strokeWidth: 0.5 }),
              $(go.Shape, "LineV", { stroke: "white", strokeWidth: 0.5, interval: 10 })
            ),
      allowDrop: true,  // must be true to accept drops from the Palette
      "draggingTool.dragsLink": true,
      "draggingTool.isGridSnapEnabled": true,
      "linkingTool.isUnconnectedLinkValid": true,
      "linkingTool.portGravity": 20,
      "relinkingTool.isUnconnectedLinkValid": true,
      "relinkingTool.portGravity": 20,
      "relinkingTool.fromHandleArchetype":
        $(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
      "relinkingTool.toHandleArchetype":
        $(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
      "linkReshapingTool.handleArchetype":
        $(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
      rotatingTool: $(TopRotatingTool),  // defined below
      "rotatingTool.snapAngleMultiple": 15,
      "rotatingTool.snapAngleEpsilon": 15,
      "undoManager.isEnabled": true
    });

// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
  var button = document.getElementById("SaveButton");
  if (button) button.disabled = !myDiagram.isModified;
  var idx = document.title.indexOf("*");
  if (myDiagram.isModified) {
    if (idx < 0) document.title += "*";
  } else {
    if (idx >= 0) document.title = document.title.substr(0, idx);
  }
});

// Define a function for creating a "port" that is normally transparent.
// The "name" is used as the GraphObject.portId, the "spot" is used to control how links connect
// and where the port is positioned on the node, and the boolean "output" and "input" arguments
// control whether the user can draw links from or to the port.
function makePort(name, spot, output, input) {
  // the port is basically just a small transparent square
  return $(go.Shape, "Circle",
           {
			  
              fill: null,  // not seen, by default; set to a translucent gray by showSmallPorts, defined below
              stroke: null,
              desiredSize: new go.Size(7, 7),
              alignment: spot,  // align the port on the main Shape
              alignmentFocus: spot,  // just inside the Shape
              portId: name,  // declare this object to be a "port"
              fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
              fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
              cursor: "pointer"  // show a different cursor to indicate potential link point
           });
}

var nodeSelectionAdornmentTemplate =
  $(go.Adornment, "Auto",
    $(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
    $(go.Placeholder)
  );

var nodeResizeAdornmentTemplate =
  $(go.Adornment, "Spot",
    { locationSpot: go.Spot.Right },
    $(go.Placeholder),
    $(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
    $(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
    $(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),

    $(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
    $(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),

    $(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
    $(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
    $(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
  );

var nodeRotateAdornmentTemplate =
  $(go.Adornment,
    { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
    $(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
    $(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] })
  );

myDiagram.nodeTemplate =
  $(go.Node, "Spot",
    { locationSpot: go.Spot.Center },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    { selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate },
    { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
    { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
    new go.Binding("angle").makeTwoWay(),
    // the main object is a Panel that surrounds a TextBlock with a Shape
    $(go.Panel, "Auto",
      { name: "PANEL" },
      new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
      $(go.Shape, "Rectangle",  // default figure
        {
          portId: "", // the default port: if no spot on link data, use closest side
          fromLinkable: true, toLinkable: true, cursor: "pointer",
          fill: "white"  // default color
        },
        new go.Binding("figure"),
        new go.Binding("fill")),
      $(go.TextBlock,
        {
          font: "bold 11pt Helvetica, Arial, sans-serif",
          margin: 8,
          maxSize: new go.Size(160, NaN),
          wrap: go.TextBlock.WrapFit,
          editable: true
        },
        new go.Binding("text").makeTwoWay())
    ),
    // four small named ports, one on each side:
    makePort("T", go.Spot.Top, false, true),
    makePort("L", go.Spot.Left, true, true),
    makePort("R", go.Spot.Right, true, true),
    makePort("B", go.Spot.Bottom, true, false),
    { // handle mouse enter/leave events to show/hide the ports
      mouseEnter: function(e, node) { showSmallPorts(node, true); },
      mouseLeave: function(e, node) { showSmallPorts(node, false); }
    }
  );

function showSmallPorts(node, show) {
  node.ports.each(function(port) {
    if (port.portId !== "") {  // don't change the default port, which is the big shape
      port.fill = show ? "rgba(0,0,0,.3)" : null;
    }
  });
}

var linkSelectionAdornmentTemplate =
  $(go.Adornment, "Link",
    $(go.Shape,
      // isPanelMain declares that this Shape shares the Link.geometry
      { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 })  // use selection object's strokeWidth
  );

myDiagram.linkTemplate =
  $(go.Link,  // the whole link panel
    { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
    { relinkableFrom: true, relinkableTo: true, reshapable: true },
    {
      routing: go.Link.AvoidsNodes,
      curve: go.Link.JumpOver,
      corner: 5,
      toShortLength: 4
    },
    new go.Binding("points").makeTwoWay(),
    $(go.Shape,  // the link path shape
      { isPanelMain: true, strokeWidth: 2 }),
    $(go.Shape,  // the arrowhead
      { toArrow: "Standard", stroke: null }),
    $(go.Panel, "Auto",
      new go.Binding("visible", "isSelected").ofObject(),
      $(go.Shape, "RoundedRectangle",  // the link shape
        { fill: "#F8F8F8", stroke: null }),
      $(go.TextBlock,
        {
          textAlign: "center",
          font: "10pt helvetica, arial, sans-serif",
          stroke: "#919191",
          margin: 10,
          minSize: new go.Size(10, NaN),
          editable: true
        },
        new go.Binding("text").makeTwoWay())
    )
  );

load();  // load an initial diagram from some JSON text

// initialize the Palette that is on the left side of the page
myPalette =
  $(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML5 element
    {
      maxSelectionCount: 1,
      nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
      linkTemplate: // simplify the link template, just in this Palette
        $(go.Link,
          { // because the GridLayout.alignment is Location and the nodes have locationSpot == Spot.Center,
            // to line up the Link in the same manner we have to pretend the Link has the same location spot
            locationSpot: go.Spot.Center,
            selectionAdornmentTemplate:
              $(go.Adornment, "Link",
                { locationSpot: go.Spot.Center },
                $(go.Shape,
                  { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }),
                $(go.Shape,  // the arrowhead
                  { toArrow: "Standard", stroke: null })
              )
          },
          {
            routing: go.Link.AvoidsNodes,
            curve: go.Link.JumpOver,
            corner: 5,
            toShortLength: 4
          },
          new go.Binding("points"),
          $(go.Shape,  // the link path shape
            { isPanelMain: true, strokeWidth: 2 }),
          $(go.Shape,  // the arrowhead
            { toArrow: "Standard", stroke: null })
        ),
      model: new go.GraphLinksModel([  // specify the contents of the Palette
        { text: "DWH", figure: "img/arrow.png", fill: "green", marginTop: 30,  helper: "disable", },
        { text: "Step" },
        { text: "DB", figure: "Database", fill: "lightgray" },
        { text: "???", figure: "Rectangle", fill: "lightskyblue" },
        { text: "End", figure: "Circle", fill: "red" },
        { text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" },
		{ text: "DWH", figure: "img/arrow.png", fill: "green", marginTop: 30 },
        { text: "Step" },
        { text: "DB", figure: "Database", fill: "lightgray" },
        { text: "???", figure: "Rectangle", fill: "lightskyblue" },
        { text: "End", figure: "Circle", fill: "red" },
        { text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" },
		{ text: "DWH", figure: "img/arrow.png", fill: "green", marginTop: 30 },
		{ text: "Step" },
        { text: "DB", figure: "Database", fill: "lightgray" },
        { text: "???", figure: "Rectangle", fill: "lightskyblue" },
        { text: "End", figure: "Circle", fill: "red" },
        { text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" },
		{ text: "DWH", figure: "img/arrow.png", fill: "green", marginTop: 30 },
        { text: "Step" },
        { text: "DB", figure: "Database", fill: "lightgray" },
        { text: "???", figure: "Rectangle", fill: "lightskyblue" },
        { text: "End", figure: "Circle", fill: "red" },
        { text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" }
		
      ], [
        // the Palette also has a disconnected Link, which the user can drag-and-drop
        { points: new go.List(go.Point).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) }
      ])
    });

}

function TopRotatingTool() {
go.RotatingTool.call(this);
}
go.Diagram.inherit(TopRotatingTool, go.RotatingTool);

/** @override */
TopRotatingTool.prototype.updateAdornments = function(part) {
go.RotatingTool.prototype.updateAdornments.call(this, part);
var adornment = part.findAdornment(“Rotating”);
if (adornment !== null) {
adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)); // above middle top
}
};

/** @override */
TopRotatingTool.prototype.rotate = function(newangle) {
go.RotatingTool.prototype.rotate.call(this, newangle + 90);
};
// end of TopRotatingTool class

// Show the diagram’s model in JSON format that the user may edit
function save() {
saveDiagramProperties(); // do this first, before writing to JSON
document.getElementById(“mySavedModel”).value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById(“mySavedModel”).value);
loadDiagramProperties(); // do this after the Model.modelData has been brought into memory
}

function saveDiagramProperties() {
myDiagram.model.modelData.position = go.Point.stringify(myDiagram.position);
}
function loadDiagramProperties(e) {
// set Diagram.initialPosition, not Diagram.position, to handle initialization side-effects
var pos = myDiagram.model.modelData.position;
if (pos) myDiagram.initialPosition = go.Point.parse(pos);
}

I’m sorry, but I do not understand what the problem is. You have dumped a lot of code without explaining what code that you tried that is not getting the results you wanted nor describing what it is that you do want.

You need to be more concise about presenting the issues, including your unique requirements and related code, that apply to your situation, but without presenting anything that is unrelated to your problem.

ok,

object “A” : i drop this element in myDiagramDiv and i want this object
disappears in myPaletteDiv.

object “B” : i drop this element and i want this object appears how a “clone” in myPaletteDiv

I use as a base “Draggable link” when i change “ExternalObjectsDropped” nothing is happening!

help me pleae

If I modify the Draggable Link sample by adding this DiagramEvent listener in the initialization of the Diagram:

          "ExternalObjectsDropped": function(e) { 
            myPalette.commandHandler.deleteSelection();
          },

I think this does what you are asking for.

I do not know what you mean by “appears as a clone”. You can modify the appearance of nodes in the Palette as much as you like.

Hello @walter,

Its ok for “ExternalObjectsDropped”!

  • I want some object that when the drop remains in the palette
  • Its possible have more palette and one diagram?
    it is possible?

thanks

If you want a dragged node to remain in the palette, do not delete it upon a drop in the main diagram.

You can have as many Diagrams (including Palettes) as you want. For example the Planogram sample, Planogram, has 4 palettes.

A post was split to a new topic: Exporting diagram as SVG