├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── deploy-to-pages.sh
├── elements.json
├── images
    ├── fav.png
    ├── fav2.png
    ├── logo100.png
    ├── logo512.png
    └── sshot.png
├── index.html
├── manifest.json
├── polymer.json
├── src
    ├── action-history.html
    ├── app-controls.html
    ├── app-icons.html
    ├── app.js
    ├── canvas
    │   ├── canvas-controls.html
    │   └── canvas-view.html
    ├── components
    │   ├── designer-tab.html
    │   ├── designer-tabs.html
    │   ├── icon-picker.html
    │   └── tree-view.html
    ├── element-view
    │   ├── element-properties.html
    │   ├── element-property.html
    │   ├── element-stuff-base.html
    │   ├── element-stuff-flex.html
    │   ├── element-stuff-shared-styles.html
    │   ├── element-stuff-styles.html
    │   └── element-view.html
    ├── palette
    │   ├── palette-list.html
    │   ├── palette-shared-styles.html
    │   └── palette-view.html
    └── the-app.html
└── test
    └── the-app
        └── the-app_test.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | designer
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 3-Clause License
 2 | 
 3 | Copyright (c) 2017, Preet Shihn
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | * Redistributions of source code must retain the above copyright notice, this
10 |   list of conditions and the following disclaimer.
11 | 
12 | * Redistributions in binary form must reproduce the above copyright notice,
13 |   this list of conditions and the following disclaimer in the documentation
14 |   and/or other materials provided with the distribution.
15 | 
16 | * Neither the name of the copyright holder nor the names of its
17 |   contributors may be used to endorse or promote products derived from
18 |   this software without specific prior written permission.
19 | 
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Wired Designer 
 2 | 
 3 | This is a very simple wysiwyg style designer for createing mockups and wireframes.
 4 | 
 5 | [Launch designer](https://wiredjs.github.io/designer)
 6 | 
 7 | The sketchy, hand-drawn looking components used by the designer are stand alone functional webcomponents, and can be used by anyone in their web app.<br>
 8 | [Wired elements on webcomponents.org](https://www.webcomponents.org/collection/wiredjs/wired-elements)
 9 | 
10 | The designer app is adapted from [Polymer's wizzywid](https://github.com/PolymerLabs/wizzywid)
11 | 
12 | Built with webcomponents and Polymer.
13 | 
14 | License: [BSD-3-Clause](https://github.com/wiredjs/designer/blob/master/LICENSE)<br>
15 | Author: [Preet Shihn](https://twitter.com/preetster)
16 | 
17 | ![Wired Designer](https://wiredjs.github.io/designer/images/sshot.png)
18 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "wired-designer",
 3 |   "description": "Mockups and wireframing tool built using web components, and is open source.",
 4 |   "main": "index.html",
 5 |   "authors": [
 6 |     "Preet Shihn <preetshihn@gmail.com>"
 7 |   ],
 8 |   "dependencies": {
 9 |     "polymer": "Polymer/polymer#^2.0.0",
10 |     "iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
11 |     "iron-pages": "PolymerElements/iron-pages#^2.0.0",
12 |     "iron-ajax": "^2.0.5",
13 |     "wired-elements": "^0.2.3",
14 |     "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.0.0",
15 |     "iron-icons": "^2.0.1"
16 |   },
17 |   "license": "BSD-3",
18 |   "private": true
19 | }
20 | 


--------------------------------------------------------------------------------
/deploy-to-pages.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash -e
 2 | 
 3 | # Based on https://github.com/Polymer/tools/blob/master/bin/gp.sh
 4 | 
 5 | # This script pushes a demo-friendly version of your element and its
 6 | # dependencies to gh-pages.
 7 | 
 8 | # Run in a clean directory passing in a GitHub org and repo name
 9 | org="wiredjs"
10 | repo="designer"
11 | #branch="master" # default to master when branch isn't specified
12 | 
13 | # make folder (same as input, no checking!)
14 | rm -rf $repo
15 | mkdir $repo
16 | git clone https://github.com/$org/$repo.git --single-branch
17 | 
18 | # switch to gh-pages branch
19 | pushd $repo >/dev/null
20 | git checkout --orphan gh-pages
21 | 
22 | # remove the .gitignore since we're going to be pushing deps
23 | git rm -rf ./.gitignore
24 | git rm -rf ./bower_components
25 | 
26 | # use bower to install runtime deployment
27 | bower cache clean # ensure we're getting the latest from the desired branch.
28 | # install the bower deps
29 | bower install
30 | 
31 | # send it all to github
32 | git add -A .
33 | git commit -am 'seed gh-pages'
34 | git push -u origin gh-pages --force
35 | 
36 | popd >/dev/null


--------------------------------------------------------------------------------
/elements.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "elements": [
  3 |     {
  4 |       "name": "wired-card",
  5 |       "label": "Card (Container)",
  6 |       "styles": [
  7 |         {
  8 |           "name": "width",
  9 |           "value": "150px"
 10 |         },
 11 |         {
 12 |           "name": "height",
 13 |           "value": "150px"
 14 |         }
 15 |       ]
 16 |     },
 17 |     {
 18 |       "name": "wired-item",
 19 |       "label": "Combo/List item",
 20 |       "disableSizing": true,
 21 |       "properties": [
 22 |         {
 23 |           "name": "text",
 24 |           "value": "item"
 25 |         },
 26 |         {
 27 |           "name": "value",
 28 |           "value": "item"
 29 |         }
 30 |       ]
 31 |     },
 32 |     {
 33 |       "name": "wired-button",
 34 |       "label": "Button",
 35 |       "properties": [
 36 |         {
 37 |           "name": "text",
 38 |           "value": "Button"
 39 |         }
 40 |       ]
 41 |     },
 42 |     {
 43 |       "name": "wired-checkbox",
 44 |       "label": "Checkbox",
 45 |       "disableSizing": true,
 46 |       "properties": [
 47 |         {
 48 |           "name": "text",
 49 |           "value": "Checkbox text"
 50 |         }
 51 |       ]
 52 |     },
 53 |     {
 54 |       "name": "wired-combo",
 55 |       "label": "Combo box",
 56 |       "disableSizing": true
 57 |     },
 58 |     {
 59 |       "name": "wired-input",
 60 |       "label": "Text input",
 61 |       "properties": [
 62 |         {
 63 |           "name": "placeholder",
 64 |           "value": "Placeholder"
 65 |         }
 66 |       ]
 67 |     },
 68 |     {
 69 |       "name": "wired-listbox",
 70 |       "label": "List box",
 71 |       "styles": [
 72 |         {
 73 |           "name": "width",
 74 |           "value": "80px"
 75 |         },
 76 |         {
 77 |           "name": "height",
 78 |           "value": "100px"
 79 |         }
 80 |       ]
 81 |     },
 82 |     {
 83 |       "name": "wired-progress",
 84 |       "label": "Progress bar"
 85 |     },
 86 |     {
 87 |       "name": "wired-radio",
 88 |       "label": "Radio",
 89 |       "disableSizing": true,
 90 |       "properties": [
 91 |         {
 92 |           "name": "text",
 93 |           "value": "Radio_text"
 94 |         }
 95 |       ]
 96 |     },
 97 |     {
 98 |       "name": "wired-radio-group",
 99 |       "label": "Radio group",
100 |       "styles": [
101 |         {
102 |           "name": "width",
103 |           "value": "80px"
104 |         },
105 |         {
106 |           "name": "height",
107 |           "value": "100px"
108 |         }
109 |       ]
110 |     },
111 |     {
112 |       "name": "wired-textarea",
113 |       "label": "Multiline text input",
114 |       "properties": [
115 |         {
116 |           "name": "placeholder",
117 |           "value": "Placeholder"
118 |         }
119 |       ]
120 |     },
121 |     {
122 |       "name": "wired-toggle",
123 |       "label": "Toggle switch",
124 |       "disableSizing": true
125 |     },
126 |     {
127 |       "name": "wired-icon-button",
128 |       "label": "Icon button"
129 |     },
130 |     {
131 |       "name": "wired-slider",
132 |       "label": "Slider"
133 |     },
134 |     {
135 |       "name": "wired-spinner",
136 |       "label": "Spinner"
137 |     },
138 |     {
139 |       "name": "a",
140 |       "native": true,
141 |       "label": "Link",
142 |       "textContent": "Link text"
143 |     },
144 |     {
145 |       "name": "p",
146 |       "native": true,
147 |       "label": "Text",
148 |       "textContent": "Lorem ipsum dolor sit amet..."
149 |     },
150 |     {
151 |       "name": "img",
152 |       "native": true,
153 |       "noCloseTag": true,
154 |       "label": "Image",
155 |       "styles": [
156 |         {
157 |           "name": "minWidth",
158 |           "value": "20px"
159 |         },
160 |         {
161 |           "name": "minHeight",
162 |           "value": "20px"
163 |         }
164 |       ]
165 |     },
166 |     {
167 |       "name": "h1",
168 |       "native": true,
169 |       "label": "Title",
170 |       "textContent": "Title"
171 |     },
172 |     {
173 |       "name": "h2",
174 |       "native": true,
175 |       "label": "Title 2",
176 |       "textContent": "Smaller title"
177 |     }
178 |   ]
179 | }


--------------------------------------------------------------------------------
/images/fav.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wiredjs/designer/9e8d3381a869ff9163177e9c38aae89fe2475edd/images/fav.png


--------------------------------------------------------------------------------
/images/fav2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wiredjs/designer/9e8d3381a869ff9163177e9c38aae89fe2475edd/images/fav2.png


--------------------------------------------------------------------------------
/images/logo100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wiredjs/designer/9e8d3381a869ff9163177e9c38aae89fe2475edd/images/logo100.png


--------------------------------------------------------------------------------
/images/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wiredjs/designer/9e8d3381a869ff9163177e9c38aae89fe2475edd/images/logo512.png


--------------------------------------------------------------------------------
/images/sshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wiredjs/designer/9e8d3381a869ff9163177e9c38aae89fe2475edd/images/sshot.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 7 |   <title>Wired Designer</title>
 8 |   <meta name="description" content="Mockups and wireframing tool built using web components, and is open source.">
 9 |   <link rel="manifest" href="manifest.json">
10 |   <link rel="icon" href="images/fav2.png" type="image/png">
11 | 
12 |   <meta property="og:title" content="Wired Designer">
13 |   <meta property="og:description" content="Mockups and wireframing tool built using web components, and is open source.">
14 |   <meta property="og:type" content="website">
15 |   <meta property="og:url" content="https://wiredjs.github.io/designer/">
16 |   <meta property="og:image" content="https://wiredjs.github.io/designer/images/logo512.png">
17 |   <meta property="og:image:width" content="512">
18 |   <meta property="og:image:height" content="512">
19 |   <meta name="twitter:card" content="summary">
20 |   <meta name="twitter:site" content="@preetster">
21 |   <meta name="twitter:title" content="Wired Designer">
22 |   <meta name="twitter:description" content="Mockups and wireframing tool built using web components, and is open source.">
23 |   <meta name="twitter:image" content="https://wiredjs.github.io/designer/images/logo512.png">
24 |   <meta name="twitter:image:width" content="512">
25 |   <meta name="twitter:image:height" content="512">
26 | 
27 |   <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
28 |   <script src="src/app.js"></script>
29 |   <link rel="import" href="src/the-app.html">
30 |   <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
31 | 
32 |   <style>
33 |     body {
34 |       margin: 0;
35 |       font-family: 'Roboto', 'Noto', sans-serif;
36 |       line-height: 1.5;
37 |       background-color: white;
38 |       -webkit-font-smoothing: antialiased;
39 |     }
40 |   </style>
41 | </head>
42 | 
43 | <body>
44 |   <the-app></the-app>
45 | </body>
46 | 
47 | </html>


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "wywiwyg",
3 |   "short_name": "wywiwyg",
4 |   "description": "What you wire is what you get",
5 |   "start_url": "/",
6 |   "display": "standalone"
7 | }
8 | 


--------------------------------------------------------------------------------
/polymer.json:
--------------------------------------------------------------------------------
1 | {
2 |   "lint": {
3 |     "rules": [
4 |       "polymer-2"
5 |     ]
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/action-history.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | @license
  3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | -->
 10 | 
 11 | <link rel="import" href="../bower_components/polymer/polymer-element.html">
 12 | <dom-module id="action-history">
 13 |   <template>
 14 |     <style>
 15 |        :host {
 16 |         display: none;
 17 |       }
 18 |     </style>
 19 |   </template>
 20 |   <script>
 21 |     /*
 22 |      * Manages a stack of available undo/redo actions
 23 |      */
 24 |     class ActionHistory extends Polymer.Element {
 25 |       static get is() { return 'action-history'; }
 26 | 
 27 |       constructor() {
 28 |         super();
 29 |         this.undoHistory = [];
 30 |         this.redoHistory = [];
 31 |       }
 32 | 
 33 |       add(action, node, detail) {
 34 |         const item = {
 35 |           action: action,
 36 |           node: node,
 37 |           detail: detail
 38 |         };
 39 | 
 40 |         // Don't save no-ops: this action may have the new state the same as
 41 |         // the old state (like when you start dragging but don't get anywhere)
 42 |         if (detail && detail.new && detail.old &&
 43 |           this._itemsMatch(action, detail.new, detail.old)) {
 44 |           return;
 45 |         }
 46 | 
 47 |         const topItem = this.undoHistory[this.undoHistory.length - 1];
 48 | 
 49 |         // Don't save dupes: this action may be a duplicate of the previous one.
 50 |         if (topItem &&
 51 |           item.action === topItem.action &&
 52 |           topItem.node === item.node &&
 53 |           item.detail && topItem.detail &&
 54 |           this._itemsMatch(item.action, item.detail, topItem.detail)) {
 55 |           return;
 56 |         }
 57 | 
 58 |         this.undoHistory.push(item);
 59 | 
 60 |         // A new item in the undo stack means you have nothing to redo.
 61 |         this.redoHistory = [];
 62 |         this.updateButtons();
 63 |       }
 64 | 
 65 |       undo() {
 66 |         // Take the top action off the undo stack and move it to the redo stack.
 67 |         const item = this.undoHistory.pop();
 68 |         this.redoHistory.push(item);
 69 |         this.updateButtons();
 70 | 
 71 |         const detail = item.detail;
 72 |         item.node.click();
 73 |         switch (item.action) {
 74 |           case 'update':
 75 |             Polymer.Base.fire('element-updated',
 76 |               { type: detail.type, name: detail.name, value: detail.old.value, skipHistory: true },
 77 |               { node: this });
 78 |             break;
 79 |           case 'new':
 80 |             Polymer.Base.fire('remove-from-canvas',
 81 |               { target: item.node, parent: item.detail.parent },
 82 |               { node: this });
 83 |             break;
 84 |           case 'delete':
 85 |             if (item.node.id === 'viewContainer') {
 86 |               item.node.setInnerHTML(detail.innerHTML);
 87 |             } else {
 88 |               detail.parent.appendChild(item.node);
 89 |             }
 90 |             break;
 91 |           case 'move':
 92 |             this._updatePosition(item.node, detail.old);
 93 |             break;
 94 |           case 'resize':
 95 |             this._updateSize(item.node, detail.old);
 96 |             break;
 97 |           case 'reparent':
 98 |           case 'move-up':
 99 |           case 'move-down':
100 |             this._reparent(item.node, detail.new.parent, detail.old.parent);
101 |             this._updatePosition(item.node, detail.old);
102 |             break;
103 |           case 'fit':
104 |             this._updatePosition(item.node, detail.old);
105 |             this._updateSize(item.node, detail.old);
106 |             break;
107 |           case 'move-back':
108 |             Polymer.Base.fire('move', { type: 'forward', skipHistory: true }, { node: this });
109 |             break;
110 |           case 'move-forward':
111 |             Polymer.Base.fire('move', { type: 'back', skipHistory: true }, { node: this });
112 |             break;
113 |         }
114 |         item.node.click();
115 |       }
116 | 
117 |       redo() {
118 |         // Take the top action off the redo stack and move it to the undo stack.
119 |         let item = this.redoHistory.pop();
120 |         let detail = item.detail;
121 |         this.undoHistory.push(item);
122 |         this.updateButtons();
123 | 
124 |         item.node.click();
125 |         switch (item.action) {
126 |           case 'update':
127 |             Polymer.Base.fire('element-updated',
128 |               { type: detail.type, name: detail.name, value: detail.new.value, skipHistory: true },
129 |               { node: this });
130 |             break;
131 |           case 'new':
132 |             Polymer.Base.fire('add-to-canvas',
133 |               { target: item.node, parent: item.detail.parent },
134 |               { node: this });
135 |             break;
136 |           case 'delete':
137 |             // If the node is the viewContainer, clear its inner HTML.
138 |             if (item.node.id === 'viewContainer') {
139 |               item.node.setInnerHTML('');
140 |             } else {
141 |               item.node.parentElement.click();
142 |               item.node.parentElement.removeChild(item.node);
143 |             }
144 |             break;
145 |           case 'move':
146 |             this._updatePosition(item.node, detail.new);
147 |             break;
148 |           case 'resize':
149 |             this._updateSize(item.node, detail.new);
150 |             break;
151 |           case 'reparent':
152 |           case 'move-up':
153 |           case 'move-down':
154 |             this._reparent(item.node, detail.old.parent, detail.new.parent);
155 |             this._updatePosition(item.node, detail.new);
156 |             break;
157 |           case 'fit':
158 |             this._updateSize(item.node, detail.new);
159 |             this._updatePosition(item.node, detail.new);
160 |             break;
161 |           case 'move-back':
162 |             Polymer.Base.fire('move', { type: 'forward', skipHistory: true }, { node: this });
163 |             break;
164 |           case 'move-forward':
165 |             Polymer.Base.fire('move', { type: 'back', skipHistory: true }, { node: this });
166 |             break;
167 |         }
168 |         item.node.click();
169 |       }
170 | 
171 |       updateButtons() {
172 |         Polymer.Base.fire('update-action-buttons',
173 |           { undos: this.undoHistory.length, redos: this.redoHistory.length }, { node: this });
174 |       }
175 | 
176 |       _itemsMatch(action, first, second) {
177 |         // These kinds of actions have element refs in the details,
178 |         // and you can't json those anyway.
179 |         if (action === 'reparent' || action === 'move-up' || action === 'move-down') {
180 |           return false;
181 |         }
182 |         return JSON.stringify(first) === JSON.stringify(second);
183 |       }
184 | 
185 |       _updatePosition(node, detail) {
186 |         node.style.left = detail.left;
187 |         node.style.top = detail.top;
188 |         node.style.position = detail.position;
189 |       }
190 | 
191 |       _updateSize(node, detail) {
192 |         node.style.width = detail.width;
193 |         node.style.height = detail.height;
194 |         rewire(node);
195 |       }
196 | 
197 |       _reparent(node, oldParent, newParent) {
198 |         oldParent.removeChild(node);
199 |         newParent.appendChild(node);
200 |         rewire(oldParent);
201 |         rewire(newParent);
202 |       }
203 |     }
204 |     customElements.define(ActionHistory.is, ActionHistory);
205 |   </script>
206 | </dom-module>


--------------------------------------------------------------------------------
/src/app-controls.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../bower_components/polymer/polymer-element.html">
12 | <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
13 | <link rel="import" href="app-icons.html">
14 | <dom-module id="app-controls">
15 |   <template strip-whitespace>
16 |     <style>
17 |        :host {
18 |         display: flex;
19 |       }
20 | 
21 |       button {
22 |         background: transparent;
23 |         color: white;
24 |         border: none;
25 |         cursor: pointer;
26 |         transition: all .05s ease-in;
27 |       }
28 | 
29 |       button[disabled] {
30 |         opacity: 0.3;
31 |         pointer-events: none;
32 |       }
33 | 
34 |       button:hover {
35 |         transform: scale(1.1);
36 |       }
37 | 
38 |       .separator {
39 |         border-left: var(--light-grey) solid 1px;
40 |         opacity: .8;
41 |         height: 24px;
42 |         margin: 8px;
43 |       }
44 |     </style>
45 |     <button on-click="undo" id="undoBtn" disabled title="Undo">
46 |       <iron-icon icon="designer:undo"></iron-icon>
47 |       <div>Undo</div>
48 |     </button>
49 |     <button on-click="redo" id="redoBtn" disabled title="Redo">
50 |       <iron-icon icon="designer:redo"></iron-icon>
51 |       <div>Redo</div>
52 |     </button>
53 |     <!-- <div class="separator"></div>
54 |     <button on-click="jsFiddleIt" title="Create a JSFiddle">
55 |       <iron-icon icon="designer:cloud"></iron-icon>
56 |       <div>JSFiddle</div>
57 |     </button> -->
58 |     <form id="jsFiddleForm" hidden method='post' action='https://jsfiddle.net/api/post/library/pure/' target='check'>
59 |       <input type='submit' />
60 |       <textarea name='html'></textarea>
61 |       <input name='title' />
62 |       <input name='description'>
63 |     </form>
64 |   </template>
65 |   <script>
66 |     class AppControls extends Polymer.Element {
67 |       static get is() { return 'app-controls'; }
68 |       static get properties() {
69 |         return {
70 |           actionHistory: Object
71 |         }
72 |       }
73 |       update(undos, redos) {
74 |         this.$.undoBtn.disabled = (undos === 0);
75 |         this.$.redoBtn.disabled = (redos === 0);
76 |       }
77 |       undo() {
78 |         this.actionHistory.undo();
79 |       }
80 |       redo() {
81 |         this.actionHistory.redo();
82 |       }
83 |     }
84 |     customElements.define(AppControls.is, AppControls);
85 |   </script>
86 | </dom-module>


--------------------------------------------------------------------------------
/src/app-icons.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
12 | 
13 | <iron-iconset-svg size="24" name="designer">
14 |   <svg>
15 |     <defs>
16 |       <g id="undo">
17 |         <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"></path>
18 |       </g>
19 |       <g id="redo">
20 |         <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"></path>
21 |       </g>
22 |       <g id="delete">
23 |         <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
24 |       </g>
25 |       <g id="copy">
26 |         <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
27 |       </g>
28 |       <g id="fit">
29 |         <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path>
30 |       </g>
31 |       <g id="back">
32 |         <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
33 |       </g>
34 |       <g id="forward">
35 |         <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>
36 |       </g>
37 |       <g id="up">
38 |         <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"></path>
39 |       </g>
40 |       <g id="down">
41 |         <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"></path>
42 |       </g>
43 |       <g id="cloud">
44 |         <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"></path>
45 |       </g>
46 |       <g id="clear">
47 |         <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
48 |       </g>
49 |       <g id="unfold-more">
50 |         <path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"
51 |         />
52 |       </g>
53 |     </defs>
54 |   </svg>
55 | </iron-iconset-svg>


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | @license
  3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | */
 10 | 
 11 | // window.addEventListener('WebComponentsReady', function () {
 12 | //   document.addEventListener('update-code', function (event) {
 13 | //     codeView.dump(event.detail.target);
 14 | //   }, true);
 15 | // });
 16 | 
 17 | function getProtoProperties(target) {
 18 |   // If this is a custom element, you need to go up the prototype
 19 |   // chain until you get proper HTMLElement, since everything under it
 20 |   // is generated prototypes and will have propeties that are dupes (like:
 21 |   // every observedAttribute is also mirrored as a property)
 22 |   const isCustomElement = target.tagName.indexOf('-') !== -1;
 23 |   let proto = target.__proto__;
 24 |   if (isCustomElement) {
 25 |     while (proto.constructor !== window.HTMLElement.prototype.constructor) {
 26 |       proto = proto.__proto__;
 27 |     }
 28 |   }
 29 | 
 30 |   let protoProps = {};
 31 |   // We literally want nothing other than 'href' and 'target' from HTMLAnchorElement.
 32 |   if (proto.constructor.name === 'HTMLAnchorElement') {
 33 |     protoProps['href'] = Object.getOwnPropertyDescriptors(proto).href;
 34 |     protoProps['target'] = Object.getOwnPropertyDescriptors(proto).target;
 35 |     proto = proto.__proto__;
 36 |   }
 37 |   while (proto.constructor.name !== 'Element') {
 38 |     Object.assign(protoProps, Object.getOwnPropertyDescriptors(proto));
 39 |     proto = proto.__proto__;
 40 |   }
 41 | 
 42 |   let propNames = Object.keys(protoProps).sort();
 43 | 
 44 |   // Skip some very specific Polymer/element properties.
 45 |   let blacklist = [
 46 |     // Polymer specific
 47 |     'isAttached',
 48 |     'constructor', 'created', 'ready', 'attached', 'detached',
 49 |     'attributeChanged', 'is', 'listeners', 'observers', 'properties',
 50 |     // Native elements ones we don't care about
 51 |     'validity', 'useMap', 'innerText', 'outerText', 'style', 'accessKey',
 52 |     'draggable', 'lang', 'spellcheck', 'tabIndex', 'translate', 'align', 'dir',
 53 |     'isMap', 'useMap', 'hspace', 'vspace', 'referrerPolicy', 'crossOrigin',
 54 |     'lowsrc', 'longDesc', "contentEditable", "hidden", "title",
 55 |     // Specific elements stuff
 56 |     'receivedFocusFromKeyboard', 'pointerDown', 'valueAsNumber',
 57 |     'selectionDirection', 'selectionStart', 'selectionEnd'
 58 |   ];
 59 | 
 60 |   let i = 0;
 61 |   while (i < propNames.length) {
 62 |     let name = propNames[i];
 63 | 
 64 |     // Skip everything that starts with a _ which is a Polymer private/protected
 65 |     // and you probably don't care about it.
 66 |     // Also anything in the blacklist. Or that starts with webkit.
 67 |     if (name.charAt(0) === '_' ||
 68 |       name === 'keyEventTarget' ||
 69 |       blacklist.indexOf(name) !== -1 ||
 70 |       name.indexOf('webkit') === 0 ||
 71 |       name.indexOf('on') === 0) {
 72 |       propNames.splice(i, 1);
 73 |       continue;
 74 |     }
 75 | 
 76 |     // Skip everything that doesn't have a setter.
 77 |     if (!protoProps[name].set) {
 78 |       propNames.splice(i, 1);
 79 |       continue;
 80 |     }
 81 |     i++;
 82 |   }
 83 |   return propNames || [];
 84 | }
 85 | 
 86 | function getAttributesIfCustomElement(target) {
 87 |   if (target.tagName.indexOf('-') !== -1) {
 88 |     return target.constructor.observedAttributes;
 89 |   } else {
 90 |     return [];
 91 |   }
 92 | }
 93 | 
 94 | function getCustomProperties(target) {
 95 |   let list = [];
 96 |   if (target.tagName.indexOf('-') !== -1) {
 97 |     let attrs = target.constructor.observedAttributes || [];
 98 |     if (attrs.length) {
 99 |       var props = target.constructor.properties;
100 |       if (props) {
101 |         var keys = Object.keys(props);
102 |         for (var i = 0; i < keys.length; i++) {
103 |           var pname = keys[i];
104 |           var p = props[pname];
105 |           var typeFn = null;
106 |           if (typeof p === 'function') {
107 |             typeFn = p;
108 |           } else {
109 |             typeFn = p.type;
110 |           }
111 |           list.push({
112 |             name: pname,
113 |             type: typeFn ? (typeFn.name || "String") : "String",
114 |             value: target[pname]
115 |           });
116 |         }
117 |       }
118 |     }
119 |   }
120 |   return list;
121 | }
122 | 
123 | function rewire(el) {
124 |   setTimeout(() => {
125 |     if (el._relayout) {
126 |       try { el._relayout(); } catch (ex) { console.error(ex); }
127 |     } else if (el.relayout) {
128 |       try { el.relayout(); } catch (ex) { console.error(ex); }
129 |     } else if (el._refresh) {
130 |       try { el._refresh(); } catch (ex) { console.error(ex); }
131 |     }
132 |   }, 1);
133 | }


--------------------------------------------------------------------------------
/src/canvas/canvas-controls.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | @license
  3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | -->
 10 | 
 11 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
 12 | <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 13 | <link rel="import" href="../app-icons.html">
 14 | <link rel="import" href="../components/designer-tab.html">
 15 | 
 16 | <dom-module id="canvas-controls">
 17 |   <template strip-whitespace>
 18 |     <style>
 19 |        :host {
 20 |         display: block;
 21 |       }
 22 | 
 23 |       designer-tab {
 24 |         color: white;
 25 |         background: var(--dark-grey);
 26 |         width: 100%;
 27 |         height: 41px;
 28 |         margin: 0;
 29 |         padding: 0;
 30 |         border: none;
 31 |         display: flex;
 32 |         padding: 0 0 1em;
 33 |         font-size: 10px;
 34 |         line-height: 1em;
 35 |         justify-content: space-around;
 36 |       }
 37 | 
 38 |       button {
 39 |         padding: 0;
 40 |         cursor: pointer;
 41 |         font-size: 8px;
 42 |         border: 2px solid transparent;
 43 |         border-width: 2px 0;
 44 |         position: relative;
 45 |         margin: 0;
 46 |         transition: all .05s ease-in;
 47 |       }
 48 | 
 49 |       button[disabled] {
 50 |         pointer-events: none;
 51 |         opacity: 0.3;
 52 |       }
 53 | 
 54 |       button::before,
 55 |       button::after {
 56 |         content: '';
 57 |         position: absolute;
 58 |         top: 0;
 59 |         left: 0;
 60 |         width: 100%;
 61 |         height: 4px;
 62 |         border: 2px solid transparent;
 63 |         border-width: 0 2px 0;
 64 |         box-sizing: border-box;
 65 |       }
 66 | 
 67 |       button::after {
 68 |         top: auto;
 69 |         bottom: 0;
 70 |       }
 71 | 
 72 |       button:hover,
 73 |       button:hover::before,
 74 |       button:hover::after {
 75 |         border-color: var(--light-grey);
 76 |       }
 77 | 
 78 |       button:active,
 79 |       button:active::before,
 80 |       button:active::after {
 81 |         border-color: var(--highlight-pink);
 82 |       }
 83 |     </style>
 84 |     <designer-tab>
 85 |       <button on-click="delete" title="Delete element">
 86 |         <iron-icon icon="designer:delete"></iron-icon>
 87 |       </button>
 88 |       <button on-click="clone" id="cloneBtn" title="Clone element">
 89 |         <iron-icon icon="designer:copy"></iron-icon>
 90 |       </button>
 91 |       <button on-click="fit" id="fitBtn" title="Fit to parent">
 92 |         <iron-icon icon="designer:fit"></iron-icon>
 93 |       </button>
 94 |       <button on-click="moveUp" title="Move to parent. Also Shift+UpArrow" id="moveUpBtn">
 95 |         <iron-icon icon="designer:up"></iron-icon>
 96 |       </button>
 97 |       <button on-click="moveDown" title="Move to first child. Also Shift+DownArrow" id="moveDownBtn">
 98 |         <iron-icon icon="designer:down"></iron-icon>
 99 |       </button>
100 |       <button on-click="moveBack" title="Move back. Also Shift+LeftArrow" id="moveBackBtn">
101 |         <iron-icon icon="designer:back"></iron-icon>
102 |       </button>
103 |       <button on-click="moveForward" title="Move forward. Also Shift+RightArrow" id="moveForwardBtn">
104 |         <iron-icon icon="designer:forward"></iron-icon>
105 |       </button>
106 |     </designer-tab>
107 |   </template>
108 |   <script>
109 |     class CanvasControls extends Polymer.Element {
110 |       static get is() { return 'canvas-controls'; }
111 |       static get properties() {
112 |         return {
113 |           selectedElement: {
114 |             type: Object,
115 |             observer: '_selectedElementChanged'
116 |           },
117 |           canvasElement: Object,
118 |           actionHistory: Object
119 |         }
120 |       }
121 | 
122 |       connectedCallback() {
123 |         super.connectedCallback();
124 |         window.addEventListener("delete-request", () => {
125 |           this.delete();
126 |         });
127 |       }
128 | 
129 |       /**
130 |        * Disable a bunch of UI if the selected element is the canvas element.
131 |        */
132 |       update(disableUI) {
133 |         this.$.cloneBtn.disabled = disableUI;
134 |         this.$.fitBtn.disabled = disableUI;
135 |         this.$.moveUpBtn.disabled = disableUI;
136 |         this.$.moveDownBtn.disabled = disableUI;
137 |         this.$.moveBackBtn.disabled = disableUI;
138 |         this.$.moveForwardBtn.disabled = disableUI;
139 |       }
140 | 
141 |       /**
142 |        * Deletes the active element.
143 |        */
144 |       delete() {
145 |         if (!this.selectedElement) {
146 |           console.log('🔥 how did i get here?');
147 |           return;
148 |         }
149 | 
150 |         const el = this.selectedElement;
151 |         // Deleting the top level app should remove its children.
152 |         if (this._isCanvasElement(el)) {
153 |           this.actionHistory.add('delete', el, { innerHTML: el.getInnerHTML() });
154 |           el.setInnerHTML('');
155 |         } else {
156 |           const parent = el.parentElement;
157 |           if (parent) {
158 |             parent.removeChild(el);
159 |             this.selectedElement = parent;
160 |             this.actionHistory.add('delete', el, { parent: parent });
161 |           }
162 |         }
163 |         this._refreshView();
164 |       }
165 | 
166 |       /**
167 |        * Creates a sibling copy of the active element.
168 |        */
169 |       clone() {
170 |         const el = this.selectedElement;
171 |         if (this._isCanvasElement(el)) {
172 |           return;
173 |         }
174 | 
175 |         let clone = el.cloneNode(true);
176 |         el.parentNode.appendChild(clone);
177 | 
178 |         let attrs = el.constructor.observedAttributes || [];
179 |         if (attrs.length) {
180 |           var props = el.constructor.properties;
181 |           if (props) {
182 |             var keys = Object.keys(props);
183 |             for (var i = 0; i < keys.length; i++) {
184 |               var pname = keys[i];
185 |               clone[pname] = el[pname];
186 |             }
187 |           }
188 |         }
189 | 
190 |         Polymer.Base.fire('finish-clone', { target: clone }, { node: this });
191 | 
192 |         // P.S: Since we did a clone, we already have the initial state of the <tag>.
193 |         this.actionHistory.add('new', clone, { parent: el.parentNode });
194 |         this._refreshView();
195 |       }
196 | 
197 |       /**
198 |        * Fit an element to its target
199 |        */
200 |       fit() {
201 |         const el = this.selectedElement;
202 |         if (this._isCanvasElement(el)) {
203 |           return;
204 |         }
205 | 
206 |         this.actionHistory.add('fit', el,
207 |           {
208 |             new: {
209 |               position: 'absolute',
210 |               left: '0', top: '0',
211 |               width: '100%', height: '100%'
212 |             },
213 |             old: {
214 |               position: el.style.position,
215 |               left: el.style.left, top: el.style.top,
216 |               width: el.style.width, height: el.style.height,
217 |             }
218 |           });
219 | 
220 |         el.style.position = 'absolute';
221 |         el.style.left = el.style.top = '0px';
222 |         el.style.height = el.style.width = '100%';
223 |         rewire(el);
224 |       }
225 | 
226 |       /**
227 |        * Moving elements in the DOM
228 |        */
229 |       move(type, skipHistory) {
230 |         switch (type) {
231 |           case 'forward':
232 |             this.moveForward(skipHistory);
233 |             break;
234 |           case 'back':
235 |             this.moveBack(skipHistory);
236 |             break;
237 |           case 'up':
238 |             this.moveUp(skipHistory);
239 |             break;
240 |           case 'down':
241 |             this.moveDown(skipHistory);
242 |             break;
243 |         }
244 |       }
245 |       moveBack(skipHistory) {
246 |         const el = this.selectedElement;
247 |         if (this._isCanvasElement(el)) {
248 |           return;
249 |         }
250 | 
251 |         let parent = el.parentElement;
252 |         let previous = el.previousElementSibling;
253 |         if (previous) {
254 |           parent.insertBefore(el, previous);
255 |         } else {
256 |           parent.appendChild(el);
257 |         }
258 |         this._refreshView();
259 |         if (skipHistory === true) {
260 |           return;
261 |         }
262 |         this.actionHistory.add('move-back', el);
263 | 
264 |       }
265 | 
266 |       moveForward(skipHistory) {
267 |         const el = this.selectedElement;
268 |         if (this._isCanvasElement(el)) {
269 |           return;
270 |         }
271 |         let parent = el.parentElement;
272 | 
273 |         // Since you can't insertAfter your next sibling, you need to
274 |         // insert before two siblings over.
275 |         let next = el.nextElementSibling;
276 |         if (next) {
277 |           next = next.nextElementSibling;
278 |           if (next) {
279 |             parent.insertBefore(el, next);
280 |           } else {
281 |             parent.appendChild(el);
282 |           }
283 |         } else {
284 |           parent.insertBefore(el, parent.firstChild);
285 |         }
286 |         this._refreshView();
287 |         if (skipHistory === true) {
288 |           return;
289 |         }
290 |         this.actionHistory.add('move-forward', el);
291 |       }
292 | 
293 |       moveUp(skipHistory) {
294 |         const el = this.selectedElement;
295 |         let parent = el.parentElement;
296 |         // If the parent isn't already the viewContainer, move it one up.
297 |         if (this._isCanvasElement(el) || (parent && parent.id === 'canvas')) {
298 |           return;
299 |         }
300 |         parent.removeChild(el);
301 |         parent.parentElement.appendChild(el);
302 |         this._refreshView();
303 | 
304 |         if (skipHistory === true) {
305 |           return;
306 |         }
307 |         this.actionHistory.add('move-up', el,
308 |           { old: { parent: parent }, new: { parent: parent.parentElement } });
309 |       }
310 | 
311 |       moveDown(skipHistory) {
312 |         const el = this.selectedElement;
313 |         let sibling = el.nextElementSibling;
314 |         if (this._isCanvasElement(el) || !sibling) {
315 |           return;
316 |         }
317 | 
318 |         // Not everything accepts children, as we've learnt from canvas-view
319 |         // (where I copied this code from like a lazy bum)
320 |         let slots = sibling.root ? sibling.root.querySelectorAll('slot') : [];
321 |         let canDrop =
322 |           (sibling.localName.indexOf('-') === -1 && sibling.localName !== 'input') ||
323 |           sibling.localName === 'dom-repeat' || slots.length !== 0;
324 | 
325 |         if (!canDrop) {
326 |           return;
327 |         }
328 | 
329 |         // If you can, add it there.
330 |         const oldParent = el.parentElement;
331 |         sibling.appendChild(el);
332 |         const oldPosition = el.style.position;
333 |         el.style.position = 'relative';
334 |         this._refreshView();
335 | 
336 |         if (skipHistory === true) {
337 |           return;
338 |         }
339 |         this.actionHistory.add('move-down', el,
340 |           {
341 |             old: { parent: oldParent, position: oldPosition },
342 |             new: { parent: sibling, position: 'relative' }
343 |           });
344 |       }
345 | 
346 |       _refreshView() {
347 |         Polymer.Base.fire('refresh-view', {}, { node: this });
348 |       }
349 | 
350 |       _selectedElementChanged() {
351 |         Polymer.Base.fire('selected-element-changed', { target: this.selectedElement }, { node: this });
352 |       }
353 | 
354 |       _isCanvasElement(el) {
355 |         return (el === this.canvasElement);
356 |       }
357 |     }
358 |     customElements.define(CanvasControls.is, CanvasControls);
359 |   </script>
360 | </dom-module>


--------------------------------------------------------------------------------
/src/canvas/canvas-view.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | @license
  3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | -->
 10 | 
 11 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
 12 | <link rel="import" href="../../bower_components/polymer/lib/mixins/gesture-event-listeners.html">
 13 | 
 14 | <dom-module id="canvas-view">
 15 |   <template>
 16 |     <style>
 17 |        :host {
 18 |         display: block;
 19 |         box-sizing: border-box;
 20 |         width: 100%;
 21 |         position: relative;
 22 |         background-color: var(--canvas-background);
 23 |         transform: translateZ(0);
 24 |         font-family: 'Gloria Hallelujah', sans-serif;
 25 |       }
 26 | 
 27 |       #canvas {
 28 |         box-sizing: border-box;
 29 |         width: 100%;
 30 |         height: 100%;
 31 |       }
 32 | 
 33 |       #canvas>dom-repeat {
 34 |         height: 20px;
 35 |         width: 20px;
 36 |         display: inline-block;
 37 |       }
 38 | 
 39 |       #canvas * {
 40 |         cursor: pointer;
 41 |         user-select: none;
 42 |         -moz-user-select: none;
 43 |         -webkit-user-select: none;
 44 |         -ms-user-select: none;
 45 |       }
 46 | 
 47 |       #canvas *:not(.active):hover {
 48 |         outline: solid 2px #90CAF9 !important;
 49 |         outline-offset: 2px;
 50 |       }
 51 | 
 52 |       .active,
 53 |        :host(.active) {
 54 |         outline: solid 3px var(--highlight-blue) !important;
 55 |         outline-offset: 2px;
 56 |         transform: translateZ(0);
 57 |       }
 58 | 
 59 |        :host(.active) {
 60 |         outline-offset: -3px;
 61 |       }
 62 |       /* Show a resize cursor in the corner */
 63 | 
 64 |       .active-resizable:after {
 65 |         position: absolute;
 66 |         bottom: -3px;
 67 |         right: -3px;
 68 |         height: 14px;
 69 |         width: 14px;
 70 |         content: '↘';
 71 |         cursor: se-resize;
 72 |         font-size: 10px;
 73 |         font-weight: bold;
 74 |         text-align: center;
 75 |         background: var(--highlight-blue);
 76 |         color: white;
 77 |       }
 78 | 
 79 |       .dragging,
 80 |       .resizing {
 81 |         user-select: none;
 82 |         -moz-user-select: none;
 83 |         -webkit-user-select: none;
 84 |         -ms-user-select: none;
 85 |       }
 86 | 
 87 |       .dragging {
 88 |         /*opacity: 0.6;*/
 89 |         z-index: 1000;
 90 |         cursor: move;
 91 |       }
 92 | 
 93 |       .resizing {
 94 |         cursor: se-resize;
 95 |       }
 96 | 
 97 |       .over {
 98 |         outline: dashed 3px var(--highlight-blue) !important;
 99 |         outline-offset: 2px;
100 |       }
101 |     </style>
102 |     <div id="canvas"></div>
103 |   </template>
104 |   <script>
105 |     class CanvasView extends Polymer.Element {
106 |       static get is() { return 'canvas-view'; }
107 |       static get properties() {
108 |         return {
109 |           grid: {
110 |             type: Boolean,
111 |             value: true,
112 |             observer: '_onGridChange'
113 |           }
114 |         }
115 |       }
116 | 
117 |       connectedCallback() {
118 |         super.connectedCallback();
119 | 
120 |         this._onGridChange();
121 | 
122 |         Polymer.Gestures.addListener(this.$.canvas, 'track', this.trackElement.bind(this));
123 |         this.addEventListener('click', event => {
124 |           this.updateActiveElement(this);
125 |         });
126 |         this.$.canvas.addEventListener('click', event => {
127 |           // If this element is a link, it will actually do a navigation, so, don't.
128 |           event.preventDefault();
129 |           event.stopImmediatePropagation();
130 |           if (event.target.id === 'canvas' && !this._justFinishedDraggingOrDropping) {
131 |             this.updateActiveElement(this);
132 |           } else {
133 |             this.updateActiveElement(event.target);
134 |           }
135 |         });
136 | 
137 |         window.addEventListener('keydown', this.onKeyDown.bind(this), true);
138 |       }
139 | 
140 |       _onGridChange() {
141 |         if (this.grid) {
142 |           this.classList.add("grid");
143 |         } else {
144 |           this.classList.remove("grid");
145 |         }
146 |       }
147 | 
148 |       add(el) {
149 |         this.$.canvas.appendChild(el);
150 |       }
151 |       remove(el) {
152 |         this.$.canvas.removeChild(el);
153 |       }
154 |       has(query) {
155 |         return this.$.canvas.querySelector(query);
156 |       }
157 |       setInnerHTML(thing) {
158 |         this.$.canvas.innerHTML = thing;
159 |       }
160 |       getInnerHTML() {
161 |         return this.$.canvas.innerHTML;
162 |       }
163 |       get children() {
164 |         return this.$.canvas.children;
165 |       }
166 |       updateActiveElement(el) {
167 |         this.selectedElement = el;
168 |         Polymer.Base.fire('selected-element-changed', { target: el }, { node: this });
169 |         Polymer.Base.fire('refresh-view', {}, { node: this });
170 |       }
171 | 
172 |       trackElement(event) {
173 |         let el = event.target;
174 |         this._justFinishedDraggingOrDropping = false;
175 |         if (el === this || el === this.$.canvas) {
176 |           return;
177 |         }
178 |         // If we're already resizing, continue.
179 |         if (this._resizing) {
180 |           this.resizeElement(event, el);
181 |           return;
182 |         }
183 | 
184 |         let rekt = el.getBoundingClientRect();
185 |         let shouldResize = this.dragShouldSize(event, rekt);
186 |         if (this._dragging || el.getAttribute("data-noresize") === "true") {
187 |           shouldResize = false;
188 |         }
189 |         if (shouldResize) {
190 |           this._resizing = true;
191 |           this._initialWidth = rekt.width;
192 |           this._initialHeight = rekt.height;
193 |           el.classList.add('resizing');
194 |           el.classList.add('active');
195 |           el.classList.add('active-resizable');
196 |         }
197 | 
198 |         if (this._resizing) {
199 |           this.resizeElement(event, el);
200 |         } else {
201 |           this.dragElement(event, el, rekt);
202 |         }
203 | 
204 |         // TODO: I don't know how to do this better, but I should fix this one day.
205 |         // The problem is that sometimes when you drag, the end drag is outside
206 |         // the dragging target (like, if it resizes because CSS), and will
207 |         // register as a click on the canvas and it's annoying. This gets
208 |         // around that but in a gross way.
209 |         if (event.detail.state === 'end') {
210 |           this._justFinishedDraggingOrDropping = true;
211 |         }
212 |       }
213 | 
214 |       dragElement(event, el, rekt) {
215 |         switch (event.detail.state) {
216 |           case 'start':
217 |             this._resizing = false;
218 |             this._dragging = true;
219 |             el.style.position = 'absolute';
220 |             el.classList.add('dragging');
221 |             el.classList.add('active');
222 |             if (el.getAttribute("data-noresize") != "true") {
223 |               el.classList.add('active-resizable');
224 |             }
225 |             break;
226 |           case 'track':
227 |             // Grid is 10.
228 |             this._trackx = Math.round(event.detail.dx / 10) * 10;
229 |             this._tracky = Math.round(event.detail.dy / 10) * 10;
230 |             el.style.transform = el.style.webkitTransform =
231 |               'translate(' + this._trackx + 'px, ' + this._tracky + 'px)';
232 | 
233 |             // See if it's over anything.
234 |             this._dropTarget = null;
235 |             let targets = this.$.canvas.querySelectorAll('*');
236 |             for (let i = 0; i < targets.length; i++) {
237 |               let t = targets[i];
238 |               t.classList.remove('over');
239 | 
240 |               // Only some native elements and things with slots can be
241 |               // drop targets.
242 |               let slots = t.root ? t.root.querySelectorAll('slot') : [];
243 | 
244 |               // input is the only native in this app that doesn't have a slot
245 |               let canDrop =
246 |                 (t.localName.indexOf('-') === -1 && t.localName !== 'input') ||
247 |                 t.localName === 'dom-repeat' || slots.length !== 0;
248 | 
249 |               if (!canDrop) {
250 |                 continue;
251 |               }
252 | 
253 |               // Do we actually intersect this child?
254 |               let b = t.getBoundingClientRect();
255 |               if (rekt.left > b.left && rekt.left < b.left + b.width &&
256 |                 rekt.top > b.top && rekt.top < b.top + b.height) {
257 | 
258 |                 // New target! Remove the other target indicators.
259 |                 var previousTargets = this.root.querySelectorAll('.over');
260 |                 for (var j = 0; j < previousTargets.length; j++) {
261 |                   previousTargets[j].classList.remove('over');
262 |                 }
263 |                 t.classList.add('over');
264 |                 this._dropTarget = t;
265 |               }
266 |             }
267 |             break;
268 |           case 'end':
269 |             this._resizing = false;
270 |             this._dragging = false;
271 |             let reparented = false;
272 |             let oldParent = el.parentElement;
273 |             let newParent;
274 |             // Does this need to be added to a new parent?
275 |             if (this._dropTarget) {
276 |               reparented = true;
277 |               oldParent.removeChild(el);
278 | 
279 |               // If there was a textContent nuke it, or else you'll
280 |               // never be able to again.
281 |               if (this._dropTarget.children.length === 0) {
282 |                 this._dropTarget.textContent = '';
283 |               }
284 |               this._dropTarget.appendChild(el);
285 |               newParent = this._dropTarget;
286 |               this._dropTarget = null;
287 |             } else if (el.parentElement && (el.parentElement !== this.$.canvas)) {
288 |               reparented = true;
289 |               // If there's no drop target and the el used to be in a different
290 |               // parent, move it to the main view.
291 |               newParent = this.$.canvas;
292 |               el.parentElement.removeChild(el);
293 |               this.add(el);
294 |             }
295 |             let parent = el.parentElement.getBoundingClientRect();
296 | 
297 |             let oldLeft = el.style.left;
298 |             let oldTop = el.style.top;
299 |             let oldPosition = el.style.position;
300 |             if (reparented) {
301 |               el.style.position = 'relative';
302 |               el.style.left = el.style.top = '0px';
303 |               this.actionHistory.add('reparent', el,
304 |                 {
305 |                   new: {
306 |                     parent: newParent,
307 |                     left: el.style.left, top: el.style.top, position: el.style.position
308 |                   },
309 |                   old: {
310 |                     parent: oldParent,
311 |                     left: oldLeft, top: oldTop, position: oldPosition
312 |                   }
313 |                 });
314 |             } else {
315 |               el.style.position = 'absolute';
316 |               el.style.left = rekt.left - parent.left + 'px';
317 |               el.style.top = rekt.top - parent.top + 'px';
318 |               this.actionHistory.add('move', el,
319 |                 {
320 |                   new: { left: el.style.left, top: el.style.top, position: el.style.position },
321 |                   old: { left: oldLeft, top: oldTop, position: oldPosition }
322 |                 });
323 |             }
324 | 
325 |             if (newParent)
326 |               newParent.classList.remove('over');
327 |             if (oldParent)
328 |               oldParent.classList.remove('over');
329 |             el.classList.remove('dragging');
330 |             el.classList.remove('resizing');
331 |             el.style.transform = el.style.webkitTransform = 'none';
332 |             break;
333 |         }
334 |         this.updateActiveElement(el);
335 |         Polymer.Base.fire('refresh-view', { whileTracking: true }, { node: this });
336 |       }
337 | 
338 |       resizeElement(event, el) {
339 |         switch (event.detail.state) {
340 |           case 'track':
341 |             // Grid is 10.
342 |             let trackX = Math.round(event.detail.dx / 10) * 10;
343 |             let trackY = Math.round(event.detail.dy / 10) * 10;
344 |             el.style.width = this._initialWidth + trackX + 'px';
345 |             el.style.height = this._initialHeight + trackY + 'px';
346 |             rewire(el);
347 |             break;
348 |           case 'end':
349 |             this._resizing = false;
350 |             this.actionHistory.add('resize', el,
351 |               {
352 |                 new: { width: el.style.width, height: el.style.height },
353 |                 old: { width: this._initialWidth + 'px', height: this._initialHeight + 'px' }
354 |               });
355 |             el.classList.remove('resizing');
356 |             el.classList.remove('dragging');
357 |             rewire(el);
358 | 
359 |             // Ensure that this element is still selected after we're done.
360 |             // i.e.: Sometimes the end of a resize can end up outside of the element,
361 |             // and register as a click on the main canvas, deselecting the thing
362 |             // you were dragging.
363 |             setTimeout(function () {
364 |               el.click();
365 |             }, 50)
366 |             break;
367 |         }
368 |         this.updateActiveElement(el);
369 |       }
370 | 
371 |       dragShouldSize(event, rect) {
372 |         const right = Math.abs(rect.right - event.detail.x);
373 |         const bottom = Math.abs(rect.bottom - event.detail.y);
374 |         return (right < 13 && bottom < 13);
375 |       }
376 | 
377 |       deepTargetFind(x, y, notThis) {
378 |         let node = document.elementFromPoint(x, y);
379 |         let next = node;
380 |         // this code path is only taken when native ShadowDOM is used
381 |         // if there is a shadowroot, it may have a node at x/y
382 |         // if there is not a shadowroot, exit the loop
383 |         while (next !== notThis && next && next.shadowRoot && !window.ShadyDOM) {
384 |           // if there is a node at x/y in the shadowroot, look deeper
385 |           let oldNext = next;
386 |           next = next.shadowRoot.elementFromPoint(x, y);
387 |           // on Safari, elementFromPoint may return the shadowRoot host
388 |           if (oldNext === next) {
389 |             break;
390 |           }
391 |           if (next) {
392 |             node = next;
393 |           }
394 |         }
395 |         return node;
396 |       }
397 | 
398 |       onKeyDown(event) {
399 |         let el = this.selectedElement;
400 |         if (!el) {
401 |           return;
402 |         }
403 | 
404 |         // This is a global window handler, so clicks can come from anywhere
405 |         // We only care about keys that come after you've clicked on an element,
406 |         // or keys after you've selected something from the tree view.
407 |         // TODO: can this be less bad since it's p horrid?
408 |         let isOk =
409 |           (event.composedPath()[0].localName === 'button' && (event.composedPath()[2].localName == 'tree-view' || event.composedPath()[2].localName == 'palettes-list')) ||
410 |           (event.composedPath()[0].localName == 'body') ||
411 |           event.composedPath()[0].classList.contains('active');
412 | 
413 |         if (!isOk) {
414 |           return;
415 |         }
416 |         let oldLeft = parseInt(el.style.left);
417 |         let oldTop = parseInt(el.style.top);
418 |         let oldPosition = el.style.position;
419 | 
420 |         switch (event.keyCode) {
421 |           case 38:  // up arrow
422 |             if (event.shiftKey) {
423 |               event.preventDefault();
424 |               Polymer.Base.fire('move', { type: 'up' }, { node: this });
425 |             } else {
426 |               el.style.top = oldTop - 10 + 'px';
427 |             }
428 |             break;
429 |           case 40:  // down arrow
430 |             if (event.shiftKey) {
431 |               event.preventDefault();
432 |               Polymer.Base.fire('move', { type: 'down' }, { node: this });
433 |             } else {
434 |               el.style.top = oldTop + 10 + 'px';
435 |             }
436 |             break;
437 |           case 37:  // left arrow
438 |             if (event.shiftKey) {
439 |               event.preventDefault();
440 |               Polymer.Base.fire('move', { type: 'back' }, { node: this });
441 |             } else {
442 |               el.style.left = oldLeft - 10 + 'px';
443 |             }
444 |             break;
445 |           case 39:  // right arrow
446 |             if (event.shiftKey) {
447 |               event.preventDefault();
448 |               Polymer.Base.fire('move', { type: 'forward' }, { node: this });
449 |             } else {
450 |               el.style.left = oldLeft + 10 + 'px';
451 |             }
452 |             break;
453 |           case 8:
454 |           case 46:
455 |             const removeEvent = new CustomEvent('delete-request', { bubbles: true, composed: true, detail: {} });
456 |             window.dispatchEvent(removeEvent);
457 |             break;
458 |         }
459 |         this.actionHistory.add('move', el,
460 |           {
461 |             new: { left: el.style.left, top: el.style.top, position: el.style.position },
462 |             old: { left: oldLeft, top: oldTop, position: oldPosition }
463 |           });
464 |       }
465 | 
466 |     }
467 |     customElements.define(CanvasView.is, CanvasView);
468 |   </script>
469 | </dom-module>


--------------------------------------------------------------------------------
/src/components/designer-tab.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
12 | 
13 | <dom-module id="designer-tab">
14 |   <template strip-whitespace>
15 |     <style>
16 |        :host {
17 |         display: inline-block;
18 |         position: relative;
19 |         border-top: 3px solid transparent;
20 |         color: white;
21 |         transition: border .1s ease-in;
22 |       }
23 | 
24 |        :host([disabled]) {
25 |         opacity: 0.3;
26 |         pointer-events: none;
27 |       }
28 | 
29 |        :host(:hover) {
30 |         border-color: var(--light-grey);
31 |       }
32 | 
33 |        :host(.iron-selected) {
34 |         background: var(--medium-grey);
35 |         border-color: var(--highlight-pink);
36 |       }
37 | 
38 |        :host ::slotted(*) {
39 |         display: inline-block;
40 |         background: transparent;
41 |         border: none;
42 |         padding: 10px 5px;
43 |         font-size: 12px;
44 |         letter-spacing: 1px;
45 |         font-weight: 500;
46 |         text-decoration: none;
47 |         text-transform: uppercase;
48 |         line-height: 1.5;
49 |         color: inherit;
50 |         margin: 0 8px;
51 |         outline: none;
52 |         cursor: pointer;
53 |       }
54 |     </style>
55 |     <slot></slot>
56 |   </template>
57 |   <script>
58 |     class DesignerTab extends Polymer.Element {
59 |       static get is() { return 'designer-tab'; }
60 |     }
61 |     customElements.define(DesignerTab.is, DesignerTab);
62 |   </script>
63 | </dom-module>


--------------------------------------------------------------------------------
/src/components/designer-tabs.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
12 | <link rel="import" href="../../bower_components/iron-selector/iron-selectable.html">
13 | 
14 | <dom-module id="designer-tabs">
15 |   <template strip-whitespace>
16 |     <style>
17 |        :host {
18 |         display: block;
19 |         background-color: var(--dark-grey);
20 |         text-transform: uppercase;
21 |         width: 100%;
22 |       }
23 | 
24 |       #container {
25 |         position: relative;
26 |         width: 100%;
27 |       }
28 |     </style>
29 |     <div id="container">
30 |       <slot></slot>
31 |     </div>
32 |   </template>
33 |   <script>
34 |     class DesignerTabs extends Polymer.mixinBehaviors(
35 |       [Polymer.IronSelectableBehavior], Polymer.Element) {
36 |       static get is() { return 'designer-tabs'; }
37 |     }
38 |     customElements.define(DesignerTabs.is, DesignerTabs);
39 |   </script>
40 | </dom-module>


