Fix background.
Paulo Gustavo Veiga
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 188 KiB After Width: | Height: | Size: 194 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 101 KiB |
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 149 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 172 KiB After Width: | Height: | Size: 178 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 98 KiB |
@ -9,7 +9,7 @@ body {
|
|||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mindplot-root {
|
.mindplot-div-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="root" class="mindplot-root"></div>
|
<div id="root" class="mindplot-div-container"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -11,7 +11,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="root" class="mindplot-root"></div>
|
<div id="root" class="mindplot-div-container"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -11,7 +11,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="root" class="mindplot-root" onselectstart="return false;"></div>
|
<div id="root" class="mindplot-div-container" onselectstart="return false;"></div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@ -27,6 +27,7 @@ import { $notify } from './widget/ToolbarNotifier';
|
|||||||
import { $msg } from './Messages';
|
import { $msg } from './Messages';
|
||||||
import DesignerKeyboard from './DesignerKeyboard';
|
import DesignerKeyboard from './DesignerKeyboard';
|
||||||
import LocalStorageManager from './LocalStorageManager';
|
import LocalStorageManager from './LocalStorageManager';
|
||||||
|
import TopicStyle from './TopicStyle';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* WebComponent implementation for minplot designer.
|
* WebComponent implementation for minplot designer.
|
||||||
@ -52,7 +53,8 @@ class MindplotWebComponent extends HTMLElement {
|
|||||||
|
|
||||||
const wrapper = document.createElement('div');
|
const wrapper = document.createElement('div');
|
||||||
wrapper.setAttribute('class', 'wise-editor');
|
wrapper.setAttribute('class', 'wise-editor');
|
||||||
wrapper.setAttribute('id', 'mindplot-div-container');
|
wrapper.setAttribute('id', 'mindplot-canvas');
|
||||||
|
wrapper.setAttribute('style', TopicStyle.defaultCanvasCssStyle());
|
||||||
|
|
||||||
this._shadowRoot.appendChild(wrapper);
|
this._shadowRoot.appendChild(wrapper);
|
||||||
this._isLoaded = false;
|
this._isLoaded = false;
|
||||||
@ -80,7 +82,7 @@ class MindplotWebComponent extends HTMLElement {
|
|||||||
const persistenceManager = persistence || new LocalStorageManager('map.xml', false, false);
|
const persistenceManager = persistence || new LocalStorageManager('map.xml', false, false);
|
||||||
const mode = editorRenderMode || 'viewonly';
|
const mode = editorRenderMode || 'viewonly';
|
||||||
|
|
||||||
const mindplodElem = this._shadowRoot.getElementById('mindplot-div-container');
|
const mindplodElem = this._shadowRoot.getElementById('mindplot-canvas');
|
||||||
$assert(mindplodElem, 'Root mindplot element could not be loaded');
|
$assert(mindplodElem, 'Root mindplot element could not be loaded');
|
||||||
|
|
||||||
const options = DesignerOptionsBuilder.buildOptions({
|
const options = DesignerOptionsBuilder.buildOptions({
|
||||||
|
|||||||
@ -137,6 +137,24 @@ class TopicStyle {
|
|||||||
return this._getStyles(topic).fontStyle;
|
return this._getStyles(topic).fontStyle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static defaultCanvasCssStyle(): string {
|
||||||
|
return `position: relative;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 1;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
background-image: linear-gradient(#ebe9e7 1px, transparent 1px),
|
||||||
|
linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
|
||||||
|
background-size: 50px 50px;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;`;
|
||||||
|
}
|
||||||
|
|
||||||
static defaultOuterBorderColor(topic: Topic): string {
|
static defaultOuterBorderColor(topic: Topic): string {
|
||||||
let result: string;
|
let result: string;
|
||||||
if (topic.getShapeType() === 'line') {
|
if (topic.getShapeType() === 'line') {
|
||||||
|
|||||||
@ -1,23 +1,4 @@
|
|||||||
const mindplotStyles = `
|
const mindplotStyles = `
|
||||||
|
|
||||||
div#mindplot {
|
|
||||||
position: relative;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 1;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
background-image: linear-gradient(#ebe9e7 1px, transparent 1px),
|
|
||||||
linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
|
|
||||||
background-size: 50px 50px;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mindplot-svg-tooltip {
|
.mindplot-svg-tooltip {
|
||||||
display: none;
|
display: none;
|
||||||
color: rgb(51, 51, 51);
|
color: rgb(51, 51, 51);
|
||||||
|
|||||||
@ -1,110 +0,0 @@
|
|||||||
/*
|
|
||||||
DO NOT USE THIS FILE until we resolve how to import .css files into shadow dom
|
|
||||||
As a workaround, use the file mindplot-styles.js instead
|
|
||||||
*/
|
|
||||||
.mindplot-svg-tooltip {
|
|
||||||
display: none;
|
|
||||||
color: rgb(51, 51, 51);
|
|
||||||
text-align: center;
|
|
||||||
padding: 1px;
|
|
||||||
border-radius: 6px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 999;
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
animation: fadeIn 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
animation: fadeIn ease 0.4s;
|
|
||||||
-webkit-animation: fadeIn ease 0.4s;
|
|
||||||
-moz-animation: fadeIn ease 0.4s;
|
|
||||||
-o-animation: fadeIn ease 0.4s;
|
|
||||||
-ms-animation: fadeIn ease 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
0% { opacity: 0; }
|
|
||||||
100% { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@-moz-keyframes fadeIn {
|
|
||||||
0% { opacity: 0; }
|
|
||||||
100% { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes fadeIn {
|
|
||||||
0% { opacity: 0; }
|
|
||||||
100% { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@-o-keyframes fadeIn {
|
|
||||||
0% { opacity: 0; }
|
|
||||||
100% { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@-ms-keyframes fadeIn {
|
|
||||||
0% { opacity: 0; }
|
|
||||||
100% { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.mindplot-svg-tooltip-title {
|
|
||||||
background-color: rgb(247, 247, 247);
|
|
||||||
border-bottom-color: rgb(235, 235, 235);
|
|
||||||
border-bottom-left-radius: 0px;
|
|
||||||
border-bottom-right-radius: 0px;
|
|
||||||
border-bottom-style: solid;
|
|
||||||
border-bottom-width: 1px;
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: rgb(51, 51, 51);
|
|
||||||
cursor: default;
|
|
||||||
display: block;
|
|
||||||
font-family: Arial;
|
|
||||||
padding: 8px 14px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mindplot-svg-tooltip-content {
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
padding: 6px 4px;
|
|
||||||
max-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mindplot-svg-tooltip-content-link {
|
|
||||||
padding: 3px 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mindplot-svg-tooltip-content-note {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mindplot-svg-tooltip:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 10px solid transparent;
|
|
||||||
border-right: 10px solid transparent;
|
|
||||||
border-bottom: 10px solid #fff;
|
|
||||||
bottom: 100%;
|
|
||||||
right: 50%;
|
|
||||||
transform: translateX(50%);
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mindplot-svg-tooltip:after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 10px solid transparent;
|
|
||||||
border-right: 10px solid transparent;
|
|
||||||
border-bottom: 10px solid rgb(247, 247, 247);
|
|
||||||
bottom: calc(1px + 100%);
|
|
||||||
right: 50%;
|
|
||||||
transform: translateX(50%);
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 116 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 50 KiB |
@ -48,7 +48,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root" class="mindplot-root"></div>
|
<div id="root" class="mindplot-div-container"></div>
|
||||||
<!--
|
<!--
|
||||||
This HTML file is a template.
|
This HTML file is a template.
|
||||||
If you open it directly in the browser, you will see an empty page.
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|||||||