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;
|
||||
}
|
||||
|
||||
.mindplot-root {
|
||||
.mindplot-div-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" class="mindplot-root"></div>
|
||||
<div id="root" class="mindplot-div-container"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,7 +11,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" class="mindplot-root"></div>
|
||||
<div id="root" class="mindplot-div-container"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,7 +11,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" class="mindplot-root" onselectstart="return false;"></div>
|
||||
<div id="root" class="mindplot-div-container" onselectstart="return false;"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
@ -27,6 +27,7 @@ import { $notify } from './widget/ToolbarNotifier';
|
||||
import { $msg } from './Messages';
|
||||
import DesignerKeyboard from './DesignerKeyboard';
|
||||
import LocalStorageManager from './LocalStorageManager';
|
||||
import TopicStyle from './TopicStyle';
|
||||
|
||||
/**
|
||||
* WebComponent implementation for minplot designer.
|
||||
@ -52,7 +53,8 @@ class MindplotWebComponent extends HTMLElement {
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
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._isLoaded = false;
|
||||
@ -80,7 +82,7 @@ class MindplotWebComponent extends HTMLElement {
|
||||
const persistenceManager = persistence || new LocalStorageManager('map.xml', false, false);
|
||||
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');
|
||||
|
||||
const options = DesignerOptionsBuilder.buildOptions({
|
||||
|
||||
@ -137,6 +137,24 @@ class TopicStyle {
|
||||
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 {
|
||||
let result: string;
|
||||
if (topic.getShapeType() === 'line') {
|
||||
|
||||
@ -1,23 +1,4 @@
|
||||
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 {
|
||||
display: none;
|
||||
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>
|
||||
<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.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||