--------------------------------------------------------------------------------
/src/components/icon-picker.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
  2 | <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  3 | <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
  4 | 
  5 | <dom-module id="icon-picker">
  6 |   <template>
  7 |     <style include="element-stuff-shared-styles iron-flex iron-flex-alignment">
  8 |        :host {
  9 |         display: none;
 10 |         position: fixed;
 11 |         top: 0;
 12 |         left: 0;
 13 |         right: 0;
 14 |         bottom: 0;
 15 |         z-index: 10;
 16 |         background: var(--canvas-background);
 17 |         transform: translateY(-100px);
 18 |         transition: transform 0.3s ease;
 19 |         color: var(--almost-black);
 20 |       }
 21 | 
 22 |       .container {
 23 |         display: inline-block;
 24 |         width: 10em;
 25 |         padding: 1em 0.5em;
 26 |         text-align: center;
 27 |         cursor: pointer;
 28 |         border-radius: 10px;
 29 |       }
 30 | 
 31 |       .container>div {
 32 |         margin-top: 0.5em;
 33 |         color: black;
 34 |         font-size: 10px;
 35 |       }
 36 | 
 37 |       .container:hover {
 38 |         background: rgba(33, 150, 243, 0.15);
 39 |       }
 40 | 
 41 |       h1 {
 42 |         font-weight: 300;
 43 |         margin: 0;
 44 |         padding: 15px 10px 20px;
 45 |         font-size: 30px;
 46 |       }
 47 | 
 48 |       #btnClose {
 49 |         position: fixed;
 50 |         top: 15px;
 51 |         right: 30px;
 52 |         background: var(--highlight-pink);
 53 |         color: white;
 54 |         padding: 12px;
 55 |         border-radius: 100%;
 56 |         cursor: pointer;
 57 |         box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24), 0 0 6px rgba(0, 0, 0, 0.12), 0 6px 6px rgba(0, 0, 0, 0.24);
 58 |       }
 59 |     </style>
 60 |     <h1 class="flex">Select an icon</h1>
 61 |     <iron-icon id="btnClose" on-click="hide" icon="designer:clear"></iron-icon>
 62 |     <div>
 63 |       <template is="dom-repeat" items="[[icons]]">
 64 |         <span class="container" on-click="_onSelected">
 65 |           <iron-icon icon="{{item}}"></iron-icon>
 66 |           <div>{{item}}</div>
 67 |         </span>
 68 |       </template>
 69 |     </div>
 70 |   </template>
 71 |   <script>
 72 |     class IconPicker extends Polymer.Element {
 73 |       static get is() { return "icon-picker" }
 74 |       static get properties() {
 75 |         return {
 76 |           icons: Array
 77 |         }
 78 |       }
 79 | 
 80 |       connectedCallback() {
 81 |         super.connectedCallback();
 82 |         const list = new Polymer.IronMeta({ type: 'iconset' }).list;
 83 |         var match;
 84 |         for (var i = 0; i < list.length; i++) {
 85 |           if (list[i].name === "icons") {
 86 |             match = list[i];
 87 |             break;
 88 |           }
 89 |         }
 90 |         this.icons = match.getIconNames();
 91 |       }
 92 | 
 93 |       _onSelected(event) {
 94 |         var icon = event.model.item;
 95 |         const e = new CustomEvent('select', { bubbles: true, composed: true, detail: { icon: icon } });
 96 |         this.dispatchEvent(e);
 97 |         this.hide();
 98 |       }
 99 | 
100 |       show() {
101 |         this.style.display = "block";
102 |         setTimeout(() => {
103 |           this.style.transform = "none";
104 |         }, 10);
105 |       }
106 | 
107 |       hide() {
108 |         this.style.transform = "translateY(100%)";
109 |         setTimeout(() => {
110 |           this.style.display = "none";
111 |         }, 300);
112 |       }
113 |     }
114 |     customElements.define(IconPicker.is, IconPicker);
115 |   </script>
116 | </dom-module>


