@node-projects/web-component-designer 0.1.55 → 0.1.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import { IBinding } from '../../item/IBinding.js';
|
|
2
2
|
export interface IElementDefinition {
|
|
3
3
|
tag: string;
|
|
4
|
+
/**
|
|
5
|
+
* A path or a Object URL to an image
|
|
6
|
+
*/
|
|
7
|
+
icon?: string;
|
|
8
|
+
/**
|
|
9
|
+
* A HTML String wich is used in the Palette
|
|
10
|
+
*/
|
|
11
|
+
displayHtml?: string;
|
|
4
12
|
name?: string;
|
|
5
13
|
description?: string;
|
|
6
14
|
import?: string;
|
|
@@ -6,5 +6,5 @@ export declare class PaletteElements extends BaseCustomWebComponentLazyAppend {
|
|
|
6
6
|
static readonly template: HTMLTemplateElement;
|
|
7
7
|
private _table;
|
|
8
8
|
constructor();
|
|
9
|
-
loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[]): void;
|
|
9
|
+
loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[], relativeImagePath?: string): void;
|
|
10
10
|
}
|
|
@@ -50,14 +50,27 @@ export class PaletteElements extends BaseCustomWebComponentLazyAppend {
|
|
|
50
50
|
super();
|
|
51
51
|
this._table = this._getDomElement('table');
|
|
52
52
|
}
|
|
53
|
-
loadElements(serviceContainer, elementDefintions) {
|
|
53
|
+
loadElements(serviceContainer, elementDefintions, relativeImagePath) {
|
|
54
54
|
for (const elementDefintion of elementDefintions) {
|
|
55
|
-
let option = document.createElement("option");
|
|
56
|
-
option.value = elementDefintion.tag;
|
|
57
55
|
const tr = document.createElement("tr");
|
|
58
56
|
const tdEl = document.createElement("td");
|
|
59
57
|
const button = document.createElement("button");
|
|
60
|
-
button.
|
|
58
|
+
button.setAttribute("part", "button");
|
|
59
|
+
if (elementDefintion.icon && !elementDefintion.displayHtml) {
|
|
60
|
+
let icon = elementDefintion.icon;
|
|
61
|
+
if (!elementDefintion.icon.startsWith('data:')) {
|
|
62
|
+
icon = relativeImagePath + elementDefintion.icon;
|
|
63
|
+
}
|
|
64
|
+
button.innerHTML =
|
|
65
|
+
'<table><tr>' +
|
|
66
|
+
'<td align="left" valign="middle" style="width:20px;"><img style="width:16px;height:16px" src="' + icon + '"></td>' +
|
|
67
|
+
'<td align="left" >' + elementDefintion.tag + '</td>' +
|
|
68
|
+
'</tr></table>\n';
|
|
69
|
+
}
|
|
70
|
+
else if (elementDefintion.displayHtml)
|
|
71
|
+
button.innerHTML = elementDefintion.displayHtml;
|
|
72
|
+
else
|
|
73
|
+
button.innerText = elementDefintion.name ? elementDefintion.name : elementDefintion.tag;
|
|
61
74
|
button.draggable = true;
|
|
62
75
|
button.ondragstart = (e) => {
|
|
63
76
|
e.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(elementDefintion));
|