codePugHacKEr/pages34735
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add custom shapes for json array and object

Browse source
This commit is contained in:
sussy layers dev 2023-12-17 14:24:06 +00:00
commit c6134cf2ee
2 changed files with 142 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

139
src/resources/renderer/index.js
View file

@ -19,6 +19,145 @@ class CustomConstantProvider extends Blockly.zelos.ConstantProvider {
this.FIELD_TEXT_FONTWEIGHT = 'bold';
this.FIELD_TEXT_FONTFAMILY = '"Source Code Pro", monospace';
}
init() {
super.init()
this.ROUNDEL = this.makeRoundel()
this.ROUNDEDINVERTED = this.makeRoundedInverted()
}
makeRoundedInverted() {
const maxWidth = this.MAX_DYNAMIC_CONNECTION_SHAPE_WIDTH;
const maxHeight = maxWidth * 2;
function makeMainPath(blockHeight, up, right) {
const remainingHeight = blockHeight > maxHeight ? blockHeight - maxHeight : 0;
const height = blockHeight > maxHeight ? maxHeight : blockHeight;
const radius = height / 2;
return (
Blockly.utils.svgPaths.lineOnAxis('h', (right ? 1 : -1) * radius) +
Blockly.utils.svgPaths.arc(
'a',
'0 0,0',
radius,
Blockly.utils.svgPaths.point((up ? .5 : -.5) * radius, (up ? -1 : 1) * radius),
) +
Blockly.utils.svgPaths.lineOnAxis('v', (right ? 1 : -1) * remainingHeight) +
Blockly.utils.svgPaths.arc(
'a',
'0 0,0',
radius,
Blockly.utils.svgPaths.point((up ? -.5 : .5) * radius, (up ? -1 : 1) * radius),
) +
Blockly.utils.svgPaths.lineOnAxis('h', (right ? -1 : 1) * radius)
);
}
return {
type: this.SHAPES.HEXAGONAL,
isDynamic: true,
width(height) {
const halfHeight = height / 2;
return halfHeight > maxWidth ? maxWidth : halfHeight;
},
height(height) {
return height;
},
connectionOffsetY(connectionHeight) {
return connectionHeight / 2;
},
connectionOffsetX(connectionWidth) {
return -connectionWidth;
},
pathDown(height) {
return makeMainPath(height, false, false);
},
pathUp(height) {
return makeMainPath(height, true, false);
},
pathRightDown(height) {
return makeMainPath(height, false, true);
},
pathRightUp(height) {
return makeMainPath(height, false, true);
},
};
}
makeRoundel() {
const maxWidth = this.MAX_DYNAMIC_CONNECTION_SHAPE_WIDTH;
const maxHeight = maxWidth * 2;
function makeMainPath(blockHeight, up, right) {
const height = blockHeight > maxHeight ? maxHeight : blockHeight;
const radius = height / 2;
return (
Blockly.utils.svgPaths.arc(
'a',
'0 0,1',
radius,
Blockly.utils.svgPaths.point((up ? -.5 : .5) * radius, (up ? -.5 : .5) * radius),
) +
Blockly.utils.svgPaths.lineOnAxis('h', (right ? .5 : -.5) * radius) +
Blockly.utils.svgPaths.lineOnAxis('v', (up ? -1 : 1) * radius) +
Blockly.utils.svgPaths.lineOnAxis('h', (right ? -.5 : .5) * radius) +
Blockly.utils.svgPaths.arc(
'a',
'0 0,1',
radius,
Blockly.utils.svgPaths.point((up ? .5 : -.5) * radius, (up ? -.5 : .5) * radius),
)
);
}
return {
type: this.SHAPES.ROUND,
isDynamic: true,
width(height) {
const halfHeight = height / 2;
return halfHeight > maxWidth ? maxWidth : halfHeight;
},
height(height) {
return height;
},
connectionOffsetY(connectionHeight) {
return connectionHeight / 2;
},
connectionOffsetX(connectionWidth) {
return -connectionWidth;
},
pathDown(height) {
return makeMainPath(height, false, false);
},
pathUp(height) {
return makeMainPath(height, true, false);
},
pathRightDown(height) {
return makeMainPath(height, false, true);
},
pathRightUp(height) {
return makeMainPath(height, false, true);
},
};
}
/**
* @param {Blockly.RenderedConnection} connection
*/
shapeFor(connection) {
let checks = connection.getCheck();
if (!checks && connection.targetConnection) {
checks = connection.targetConnection.getCheck();
}
if (connection.type == Blockly.ConnectionType.INPUT_VALUE || connection.type == Blockly.ConnectionType.OUTPUT_VALUE) {
if (checks && checks.indexOf('JSONArray') !== -1) {
return this.ROUNDEDINVERTED;
} else if (checks && checks.indexOf('JSONObject') !== -1) {
return this.ROUNDEL;
}
}
return super.shapeFor(connection)
}
}
export default class Renderer extends Blockly.zelos.Renderer {

3
vite.config.js
View file

@ -8,5 +8,8 @@ export default defineConfig({
'@blockly/continuous-toolbox',
'file-saver',
]
},
build: {
sourcemap: true
}
});