--------------------------------------------------------------------------------
/src/components/tree-view.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | @license
  3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | -->
 10 | 
 11 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
 12 | 
 13 | <dom-module id="tree-view">
 14 |   <template strip-whitespace>
 15 |     <style>
 16 |        :host {
 17 |         display: inline-block;
 18 |         position: relative;
 19 |         width: 100%;
 20 |         height: 100%;
 21 |         background: var(--dark-grey);
 22 |       }
 23 | 
 24 |       button {
 25 |         border: none;
 26 |         font-size: 13px;
 27 |         display: block;
 28 |         padding: 4px 0;
 29 |         cursor: pointer;
 30 |         width: 100%;
 31 |         text-align: left;
 32 |         display: inline-block;
 33 |         margin: 0;
 34 |         background: var(--dark-grey);
 35 |         position: relative;
 36 |         top: 0.5em;
 37 |         color: white;
 38 |       }
 39 | 
 40 |       button:hover,
 41 |       button:focus {
 42 |         background: var(--light-grey);
 43 |       }
 44 | 
 45 |       span {
 46 |         margin: 4px;
 47 |       }
 48 | 
 49 |       .id {
 50 |         font-style: italic;
 51 |         color: var(--highlight-pink);
 52 |       }
 53 | 
 54 |       .selected {
 55 |         background: var(--light-grey);
 56 |         outline: none;
 57 |       }
 58 | 
 59 |       #tree ul:first-child {
 60 |         padding-left: 0px;
 61 |       }
 62 | 
 63 |       ul,
 64 |       li {
 65 |         list-style: none;
 66 |         margin: 0;
 67 |         padding: 0;
 68 |       }
 69 | 
 70 |       ul {
 71 |         padding-left: 14px;
 72 |       }
 73 | 
 74 |       li {
 75 |         padding-left: 10px;
 76 |         border: 1px solid silver;
 77 |         border-width: 0 0 1px 1px;
 78 |       }
 79 | 
 80 |       li.has-children {
 81 |         border-bottom: 0px;
 82 |       }
 83 | 
 84 |       li ul {
 85 |         margin-left: -10px;
 86 |         padding-left: 20px;
 87 |       }
 88 |     </style>
 89 |     <div id="tree"></div>
 90 |   </template>
 91 |   <script>
 92 |     class TreeView extends Polymer.Element {
 93 |       static get is() { return 'tree-view'; }
 94 | 
 95 |       ready() {
 96 |         super.ready();
 97 |         this.$.tree.addEventListener('click', this.findElement.bind(this))
 98 |       }
 99 | 
100 |       recomputeTree(parent, active) {
101 |         this.$.tree.innerHTML = '';
102 |         // Since we can't add a pojo to each button, generate a new index for
103 |         // each button in the this.items array of useful data.
104 |         this._index = 0;
105 |         this.items = this.getChildren(parent, this.$.tree);
106 |         this.highlight(active);
107 |         this.$.tree
108 |         return this.items;
109 |       }
110 | 
111 |       _makeButton(tag, id, index) {
112 |         let aButton = document.createElement('button');
113 |         aButton.dataset.index = index;
114 |         let aTag = document.createElement('span');
115 |         aTag.className = 'tag';
116 |         aTag.textContent = tag;
117 |         let aId = document.createElement('span');
118 |         aId.className = 'id';
119 |         aId.textContent = id;
120 |         aButton.appendChild(aTag);
121 |         aButton.appendChild(aId);
122 |         return aButton;
123 |       }
124 | 
125 |       getChildren(parent, div) {
126 |         // At every new parent, we create a new <ul>
127 |         let ul = document.createElement('ul');
128 |         div.appendChild(ul);
129 | 
130 |         let isViewContainer = parent.id === 'viewContainer';
131 |         let data = {
132 |           tag: isViewContainer ? 'main-app' : parent.tagName.toLowerCase(),
133 |           id: isViewContainer ? '' : (parent.id ? '#' + parent.id : ''),
134 |           text: isViewContainer ? '' : '"' + parent.textContent + '"',
135 |           ref: parent,
136 |           index: this._index
137 |         };
138 | 
139 |         // Create this node's content;
140 |         let li = document.createElement('li');
141 |         let button = this._makeButton(data.tag, data.id, data.index);
142 |         li.appendChild(button);
143 |         ul.appendChild(li);
144 | 
145 |         this._index++;
146 |         let nodes = [data];
147 | 
148 |         // If this node has children...
149 |         for (let i = 0; i < parent.children.length; i++) {
150 |           let child = parent.children[i];
151 |           // Skip <style> nodes;
152 |           if (child.localName === 'style') {
153 |             continue;
154 |           }
155 | 
156 |           li.className = 'has-children';
157 |           nodes = nodes.concat(this.getChildren(child, li));
158 |         }
159 |         return nodes;
160 |       }
161 | 
162 |       findElement(event) {
163 |         // If the target is a <span>, you clicked on the span inside the button
164 |         // so you need to use currentTarget.
165 |         let item = event.target;
166 |         if (item.tagName === 'SPAN') {
167 |           item = item.parentElement;
168 |         }
169 |         this.selectTreeElement(item);
170 | 
171 |         // Find the actual element it points to.
172 |         let index = item.dataset.index;
173 |         let el = this.items[index].ref;
174 |         el.click();
175 |       }
176 | 
177 |       selectTreeElement(item) {
178 |         if (this._previouslySelected) {
179 |           this._previouslySelected.classList.remove('selected');
180 |         }
181 |         this._previouslySelected = item;
182 |         item.classList.add('selected');
183 |       }
184 | 
185 |       highlight(element) {
186 |         // Find it in the tree.
187 |         let buttons = this.root.querySelectorAll('button');
188 |         if (buttons.length !== this.items.length) {
189 |           return;
190 |         }
191 | 
192 |         for (let i = 0; i < this.items.length; i++) {
193 |           if (this.items[i].ref === element) {
194 |             this.selectTreeElement(buttons[i]);
195 |             return;
196 |           }
197 |         }
198 |       }
199 |     }
200 |     customElements.define(TreeView.is, TreeView);
201 |   </script>
202 | </dom-module>


