Public
Edited
Nov 22, 2024
function skypackImport(path) {
return `https://cdn.skypack.dev/${path}`;
}
{
let divcanvas = html`<div style="height:450px"></div>`;
//let ProxyLoggingClass = createProxyLoggingClass(Diagram);
let diagram = new Diagram({
canvas: { container: divcanvas },
modules: [...modulesAvailable.map((a) => a[1]), ElementStyleModule]
});
diagram.invoke((canvas, elementFactory) => {
// add root
var root = elementFactory.createRoot();
console.log("AAAA", root);
canvas.setRootElement(root);
// add shapes
var shape1 = elementFactory.createShape({
x: 150,
y: 100,
width: 100,
height: 80
});
canvas.addShape(shape1, root);
var shape2 = elementFactory.createShape({
x: 290,
y: 220,
width: 100,
height: 80
});
canvas.addShape(shape2, root);
var connection1 = elementFactory.createConnection({
waypoints: [
{ x: 250, y: 180 },
{ x: 290, y: 220 }
],
source: shape1,
target: shape2
});
canvas.addConnection(connection1, root);
var shape3 = elementFactory.createShape({
x: 450,
y: 80,
width: 100,
height: 80
});
canvas.addShape(shape3, root);
var shape4 = elementFactory.createShape({
x: 425,
y: 50,
width: 300,
height: 200,
isFrame: true
});
canvas.addShape(shape4, root);
var root2 = elementFactory.createRoot();
canvas.setRootElement(root2);
canvas.setRootElement(root);
});
return divcanvas;
}
ElementStyleModule = ({
__init__: [
[
"defaultRenderer",
function (defaultRenderer) {
// override default styles
defaultRenderer.CONNECTION_STYLE = {
fill: "none",
strokeWidth: 5,
stroke: "#000"
};
defaultRenderer.SHAPE_STYLE = {
fill: "white",
stroke: "#000",
strokeWidth: 2
};
defaultRenderer.FRAME_STYLE = {
fill: "none",
stroke: "#000",
strokeDasharray: 4,
strokeWidth: 2
};
}
]
]
})
someModule = ({
__init__: ["propName"],
propName: [
"type",
function (styles, eventBus, defaultRenderer) {
//console.log(modeling);
eventBus.on(["render.shape"], 1000, function (evt, context) {
var type = evt.type,
element = context.element,
visuals = context.gfx,
attrs = context.attrs;
console.log(arguments, "on render.shape");
});
console.log(arguments, "I am being called right now..");
}
]
})
subclassRenderer = {
let subclassRenderer = createProxyLoggingClass(BaseRenderer);
subclassRenderer.$inject = ["eventBus"];
//inherits(subclassRenderer, BaseRenderer);
subclassRenderer.prototype.canRender = function (el) {
console.log("businessObject", el.businessObject);
return el.businessObject == "circle";
};
subclassRenderer.prototype.drawShape = function (
parentGfx,
element,
attrs = { fill: "white", stroke: "black", strokeWidth: 2 }
) {
console.log("parentGfx", parentGfx);
if (element.businessObject == "circle") {
let width = element.width;
let height = element.height;
let circle = tinySvg.create("circle");
tinySvg.attr(circle, {
cx: width / 2,
cy: height / 2,
r: Math.round(Math.min(width, height) / 2)
});
tinySvg.attr(circle, attrs);
tinySvg.append(parentGfx, circle);
return circle;
}
};
return subclassRenderer;
}
function create(obj, attrs) {
return [obj, attrs];
}
{
function subDiagram(opt) {
console.log("subclassed");
}
inherits(subDiagram, Diagram);
return subDiagram;
}
canvas = diagram.get("canvas")
selection = diagram.get("selection")
function inherits(ctor, superCtor) {
if (superCtor) {
ctor.super_ = superCtor;
ctor.prototype = Object.create(superCtor.prototype, {
constructor: {
value: ctor,
enumerable: false,
writable: true,
configurable: true
}
});
}
}
BaseRenderer = import(skypackImport("diagram-js/lib/draw/BaseRenderer")).then(
(a) => a.default
)
test.diagram.get("canvas")._elementRegistry._elements.shape_13
function addShape(canvas, el, gfx) {
canvas.addShape(el, gfx);
//canvas._graphicsFactory.update("type", el, gfx);
}
test.diagram.get("canvas")._graphicsFactory.update
test.diagram.get("canvas")
/*{
test.diagram.get("eventBus").fire("render.shape", {
gfx: test.diagram.get("canvas")._svg,
element:
test.diagram.get("canvas")._elementRegistry._elements.shape_13.element
});
}*/
Object.create(new Proxy({}, {}), { constructor: {} })
skypackImport("diagram-js")
baseElementFactory = (
await import(skypackImport("diagram-js/lib/core/ElementFactory"))
).default
elementFactory = {
function ElementFactory() {
console.log("even called?");
baseElementFactory.call(this);
//this.what = 1;
}
inherits(ElementFactory, baseElementFactory);
ElementFactory.prototype.cr = baseElementFactory.prototype.create;
ElementFactory.prototype.create = function (...args) {
console.log("calling create",);
return this.cr(...args);
};
return ElementFactory;
}
diagram = new Diagram({
canvas: { container: html`<div></div<` },
modules: [
someModule2,
...modulesAvailable.map((a) => a[1]),
/*{
__depends__: [
{
__init__: ["subclassRenderer"],
subclassRenderer: ["type", subclassRenderer]
}
]
},*/
ElementStyleModule
]
}) //.injector
//.get("elementFactory")
//.create("shape", { businessObject: 2 }).businessObject
someModule2 = ({
elementFactory: ["type", elementFactory]
})
tinySvg = import("https://esm.sh/tiny-svg")
{
//tinySvg.create("circ")
let width = 100;
let height = 100;
let offset = 1;
let attrs = {};
var circle = tinySvg.create("circle");
tinySvg.attr(circle, {
cx: 0,
cy: 0,
r: Math.round((width + height) / 4 - offset)
});
tinySvg.attr(circle, attrs);
//svgAppend(parentGfx, circle);
return circle;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
