Skip to content

Fix snapshot/renderblocks for disabled blocks #11272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
microbit-matt-hillsdon wants to merge 1 commit into
base: master
Choose a base branch
from
+23 −5
Open

Fix snapshot/renderblocks for disabled blocks #11272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions pxtblocks/layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,8 +274,9 @@ export function toSvgAsync(ws: Blockly.WorkspaceSvg, pixelDensity: number): Prom
return Promise.resolve<{ width: number; height: number; xml: string; }>(undefined);

const viewbox = ws.getBlocksBoundingBox();
const sg = ws.getParentSvg().cloneNode(true) as SVGElement;
cleanUpBlocklySvg(sg);
const sourceSvg = ws.getParentSvg();
const sg = sourceSvg.cloneNode(true) as SVGElement;
cleanUpBlocklySvg(sg, sourceSvg);

// getBlocksBoundingBox doesn't include any expanded blocks comments, so
// do a pass to expand the bounding box if any are present
Expand Down Expand Up @@ -328,7 +329,13 @@ export interface BlockSvg {
width: number; height: number; svg: string; xml: string; css: string;
}

export function cleanUpBlocklySvg(svg: SVGElement): SVGElement {
// Blockly sets --blocklyDisabledPattern on the injection div to reference an
// SVG pattern for disabled blocks. Exported SVGs lose access to this CSS
// variable, so we copy it explicitly.
// See: blockly/core/renderers/common/constants.ts (createDom)
const DISABLED_PATTERN_PROP = '--blocklyDisabledPattern';

export function cleanUpBlocklySvg(svg: SVGElement, sourceSvg: SVGElement): SVGElement {
pxt.BrowserUtils.removeClass(svg, "blocklySvg");
pxt.BrowserUtils.addClass(svg, "blocklyPreview pxt-renderer classic-theme");

Expand All @@ -350,6 +357,11 @@ export function cleanUpBlocklySvg(svg: SVGElement): SVGElement {
el.removeAttribute("tabindex");
});

const disabledPattern = window.getComputedStyle(sourceSvg).getPropertyValue(DISABLED_PATTERN_PROP);
if (disabledPattern) {
svg.style.setProperty(DISABLED_PATTERN_PROP, disabledPattern);
}

// In order to get the Blockly comment's text area to serialize properly they have to have names
const parser = new DOMParser();
pxt.U.toArray(svg.querySelectorAll('.blocklyTextarea'))
Expand Down Expand Up @@ -402,6 +414,11 @@ export async function blocklyToSvgAsync(sg: SVGElement, x: number, y: number, wi
cssLink.appendChild(xsg.createCDATASection(cssString));
xsg.documentElement.insertBefore(cssLink, xsg.documentElement.firstElementChild);

const disabledPattern = sg.style.getPropertyValue(DISABLED_PATTERN_PROP);
if (disabledPattern) {
(xsg.documentElement as unknown as SVGElement).style.setProperty(DISABLED_PATTERN_PROP, disabledPattern);
}

await expandImagesAsync(xsg);
await convertIconsToPngAsync(xsg);

Expand Down
5 changes: 3 additions & 2 deletions pxtblocks/render.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,9 @@ export function renderWorkspace(options: BlocksRenderOptions = { emPixels: 18, l

let metrics = workspace.getMetrics();

const svg = blocklyDiv.querySelectorAll('svg')[0].cloneNode(true) as SVGSVGElement;
cleanUpBlocklySvg(svg);
const sourceSvg = blocklyDiv.querySelectorAll('svg')[0];
const svg = sourceSvg.cloneNode(true) as SVGSVGElement;
cleanUpBlocklySvg(svg, sourceSvg);

pxt.U.toArray(svg.querySelectorAll('.blocklyBlockCanvas,.blocklyBubbleCanvas'))
.forEach(el => el.setAttribute('transform', `translate(${-metrics.contentLeft}, ${-metrics.contentTop}) scale(1)`));
Expand Down