--------------------------------------------------------------------------------
/src/element-view/element-properties.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
  2 | <link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
  3 | <link rel="import" href="element-stuff-shared-styles.html">
  4 | <link rel="import" href="element-property.html">
  5 | <link rel="import" href="../components/icon-picker.html">
  6 | 
  7 | <dom-module id="element-properties">
  8 |   <template>
  9 |     <style include="element-stuff-shared-styles"></style>
 10 |     <div class="content-wrapper">
 11 |       <dom-repeat items="[[props]]">
 12 |         <template>
 13 |           <element-property on-icon-picker="_onIconPicker" on-change="_onChange" prop="[[item]]"></element-property>
 14 |         </template>
 15 |       </dom-repeat>
 16 |     </div>
 17 |     <icon-picker id="iconPicker" on-select="_onIconSelect"></icon-picker>
 18 |   </template>
 19 |   <script>
 20 |     class ElementProperties extends Polymer.Element {
 21 |       static get is() { return 'element-properties' }
 22 |       static get properties() {
 23 |         return {
 24 |           props: Array
 25 |         }
 26 |       }
 27 | 
 28 |       display(target, info) {
 29 |         if (target.id === 'viewContainer') {
 30 |           this.set("props", []);
 31 |           return;
 32 |         }
 33 |         let list = this._getCustomProperties(target, info);
 34 |         if (info && info.native) {
 35 |           let propNames = window.getProtoProperties(target);
 36 |           if (propNames && propNames.length) {
 37 |             for (var i = 0; i < propNames.length; i++) {
 38 |               list.push({
 39 |                 name: propNames[i],
 40 |                 type: String,
 41 |                 value: target[propNames[i]] || ""
 42 |               });
 43 |             }
 44 |           }
 45 |         }
 46 |         list.sort((a, b) => {
 47 |           let na = a.name.toUpperCase();
 48 |           let nb = b.name.toUpperCase();
 49 |           if (na < nb) return -1;
 50 |           if (na > nb) return 1;
 51 |           return 0;
 52 |         });
 53 |         this.set("props", list);
 54 |       }
 55 | 
 56 |       _getCustomProperties(target, info) {
 57 |         let list = [];
 58 |         if (target.tagName.indexOf('-') !== -1) {
 59 |           let attrs = target.constructor.observedAttributes || [];
 60 |           if (attrs.length) {
 61 |             var props = target.constructor.properties;
 62 |             if (props) {
 63 |               var keys = Object.keys(props);
 64 |               for (var i = 0; i < keys.length; i++) {
 65 |                 var pname = keys[i];
 66 |                 var p = props[pname];
 67 |                 var typeFn = null;
 68 |                 if (typeof p === 'function') {
 69 |                   typeFn = p;
 70 |                 } else {
 71 |                   typeFn = p.type;
 72 |                 }
 73 |                 let listItem = {
 74 |                   name: pname,
 75 |                   type: typeFn ? (typeFn.name || "String") : "String",
 76 |                   value: target[pname]
 77 |                 };
 78 |                 if ((listItem.type !== "Boolean") && (!listItem.value)) {
 79 |                   listItem.value = "";
 80 |                 }
 81 |                 list.push(listItem);
 82 |               }
 83 |             }
 84 |           }
 85 |         }
 86 |         if (info && info.textContent) {
 87 |           list.push({
 88 |             name: "textContent",
 89 |             type: "String",
 90 |             value: target.textContent
 91 |           });
 92 |         }
 93 |         return list;
 94 |       }
 95 | 
 96 |       _onChange(event) {
 97 |         Polymer.Base.fire('element-updated',
 98 |           {
 99 |             type: 'property',
100 |             name: event.detail.name,
101 |             value: event.detail.value,
102 |             isAttribute: false
103 |           }, { node: this });
104 |       }
105 | 
106 |       _onIconPicker(event) {
107 |         this._pickerTarget = event.target;
108 |         this.$.iconPicker.show();
109 |       }
110 | 
111 |       _onIconSelect(event) {
112 |         let icon = event.detail.icon;
113 |         if (this._pickerTarget) {
114 |           this._pickerTarget.value = icon;
115 |           this._pickerTarget = null;
116 |         }
117 |       }
118 |     }
119 |     window.customElements.define(ElementProperties.is, ElementProperties);
120 |   </script>
121 | </dom-module>


