mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Move images to inline.
Remove toolkit init
This commit is contained in:
parent
717f4e023b
commit
959a732999
@ -38,7 +38,7 @@ class ImageIcon extends Icon {
|
|||||||
|
|
||||||
// Build graph image representation ...
|
// Build graph image representation ...
|
||||||
const iconType = iconModel.getIconType();
|
const iconType = iconModel.getIconType();
|
||||||
const imgUrl = ImageIcon._getImageUrl(iconType);
|
const imgUrl = ImageIcon.getImageUrl(iconType);
|
||||||
super(imgUrl);
|
super(imgUrl);
|
||||||
|
|
||||||
this._topicId = topic.getId();
|
this._topicId = topic.getId();
|
||||||
@ -53,13 +53,13 @@ class ImageIcon extends Icon {
|
|||||||
const newIconType = ImageIcon._getNextFamilyIconId(iconTypeClick);
|
const newIconType = ImageIcon._getNextFamilyIconId(iconTypeClick);
|
||||||
iconModel.setIconType(newIconType);
|
iconModel.setIconType(newIconType);
|
||||||
|
|
||||||
me._image.setHref(ImageIcon._getImageUrl(newIconType));
|
me._image.setHref(ImageIcon.getImageUrl(newIconType));
|
||||||
});
|
});
|
||||||
this._image.setCursor('pointer');
|
this._image.setCursor('pointer');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static _getImageUrl(iconId) {
|
static getImageUrl(iconId) {
|
||||||
let result = images[`${iconId}.svg`];
|
let result = images[`${iconId}.svg`];
|
||||||
if (!result) {
|
if (!result) {
|
||||||
result = images[`${iconId}.png`];
|
result = images[`${iconId}.png`];
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
import { $assert, $defined } from '@wisemapping/core-js';
|
import { $assert, $defined } from '@wisemapping/core-js';
|
||||||
import { Workspace as Workspace2D, Toolkit } from '@wisemapping/web2d';
|
import { Workspace as Workspace2D } from '@wisemapping/web2d';
|
||||||
|
|
||||||
class Workspace {
|
class Workspace {
|
||||||
constructor(screenManager, zoom, isReadOnly) {
|
constructor(screenManager, zoom, isReadOnly) {
|
||||||
@ -64,7 +64,7 @@ class Workspace {
|
|||||||
fillColor: 'transparent',
|
fillColor: 'transparent',
|
||||||
strokeWidth: 0,
|
strokeWidth: 0,
|
||||||
};
|
};
|
||||||
Toolkit.init();
|
|
||||||
return new Workspace2D(workspaceProfile);
|
return new Workspace2D(workspaceProfile);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
|
|
||||||
import { Mindmap } from "../..";
|
import { Mindmap } from "../..";
|
||||||
|
import ImageIcon from "../ImageIcon";
|
||||||
import Exporter from "./Exporter";
|
import Exporter from "./Exporter";
|
||||||
|
|
||||||
class SVGExporter implements Exporter {
|
class SVGExporter implements Exporter {
|
||||||
@ -10,11 +11,13 @@ class SVGExporter implements Exporter {
|
|||||||
|
|
||||||
export(): string {
|
export(): string {
|
||||||
// Replace all images for in-line images ...
|
// Replace all images for in-line images ...
|
||||||
const imagesElements:HTMLCollection = this.svgElement.children
|
const imagesElements: HTMLCollection = this.svgElement.getElementsByTagName('image');
|
||||||
console.log(imagesElements.length);
|
console.log(imagesElements.length);
|
||||||
Array.from(imagesElements).forEach((image) => {
|
|
||||||
console.log(image);
|
|
||||||
|
|
||||||
|
const image = ImageIcon.getImageUrl('face_smile');
|
||||||
|
Array.from(imagesElements).forEach((image) => {
|
||||||
|
const imgValue = image.attributes['xlink:href'].value;
|
||||||
|
console.log(image.attributes);
|
||||||
});
|
});
|
||||||
return "";
|
return "";
|
||||||
|
|
||||||
|
@ -43,7 +43,7 @@ class IconPanel extends ToolbarPaneItem {
|
|||||||
const iconId = familyIcons[j];
|
const iconId = familyIcons[j];
|
||||||
const img = $('<img>')
|
const img = $('<img>')
|
||||||
.attr('id', iconId)
|
.attr('id', iconId)
|
||||||
.attr('src', ImageIcon._getImageUrl(iconId))
|
.attr('src', ImageIcon.getImageUrl(iconId))
|
||||||
.attr('class', 'panelIcon');
|
.attr('class', 'panelIcon');
|
||||||
|
|
||||||
familyContent.append(img);
|
familyContent.append(img);
|
||||||
|
@ -5,22 +5,31 @@ import XMLSerializerFactory from '../../../src/components/persistence/XMLSeriali
|
|||||||
import SVGExporter from '../../../src/components/export/SVGExporter';
|
import SVGExporter from '../../../src/components/export/SVGExporter';
|
||||||
|
|
||||||
test('mindplot generation of simple maps', () => {
|
test('mindplot generation of simple maps', () => {
|
||||||
const parser = new DOMParser();
|
// Load mindmap DOM ...
|
||||||
|
const mindmapPath = path.resolve(__dirname, './samples/welcome.xml');
|
||||||
// Load DOM ...
|
const mapDocument = parseXMLFile(mindmapPath, 'text/xml');
|
||||||
const mapStream = fs.readFileSync(path.resolve(__dirname, './samples/welcome.xml'), { encoding: 'utf-8' });
|
|
||||||
const mapDocument = parser.parseFromString(mapStream.toString(), 'text/xml')
|
|
||||||
|
|
||||||
// Convert to mindmap ...
|
// Convert to mindmap ...
|
||||||
const serializer = XMLSerializerFactory.getSerializerFromDocument(mapDocument);
|
const serializer = XMLSerializerFactory.getSerializerFromDocument(mapDocument);
|
||||||
const mindmap: Mindmap = serializer.loadFromDom(mapDocument, 'welcome');
|
const mindmap: Mindmap = serializer.loadFromDom(mapDocument, 'welcome');
|
||||||
|
|
||||||
// Load SVG ...
|
// Load SVG ...
|
||||||
const svgStream = fs.readFileSync(path.resolve(__dirname, './samples/welcome.svg'), { encoding: 'utf-8' });
|
const svgPath = path.resolve(__dirname, './samples/welcome.svg');
|
||||||
const svgDocument = parser.parseFromString(svgStream.toString(), 'application/xml')
|
const svgDocument = parseXMLFile(svgPath, 'image/svg+xml');
|
||||||
console.log(svgDocument);
|
|
||||||
|
|
||||||
// Inspect ...
|
// Inspect ...
|
||||||
const exporter = new SVGExporter(mindmap, svgDocument.documentElement);
|
const exporter = new SVGExporter(mindmap, svgDocument.documentElement);
|
||||||
console.log(exporter.export());
|
console.log(exporter.export());
|
||||||
|
|
||||||
|
function parseXMLFile(filePath: fs.PathOrFileDescriptor, mimeType: DOMParserSupportedType) {
|
||||||
|
const parser = new DOMParser();
|
||||||
|
const stream = fs.readFileSync(filePath, { encoding: 'utf-8' });
|
||||||
|
const xmlDoc = parser.parseFromString(stream.toString(), mimeType);
|
||||||
|
|
||||||
|
// Is there any parsing error ?.
|
||||||
|
if (xmlDoc.getElementsByTagName("parsererror").length > 0) {
|
||||||
|
throw new Error(`Unexpected error parsing: ${filePath}. Error: ${new XMLSerializer().serializeToString(xmlDoc)}`);
|
||||||
|
}
|
||||||
|
return xmlDoc;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<svg focusable="true" preserveAspectRatio="none" width="1440" height="900" viewBox="-607.7499999999999 -318.32500000000005 1224 765">
|
<svg focusable="true" preserveAspectRatio="none" width="1440" height="900" viewBox="-607.7499999999999 -318.32500000000005 1224 765" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"></path>
|
<path style="fill:none " stroke-width="2px" stroke="#3f96ff" stroke-opacity="1" visibility="hidden"></path>
|
||||||
<path stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" visibility="visible" d="M198,-166 L192.09129864709237,-164.95728799654572M198,-166 L196.95728799654572,-171.90870135290763"></path>
|
<path stroke-width="2px" stroke="#9b74e6" stroke-opacity="1" visibility="visible" d="M198,-166 L192.09129864709237,-164.95728799654572M198,-166 L196.95728799654572,-171.90870135290763"></path>
|
||||||
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-242,161 C-251,161 -262,190 -271,190"></path>
|
<path style="fill:none " stroke-width="1px" stroke="#495879" stroke-opacity="1" fill="#495879" fill-opacity="1" visibility="visible" d="M-242,161 C-251,161 -262,190 -271,190"></path>
|
||||||
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
@ -5,7 +5,6 @@ module.exports = {
|
|||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, 'dist'),
|
path: path.resolve(__dirname, 'dist'),
|
||||||
filename: '[name].js',
|
filename: '[name].js',
|
||||||
publicPath: '',
|
|
||||||
library: {
|
library: {
|
||||||
type: 'umd',
|
type: 'umd',
|
||||||
},
|
},
|
||||||
@ -35,8 +34,8 @@ module.exports = {
|
|||||||
exclude: '/node_modules/',
|
exclude: '/node_modules/',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.(png|svg|jpg|jpeg|gif)$/i,
|
test: /\.(png|svg)$/i,
|
||||||
type: 'asset/resource',
|
type: 'asset/inline',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -17,7 +17,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import Workspace from './components/Workspace';
|
import Workspace from './components/Workspace';
|
||||||
import Toolkit from './components/Toolkit';
|
|
||||||
import Elipse from './components/Elipse';
|
import Elipse from './components/Elipse';
|
||||||
import Line from './components/Line';
|
import Line from './components/Line';
|
||||||
import PolyLine from './components/PolyLine';
|
import PolyLine from './components/PolyLine';
|
||||||
@ -42,6 +41,5 @@ export {
|
|||||||
PolyLine,
|
PolyLine,
|
||||||
Rect,
|
Rect,
|
||||||
Text,
|
Text,
|
||||||
Toolkit,
|
|
||||||
Workspace,
|
Workspace,
|
||||||
};
|
};
|
||||||
|
@ -1,22 +1,20 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {
|
import {
|
||||||
Toolkit, Workspace, Arrow, Point,
|
Workspace, Arrow, Point,
|
||||||
} from '../../src';
|
} from '../../src';
|
||||||
|
|
||||||
Toolkit.init();
|
const workspace = new Workspace({ fillColor: 'green' });
|
||||||
|
workspace.setSize('200px', '200px');
|
||||||
const overflowWorkspace = new Workspace({ fillColor: 'green' });
|
|
||||||
overflowWorkspace.setSize('200px', '200px');
|
|
||||||
const arrow = new Arrow();
|
const arrow = new Arrow();
|
||||||
arrow.setFrom(50, 50);
|
arrow.setFrom(50, 50);
|
||||||
arrow.setControlPoint(new Point(-50, 0));
|
arrow.setControlPoint(new Point(-50, 0));
|
||||||
|
|
||||||
overflowWorkspace.append(arrow);
|
workspace.append(arrow);
|
||||||
|
|
||||||
const arrow2 = new Arrow();
|
const arrow2 = new Arrow();
|
||||||
arrow2.setFrom(100, 50);
|
arrow2.setFrom(100, 50);
|
||||||
arrow2.setControlPoint(new Point(50, 50));
|
arrow2.setControlPoint(new Point(50, 50));
|
||||||
|
|
||||||
overflowWorkspace.append(arrow2);
|
workspace.append(arrow2);
|
||||||
|
|
||||||
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
|
workspace.addItAsChildTo($('#overflowExample').first());
|
||||||
|
@ -1,19 +1,17 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {
|
import {
|
||||||
Toolkit, Workspace, CurvedLine, Point,
|
Workspace, CurvedLine, Point,
|
||||||
} from '../../src';
|
} from '../../src';
|
||||||
|
|
||||||
Toolkit.init();
|
const workspace = new Workspace({ fillColor: 'green' });
|
||||||
|
workspace.setSize('400px', '400px');
|
||||||
const overflowWorkspace = new Workspace({ fillColor: 'green' });
|
|
||||||
overflowWorkspace.setSize('400px', '400px');
|
|
||||||
const line1 = new CurvedLine();
|
const line1 = new CurvedLine();
|
||||||
line1.setStyle(CurvedLine.SIMPLE_LINE);
|
line1.setStyle(CurvedLine.SIMPLE_LINE);
|
||||||
line1.setFrom(200, 200);
|
line1.setFrom(200, 200);
|
||||||
line1.setTo(100, 100);
|
line1.setTo(100, 100);
|
||||||
line1.setSrcControlPoint(new Point(-100, 0));
|
line1.setSrcControlPoint(new Point(-100, 0));
|
||||||
line1.setDestControlPoint(new Point(100, 0));
|
line1.setDestControlPoint(new Point(100, 0));
|
||||||
overflowWorkspace.append(line1);
|
workspace.append(line1);
|
||||||
|
|
||||||
const line2 = new CurvedLine();
|
const line2 = new CurvedLine();
|
||||||
line2.setStyle(CurvedLine.NICE_LINE);
|
line2.setStyle(CurvedLine.NICE_LINE);
|
||||||
@ -21,6 +19,6 @@ line2.setFrom(0, 0);
|
|||||||
line2.setTo(150, 90);
|
line2.setTo(150, 90);
|
||||||
line2.setSrcControlPoint(new Point(100, 0));
|
line2.setSrcControlPoint(new Point(100, 0));
|
||||||
line2.setDestControlPoint(new Point(-100, 0));
|
line2.setDestControlPoint(new Point(-100, 0));
|
||||||
overflowWorkspace.append(line2);
|
workspace.append(line2);
|
||||||
|
|
||||||
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
|
workspace.addItAsChildTo($('#overflowExample').first());
|
@ -1,7 +1,7 @@
|
|||||||
/* eslint-disable no-alert */
|
/* eslint-disable no-alert */
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {
|
import {
|
||||||
Toolkit, Workspace, Elipse,
|
Workspace, Elipse,
|
||||||
} from '../../src';
|
} from '../../src';
|
||||||
|
|
||||||
global.$ = $;
|
global.$ = $;
|
||||||
@ -55,7 +55,6 @@ MultipleEventHandler.prototype.unRegisterOneListener = function unRegisterOneLis
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
Toolkit.init();
|
|
||||||
|
|
||||||
// Workspace with CoordOrigin(100,100);
|
// Workspace with CoordOrigin(100,100);
|
||||||
const workspace = new Workspace();
|
const workspace = new Workspace();
|
||||||
|
@ -25,14 +25,14 @@ function multiline(text, family, elemId) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function alignments(text, family, elemId) {
|
function alignments(text, family, elemId) {
|
||||||
const overflowWorkspace = new Workspace();
|
const workspace = new Workspace();
|
||||||
overflowWorkspace.setSize('260px', '240px');
|
workspace.setSize('260px', '240px');
|
||||||
overflowWorkspace.setCoordSize('260', '240');
|
workspace.setCoordSize('260', '240');
|
||||||
overflowWorkspace.setCoordOrigin(0, 0);
|
workspace.setCoordOrigin(0, 0);
|
||||||
|
|
||||||
['center', 'left', 'right'].forEach((align, i) => {
|
['center', 'left', 'right'].forEach((align, i) => {
|
||||||
const wText = new Text();
|
const wText = new Text();
|
||||||
overflowWorkspace.append(wText);
|
workspace.append(wText);
|
||||||
|
|
||||||
wText.setText(text);
|
wText.setText(text);
|
||||||
wText.setFont(family, 8, 'bold');
|
wText.setFont(family, 8, 'bold');
|
||||||
@ -41,11 +41,9 @@ function alignments(text, family, elemId) {
|
|||||||
wText.setTextAlignment(align);
|
wText.setTextAlignment(align);
|
||||||
});
|
});
|
||||||
|
|
||||||
overflowWorkspace.addItAsChildTo($(`#${elemId}`));
|
workspace.addItAsChildTo($(`#${elemId}`));
|
||||||
}
|
}
|
||||||
|
|
||||||
Toolkit.init();
|
|
||||||
|
|
||||||
// Multine tests ...
|
// Multine tests ...
|
||||||
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
|
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
|
||||||
multiline('This multine text.\nLine 1 :)\nLine2', family, `multi${i}`);
|
multiline('This multine text.\nLine 1 :)\nLine2', family, `multi${i}`);
|
||||||
|
@ -6,8 +6,6 @@ import {
|
|||||||
|
|
||||||
global.$ = $;
|
global.$ = $;
|
||||||
|
|
||||||
Toolkit.init();
|
|
||||||
|
|
||||||
const basicTest = () => {
|
const basicTest = () => {
|
||||||
const workspace = new Workspace();
|
const workspace = new Workspace();
|
||||||
workspace.setSize('150px', '150px');
|
workspace.setSize('150px', '150px');
|
||||||
|
33
packages/web2d/test/playground/image.html
Normal file
33
packages/web2d/test/playground/image.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Image Tests </h1>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Load URL Images in PNG and SVG
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div id="urlImage" />
|
||||||
|
</td>
|
||||||
|
</tr> <tr>
|
||||||
|
<td>
|
||||||
|
Load Inline PNG and SVG
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div id="inlineImage" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
28
packages/web2d/test/playground/image.js
Normal file
28
packages/web2d/test/playground/image.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import $ from 'jquery';
|
||||||
|
import svgResource from './resources/logo-icon.svg';
|
||||||
|
import pngResource from './resources/logo-icon.png';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Workspace, Image,
|
||||||
|
} from '../../src';
|
||||||
|
|
||||||
|
// URL Based image test ...
|
||||||
|
const workspace = new Workspace({ fillColor: 'light-gray' });
|
||||||
|
workspace.setSize('200px', '100px');
|
||||||
|
|
||||||
|
// Add SVG Image ...
|
||||||
|
const svgImage = new Image();
|
||||||
|
svgImage.setHref(svgResource);
|
||||||
|
svgImage.setSize(80, 120);
|
||||||
|
workspace.append(svgImage);
|
||||||
|
|
||||||
|
// Add PNG Image ...
|
||||||
|
const pngImage = new Image();
|
||||||
|
pngImage.setHref(pngResource);
|
||||||
|
pngImage.setSize(60, 120);
|
||||||
|
pngImage.setPosition(80, 0);
|
||||||
|
workspace.append(pngImage);
|
||||||
|
|
||||||
|
workspace.addItAsChildTo($('#urlImage').first());
|
||||||
|
|
||||||
|
// Embedded image test ...
|
@ -24,6 +24,8 @@
|
|||||||
<li><a href="/shapes.html">Shapes</a></li>
|
<li><a href="/shapes.html">Shapes</a></li>
|
||||||
<li><a href="/text.html">Text</a></li>
|
<li><a href="/text.html">Text</a></li>
|
||||||
<li><a href="/workspace.html">Workspace</a></li>
|
<li><a href="/workspace.html">Workspace</a></li>
|
||||||
|
<li><a href="/image.html">Image</a></li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@ -1,11 +1,10 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {
|
import {
|
||||||
Toolkit, Workspace, Line, Rect,
|
Workspace, Line, Rect,
|
||||||
} from '../../src';
|
} from '../../src';
|
||||||
|
|
||||||
global.$ = $;
|
global.$ = $;
|
||||||
|
|
||||||
Toolkit.init();
|
|
||||||
const workspaceAttributes = {
|
const workspaceAttributes = {
|
||||||
width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc',
|
width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc',
|
||||||
};
|
};
|
||||||
|
@ -1,10 +1,9 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {
|
import {
|
||||||
Toolkit, Workspace, PolyLine,
|
Workspace, PolyLine,
|
||||||
} from '../../src';
|
} from '../../src';
|
||||||
|
|
||||||
global.$ = $;
|
global.$ = $;
|
||||||
Toolkit.init();
|
|
||||||
|
|
||||||
let overflowWorkspace = new Workspace({ fillColor: 'green' });
|
let overflowWorkspace = new Workspace({ fillColor: 'green' });
|
||||||
overflowWorkspace.setSize('100px', '100px');
|
overflowWorkspace.setSize('100px', '100px');
|
||||||
|
20
packages/web2d/test/playground/prototype.js
vendored
20
packages/web2d/test/playground/prototype.js
vendored
@ -1,7 +1,5 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {
|
import * as src from '../../src';
|
||||||
Toolkit, Workspace, Rect, Group,
|
|
||||||
} from '../../src';
|
|
||||||
|
|
||||||
global.$ = $;
|
global.$ = $;
|
||||||
|
|
||||||
@ -9,16 +7,14 @@ let xScale = 1000;
|
|||||||
let yScale = 600;
|
let yScale = 600;
|
||||||
let shapeOrigX = 0;
|
let shapeOrigX = 0;
|
||||||
|
|
||||||
Toolkit.init();
|
const workspace = new src.Workspace();
|
||||||
|
|
||||||
const workspace = new Workspace();
|
|
||||||
workspace.setSize(`${xScale}px`, `${yScale}px`);
|
workspace.setSize(`${xScale}px`, `${yScale}px`);
|
||||||
workspace.setCoordSize(xScale, yScale);
|
workspace.setCoordSize(xScale, yScale);
|
||||||
workspace.setCoordOrigin(0, 0);
|
workspace.setCoordOrigin(0, 0);
|
||||||
workspace.setFill('#f0f0f0');
|
workspace.setFill('#f0f0f0');
|
||||||
|
|
||||||
// Center Topic Rect ...
|
// Center Topic Rect ...
|
||||||
const centralRect = new Rect(0.3);
|
const centralRect = new src.Rect(0.3);
|
||||||
centralRect.setSize(200, 60);
|
centralRect.setSize(200, 60);
|
||||||
centralRect.setPosition(300, 300);
|
centralRect.setPosition(300, 300);
|
||||||
centralRect.setFill('#99ccff');
|
centralRect.setFill('#99ccff');
|
||||||
@ -41,13 +37,13 @@ global.zoomOut = function zoomOut() {
|
|||||||
|
|
||||||
global.createShape = function createShape() {
|
global.createShape = function createShape() {
|
||||||
// Secondary Idea...
|
// Secondary Idea...
|
||||||
const nodeGroup = new Group();
|
const nodeGroup = new src.Group();
|
||||||
nodeGroup.setSize(200, 60);
|
nodeGroup.setSize(200, 60);
|
||||||
nodeGroup.setCoordSize(200, 60);
|
nodeGroup.setCoordSize(200, 60);
|
||||||
nodeGroup.setPosition(700, shapeOrigX);
|
nodeGroup.setPosition(700, shapeOrigX);
|
||||||
shapeOrigX += 50;
|
shapeOrigX += 50;
|
||||||
|
|
||||||
const outerRect = new Rect();
|
const outerRect = new src.Rect();
|
||||||
outerRect.setSize(200, 100);
|
outerRect.setSize(200, 100);
|
||||||
outerRect.setVisibility(false);
|
outerRect.setVisibility(false);
|
||||||
outerRect.setPosition(0, 0);
|
outerRect.setPosition(0, 0);
|
||||||
@ -55,7 +51,7 @@ global.createShape = function createShape() {
|
|||||||
outerRect.setStroke(1, 'solid', '#878b8f');
|
outerRect.setStroke(1, 'solid', '#878b8f');
|
||||||
nodeGroup.append(outerRect);
|
nodeGroup.append(outerRect);
|
||||||
|
|
||||||
const inerRect = new Rect(0.3);
|
const inerRect = new src.Rect(0.3);
|
||||||
inerRect.setSize(190, 85);
|
inerRect.setSize(190, 85);
|
||||||
inerRect.setPosition(5, 10);
|
inerRect.setPosition(5, 10);
|
||||||
inerRect.setFill('white');
|
inerRect.setFill('white');
|
||||||
@ -76,14 +72,14 @@ global.createShape = function createShape() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
nodeGroup.addEvent('mousedown', function addEvent(e) {
|
nodeGroup.addEvent('mousedown', function addEvent(e) {
|
||||||
const shadowGroup = new Group();
|
const shadowGroup = new src.Group();
|
||||||
shadowGroup.setSize(200, 60);
|
shadowGroup.setSize(200, 60);
|
||||||
shadowGroup.setCoordSize(200, 60);
|
shadowGroup.setCoordSize(200, 60);
|
||||||
|
|
||||||
const position = nodeGroup.getPosition();
|
const position = nodeGroup.getPosition();
|
||||||
shadowGroup.setPosition(position.x, position.y);
|
shadowGroup.setPosition(position.x, position.y);
|
||||||
|
|
||||||
const shadowRect = new Rect(0.3);
|
const shadowRect = new src.Rect(0.3);
|
||||||
shadowRect.setSize(190, 85);
|
shadowRect.setSize(190, 85);
|
||||||
shadowRect.setPosition(5, 10);
|
shadowRect.setPosition(5, 10);
|
||||||
shadowRect.setFill('white', 0.3);
|
shadowRect.setFill('white', 0.3);
|
||||||
|
@ -1,11 +1,10 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {
|
import {
|
||||||
Toolkit, Workspace, Rect,
|
Workspace, Rect,
|
||||||
} from '../../src';
|
} from '../../src';
|
||||||
|
|
||||||
global.$ = $;
|
global.$ = $;
|
||||||
|
|
||||||
Toolkit.init();
|
|
||||||
|
|
||||||
const rectExampleTest = () => {
|
const rectExampleTest = () => {
|
||||||
const workspace = new Workspace();
|
const workspace = new Workspace();
|
||||||
|
BIN
packages/web2d/test/playground/resources/logo-icon.png
Normal file
BIN
packages/web2d/test/playground/resources/logo-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 34 KiB |
15
packages/web2d/test/playground/resources/logo-icon.svg
Normal file
15
packages/web2d/test/playground/resources/logo-icon.svg
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg viewBox="11.791 4.244 45.584 42.529" width="47.08" height="32.567" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="i08j30ef6a" fill="#fff">
|
||||||
|
<path d="M 32.334 17.911 C 32.334 20.705 31.301 23.382 29.458 25.357 C 27.617 27.332 25.121 28.441 22.517 28.441 C 19.913 28.441 17.417 27.332 15.576 25.357 C 13.734 23.382 12.7 20.705 12.7 17.911 L 32.334 17.911 Z"/>
|
||||||
|
</mask>
|
||||||
|
<mask id="1f1ltfoetb" fill="#fff">
|
||||||
|
<path d="M 56.588 17.911 C 56.588 20.705 55.554 23.382 53.712 25.357 C 51.872 27.332 49.375 28.441 46.771 28.441 C 44.167 28.441 41.67 27.332 39.83 25.357 C 37.988 23.382 36.954 20.705 36.954 17.911 L 56.588 17.911 Z"/>
|
||||||
|
</mask>
|
||||||
|
<path fill="#FFCB00" stroke="#000" stroke-linejoin="round" stroke-width="1.5" d="M 34.644 41.603 C 32.912 36.337 30.603 36.996 24.25 32.388 L 44.462 32.388 C 38.933 36.505 35.8 36.337 34.644 41.603 Z" style=""/>
|
||||||
|
<path fill="#FFCB00" stroke="#000" stroke-width="1.5" d="M 50.051 23.119 C 50.051 26.338 48.377 29.364 45.467 31.627 C 42.563 33.888 38.503 35.318 33.975 35.318 C 29.446 35.318 25.385 33.888 22.482 31.627 C 19.572 29.364 17.896 26.338 17.896 23.119 C 17.896 19.898 19.572 16.874 22.482 14.61 C 25.385 12.349 29.445 10.918 33.972 10.918 C 38.503 10.918 42.563 12.349 45.467 14.61 C 48.375 16.874 50.053 19.898 50.053 23.119 Z" style=""/>
|
||||||
|
<path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M 32.334 17.911 C 32.334 20.705 31.3 23.382 29.459 25.357 C 27.618 27.332 25.12 28.441 22.517 28.441 C 19.914 28.441 17.418 27.332 15.576 25.357 C 13.734 23.382 12.7 20.705 12.7 17.911 L 32.334 17.911 Z" mask="url(#i08j30ef6a)" style=""/>
|
||||||
|
<path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M 56.588 17.911 C 56.588 20.705 55.554 23.382 53.712 25.357 C 51.872 27.332 49.375 28.441 46.772 28.441 C 44.168 28.441 41.671 27.332 39.831 25.357 C 37.989 23.382 36.954 20.705 36.954 17.911 L 56.588 17.911 Z" mask="url(#1f1ltfoetb)" style=""/>
|
||||||
|
<path stroke="#000" stroke-width="1.5" d="M 31.179 19.393 C 33.489 17.417 35.8 17.417 38.109 19.393" style=""/>
|
||||||
|
<path fill="#FFCB00" d="M 34.859 39.957 C 33.128 34.692 23.095 32.388 24.827 31.073 C 26.559 29.757 43.307 29.1 44.462 30.415 C 45.618 31.731 36.541 34.134 34.859 39.957 Z" style=""/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 2.2 KiB |
@ -1,12 +1,10 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {
|
import {
|
||||||
Toolkit, Workspace, Rect,
|
Workspace, Rect,
|
||||||
} from '../../src';
|
} from '../../src';
|
||||||
|
|
||||||
global.$ = $;
|
global.$ = $;
|
||||||
|
|
||||||
Toolkit.init();
|
|
||||||
|
|
||||||
const strokeStyleTest = () => {
|
const strokeStyleTest = () => {
|
||||||
function builder(parent, scale, strokeWidth) {
|
function builder(parent, scale, strokeWidth) {
|
||||||
const rectSize = scale * 80;
|
const rectSize = scale * 80;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {
|
import {
|
||||||
Toolkit, Workspace, Text,
|
Workspace, Text,
|
||||||
} from '../../src';
|
} from '../../src';
|
||||||
import TransformUtils from '../../src/components/peer/utils/TransformUtils';
|
import TransformUtils from '../../src/components/peer/utils/TransformUtils';
|
||||||
|
|
||||||
@ -44,7 +44,6 @@ const textTestHelper = function textTestHelper(coordSize, textval, font, fontSiz
|
|||||||
workspaces[iesimo] = workspace;
|
workspaces[iesimo] = workspace;
|
||||||
};
|
};
|
||||||
|
|
||||||
Toolkit.init();
|
|
||||||
textTestHelper(200, 'Test Text 1', 'Arial', 10, 'normal', 'normal', 'red', 'text0', 0);
|
textTestHelper(200, 'Test Text 1', 'Arial', 10, 'normal', 'normal', 'red', 'text0', 0);
|
||||||
textTestHelper(100, 'Test Text 2', 'Arial', 10, 'normal', 'normal', 'blue', 'text1', 1);
|
textTestHelper(100, 'Test Text 2', 'Arial', 10, 'normal', 'normal', 'blue', 'text1', 1);
|
||||||
textTestHelper(50, 'Test Text 3', 'Arial', 10, 'normal', 'normal', 'blue', 'text2', 2);
|
textTestHelper(50, 'Test Text 3', 'Arial', 10, 'normal', 'normal', 'blue', 'text2', 2);
|
||||||
|
@ -1,13 +1,11 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {
|
import {
|
||||||
Toolkit, Workspace, Elipse,
|
Workspace, Elipse,
|
||||||
} from '../../src';
|
} from '../../src';
|
||||||
import Grid from './Grid';
|
import Grid from './Grid';
|
||||||
|
|
||||||
global.$ = $;
|
global.$ = $;
|
||||||
|
|
||||||
Toolkit.init();
|
|
||||||
|
|
||||||
const overflowWorkspace = new Workspace();
|
const overflowWorkspace = new Workspace();
|
||||||
overflowWorkspace.setSize('100px', '100px');
|
overflowWorkspace.setSize('100px', '100px');
|
||||||
const elipse1 = new Elipse();
|
const elipse1 = new Elipse();
|
||||||
|
@ -17,6 +17,7 @@ module.exports = {
|
|||||||
group: './test/playground/group.js',
|
group: './test/playground/group.js',
|
||||||
prototype: './test/playground/prototype.js',
|
prototype: './test/playground/prototype.js',
|
||||||
text: './test/playground/text.js',
|
text: './test/playground/text.js',
|
||||||
|
image: './test/playground/image.js',
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, 'dist', 'tests'),
|
path: path.resolve(__dirname, 'dist', 'tests'),
|
||||||
@ -39,6 +40,10 @@ module.exports = {
|
|||||||
/node_modules/,
|
/node_modules/,
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|svg)$/i,
|
||||||
|
type: 'asset/inline',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
@ -145,5 +150,12 @@ module.exports = {
|
|||||||
template: 'test/playground/text.html',
|
template: 'test/playground/text.html',
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
new HtmlWebpackPlugin(
|
||||||
|
{
|
||||||
|
chunks: ['image'],
|
||||||
|
filename: 'image.html',
|
||||||
|
template: 'test/playground/image.html',
|
||||||
|
},
|
||||||
|
),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user