winery/org.eclipse.winery.topologymodeler/src/main/webapp/WEB-INF/tags/palette.tag

   1 <%--
   2 /*******************************************************************************
   3  * Copyright (c) 2012-2013 University of Stuttgart.
   4  * All rights reserved. This program and the accompanying materials
   5  * are made available under the terms of the Eclipse Public License v1.0
   6  * and the Apache License 2.0 which both accompany this distribution,
   7  * and are available at http://www.eclipse.org/legal/epl-v10.html
   8  * and http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Contributors:
  11  *    Uwe Breitenbücher - initial API and implementation and/or initial documentation
  12  *    Oliver Kopp - improvements
  13  *******************************************************************************/
  14 --%>
  15 <%@tag language="java" pageEncoding="UTF-8" description="Renders the palette on the left"%>
  16
  17 <%@attribute name="repositoryURL" required="true" type="java.lang.String"%>
  18 <%@attribute name="client" required="true" description="IWineryRepository" type="org.eclipse.winery.common.interfaces.IWineryRepository"%>
  19 <%@attribute name="relationshipTypes" description="the known relationship types" required="true" type="java.util.Collection"%>
  20
  21 <%@tag import="javax.xml.namespace.QName" %>
  22 <%@tag import="java.util.Collection"%>
  23 <%@tag import="java.util.UUID"%>
  24 <%@tag import="java.util.List"%>
  25 <%@tag import="org.eclipse.winery.common.interfaces.IWineryRepository" %>
  26 <%@tag import="org.eclipse.winery.model.tosca.TNodeType"%>
  27 <%@tag import="org.eclipse.winery.common.Util" %>
  28
  29 <%@taglib prefix="nt" tagdir="/WEB-INF/tags/common/templates/nodetemplates" %>
  30
  31 <link rel="stylesheet" href="css/palette.css" />
  32
  33 <div id="palette">
  34
  35 <div id="paletteLabel">
  36 Palette
  37 </div>
  38
  39 <%
  40         Collection<TNodeType> allNodeTypes = client.getAllTypes(TNodeType.class);
  41         if (allNodeTypes.isEmpty()) {
  42 %>
  43                 <script>
  44                         vShowError("No node types exist. Please add node types in the repository.");
  45                 </script>
  46         <%
  47         }
  48         for (TNodeType nodeType: allNodeTypes) {
  49                 if (nodeType.getName() == null) {
  50                         System.err.println("Invalid nodetype in ns " + nodeType.getTargetNamespace());
  51                         continue;
  52                 }
  53 %>
  54                 <div class="paletteEntry">
  55                         <div class="iconContainer">
  56                                 <img class="icon" onerror="var that=this; require(['winery-common-topologyrendering'], function(wct){wct.imageError(that);});" src="<%= repositoryURL %>/nodetypes/<%= Util.DoubleURLencode(nodeType.getTargetNamespace()) %>/<%=Util.DoubleURLencode(nodeType.getName())%>/visualappearance/50x50" />
  57                         </div>
  58                         <div class="typeContainer">
  59                                 <div class="typeContainerMiddle">
  60                                         <div class="typeContainerInner">
  61                                         <%= nodeType.getName() %>
  62                                         </div>
  63                                 </div>
  64                         </div>
  65
  66                         <div class="hidden">
  67                                 <nt:nodeTemplateRenderer
  68                                         repositoryURL="${repositoryURL}"
  69                                         client="${client}"
  70                                         relationshipTypes="${relationshipTypes}"
  71                                         nodeTypeQName="<%=new QName(nodeType.getTargetNamespace(), nodeType.getName())%>"
  72                                         nodeType="<%=nodeType%>" />
  73                         </div>
  74                 </div>
  75
  76 <%
  77         }
  78 %>
  79
  80 </div>
  81
  82
  83 <script>
  84
  85         //$("#palette").css("width","20px");
  86         //$("div.paletteEntry").hide();
  87
  88         $("#palette").click (function() {
  89                 showPalette();
  90                 winery.events.fire(winery.events.name.command.UNSELECT_ALL_NODETEMPLATES);
  91         });
  92
  93         function showPalette() {
  94                 // reset width to original CSS width
  95                 $("#palette").removeClass("shrunk");
  96                 // show all palette entries
  97                 $("div.paletteEntry").show();
  98                 $("#paletteLabel").hide();
  99         }
 100
 101         function hidePalette() {
 102                 $("#palette").addClass("shrunk");
 103                 // hide all palette entries
 104                 $("div.paletteEntry").hide();
 105                 $("#paletteLabel").show();
 106         }
 107
 108         $(function() {
 109                 $( "div.paletteEntry" ).draggable({
 110                         cursor: "move",
 111                         cursorAt: { top: 40, left: 112 },
 112                         helper: function( event ) {
 113                                 var newObj = $(this).find("div.NodeTemplateShape").clone();
 114                                 newObj.removeClass("hidden");
 115                                 newObj.css("z-index", "2000");
 116                                 newObj.find ("div.endpointContainer").remove();
 117
 118                                 // Ensure that obj is appended to drawingarea and not to palette
 119                                 // Consequence: the dragged object is always under the cursor and not paintet with an offset equal to the scrollheight
 120                                 $("#drawingarea").append(newObj);
 121
 122                                 return newObj;
 123                         },
 124                         start: function( event, ui ) {
 125                                 winery.events.fire(winery.events.name.command.UNSELECT_ALL_NODETEMPLATES);
 126                                 // The palette is kept visible after a drag start,
 127                                 // therefore no action
 128                                 // hidePalette();
 129                         },
 130                         appendTo: '#drawingarea'
 131                 });
 132
 133
 134         $( "div#drawingarea" ).droppable({
 135                 accept: function(d) {
 136                         if (d.hasClass("paletteEntry")) {
 137                                 return true;
 138                         }
 139                 },
 140                 drop: function( event, ui ) {
 141
 142                         var palEntry = ui.draggable;
 143                         var templateCode = palEntry.find("div.NodeTemplateShape").clone().wrap("<div></div>").parent().html();
 144
 145                         var newObj = $(templateCode);
 146
 147                         newObj.removeClass("ui-draggable");
 148                         newObj.removeClass("ui-droppable");
 149                         newObj.removeClass("hidden");
 150
 151                         // generate and set id
 152                         var type = newObj.find("div.type.nodetemplate").text();
 153                         var id = type;
 154                         // we cannot use the id as the initial name, because we want to preserve special characters in the name, but not in the id.
 155                         var name = type;
 156
 157                         // quick hack to make id valid
 158                         // currently, only spaces and dots cause problems
 159                         id = id.replace(" ", "_");
 160                         id = id.replace(".", "_");
 161
 162                         if ($("#" + id).length != 0) {
 163                                 var count = 2;
 164                                 var idprefix = id + "_";
 165                                 do {
 166                                         id = idprefix + count;
 167                                         count++;
 168                                 } while ($("#" + id).length != 0);
 169                                 // also adjust name
 170                                 name = name + "_" + count;
 171                         }
 172                         newObj.attr("id", id);
 173                         newObj.children("div.headerContainer").children("div.id").text(id);
 174
 175                         // initial name has been generated based on the id
 176                         newObj.children("div.headerContainer").children("div.name").text(name);
 177
 178                         // fix main.css -> #editorArea -> margin-top: 45px;
 179                         var top = Math.max(event.pageY-45, 0);
 180
 181                         // drag cursor is at 112/40
 182                         // fix that
 183                         top = Math.max(top-40, 0);
 184                         var left = Math.max(event.pageX-112, 0);
 185
 186                         newObj.css("top", top);
 187                         newObj.css("left", left);
 188
 189                         newObj.addClass("selected");
 190
 191                         // insert into sheet
 192                         newObj.appendTo( $( "div#drawingarea" ) );
 193
 194                         // initialization works only for displayed objects
 195                         require(["winery-common-topologyrendering"], function(wct) {
 196                                 wct.initNodeTemplate(newObj, true);
 197
 198                                 // handle menus
 199                                 winery.events.fire(winery.events.name.SELECTION_CHANGED);
 200                         });
 201                 }
 202         })
 203
 204
 205 });
 206
 207 </script>