--------------------------------------------------------------------------------
/src/element-view/element-property.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
 2 | 
 3 | <dom-module id="element-property">
 4 |   <template>
 5 |     <style include="element-stuff-shared-styles iron-flex iron-flex-alignment">
 6 |        :host {
 7 |         display: block;
 8 |       }
 9 | 
10 |       .container {
11 |         box-sizing: border-box;
12 |         overflow: hidden;
13 |       }
14 | 
15 |       #moreIcon {
16 |         cursor: pointer;
17 |       }
18 |     </style>
19 |     <div class="container horizontal layout center">
20 |       <label class="flex">{{prop.name}}</label>
21 |       <iron-icon on-click="_onMore" id="moreIcon" icon="designer:unfold-more" style="display: none;"></iron-icon>
22 |       <input id="input" on-change="_onChange">
23 |       <paper-toggle-button id="btn" on-change="_onChange"></paper-toggle-button>
24 |     </div>
25 |   </template>
26 |   <script>
27 |     class ElementProperty extends Polymer.Element {
28 |       static get is() { return "element-property"; }
29 |       static get properties() {
30 |         return {
31 |           prop: {
32 |             type: Object,
33 |             observer: '_onProp'
34 |           }
35 |         };
36 |       }
37 | 
38 |       _onProp() {
39 |         if (this.prop.name === "icon") {
40 |           this.$.moreIcon.style.display = "";
41 |         } else {
42 |           this.$.moreIcon.style.display = "none";
43 |         }
44 |         switch (this.prop.type) {
45 |           case "Boolean":
46 |             this.$.input.style.display = "none";
47 |             this.$.btn.style.display = "";
48 |             this.$.btn.checked = this.prop.value;
49 |             break;
50 |           case "Number":
51 |             this.$.input.style.display = "";
52 |             this.$.btn.style.display = "none";
53 |             this.$.input.type = "number";
54 |             this.$.input.value = this.prop.value;
55 |             break;
56 |           default:
57 |             this.$.input.style.display = "";
58 |             this.$.btn.style.display = "none";
59 |             this.$.input.type = "text";
60 |             this.$.input.value = this.prop.value;
61 |             break;
62 |         }
63 |       }
64 | 
65 |       _onChange(event) {
66 |         if (event) {
67 |           event.stopPropagation();
68 |         }
69 |         var detail = {
70 |           name: this.prop.name,
71 |           value: (this.prop.type === "Boolean") ? this.$.btn.checked : this.$.input.value
72 |         }
73 |         const e = new CustomEvent('change', { bubbles: true, composed: true, detail: detail });
74 |         this.dispatchEvent(e);
75 |       }
76 | 
77 |       _onMore() {
78 |         const e = new CustomEvent('icon-picker', { bubbles: true, composed: true, detail: {} });
79 |         this.dispatchEvent(e);
80 |       }
81 | 
82 |       set value(v) {
83 |         this.$.input.value = v;
84 |         this._onChange();
85 |       }
86 |     }
87 |     customElements.define(ElementProperty.is, ElementProperty);
88 |   </script>
89 | </dom-module>


