@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
173 lines • 6.42 kB
JavaScript
import { DDialogSelect, DDialogSelectListItem, isString, toSvgTexture } from "@wcardinal/wcardinal-ui";
import { Texture } from "pixi.js";
var dialogSelectThumbnailSize = 128;
export var getDialogSelectThumbnailSize = function () {
return dialogSelectThumbnailSize;
};
export var setDialogSelectThumbnailSize = function (size) {
dialogSelectThumbnailSize = size;
};
var dialogSelectTHumbnailNotFound;
export var getDialogSelectThumbnailNotFound = function () {
var result = dialogSelectTHumbnailNotFound;
if (result == null) {
result = newDialogTHumbnailNotFound();
dialogSelectTHumbnailNotFound = result;
}
return result;
};
export var newDialogTHumbnailNotFound = function () {
var thumbnailSize = getDialogSelectThumbnailSize();
var resolution = window.devicePixelRatio || 1;
var svgSize = thumbnailSize * resolution;
return toSvgTexture("<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"".concat(svgSize, "px\" width=\"").concat(svgSize, "px\" viewBox=\"0 0 24 24\" fill=\"#000000\" fill-opacity=\"0.05\">") +
"<path d=\"M19,5v11.17l2,2V5c0-1.1-0.9-2-2-2H5.83l2,2H19z\"/>" +
"<path d=\"M2.81,2.81L1.39,4.22L3,5.83V19c0,1.1,0.9,2,2,2h13.17l1.61,1.61l1.41-1.41L2.81,2.81z M5,19V7.83l7.07,7.07L11.25,16 L9,13l-3,4h8.17l2,2H5z\"/>" +
"</svg>", resolution);
};
export var newDialogSelectWithThumbnailsOptions = function (controller, toThumbnail, onSelect) {
var thumbnailSize = getDialogSelectThumbnailSize();
var thumbnailNotFound = getDialogSelectThumbnailNotFound();
var itemPadding = 8;
var itemLabelHeight = 30;
var itemSize = itemPadding + thumbnailSize + itemLabelHeight + itemPadding;
var textures = new Map();
var items = new Set();
var toImage = function (item) {
if (toThumbnail) {
var image_1 = toThumbnail(item.id);
if (isString(image_1)) {
var texture = textures.get(image_1);
if (texture == null) {
var newTexture_1 = Texture.from(image_1);
newTexture_1.baseTexture.on("error", function () {
checkTextures(newTexture_1, image_1);
});
texture = newTexture_1;
textures.set(image_1, newTexture_1);
}
return texture;
}
else if (image_1 != null) {
return image_1;
}
}
return thumbnailNotFound;
};
var openTextures = function () {
items.forEach(function (item) {
var value = item.value;
if (value != null) {
item.image = toImage(value);
}
});
};
var clearTimeoutId = null;
var clearTextures = function () {
items.forEach(function (item) {
item.image = null;
});
textures.forEach(function (texture, url) {
if (texture !== thumbnailNotFound) {
var baseTexture = texture.baseTexture;
texture.destroy();
if (baseTexture) {
baseTexture.destroy();
baseTexture.off("error");
}
}
});
textures.clear();
};
var checkTextures = function (texture, url) {
if (texture !== thumbnailNotFound && !texture.valid) {
items.forEach(function (item) {
var image = item.image.get(0);
if (image != null && image.source === texture) {
image.source = thumbnailNotFound;
}
});
var baseTexture = texture.baseTexture;
texture.destroy();
if (baseTexture) {
baseTexture.destroy();
baseTexture.off("error");
}
textures.set(url, thumbnailNotFound);
}
};
return {
width: "auto",
height: "auto",
layout: {
width: "auto",
height: "auto"
},
content: {
width: "auto",
height: "auto"
},
list: {
width: itemSize * 3,
height: itemSize * 2 + itemPadding * 4,
data: {
toImage: toImage
},
updater: {
newItem: function (data) {
var result = new DDialogSelectListItem(data, {
width: itemSize,
height: itemSize,
padding: itemPadding,
text: {
align: {
vertical: "BOTTOM",
horizontal: "CENTER"
}
},
image: {
align: {
vertical: "TOP",
horizontal: "CENTER",
with: "PADDING"
},
margin: {
vertical: 0
},
tint: {
color: 0xffffff,
alpha: 1.0
}
}
});
items.add(result);
return result;
}
}
},
controller: controller,
on: {
open: function () {
if (clearTimeoutId != null) {
window.clearTimeout(clearTimeoutId);
clearTimeoutId = null;
clearTextures();
}
openTextures();
},
close: function () {
if (clearTimeoutId == null) {
clearTimeoutId = window.setTimeout(function () {
clearTimeoutId = null;
clearTextures();
}, 1000);
}
},
select: onSelect
}
};
};
export var newDialogSelectWithThumbnails = function (controller, toThumbnail, onSelect) {
return new DDialogSelect(newDialogSelectWithThumbnailsOptions(controller, toThumbnail, onSelect));
};
//# sourceMappingURL=e-dialog-select-with-thumbnails.js.map