otf-frontend/client/src/app/layout/modeler/color-picker/ColorPicker.js

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 import {\r
  18     is\r
  19   } from 'bpmn-js/lib/util/ModelUtil';\r
  20   \r
  21   \r
  22   /**\r
  23    * A basic color picker implementation.\r
  24    *\r
  25    * @param {EventBus} eventBus\r
  26    * @param {ContextPad} contextPad\r
  27    * @param {CommandStack} commandStack\r
  28    */\r
  29   export default function ColorPicker(eventBus, contextPad, commandStack) {\r
  30   \r
  31     contextPad.registerProvider(this);\r
  32   \r
  33     commandStack.registerHandler('shape.updateColor', UpdateColorHandler);\r
  34   \r
  35     function changeColor(event, element) {\r
  36   \r
  37       var color = window.prompt('type a color code');\r
  38   \r
  39       commandStack.execute('shape.updateColor', { element: element, color: color });\r
  40     }\r
  41   \r
  42   \r
  43     this.getContextPadEntries = function(element) {\r
  44   \r
  45       if (is(element, 'bpmn:Event')) {\r
  46         return {\r
  47           'changeColor': {\r
  48             group: 'edit',\r
  49             className: 'icon-red',\r
  50             title: 'Change element color',\r
  51             action: {\r
  52               click: changeColor\r
  53             }\r
  54           }\r
  55         };\r
  56       }\r
  57     };\r
  58   }\r
  59   \r
  60   \r
  61   \r
  62   /**\r
  63    * A handler updating an elements color.\r
  64    */\r
  65   function UpdateColorHandler() {\r
  66   \r
  67     this.execute = function(context) {\r
  68       context.oldColor = context.element.color;\r
  69       context.element.color = context.color;\r
  70   \r
  71       return context.element;\r
  72     };\r
  73   \r
  74     this.revert = function(context) {\r
  75       context.element.color = context.oldColor;\r
  76   \r
  77       return context.element;\r
  78     };\r
  79   \r
  80   }