--------------------------------------------------------------------------------
/src/element-view/element-stuff-base.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <script>
12 |   (function () {
13 |     window.ElementStuffBase = function (base) {
14 |       return class extends base {
15 |         ready() {
16 |           super.ready();
17 |           this._recomputeStuff();
18 |           this.root.addEventListener('change', this._do.bind(this));
19 |         }
20 | 
21 |         _recomputeStuff() {
22 |           this._stuff = [];
23 |           let els = this.root.querySelectorAll('[name]');
24 |           for (let i = 0; i < els.length; i++) {
25 |             this._stuff.push(els[i].name);
26 |           }
27 |         }
28 | 
29 |         _do(event) {
30 |           let target = event.target;
31 | 
32 |           // Is it a custom thing?
33 |           if (target.classList.contains('style-label')) {
34 |             // Set the name on the next input
35 |             target.nextElementSibling.name = target.value;
36 |             this._recomputeStuff();
37 |             return;
38 |           }
39 | 
40 |           Polymer.Base.fire('element-updated',
41 |             {
42 |               type: this.stuffType,
43 |               name: target.name,
44 |               value: target.value,
45 |               isAttribute: target.classList.contains('attribute')
46 |             }, { node: this });
47 |         }
48 |       }
49 |     }
50 |   })();
51 | </script>


--------------------------------------------------------------------------------
/src/element-view/element-stuff-flex.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | @license
  3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
  4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 | Code distributed by Google as part of the polymer project is also
  8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 | -->
 10 | 
 11 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
 12 | <link rel="import" href="element-stuff-base.html">
 13 | <link rel="import" href="element-stuff-shared-styles.html">
 14 | 
 15 | <dom-module id="element-stuff-flex">
 16 |   <template>
 17 |     <style include="element-stuff-shared-styles"></style>
 18 |     <div class="content-wrapper">
 19 |       <label>position</label>
 20 |       <select name="position">
 21 |         <option>static</option>
 22 |         <option>absolute</option>
 23 |         <option>relative</option>
 24 |       </select>
 25 |       <label>display</label>
 26 |       <select name="display">
 27 |         <option>block</option>
 28 |         <option>inline-block</option>
 29 |         <option>flex</option>
 30 |         <option>contents</option>
 31 |         <option>grid</option>
 32 |         <option>inherit</option>
 33 |         <option>initial</option>
 34 |         <option>none</option>
 35 |       </select>
 36 |       <label>flex-direction</label>
 37 |       <select name="flexDirection">
 38 |         <option>row</option>
 39 |         <option>row-reverse</option>
 40 |         <option selected>column</option>
 41 |         <option>column-reverse</option>
 42 |       </select>
 43 |       <label>flex-wrap</label>
 44 |       <select name="flexWrap">
 45 |         <option selected>nowrap</option>
 46 |         <option>wrap</option>
 47 |         <option>wrap-reverse</option>
 48 |       </select>
 49 |       <label>justify-content</label>
 50 |       <select name="justifyContent">
 51 |         <option selected>flex-start</option>
 52 |         <option>flex-end</option>
 53 |         <option>center</option>
 54 |         <option>space-between</option>
 55 |         <option>space-around</option>
 56 |       </select>
 57 |       <label>align-items</label>
 58 |       <select name="alignItems">
 59 |         <option selected>flex-start</option>
 60 |         <option>flex-end</option>
 61 |         <option>center</option>
 62 |         <option>baseline</option>
 63 |         <option>stretch</option>
 64 |       </select>
 65 |       <label>align-content</label>
 66 |       <select name="alignContent">
 67 |         <option selected>flex-start</option>
 68 |         <option>flex-end</option>
 69 |         <option>center</option>
 70 |         <option>space-between</option>
 71 |         <option>space-around</option>
 72 |         <option>stretch</option>
 73 |       </select>
 74 |       <label>align-self</label>
 75 |       <select name="alignSelf">
 76 |         <option selected>auto</option>
 77 |         <option>flex-start</option>
 78 |         <option>flex-end</option>
 79 |         <option>center</option>
 80 |         <option>baseline</option>
 81 |         <option>stretch</option>
 82 |       </select>
 83 |       <label>flex</label><input name="flex">
 84 |     </div>
 85 |   </template>
 86 |   <script>
 87 |     class ElementFlex extends ElementStuffBase(Polymer.Element) {
 88 |       static get is() { return 'element-stuff-flex'; }
 89 |       constructor() {
 90 |         super();
 91 |         this.stuffType = 'style';
 92 |       }
 93 | 
 94 |       display(elementStyles) {
 95 |         for (let i = 0; i < this._stuff.length; i++) {
 96 |           let name = this._stuff[i];
 97 |           let el = this.root.querySelector(`[name=${name}]`);
 98 |           el.value = elementStyles[name];
 99 |         }
100 |       }
101 |     }
102 |     customElements.define(ElementFlex.is, ElementFlex);
103 |   </script>
104 | </dom-module>


--------------------------------------------------------------------------------
/src/element-view/element-stuff-shared-styles.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <dom-module id="element-stuff-shared-styles">
12 |   <template>
13 |     <style>
14 |        :host {
15 |         display: block;
16 |         height: 100%;
17 |         overflow: auto;
18 |         box-sizing: border-box;
19 |       }
20 | 
21 |       .content-wrapper {
22 |         padding: .5em;
23 |       }
24 | 
25 |       label,
26 |       input,
27 |       select {
28 |         display: inline-block;
29 |         color: white;
30 |         background: transparent;
31 |         height: 24px;
32 |         margin: 2px 0;
33 |         padding: 0 2px 0 4px;
34 |         width: 110px;
35 |       }
36 | 
37 |       label,
38 |       .style-label {
39 |         box-sizing: border-box;
40 |         display: inline-block;
41 |         margin-right: 20px;
42 |         font-size: 13px;
43 |         width: 90px;
44 |       }
45 | 
46 |       input,
47 |       select {
48 |         border: 1px solid var(--input-border-color);
49 |         border-radius: 5px;
50 |         box-sizing: border-box;
51 |         font-size: 11px;
52 |       }
53 | 
54 |       input {
55 |         margin-left: 4px;
56 |       }
57 | 
58 |       input[disabled] {
59 |         color: #BDBDBD;
60 |       }
61 | 
62 |       select {
63 |         background: transparent;
64 |       }
65 | 
66 |       select:focus option {
67 |         color: black;
68 |       }
69 | 
70 |       paper-toggle-button {
71 |         --paper-toggle-button-checked-bar-color: #4caf50;
72 |         --paper-toggle-button-checked-button-color: #4caf50;
73 |         --paper-toggle-button-checked-ink-color: #4caf50;
74 |       }
75 |     </style>
76 |   </template>
77 | </dom-module>


--------------------------------------------------------------------------------
/src/element-view/element-stuff-styles.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
12 | <link rel="import" href="element-stuff-base.html">
13 | <link rel="import" href="element-stuff-shared-styles.html">
14 | 
15 | <dom-module id="element-stuff-styles">
16 |   <template strip-whitespace>
17 |     <style include="element-stuff-shared-styles">
18 |       button.add {
19 |         display: inline-block;
20 |         background: transparent;
21 |         border: none;
22 |         padding: 4px 10px;
23 |         font-size: 12px;
24 |         letter-spacing: 1px;
25 |         font-weight: 500;
26 |         text-decoration: none;
27 |         text-transform: uppercase;
28 |         line-height: 1.5;
29 |         color: white;
30 |         background: #232733;
31 |         margin-top: 4px;
32 |       }
33 |     </style>
34 |     <div class="content-wrapper">
35 |       <label>color</label><input name="color" type="color"><br>
36 |       <label>background</label><input name="backgroundColor" type="color">
37 |       <label>font family</label><input name="fontFamily">
38 |       <label>font size</label><input name="fontSize">
39 |       <label>opacity</label><input name="opacity" type="text" min="0" max="1" step="0.1" value="1">
40 |       <label>padding</label><input name="padding">
41 |       <label>margin</label><input name="margin">
42 |       <label>position</label>
43 |       <select name="position">
44 |         <option>static</option>
45 |         <option>absolute</option>
46 |         <option>relative</option>
47 |       </select>
48 |       <label>left</label><input name="left">
49 |       <label>top</label><input name="top">
50 |       <label>width</label><input name="width">
51 |       <label>height</label><input name="height">
52 |       <div id="bonus"></div>
53 |       <button class="add" on-click="addStyle">+ Add style</button>
54 |     </div>
55 |   </template>
56 |   <script>
57 |     class ElementStyles extends ElementStuffBase(Polymer.Element) {
58 |       static get is() { return 'element-stuff-styles'; }
59 |       constructor() {
60 |         super();
61 |         this.stuffType = 'style';
62 |       }
63 |       display(elementStyles, selectedElement) {
64 |         for (let i = 0; i < this._stuff.length; i++) {
65 |           let name = this._stuff[i];
66 |           if (!elementStyles[name])
67 |             continue;
68 |           let el = this.root.querySelector(`[name=${name}]`);
69 |           if (name === 'backgroundColor' || name === 'color') {
70 |             el.value = this._rgb2hex(elementStyles[name]);
71 |           } else if (name === 'width' || name === 'height') {
72 |             // For width or height, the computedStyle gives us exact pixels
73 |             // rather than % positioning.
74 |             el.value = selectedElement.style[name];
75 |           } else {
76 |             el.value = elementStyles[name];
77 |           }
78 |         }
79 |       }
80 |       addStyle(event) {
81 |         let label = document.createElement('input');
82 |         label.className = 'style-label';
83 |         let input = document.createElement('input');
84 |         input.className = 'style-value';
85 |         this.$.bonus.appendChild(label);
86 |         this.$.bonus.appendChild(input);
87 |       }
88 |       _rgb2hex(rgb) {
89 |         rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
90 |         return (rgb && rgb.length === 4) ? "#" +
91 |           ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
92 |           ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
93 |           ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
94 |       }
95 |     }
96 |     customElements.define(ElementStyles.is, ElementStyles);
97 |   </script>
98 | </dom-module>


--------------------------------------------------------------------------------
/src/element-view/element-view.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
 2 | <link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
 3 | <link rel="import" href="../components/designer-tabs.html">
 4 | <link rel="import" href="../components/designer-tab.html">
 5 | <link rel="import" href="element-stuff-styles.html">
 6 | <link rel="import" href="element-properties.html">
 7 | 
 8 | <dom-module id="element-view">
 9 |   <template>
10 |     <style>
11 |        :host {
12 |         display: block;
13 |       }
14 | 
15 |       iron-pages {
16 |         overflow: hidden;
17 |         height: 300px;
18 |         background: var(--medium-grey);
19 |         color: white;
20 |       }
21 |     </style>
22 |     <designer-tabs attr-for-selected="name" selected="{{selected}}">
23 |       <designer-tab name="properties">
24 |         <button>Properties</button>
25 |       </designer-tab>
26 |       <designer-tab name="styles">
27 |         <button>styles</button>
28 |       </designer-tab>
29 |     </designer-tabs>
30 | 
31 |     <iron-pages attr-for-selected="name" selected-attribute="visible" selected="[[selected]]">
32 |       <element-properties name="properties" id="propertiesContainer"></element-properties>
33 |       <element-stuff-styles name="styles" id="stylesContainer"></element-stuff-styles>
34 |     </iron-pages>
35 |   </template>
36 |   <script>
37 |     class ElementView extends Polymer.Element {
38 |       static get is() { return 'element-view'; }
39 |       static get properties() {
40 |         return {
41 |           selected: {
42 |             type: String,
43 |             value: 'properties'
44 |           }
45 |         }
46 |       }
47 | 
48 |       /**
49 |        * Updates the views.
50 |        */
51 |       display(el, info) {
52 |         let computedStyle = window.getComputedStyle(el);
53 |         this.$.propertiesContainer.display(el, info);
54 |         this.$.stylesContainer.display(computedStyle, el);
55 |       }
56 | 
57 |       displayPosition(top, left) {
58 |         this.$.stylesContainer.display({ top: top + 'px', left: left + 'px' });
59 |       }
60 |     }
61 |     customElements.define(ElementView.is, ElementView);
62 |   </script>
63 | </dom-module>


--------------------------------------------------------------------------------
/src/palette/palette-list.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
 2 | <link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
 3 | <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
 4 | <link rel="import" href="palette-shared-styles.html">
 5 | 
 6 | <dom-module id="palette-list">
 7 |   <template strip-whitespace>
 8 |     <style include="palette-shared-styles iron-flex iron-flex-alignment">
 9 |       .buttonTag {
10 |         font-style: italic;
11 |         color: var(--highlight-blue);
12 |         font-size: 95%;
13 |       }
14 |     </style>
15 |     <dom-repeat items="[[elements]]">
16 |       <template>
17 |         <button on-click="_doClick">[[item.label]] <span class="buttonTag">&lt;[[item.name]]&gt;</span></button>
18 |       </template>
19 |     </dom-repeat>
20 | 
21 |     <iron-ajax auto url="[[src]]" handle-as="json" on-response="_elementsReady"></iron-ajax>
22 |   </template>
23 |   <script>
24 |     class PaletteList extends Polymer.Element {
25 |       static get is() { return 'palette-list' }
26 |       static get properties() {
27 |         return {
28 |           src: String,
29 |           elements: { type: Array }
30 |         }
31 |       }
32 | 
33 |       constructor() {
34 |         super();
35 |         this._elementMap = {};
36 |       }
37 | 
38 |       getElementInfo(tag) {
39 |         return this._elementMap[tag];
40 |       }
41 | 
42 |       _elementsReady(event) {
43 |         let list = event.detail.response.elements;
44 |         list.sort((a, b) => {
45 |           let na = a.label.toUpperCase();
46 |           let nb = b.label.toUpperCase();
47 |           if (na < nb) return -1;
48 |           if (na > nb) return 1;
49 |           return 0;
50 |         });
51 |         this._elementMap = {};
52 |         for (var i = 0; i < list.length; i++) {
53 |           this._elementMap[list[i].name] = list[i];
54 |         }
55 |         this.elements = list;
56 |       }
57 | 
58 |       _doClick(event) {
59 |         let item = event.model.item;
60 |         let target = event.currentTarget;
61 |         if (item.native) {
62 |           setTimeout(() => {
63 |             if (target && target.blur) {
64 |               target.blur();
65 |             }
66 |             setTimeout(() => {
67 |               const event = new CustomEvent('new-element', { bubbles: true, composed: true, detail: item });
68 |               this.dispatchEvent(event);
69 |             })
70 |           });
71 |         } else {
72 |           let kind = item.name;
73 |           let matches = kind.match(/(.*)\/(.*)/);
74 |           let packageName = kind;
75 |           if (matches && matches.length === 3) {
76 |             packageName = matches[1];
77 |             kind = matches[2];
78 |           }
79 |           let url = this.resolveUrl('../../bower_components/' + packageName + "/" + kind + ".html");
80 |           Polymer.importHref(url, () => {
81 |             setTimeout(() => {
82 |               if (target && target.blur) {
83 |                 target.blur();
84 |               }
85 |               setTimeout(() => {
86 |                 const event = new CustomEvent('new-element', { bubbles: true, composed: true, detail: item });
87 |                 this.dispatchEvent(event);
88 |               })
89 |             });
90 |           });
91 |         }
92 |       }
93 |     }
94 |     window.customElements.define(PaletteList.is, PaletteList);
95 |   </script>
96 | </dom-module>


--------------------------------------------------------------------------------
/src/palette/palette-shared-styles.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <dom-module id="palette-shared-styles">
12 |   <template>
13 |     <style>
14 |        :host {
15 |         display: block;
16 |         box-sizing: border-box;
17 |         height: 100%;
18 |         overflow: auto;
19 |       }
20 | 
21 |       button {
22 |         background: transparent;
23 |         color: white;
24 |         border: none;
25 |         font-size: 13px;
26 |         display: block;
27 |         cursor: pointer;
28 |         width: 100%;
29 |         text-align: left;
30 |         padding: 8px 14px;
31 |       }
32 | 
33 |       button:hover {
34 |         background: var(--light-grey);
35 |       }
36 | 
37 |       div {
38 |         text-transform: uppercase;
39 |         font-size: 12px;
40 |         font-weight: bold;
41 |         padding: 4px 14px;
42 |       }
43 | 
44 |       input {
45 |         display: block;
46 |         background: none;
47 |         border: none;
48 |         color: white;
49 |         font-size: 16px;
50 |         margin: 10px;
51 |         border-bottom: 1px solid white;
52 |         width: 90%;
53 |       }
54 | 
55 |        ::-webkit-input-placeholder {
56 |         color: white;
57 |         font-weight: 100;
58 |         font-size: 14px;
59 |       }
60 | 
61 |        ::-moz-placeholder {
62 |         color: white;
63 |         font-weight: 100;
64 |         font-size: 14px;
65 |       }
66 | 
67 |        :-ms-input-placeholder {
68 |         color: white;
69 |         font-weight: 100;
70 |         font-size: 14px;
71 |       }
72 | 
73 |        :-moz-placeholder {
74 |         color: white;
75 |         font-weight: 100;
76 |         font-size: 14px;
77 |       }
78 |     </style>
79 |   </template>
80 | </dom-module>


--------------------------------------------------------------------------------
/src/palette/palette-view.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | @license
 3 | Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | 
11 | <link rel="import" href="../../bower_components/polymer/polymer-element.html">
12 | <link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
13 | <link rel="import" href="../components/designer-tabs.html">
14 | <link rel="import" href="../components/designer-tab.html">
15 | <link rel="import" href="palette-list.html">
16 | 
17 | <dom-module id="palette-view">
18 |   <template>
19 |     <style>
20 |        :host {
21 |         display: flex;
22 |         flex-direction: column;
23 |         flex: 1;
24 |       }
25 | 
26 |       iron-pages {
27 |         flex: 1;
28 |         overflow: hidden;
29 |         padding-bottom: 20px;
30 |         background: var(--medium-grey);
31 |         color: white;
32 |       }
33 |     </style>
34 |     <designer-tabs attr-for-selected="name" selected="{{selected}}">
35 |       <designer-tab name="wired">
36 |         <button>Elements</button>
37 |       </designer-tab>
38 |       <!-- <designer-tab name="native">
39 |         <button>Native</button>
40 |       </designer-tab> -->
41 |     </designer-tabs>
42 |     <iron-pages selected="[[selected]]" attr-for-selected="name" selected-attribute="visible">
43 |       <palette-list id="wired" name="wired" src="elements.json"></palette-list>
44 |     </iron-pages>
45 |   </template>
46 |   <script>
47 |     class PaletteView extends Polymer.Element {
48 |       static get is() { return 'palette-view'; }
49 |       static get properties() {
50 |         return {
51 |           selected: {
52 |             type: String,
53 |             value: 'wired'
54 |           }
55 |         }
56 |       }
57 | 
58 |       getElementInfo(el) {
59 |         let tag = el.tagName.toLowerCase();
60 |         return this.$.wired.getElementInfo(tag);
61 |       }
62 |     }
63 |     customElements.define(PaletteView.is, PaletteView);
64 |   </script>
65 | </dom-module>


--------------------------------------------------------------------------------
/src/the-app.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../bower_components/polymer/polymer-element.html">
  2 | <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
  3 | <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
  4 | <link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
  5 | <link rel="import" href="components/designer-tab.html">
  6 | <link rel="import" href="components/designer-tabs.html">
  7 | <link rel="import" href="components/tree-view.html">
  8 | <link rel="import" href="element-view/element-view.html">
  9 | <link rel="import" href="palette/palette-view.html">
 10 | <link rel="import" href="canvas/canvas-view.html">
 11 | <link rel="import" href="canvas/canvas-controls.html">
 12 | <link rel="import" href="action-history.html">
 13 | <link rel="import" href="app-controls.html">
 14 | 
 15 | <dom-module id="the-app">
 16 |   <template>
 17 |     <style is="custom-style" include="iron-flex iron-flex-alignment">
 18 |        :host {
 19 |         display: block;
 20 |         box-sizing: border-box;
 21 |         position: relative;
 22 |         --canvas-background: white;
 23 |         --almost-black: #141720;
 24 |         --dark-grey: #232733;
 25 |         --medium-grey: #2f3545;
 26 |         --light-grey: #383f52;
 27 |         --highlight-pink: #e91e63;
 28 |         --highlight-blue: #2196f3;
 29 |         --input-border-color: #596c7a;
 30 |       }
 31 | 
 32 |       #shell {
 33 |         height: 100vh;
 34 |         overflow: hidden;
 35 |       }
 36 | 
 37 |       #toolbar {
 38 |         padding: 0 16px;
 39 |         background-color: var(--almost-black);
 40 |         color: white;
 41 |         height: 60px;
 42 |         font-size: 20px;
 43 |       }
 44 | 
 45 |       .heavy {
 46 |         font-weight: 900;
 47 |         letter-spacing: 2px;
 48 |       }
 49 | 
 50 |       .lite {
 51 |         font-weight: 100;
 52 |         opacity: 0.5;
 53 |         letter-spacing: normal;
 54 |       }
 55 | 
 56 |       button {
 57 |         background: transparent;
 58 |         color: white;
 59 |         border: none;
 60 |         cursor: pointer;
 61 |       }
 62 | 
 63 |       button[disabled] {
 64 |         pointer-events: none;
 65 |         opacity: 0.3;
 66 |       }
 67 | 
 68 |       .drawer {
 69 |         min-width: 270px;
 70 |         width: 270px;
 71 |         height: 100%;
 72 |         overflow: hidden;
 73 |         background: var(--medium-grey);
 74 |         color: white;
 75 |         display: flex;
 76 |         flex-direction: column;
 77 |       }
 78 | 
 79 |       .grid {
 80 |         background-color: var(--canvas-background);
 81 |         /* 10px grid, using http://www.patternify.com/ */
 82 |         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQoU2NkYGBIY2BgmMVAADASUgCTH1WIN6SIDh4AnhABC01te2MAAAAASUVORK5CYII=);
 83 |         background-position: 0px 0px;
 84 |       }
 85 | 
 86 |       .gridPanel {
 87 |         background: var(--dark-grey);
 88 |         white-space: nowrap;
 89 |         padding: 0;
 90 |         color: white;
 91 |       }
 92 | 
 93 |       .gridPanel label {
 94 |         font-size: 12px;
 95 |         letter-spacing: 1px;
 96 |         font-weight: 500;
 97 |         text-decoration: none;
 98 |         text-transform: uppercase;
 99 |         line-height: 1.5;
100 |         margin-right: 5px;
101 |       }
102 | 
103 |       paper-toggle-button {
104 |         --paper-toggle-button-checked-bar-color: #4caf50;
105 |         --paper-toggle-button-checked-button-color: #4caf50;
106 |         --paper-toggle-button-checked-ink-color: #4caf50;
107 |         --paper-toggle-button-unchecked-bar-color: #c73e65;
108 |         --paper-toggle-button-unchecked-button-color: #c73e65;
109 |         --paper-toggle-button-unchecked-ink-color: #c73e65;
110 |       }
111 | 
112 |       designer-tab.single {
113 |         color: white;
114 |         background: var(--dark-grey);
115 |         width: 100%;
116 |         height: 41px;
117 |         margin: 0;
118 |         padding: 0;
119 |         border: none;
120 |       }
121 | 
122 |       iron-pages {
123 |         height: 100%;
124 |         overflow: auto;
125 |         position: relative;
126 |       }
127 | 
128 |       tree-view {
129 |         overflow: auto;
130 |       }
131 | 
132 |       .logo {
133 |         display: block;
134 |         height: 44px;
135 |         width: auto;
136 |         border-radius: 100%;
137 |         margin-right: 10px;
138 |         margin-left: -5px;
139 |       }
140 | 
141 |       a,
142 |       a:visited,
143 |       a:hover {
144 |         outline: none;
145 |         text-decoration: none;
146 |         cursor: pointer;
147 |         color: inherit !important;
148 |       }
149 | 
150 |       #mobilePanel {
151 |         display: none;
152 |         background: var(--medium-grey);
153 |         color: white;
154 |         padding: 20px;
155 |       }
156 | 
157 |       #mobilePanel h2 {
158 |         font-weight: 400;
159 |       }
160 | 
161 |       #mobilePanel a {
162 |         background: var(--highlight-pink);
163 |         color: white !important;
164 |         display: inline-block;
165 |         padding: 5px 6px;
166 |         border-radius: 3px;
167 |       }
168 | 
169 |       @media (max-width: 800px) {
170 |         #mainPanel {
171 |           display: none;
172 |         }
173 |         #appControls {
174 |           display: none;
175 |         }
176 |         #mobilePanel {
177 |           display: initial;
178 |         }
179 |       }
180 |     </style>
181 |     <action-history id="actionHistory"></action-history>
182 |     <div id="shell" class="vertical layout">
183 |       <div id="toolbar" class="horizontal layout center">
184 |         <a href="https://github.com/wiredjs/designer" target="_blank"><img class="logo" src$="[[importPath]]../images/logo100.png"></a>
185 |         <span class="heavy flex">
186 |             <a href="https://github.com/wiredjs/designer" target="_blank">wired designer<span class="lite"> // beta</span></a>
187 |         </span>
188 |         <app-controls id="appControls"></app-controls>
189 |       </div>
190 |       <div id="mainPanel" class="flex horizontal layout">
191 |         <div id="ldrawer" class="drawer">
192 |           <designer-tab class="single"><button>Components</button></designer-tab>
193 |           <canvas-controls id="canvasControls"></canvas-controls>
194 |           <tree-view name="tree" id="treeView"></tree-view>
195 |         </div>
196 |         <div id="mainView" class="flex vertical layout">
197 |           <div class="horizontal layout" style="box-sizing: border-box;">
198 |             <designer-tabs attr-for-selected="name" selected="{{mainPage}}" class="flex" style="width: auto;">
199 |               <designer-tab name="designer">
200 |                 <button>Designer</button>
201 |               </designer-tab>
202 |             </designer-tabs>
203 |             <div class="gridPanel horizontal layout center">
204 |               <label>Show grid</label>
205 |               <paper-toggle-button id="gridToggle" on-change="_onGridToggle"></paper-toggle-button>
206 |             </div>
207 |           </div>
208 |           <iron-pages class="flex" selected="[[mainPage]]" attr-for-selected="name" selected-attribute="visible">
209 |             <canvas-view name="designer" id="viewContainer" style="height:100%"></canvas-view>
210 |           </iron-pages>
211 |         </div>
212 |         <div class="drawer">
213 |           <element-view id="elementView"></element-view>
214 |           <palette-view id="paletteView"></palette-view>
215 |         </div>
216 |       </div>
217 |       <div id="mobilePanel" class="flex">
218 |         <h2>Wired designer is a desktop only app. Sorry :(</h2>
219 |         <p>
220 |           It's a mockups and wireframing tool built using web components, and is open source.
221 |         </p>
222 |         <p>
223 |           <a href="https://github.com/wiredjs/designer">View on github</a>
224 |         </p>
225 |       </div>
226 |     </div>
227 |   </template>
228 | 
229 |   <script>
230 |     class TheApp extends Polymer.Element {
231 |       static get is() { return 'the-app'; }
232 |       static get properties() {
233 |         return {
234 |           activeElement: {
235 |             type: Object
236 |           },
237 |           mainPage: {
238 |             type: String,
239 |             value: 'designer'
240 |           }
241 |         };
242 |       }
243 | 
244 |       connectedCallback() {
245 |         super.connectedCallback();
246 |         this.setActiveElement(this.$.viewContainer);
247 |         this._loadGridState()
248 | 
249 |         this.refreshView();
250 | 
251 |         this.$.canvasControls.actionHistory = this.$.actionHistory;
252 |         this.$.canvasControls.canvasElement = this.$.viewContainer;
253 |         this.$.appControls.actionHistory = this.$.actionHistory;
254 |         this.$.viewContainer.actionHistory = this.$.actionHistory;
255 | 
256 |         this.addEventListener('new-element', event => this.createElement(event));
257 |         this.addEventListener('element-updated', event => this.updateElement(event));
258 | 
259 |         this.addEventListener('refresh-view', event => this.refreshView(event));
260 |         this.addEventListener('selected-element-changed', event => {
261 |           this.setActiveElement(event.detail.target);
262 |         });
263 |         this.addEventListener('finish-clone', event => {
264 |           this._finishCloneElement(event.detail.target);
265 |         });
266 |         this.addEventListener('update-action-buttons', event => {
267 |           this.$.appControls.update(event.detail.undos, event.detail.redos);
268 |         });
269 | 
270 |         this.addEventListener('remove-from-canvas', event => {
271 |           const parent = event.detail.parent;
272 |           const node = event.detail.target;
273 |           if (parent === this.$.viewContainer) {
274 |             this.$.viewContainer.remove(node);
275 |           } else {
276 |             parent.removeChild(node);
277 |           }
278 |           parent.click();
279 |         });
280 |         this.addEventListener('add-to-canvas', event => {
281 |           const parent = event.detail.parent;
282 |           const node = event.detail.target;
283 |           if (parent === this.$.viewContainer) {
284 |             this.$.viewContainer.add(node);
285 |           } else {
286 |             parent.appendChild(node);
287 |           }
288 |           node.click();
289 |         });
290 |         this.addEventListener('move', event => {
291 |           this.$.canvasControls.move(event.detail.type, event.detail.skipHistory);
292 |         });
293 |       }
294 | 
295 |       setActiveElement(el) {
296 |         if (el === this) {
297 |           el = this.$.viewContainer;
298 |         }
299 |         if (this.activeElement) {
300 |           this.activeElement.classList.remove('active');
301 |           this.activeElement.classList.remove('active-resizable');
302 |         }
303 |         el.classList.add('active');
304 |         if (el.getAttribute("data-noresize") != "true") {
305 |           el.classList.add('active-resizable');
306 |         }
307 |         // Tell everyone who cares about this.
308 |         this.$.canvasControls.selectedElement =
309 |           this.$.viewContainer.selectedElement = this.activeElement = el;
310 |         this.$.canvasControls.selectedElement = this.activeElement;
311 |         this.$.canvasControls.update(this.activeElement === this.$.viewContainer);
312 |       }
313 | 
314 |       createElement(event) {
315 |         let tag = event.detail.name.toLowerCase();
316 |         let el = document.createElement(tag);
317 |         this.$.viewContainer.add(el);
318 |         // If we haven't before, save this initial state of a <tag> element,
319 |         // so that we can diff it to produce the actual state of the world
320 |         // codeView.save(tag, event.detail.package, el);
321 |         this.$.actionHistory.add('new', el, { parent: el.parentNode });
322 |         this._finishNewElement2(el, event.detail);
323 |         // You need the item to render first.
324 |         requestAnimationFrame(function () {
325 |           el.click();
326 |         });
327 |       }
328 | 
329 |       refreshView(event) {
330 |         if (event && event.detail.whileTracking) {
331 |           let size = this.activeElement.getBoundingClientRect();
332 |           this.$.elementView.displayPosition(size.top, size.left);
333 |           return;
334 |         }
335 |         let el = this.activeElement ? this.activeElement : this.$.viewContainer;
336 |         // Display its properties in the side view.
337 |         this.$.elementView.display(el, this.$.paletteView.getElementInfo(el));
338 |         // Highlight it in the tree.
339 |         this.$.treeView.recomputeTree(this.$.viewContainer, el);
340 |       }
341 | 
342 |       updateElement(event) {
343 |         let detail = event.detail;
344 |         let oldValue = this.updateActiveElementValues(detail.type, detail.name, detail.value, detail.isAttribute);
345 |         if (this.activeElement) {
346 |           rewire(this.activeElement);
347 |         }
348 |         if (detail.skipHistory) {
349 |           return;
350 |         }
351 |         this.$.actionHistory.add('update', this.activeElement,
352 |           {
353 |             type: detail.type, name: detail.name,
354 |             new: { value: detail.value },
355 |             old: { value: oldValue }
356 |           });
357 |       }
358 | 
359 |       updateActiveElementValues(type, name, value, isAttribute) {
360 |         let previousValue;
361 |         if (type === 'style') {
362 |           // If we switch to flexbox, automatically reposition the children
363 |           if (name === 'display' && value === 'flex') {
364 |             let children = this.activeElement.children;
365 |             for (let i = 0; i < children.length; i++) {
366 |               children[i].style.position = 'relative';
367 |               children[i].style.top = children[i].style.left = 'auto';
368 |             }
369 |           }
370 |           previousValue = this.activeElement.style[name];
371 |           this.activeElement.style[name] = value;
372 |         } else {
373 |           previousValue = this.activeElement[name];
374 |           // If this is a dom-repeat, don't set the items attribute, set a fake
375 |           // items instead (so that it doesn't stamp).
376 |           if (this.activeElement.localName === 'dom-repeat' && name === 'items') {
377 |             this.activeElement.dataset['fakeItemsAttr'] = value;
378 |           } else if (value === 'true') {
379 |             this._setPropertyOrValue(name, true, isAttribute);
380 |           } else if (value === 'false') {
381 |             if (this.activeElement.hasAttribute(name)) {
382 |               this.activeElement.removeAttribute(name);
383 |             } else {
384 |               this._setPropertyOrValue(name, false, isAttribute);
385 |             }
386 |           } else {
387 |             this._setPropertyOrValue(name, value, isAttribute);
388 |           }
389 |         }
390 |         this.$.treeView.recomputeTree(this.$.viewContainer, this.activeElement);
391 |         return previousValue;
392 |       }
393 | 
394 |       _setPropertyOrValue(name, value, isAttribute) {
395 |         if (isAttribute) {
396 |           this.activeElement.setAttribute(name, value);
397 |         } else {
398 |           this.activeElement[name] = value;
399 |         }
400 |       }
401 | 
402 |       _finishNewElement2(el, item) {
403 |         if (item.properties && item.properties.length) {
404 |           for (var i = 0; i < item.properties.length; i++) {
405 |             el[item.properties[i].name] = item.properties[i].value
406 |           }
407 |         }
408 |         el.style.boxSizing = 'border-box';
409 |         el.style.position = 'absolute';
410 |         el.style.left = el.style.top = '20px';
411 |         if (item.styles && item.styles.length) {
412 |           for (var i = 0; i < item.styles.length; i++) {
413 |             el.style[item.styles[i].name] = item.styles[i].value
414 |           }
415 |         }
416 |         if (item.textContent) {
417 |           el.textContent = item.textContent;
418 |         }
419 |         if (item.disableSizing) {
420 |           el.setAttribute("data-noresize", "true")
421 |         }
422 |       }
423 | 
424 |       _finishCloneElement(el) {
425 |         el.style.boxSizing = 'border-box';
426 |         el.style.position = 'absolute';
427 |         el.style.left = el.style.top = '20px';
428 |       }
429 |       _makeUniqueId(node, id, suffix) {
430 |         id = id.replace('-', '_');
431 |         let uId = id + (suffix || '');
432 |         return this.$.viewContainer.has('#' + uId) ?
433 |           this._makeUniqueId(node, id, suffix ? ++suffix : 1) : uId;
434 |       }
435 | 
436 |       _loadGridState() {
437 |         var showGrid = true;
438 |         if (localStorage) {
439 |           if (localStorage.getItem("hideGrid") === "true") {
440 |             showGrid = false;
441 |           }
442 |         }
443 |         this.$.gridToggle.checked = showGrid;
444 |         this.$.viewContainer.grid = showGrid;
445 |       }
446 | 
447 |       _onGridToggle() {
448 |         this.$.viewContainer.grid = this.$.gridToggle.checked;
449 |         if (localStorage) {
450 |           localStorage.setItem('hideGrid', this.$.gridToggle.checked ? "false" : "true");
451 |         }
452 |       }
453 | 
454 |     }
455 | 
456 |     window.customElements.define(TheApp.is, TheApp);
457 |   </script>
458 | </dom-module>


--------------------------------------------------------------------------------
/test/the-app/the-app_test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 7 | 
 8 |   <title>the-app test</title>
 9 | 
10 |   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
11 |   <script src="../../../web-component-tester/browser.js"></script>
12 | 
13 |   <link rel="import" href="../../src/the-app/the-app.html">
14 | </head>
15 | 
16 | <body>
17 | 
18 |   <test-fixture id="BasicTestFixture">
19 |     <template>
20 |       <the-app></the-app>
21 |     </template>
22 |   </test-fixture>
23 | 
24 |   <test-fixture id="ChangedPropertyTestFixture">
25 |     <template>
26 |       <the-app prop1="new-prop1"></the-app>
27 |     </template>
28 |   </test-fixture>
29 | 
30 |   <script>
31 |     suite('the-app', function () {
32 | 
33 |       test('instantiating the element with default properties works', function () {
34 |         var element = fixture('BasicTestFixture');
35 |         assert.equal(element.prop1, 'the-app');
36 |         var elementShadowRoot = element.shadowRoot;
37 |         var elementHeader = elementShadowRoot.querySelector('h2');
38 |         assert.equal(elementHeader.innerHTML, 'Hello the-app!');
39 |       });
40 | 
41 |       test('setting a property on the element works', function () {
42 |         // Create a test fixture
43 |         var element = fixture('ChangedPropertyTestFixture');
44 |         assert.equal(element.prop1, 'new-prop1');
45 |         var elementShadowRoot = element.shadowRoot;
46 |         var elementHeader = elementShadowRoot.querySelector('h2');
47 |         assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
48 |       });
49 | 
50 |     });
51 |   </script>
52 | 
53 | 
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------