diff --git a/scratch3/blocks.js b/scratch3/blocks.js index 8b9ab9359..991502e48 100644 --- a/scratch3/blocks.js +++ b/scratch3/blocks.js @@ -130,7 +130,9 @@ export class LabelView { : /(boolean|dropdown)/.test(this.cls) ? options.isHighContrast ? new Color() - : new Color(255, 255, 255) + : /(readonly)/.test(this.cls) + ? new Color(255, 255, 255) + : Color.fromHexString("#575e75") : /literal/.test(this.cls) ? options.isHighContrast ? new Color() @@ -144,7 +146,11 @@ export class LabelView { this._fontSize = "12pt" } - let fontWeight = /comment-label/.test(this.cls) ? "500" : "400" + let fontWeight = this.modified + ? "700" + : /comment-label/.test(this.cls) + ? "500" + : "400" let scaledFontSize = scaleFontSize(this.fontSize, this.scale) let fontSizeData = splitFontSize(this.fontSize, this.scale) @@ -205,7 +211,8 @@ export class LabelView { style: `font: ${font}`, }), ) - lineGroup[lineGroup.length - 1].style.fill = this.color.toHexString() + let lastLineGroupItem = lineGroup[lineGroup.length - 1] + lastLineGroupItem.style.fill = this.color.toHexString() x += wordInfo.width height = Math.max(height, wordHeight) first = false @@ -447,22 +454,21 @@ export class IconView { loop: { width: 24, height: 24, scale: 1 }, loopArrow: { alias: "loop" }, addInput: { - width: 5, + width: 10, height: 10, color: new Color(0, 0, 0), noShadow: true, }, delInput: { - width: 5, + width: 10, height: 10, color: new Color(0, 0, 0), noShadow: true, }, verticalEllipsis: { - width: 2, + width: 0, height: 10, - dy: 0, - scale: 10 / 12, + scale: 10 / 6, color: new Color(0, 0, 0), }, list: { width: 8, height: 10 }, @@ -473,32 +479,36 @@ export class IconView { cloud: { width: 16, height: 10 }, cloudGradient: { width: 16, height: 10 }, cloudOutline: { width: 16, height: 10, fillAttribute: "stroke" }, - flash: { width: 8, height: 10 }, + flash: { width: 10, height: 10, fillAttribute: ["fill", "stroke"] }, blitz: { alias: "flash", scale: 1 }, - camera: { width: 10, height: 10 }, + camera: { width: 17, height: 15, scale: 1.3 }, circleSolid: { width: 10, height: 10 }, circle: { width: 10, height: 10, fillAttribute: "stroke" }, notes: { alias: "musicBlock" }, storage: { width: 10, height: 10, fillAttribute: ["stroke", "fill"] }, - brush: { width: 10, height: 10, fillAttribute: ["stroke", "fill"] }, + brush: { width: 16, height: 14, scale: 1.4 }, pipette: { - width: 10, - height: 10, - scale: 1, - fillAttribute: ["stroke", "fill"], + width: 16, + height: 16, + scale: 1.4, }, - paintbucket: { width: 10, height: 10, fillAttribute: ["stroke", "fill"] }, - eraser: { width: 10, height: 10, fillAttribute: ["stroke", "fill"] }, + paintbucket: { width: 16, height: 15, scale: 1.4 }, + eraser: { width: 16, height: 15, scale: 1.4 }, location: { width: 6, height: 10 }, - gears: { width: 10, height: 10 }, + gears: { width: 18, height: 18, scale: 1.2 }, gearPartial: { width: 10, height: 10 }, gearBig: { width: 10, height: 10 }, globe: { width: 10, height: 10, fillAttribute: "stroke" }, globeBig: { width: 10, height: 10, fillAttribute: "stroke" }, square: { width: 10, height: 10 }, - robot: { width: 10, height: 10 }, + robot: { + width: 14, + height: 19, + fillAttribute: ["fill", "stroke"], + scale: 1.2, + }, stepForward: { width: 10, height: 10 }, - file: { width: 8, height: 10 }, + file: { width: 18, height: 19, scale: 1.2 }, fullScreen: { width: 10, height: 10, fillAttribute: ["fill", "stroke"] }, grow: { width: 10, height: 10, fillAttribute: ["fill", "stroke"] }, normalScreen: { @@ -510,7 +520,7 @@ export class IconView { smallStage: { width: 12, height: 10 }, normalStage: { width: 12, height: 10 }, stage: { width: 13, height: 10 }, - turnAround: { width: 10, height: 10, fillAttribute: ["fill", "stroke"] }, + turnAround: { width: 24, height: 24 }, poster: { width: 10, height: 10, fillAttribute: ["fill", "stroke"] }, tick: { width: 10, height: 10 }, checkedBox: { width: 10, height: 10, fillAttribute: ["fill", "stroke"] }, @@ -522,8 +532,8 @@ export class IconView { crosshairs: { width: 10, height: 10, fillAttribute: "stroke" }, speechBubble: { width: 10, height: 10 }, speechBubbleOutline: { width: 10, height: 10, fillAttribute: "stroke" }, - turnBack: { width: 16, height: 10, fillAttribute: ["fill", "stroke"] }, - turnForward: { width: 16, height: 10, fillAttribute: ["fill", "stroke"] }, + turnBack: { width: 20, height: 10, scale: 1.2 }, + turnForward: { width: 20, height: 10, scale: 1.2 }, magnifyingGlass: { width: 10, height: 10, @@ -538,43 +548,43 @@ export class IconView { keyboardFilled: { width: 16, height: 10 }, listNarrow: { width: 5, height: 10 }, flipHorizontal: { - width: 10, - height: 10, - fillAttribute: ["fill", "stroke"], + width: 18, + height: 16, + scale: 1.2, }, flipVertical: { - width: 10, - height: 10, - fillAttribute: ["fill", "stroke"], + width: 16, + height: 18, + scale: 1.2, }, - trash: { width: 10, height: 10, fillAttribute: ["fill", "stroke"] }, + trash: { width: 16, height: 17 }, trashFull: { width: 10, height: 10 }, cube: { width: 10, height: 10, fillAttribute: "stroke" }, cubeSolid: { width: 10, height: 10, fillAttribute: ["fill", "stroke"] }, infinity: { width: 17.5, height: 10, fillAttribute: "stroke" }, - arrowUp: { width: 10, height: 10 }, - arrowUpOutline: { width: 10, height: 10, fillAttribute: "stroke" }, + arrowUp: { width: 16, height: 16 }, + arrowUpOutline: { width: 18, height: 18, fillAttribute: "stroke" }, arrowUpThin: { width: 10, height: 10, fillAttribute: "stroke" }, - arrowDown: { width: 10, height: 10 }, - arrowDownOutline: { width: 10, height: 10, fillAttribute: "stroke" }, + arrowDown: { width: 16, height: 16 }, + arrowDownOutline: { width: 18, height: 18, fillAttribute: "stroke" }, arrowDownThin: { width: 10, height: 10, fillAttribute: "stroke" }, - arrowLeft: { width: 10, height: 10 }, - arrowLeftOutline: { width: 10, height: 10, fillAttribute: "stroke" }, + arrowLeft: { width: 16, height: 16 }, + arrowLeftOutline: { width: 18, height: 18, fillAttribute: "stroke" }, arrowLeftThin: { width: 10, height: 10, fillAttribute: "stroke" }, - arrowRight: { width: 10, height: 10 }, - arrowRightOutline: { width: 10, height: 10, fillAttribute: "stroke" }, + arrowRight: { width: 16, height: 16 }, + arrowRightOutline: { width: 18, height: 18, fillAttribute: "stroke" }, arrowRightThin: { width: 10, height: 10, fillAttribute: "stroke" }, arrowUpDownThin: { width: 10, height: 10, fillAttribute: "stroke" }, arrowLeftRightThin: { width: 10, height: 10, fillAttribute: "stroke" }, - speaker: { width: 10, height: 10, fillAttribute: ["fill", "stroke"] }, - blocks: { width: 10, height: 10, fillAttribute: ["fill"] }, + speaker: { width: 16, height: 13, scale: 1.3 }, + blocks: { width: 16, height: 13, scale: 1 }, turtlePlus: { width: 13, height: 10, fillAttribute: ["fill", "stroke"] }, musicBlock: { width: 40, height: 40 }, penBlock: { width: 40, height: 40 }, videoBlock: { width: 40, height: 40, dy: 10 }, - facesensingBlock: { width: 40, height: 40, dy: 3.9932885906 }, // 40 - 21.46 * (40 / 23.84), expcept this is still slightly off? + facesensingBlock: { width: 40, height: 40, dy: 1.9932885906 }, ttsBlock: { width: 40, height: 40 }, translateBlock: { width: 40, height: 40 }, wedoBlock: { width: 40, height: 40 }, @@ -780,7 +790,7 @@ export class InputView { }) } else if (this.shape === "number-dropdown") { SVG.setProps(el, { - fill: color.secondary.toHexString(), + fill: this.isDarker ? color.secondary.toHexString() : "#FFF", }) } @@ -822,7 +832,8 @@ export class InputView { w - 24, Math.min(h - 20, 13), SVG.symbol( - options.isHighContrast + options.isHighContrast || + (!options.isHighContrast && !this.isDarker) ? `#sb3-dropdownArrow-high-contrast-${options.id}` : `#sb3-dropdownArrow-${options.id}`, {}, @@ -932,10 +943,12 @@ class BlockView { SVG.getRoundedTop( w, h, - Math.max( - lines[0].totalHeight, - lines[lines.length - 1].totalHeight, - ) / 2, + lines.length > 1 + ? 22.5 + : Math.max( + lines[0].totalHeight, + lines[lines.length - 1].totalHeight, + ) / 2, ), ) } else if (this.info.shape === "boolean") { @@ -993,10 +1006,12 @@ class BlockView { SVG.getRoundedBottom( w, y, - Math.max( - lines[0].totalHeight, - lines[lines.length - 1].totalHeight, - ) / 2, + lines.length > 1 + ? 22.5 + : Math.max( + lines[0].totalHeight, + lines[lines.length - 1].totalHeight, + ) / 2, ), ) } else if (this.info.shape === "boolean") { diff --git a/scratch3/draw.js b/scratch3/draw.js index 73bde6267..963b333bb 100644 --- a/scratch3/draw.js +++ b/scratch3/draw.js @@ -30,9 +30,13 @@ export default class SVG { return xml.createCDATASection(content) } - static el(name, props) { - const el = document.createElementNS("http://www.w3.org/2000/svg", name) - return SVG.setProps(el, props) + static el(name, props, styles) { + const el = document.createElementNS("http://www.w3.org/2000/svg", name), + withProps = SVG.setProps(el, props) + Object.keys(styles || {}).forEach(key => { + withProps.style[key] = styles[key] + }) + return withProps } static setProps(el, props) { @@ -199,10 +203,12 @@ export default class SVG { let r = h / 2 if (child.isBlock && child.lines.length > 1) { r = - Math.max( - child.lines[0].totalHeight, - child.lines[child.lines.length - 1].totalHeight, - ) / 2 + child.lines.length > 1 + ? 22.5 + : Math.max( + Math.min(child.lines[0].totalHeight, Infinity), + child.lines[child.lines.length - 1].totalHeight, + ) / 2 } return [SVG.getRoundedTop(w, h, r), SVG.getRoundedBottom(w, h, r)] diff --git a/scratch3/style.css.js b/scratch3/style.css.js index 7c0d59927..68688014e 100644 --- a/scratch3/style.css.js +++ b/scratch3/style.css.js @@ -77,8 +77,9 @@ ${name} .sb3-input-string { fill: ${style.inputFill}; } ${name} .sb3-literal-number, -${name} .sb3-literal-string { - fill: ${style.literal}; +${name} .sb3-literal-string, +${name} .sb3-literal-number-dropdown, { + fill: ${style.literal} !important; } ${name} .sb3-custom-arg { diff --git a/scratch3/style.js b/scratch3/style.js index 54204d404..1f5fe15a0 100644 --- a/scratch3/style.js +++ b/scratch3/style.js @@ -20,27 +20,18 @@ const highContrastIcons = new Set([ "cloudGradient", "turtle", "turtleOutline", - "flash", - "camera", "circle", "circleSolid", "notes", "storage", - "brush", - "pipette", - "paintbucket", - "eraser", "location", - "gears", "gearPartial", "gearBig", "globe", "globeBig", "square", - "robot", "pointRight", "stepForward", - "file", "fullScreen", "grow", "normalScreen", @@ -55,13 +46,10 @@ const highContrastIcons = new Set([ "rectangle", "rectangleSolid", "dot", - "line", "cross", "crosshairs", "speechBubble", "speechBubbleOutline", - "turnBack", - "turnForward", "magnifyingGlass", "magnifierOutline", "selection", @@ -71,62 +59,38 @@ const highContrastIcons = new Set([ "keyboard", "keyboardFilled", "listNarrow", - "flipHorizontal", - "flipVertical", - "trash", "trashFull", "cube", "cubeSolid", "infinity", - "speaker", "blocks", "turtlePlus", - "arrowUp", - "arrowUpOutline", "arrowUpThin", - "arrowDown", - "arrowDownOutline", "arrowDownThin", - "arrowLeft", - "arrowLeftOutline", "arrowLeftThin", - "arrowRight", - "arrowRightOutline", "arrowRightThin", "arrowUpDownThin", "arrowLeftRightThin", ]) const snapIcons = new Set([ - "addInput", - "verticalEllipsis", - "delInput", "list", "cloud", "cloudGradient", "turtle", "turtleOutline", - "flash", - "camera", "circle", "circleSolid", "storage", - "brush", - "pipette", - "paintbucket", - "eraser", "location", - "gears", "gearPartial", "gearBig", "globe", "globeBig", "square", - "robot", "pointRight", "stepForward", - "file", "fullScreen", "grow", "normalScreen", @@ -134,7 +98,6 @@ const snapIcons = new Set([ "smallStage", "normalStage", "stage", - "turnAround", "poster", "tick", "checkedBox", @@ -146,8 +109,6 @@ const snapIcons = new Set([ "crosshairs", "speechBubble", "speechBubbleOutline", - "turnBack", - "turnForward", "magnifyingGlass", "magnifierOutline", "selection", @@ -156,28 +117,17 @@ const snapIcons = new Set([ "keyboard", "keyboardFilled", "listNarrow", - "flipHorizontal", - "flipVertical", - "trash", + "trashFull", "cube", "cubeSolid", "infinity", - "speaker", "blocks", "turtlePlus", - "arrowUp", - "arrowUpOutline", "arrowUpThin", - "arrowDown", - "arrowDownOutline", "arrowDownThin", - "arrowLeft", - "arrowLeftOutline", "arrowLeftThin", - "arrowRight", - "arrowRightOutline", "arrowRightThin", "arrowUpDownThin", "arrowLeftRightThin", @@ -403,17 +353,41 @@ export default class Style { id: "sb3-octagon", }, ), - - SVG.el("path", { - d: "M 1 1 L 5 5 L 1 9 Z", - id: "sb3-addInput", - }), - SVG.el("path", { - d: "M 1 5 L 5 1 L 5 9 Z", - id: "sb3-delInput", - }), + SVG.setProps( + SVG.group([ + SVG.el("path", { + d: "M12.71,2.44A2.41,2.41,0,0,1,12,4.16L8.08,8.08a2.45,2.45,0,0,1-3.45,0L0.72,4.16A2.42,2.42,0,0,1,0,2.44,2.48,2.48,0,0,1,.71.71C1,0.47,1.43,0,6.36,0S11.75,0.46,12,.71A2.44,2.44,0,0,1,12.71,2.44Z", + fill: "#231f20", + opacity: 0.1, + }), + SVG.el("path", { + d: "M6.36,7.79a1.43,1.43,0,0,1-1-.42L1.42,3.45a1.44,1.44,0,0,1,0-2c0.56-.56,9.31-0.56,9.87,0a1.44,1.44,0,0,1,0,2L7.37,7.37A1.43,1.43,0,0,1,6.36,7.79Z", + }), + ]), + { + id: "sb3-delInput", + transform: "translate(8.79, 0), rotate(90), translate(-1, 0)", + }, + ), + SVG.setProps( + SVG.group([ + SVG.el("path", { + d: "M12.71,2.44A2.41,2.41,0,0,1,12,4.16L8.08,8.08a2.45,2.45,0,0,1-3.45,0L0.72,4.16A2.42,2.42,0,0,1,0,2.44,2.48,2.48,0,0,1,.71.71C1,0.47,1.43,0,6.36,0S11.75,0.46,12,.71A2.44,2.44,0,0,1,12.71,2.44Z", + fill: "#231f20", + opacity: 0.1, + }), + SVG.el("path", { + d: "M6.36,7.79a1.43,1.43,0,0,1-1-.42L1.42,3.45a1.44,1.44,0,0,1,0-2c0.56-.56,9.31-0.56,9.87,0a1.44,1.44,0,0,1,0,2L7.37,7.37A1.43,1.43,0,0,1,6.36,7.79Z", + }), + ]), + { + id: "sb3-addInput", + transform: "translate(0, 12.71), rotate(-90), translate(1, 0)", + }, + ), SVG.setProps( SVG.el("path", { + // M x y, r r x,l,s x y d: `M 2 1 A 1 1 0 1 1 1.9999995000000417 0.9990000001666661 M 2 5 A 1 1 0 1 1 1.9999995000000417 4.999000000166666 M 2 9 A 1 1 0 1 1 1.9999995000000417 8.999000000166665`, @@ -539,7 +513,10 @@ export default class Style { ), SVG.setProps( SVG.el("path", { - d: "M 2.6666666666666665 0 L 0 3.3333333333333335 L 2.6666666666666665 3.3333333333333335 L 0 6.666666666666667 L 2.6666666666666665 6.666666666666667 L 0 10 L 8 5.555555555555555 L 5.333333333333333 5.555555555555555 L 8 2.2222222222222223 L 5.333333333333333 2.2222222222222223 L 8 0 Z", + d: `M6.1919265,9.97041267 C6.39817578,10.4827993 6.8451296,10.5515418 7.19456044,10.1185825 L7.4614448,9.78790167 C7.80893496,9.35734694 8.43422564,9.28545516 8.87346661,9.63974521 L11.68656,11.9087754 C12.118908,12.2575055 12.3030858,12.1265903 12.0962705,11.6122341 L9.74921575,5.77503453 C9.54314462,5.26252912 9.09584472,5.19401738 8.7458012,5.62738515 L8.4784489,5.9583779 C8.13034947,6.38933881 7.50456486,6.46155987 7.06532389,6.10726982 L4.25223048,3.83823967 C3.81988252,3.48950949 3.63584851,3.62032891 3.84284261,4.13456591 L6.1919265,9.97041267 Z`, + transform: + "translate(3, 5.873508) rotate(69.000000) translate(-7.969395, -7.873508)", + "stroke-width": 1, }), { id: "sb3-flash", @@ -547,12 +524,11 @@ export default class Style { ), SVG.setProps( SVG.el("path", { - d: `M 0.5 8.333333333333334 L 9.5 8.333333333333334 L 9.5 2.5 L 7.5 2.5 L 6.25 0.5 L 3.75 0.5 L 2.5 2.5 L 0.5 2.5 L 0.5 8.333333333333334 Z - M 6.6 5 A 1.6 1.6 0 1 1 6.599999200000067 4.998400000266666 Z`, + d: `M 8.5 12 C 6.8485 12 5.5 10.6515 5.5 9 C 5.5 7.3365 6.8485 6 8.5 6 C 10.1635 6 11.5 7.3365 11.5 9 C 11.5 10.6515 10.1635 12 8.5 12 M 14.5 3.75 L 13.45 3.75 C 13.1635 3.75 12.925 3.6 12.7885 3.36 L 11.7835 1.5315 C 11.515 1.05 11.02 0.75 10.465 0.75 L 6.55 0.75 C 5.995 0.75 5.5 1.05 5.2285 1.5315 L 4.21 3.36 C 4.075 3.6 3.835 3.75 3.565 3.75 L 2.5 3.75 C 1.675 3.75 1 4.425 1 5.25 L 1 12.75 C 1 13.5765 1.675 14.25 2.5 14.25 L 14.5 14.25 C 15.325 14.25 16 13.5765 16 12.75 L 16 5.25 C 16 4.425 15.325 3.75 14.5 3.75`, + "fill-rule": "evenodd", }), { id: "sb3-camera", - "stroke-width": 1, }, ), SVG.setProps( @@ -598,78 +574,33 @@ export default class Style { }, ), SVG.setProps( - SVG.group([ - SVG.el("path", { - d: "M 3.75 5 Q 0 5 0.5 9.5 Q 5 10 5 6.25 Z", - "stroke-width": 1, - }), - SVG.el("path", { - d: "M 3.75 5 L 7.5 0.5 Q 10 0 9.5 2.5 L 5 6.25", - "stroke-width": 1, - fill: "none", - "stroke-linejoin": "round", - "stroke-linecap": "round", - }), - ]), + SVG.el("path", { + d: "M 10.5787 8.2102 C 9.6196 9.1693 8.9129 9.6615 8.3577 9.8508 C 8.1936 9.346 7.916 8.879 7.5248 8.4878 C 7.1209 8.0966 6.654 7.819 6.1492 7.6423 C 6.3511 7.0871 6.8433 6.3804 7.7898 5.4339 C 10.0613 3.1497 14.0996 0.3608 14.8694 1.1306 C 15.6392 1.9004 12.8503 5.9387 10.5787 8.2102 Z M 6.3912 12.412 C 6.0157 12.7749 5.5311 12.9621 5.0465 12.9856 L 5.0465 12.9973 L 4.9254 12.9973 C 1.6787 13.1143 0.2613 9.4389 1.3758 9.8252 C 2.8417 10.3285 3.4365 9.6028 3.4595 9.5794 C 4.2712 8.8069 5.5796 8.8069 6.3912 9.5794 C 7.2029 10.3636 7.2029 11.6395 6.3912 12.412 Z", + }), { id: "sb3-brush", }, ), SVG.setProps( - SVG.group([ - SVG.el("path", { - d: `M 0.5 9.5 Q 1.25 8.75 1.25 7.5 L 5 3.75 - M 0.5 9.5 Q 1.25 8.75 2.5 8.75 L 6.25 5 - M 5 2.5 L 7.5 5`, - "stroke-width": 1, - fill: "none", - }), - SVG.el("path", { - d: "M 9.5 2.5 A 2 2 0 1 1 9.499999000000084 2.4980000003333322", - stroke: "none", - }), - ]), + SVG.el("path", { + d: "M 7.1533 10.4825 C 7.0339 10.6189 6.8804 10.7041 6.6075 10.7723 C 5.9081 10.9257 5.2429 11.5565 5.0382 12.2554 C 4.9699 12.477 4.7482 12.7157 4.5094 12.835 L 2.7353 13.6703 C 2.65 13.7044 2.5818 13.7215 2.5477 13.7215 L 2.2748 13.4658 C 2.2748 13.4487 2.2748 13.3805 2.3259 13.2612 L 3.1618 11.4712 C 3.2641 11.2496 3.5029 11.028 3.7418 10.9598 C 4.4411 10.7382 5.0723 10.0904 5.2599 9.2381 C 5.294 9.1017 5.3793 8.9653 5.4987 8.8289 L 9.4391 4.9081 L 11.0937 6.5616 L 7.1533 10.4825 Z M 14.6077 3.2886 C 14.8635 3.0329 15 2.6749 15 2.3339 C 15 1.993 14.8635 1.6521 14.6077 1.3963 C 14.0789 0.8679 13.243 0.8679 12.7142 1.3963 L 11.2302 2.8795 L 11.0596 2.709 L 10.5138 2.1635 C 10.1726 1.8225 9.6097 1.8225 9.2685 2.1635 L 8.6033 2.8113 C 8.2792 3.1522 8.2621 3.6466 8.5521 3.9875 L 4.5947 7.9254 C 4.3047 8.2323 4.1 8.5903 3.9806 9.1017 C 3.9294 9.3574 3.6394 9.6472 3.3665 9.7324 C 2.8036 9.9029 2.2577 10.3802 2.0018 10.9428 L 1.166 12.7157 C 0.8931 13.3123 0.9613 13.926 1.3366 14.3181 L 1.6777 14.6591 C 1.8995 14.8807 2.2065 15 2.5477 15 C 2.7695 15 3.0253 14.9318 3.2641 14.8295 L 5.0552 13.9942 C 5.6181 13.7215 6.0958 13.193 6.2663 12.6304 C 6.3346 12.3577 6.6416 12.0679 7.051 11.9826 C 7.4092 11.8974 7.7674 11.6928 8.0574 11.386 L 12.0149 7.4481 C 12.356 7.7379 12.8678 7.7038 13.1748 7.3799 L 13.8401 6.7321 C 14.1812 6.3912 14.1812 5.8286 13.8401 5.4877 L 13.2601 4.9081 L 13.1236 4.7717 L 14.6077 3.2886 Z", + }), { id: "sb3-pipette", }, ), SVG.setProps( - SVG.group([ - SVG.el("path", { - d: "M 4 2 L 8 6 L 6 8 Q 4 10 2 8 Q 0 6 2 4 Z", - "stroke-width": 1, - fill: "none", - }), - SVG.el("path", { - d: `M 4.5 5 A 0.5 0.5 0 1 1 4.499999750000021 4.999500000083333 - M 4 5 L 4 1.5 - M 4 1.5 A 1 1 0 1 0 2 1.5000000000000002 - M 2 1.5 L 2 4`, - "stroke-width": 0.5, - fill: "none", - }), - SVG.el("path", { - d: "M 7 7 Q 10 7 9.5 10 L 10 10 Q 10 4 5 3 L 8 6 Z", - "stroke-width": 0.5, - // stroke: "none", - }), - ]), + SVG.el("path", { + d: "M 12.0451 7.6935 L 12.0307 7.6792 C 11.4397 7.3638 10.5171 6.6902 9.4215 5.6009 C 9.09 5.2712 8.7873 4.9559 8.5422 4.6549 C 8.7152 4.4399 8.8882 4.2249 9.0612 4.0099 C 9.3783 4.2679 9.7243 4.5832 10.0846 4.9416 C 10.3153 5.1709 10.5027 5.3716 10.6901 5.5722 C 10.7189 5.6152 10.7622 5.6582 10.8198 5.7012 C 11.6271 6.6185 12.1028 7.3638 12.319 7.7938 C 12.319 7.8082 12.3334 7.8225 12.3334 7.8368 C 12.2469 7.7938 12.146 7.7508 12.0451 7.6935 M 8.5999 8.0662 C 7.735 8.5391 6.9133 8.9835 5.616 8.6825 C 4.1745 8.3528 3.4825 7.7652 3.1942 7.4212 L 6.3079 3.4079 C 6.5241 3.8379 6.8412 4.2822 7.1728 4.6979 C 6.8268 5.2139 6.5529 5.6439 6.4232 5.8445 C 6.2791 6.0882 6.3511 6.4179 6.6106 6.5755 C 6.6971 6.6329 6.798 6.6615 6.8845 6.6615 C 7.0719 6.6615 7.2449 6.5612 7.3458 6.4035 C 7.5043 6.1312 7.6917 5.8445 7.8935 5.5579 C 8.1963 5.9019 8.4702 6.1742 8.6575 6.3605 C 9.0756 6.7762 9.4936 7.1488 9.8972 7.4785 C 9.4215 7.6075 9.0035 7.8512 8.5999 8.0662 M 8.2107 3.3363 C 8.0954 3.4939 7.9656 3.6516 7.8503 3.7949 C 7.5043 3.3363 7.2881 2.9636 7.1728 2.7056 C 7.4179 2.806 7.7638 3.0209 8.2107 3.3363 M 11.5117 2.075 C 11.6703 2.075 11.8433 2.1036 11.8721 2.1753 C 12.0451 2.4906 11.6271 3.4939 11.0649 4.3969 L 10.8486 4.1819 C 10.618 3.9526 10.2288 3.5943 9.7819 3.2073 C 10.445 2.5336 11.0505 2.075 11.5117 2.075 M 14.5533 10.1588 C 14.3371 9.5998 13.9911 9.0981 13.5875 8.6681 C 13.5443 8.6108 13.4866 8.5678 13.4289 8.5248 C 13.674 7.9945 13.2704 7.2348 12.9244 6.6902 C 12.6505 6.2459 12.2757 5.7442 11.8289 5.2426 C 12.3911 4.3826 13.3569 2.677 12.8379 1.6736 C 12.6794 1.3727 12.319 1 11.5117 1 L 11.4973 1 C 10.6757 1 9.7675 1.6593 8.9459 2.5193 C 8.0233 1.8456 7.0142 1.3153 6.4088 1.6593 C 6.3511 1.688 6.2791 1.7166 6.2358 1.774 C 6.2214 1.7883 6.1926 1.8026 6.1782 1.8313 C 6.1637 1.8456 6.1493 1.86 6.1349 1.8886 L 6.1205 1.9173 L 2.1275 7.0485 C 2.1131 7.0485 2.1131 7.0485 2.0987 7.0628 L 1.2049 8.2238 L 1.1617 8.2668 C 1.1185 8.3098 1.0896 8.3671 1.0752 8.4101 L 1.0752 8.4245 C 0.6283 9.3418 2.2861 11.1334 3.0645 11.9217 C 3.7564 12.6097 5.2844 14 6.2358 14 C 6.4376 14 6.5962 13.9427 6.7403 13.8137 L 12.2613 9.5568 C 12.2902 9.5424 12.3046 9.5138 12.3334 9.4851 C 12.3622 9.5138 12.3766 9.5568 12.3911 9.5854 C 12.564 9.9294 12.6794 10.2878 12.6938 10.6748 C 12.737 11.0617 12.7082 11.4631 12.6505 11.8501 L 12.6505 11.8644 C 12.6361 11.9791 12.6361 12.0794 12.6505 12.194 C 12.7514 12.839 13.3569 13.2834 13.9911 13.183 C 14.6398 13.0827 15.0867 12.4807 14.9858 11.8357 C 14.8993 11.2767 14.784 10.7034 14.5533 10.1588", + }), { id: "sb3-paintbucket", }, ), SVG.setProps( - SVG.group([ - SVG.el("path", { - d: "M 7.5 0.5 L 0.5 7.5 Q 2.5 10 5 7.5 L 9.5 2.5 Z", - "stroke-width": 1, - fill: "none", - }), - SVG.el("path", { - d: "M 7.5 0 L 3.75 3.75 L 6.25 6.25 L 10 2.5 Z", - stroke: "none", - }), - ]), + SVG.el("path", { + d: "M 11.537 11.8292 L 8.9661 11.8292 L 6.3016 9.1647 L 9.1686 6.2977 L 13.1263 10.2554 L 11.537 11.8292 Z M 14.778 9.6945 L 9.1686 4.1007 L 6.3016 1.2337 C 6.0056 0.9221 5.507 0.9221 5.1953 1.2337 L 1.222 5.207 C 0.926 5.5031 0.926 6.0017 1.222 6.2977 L 4.1046 9.1647 L 8.0935 13.1536 C 8.2337 13.3094 8.4363 13.3873 8.6388 13.3873 L 11.8642 13.3873 C 12.0668 13.3873 12.2693 13.3094 12.4096 13.1536 L 14.778 10.8008 C 15.074 10.5047 15.074 10.0061 14.778 9.6945 L 14.778 9.6945 Z", + }), { id: "sb3-eraser", }, @@ -685,34 +616,7 @@ export default class Style { ), SVG.setProps( SVG.el("path", { - d: `M 10 5 - L 9.619397662556434 6.913417161825449 A 5 5 0 0 1 9.30814580220763 7.53769181480352 - L 7.867032155011471 7.007517527228661 A 3.5 3.5 0 0 1 7.007517527228661 7.867032155011471 - L 7.537691814803521 9.30814580220763 A 5 5 0 0 1 6.913417161825449 9.619397662556434 - L 6.913417161825449 9.619397662556434 A 5 5 0 0 1 6.251900020272208 9.840738201890538 - L 5.607768621834256 8.446827135542728 A 3.5 3.5 0 0 1 4.392231378165744 8.446827135542728 - L 3.748099979727793 9.840738201890538 A 5 5 0 0 1 3.0865828381745515 9.619397662556434 - L 3.0865828381745515 9.619397662556434 A 5 5 0 0 1 2.4623081851964783 9.30814580220763 - L 2.9924824727713397 7.867032155011472 A 3.5 3.5 0 0 1 2.1329678449885296 7.0075175272286625 - L 0.691854197792372 7.537691814803522 A 5 5 0 0 1 0.3806023374435661 6.91341716182545 - L 0.3806023374435661 6.91341716182545 A 5 5 0 0 1 0.15926179810946106 6.251900020272206 - L 1.553172864457272 5.607768621834256 A 3.5 3.5 0 0 1 1.553172864457272 4.392231378165743 - L 0.15926179810946106 3.748099979727792 A 5 5 0 0 1 0.3806023374435652 3.0865828381745537 - L 0.3806023374435652 3.0865828381745537 A 5 5 0 0 1 0.6918541977923702 2.4623081851964805 - L 2.132967844988528 2.9924824727713397 A 3.5 3.5 0 0 1 2.9924824727713375 2.1329678449885296 - L 2.4623081851964796 0.6918541977923711 A 5 5 0 0 1 3.0865828381745524 0.3806023374435661 - L 3.0865828381745524 0.3806023374435661 A 5 5 0 0 1 3.7480999797277907 0.15926179810946195 - L 4.392231378165744 1.553172864457272 A 3.5 3.5 0 0 1 5.607768621834255 1.5531728644572715 - L 6.251900020272207 0.15926179810946106 A 5 5 0 0 1 6.91341716182545 0.380602337443567 - L 6.91341716182545 0.380602337443567 A 5 5 0 0 1 7.537691814803523 0.6918541977923729 - L 7.007517527228661 2.1329678449885288 A 3.5 3.5 0 0 1 7.86703215501147 2.9924824727713375 - L 9.308145802207626 2.4623081851964757 A 5 5 0 0 1 9.619397662556434 3.086582838174552 - L 9.619397662556434 3.086582838174552 A 5 5 0 0 1 9.840738201890538 3.7480999797277903 - L 8.446827135542728 4.39223137816574 A 3.5 3.5 0 0 1 8.446827135542728 5.607768621834255 - L 9.840738201890538 6.251900020272208 A 5 5 0 0 1 9.619397662556434 6.913417161825446 - L 10 5 - L 6.5 5 A 1.5 1.5 0 1 1 6.499999250000062 4.998500000249999`, - "fill-rule": "evenodd", + d: `M 7.2721 1.6838 C 7.4082 1.2754 7.7903 1 8.2208 1 H 9.7792 C 10.2097 1 10.5918 1.2754 10.7279 1.6838 L 11.3219 3.4658 C 11.7914 3.663 12.2304 3.9182 12.6302 4.2224 L 14.4721 3.8455 C 14.8938 3.7592 15.3234 3.9524 15.5386 4.3252 L 16.3178 5.6749 C 16.533 6.0476 16.4856 6.5163 16.2 6.8383 L 14.9529 8.2447 C 14.984 8.4921 15 8.7442 15 9 C 15 9.2558 14.984 9.5079 14.9529 9.7553 L 16.2 11.1617 C 16.4856 11.4837 16.533 11.9524 16.3178 12.3252 L 15.5386 13.6748 C 15.3234 14.0476 14.8938 14.2408 14.4721 14.1545 L 12.6302 13.7776 C 12.2304 14.0818 11.7914 14.337 11.3219 14.5342 L 10.7279 16.3162 C 10.5918 16.7246 10.2097 17 9.7792 17 H 8.2208 C 7.7903 17 7.4082 16.7246 7.2721 16.3162 L 6.678 14.5342 C 6.2086 14.337 5.7695 14.0818 5.3698 13.7776 L 3.5279 14.1545 C 3.1062 14.2408 2.6766 14.0476 2.4614 13.6748 L 1.6822 12.3252 C 1.467 11.9524 1.5144 11.4837 1.8 11.1617 L 3.0471 9.7553 C 3.016 9.5079 3 9.2558 3 9 C 3 8.7442 3.016 8.4921 3.0471 8.2447 L 1.8 6.8383 C 1.5144 6.5163 1.467 6.0476 1.6822 5.6749 L 2.4614 4.3252 C 2.6766 3.9524 3.1062 3.7592 3.5279 3.8455 L 5.3698 4.2224 C 5.7695 3.9182 6.2086 3.663 6.678 3.4658 L 7.2721 1.6838 Z M 9 7 C 7.8954 7 7 7.8954 7 9 C 7 10.1046 7.8954 11 9 11 C 10.1046 11 11 10.1046 11 9 C 11 7.8954 10.1046 7 9 7 Z`, }), { id: "sb3-gears", @@ -798,39 +702,62 @@ export default class Style { }, ), SVG.setProps( - SVG.el("path", { - d: `M 2.166666666666667 1.6666666666666667 L 3.3333333333333335 1.6666666666666667 L 4.166666666666667 2.5 L 5.833333333333334 2.5 L 6.666666666666667 1.6666666666666667 L 7.833333333333334 1.6666666666666667 L 6.666666666666667 5 L 6.666666666666667 6.166666666666667 L 3.3333333333333335 6.166666666666667 L 3.3333333333333335 5 Z - M 4.583333333333334 2.166666666666667 L 4 1.6666666666666667 L 3.666666666666667 0 L 6.333333333333333 0 L 6 1.6666666666666667 L 5.416666666666667 2.166666666666667 Z - M 4.166666666666667 6.666666666666667 L 1.6666666666666667 6.666666666666667 L 1.3333333333333335 10 L 3.3333333333333335 10 Z - M 5.833333333333334 6.666666666666667 L 8.333333333333334 6.666666666666667 L 8.666666666666666 10 L 6.666666666666667 10 Z - M 1.6666666666666667 1.6666666666666667 L 0.5 2.5 L 0.5 5.416666666666667 L 2.5 5.833333333333334 Z - M 8.333333333333334 1.6666666666666667 L 9.5 2.5 L 9.5 5.416666666666667 L 7.5 5.833333333333334 Z`, - }), + SVG.group([ + SVG.el("path", { + d: `M 6.7565 16.5218 L 6.7565 2.2698 + M 1.5116 14.2809 C 1.5116 11.3842 3.8598 9.036 6.7565 9.036 C 9.652 9.036 12.0002 11.3842 12.0002 14.2809 + M 10.9663 15.315 C 10.9663 14.7435 11.4296 14.2815 11.9998 14.2815 C 12.5725 14.2815 13.0345 14.7435 13.0345 15.315 + M 0.4775 15.315 C 0.4775 14.7435 0.9395 14.2815 1.511 14.2815 C 2.0824 14.2815 2.5457 14.7435 2.5457 15.315`, + "stroke-width": 0.75, + "stroke-linecap": "round", + "stroke-linejoin": "round", + fill: "none", + }), + SVG.el("path", { + d: `M 9.6053 9.0359 L 3.906 9.0359 C 3.2035 9.0359 2.6333 8.467 2.6333 7.7631 L 2.6333 5.6364 C 2.6333 4.9339 3.2035 4.3637 3.906 4.3637 L 9.6053 4.3637 C 10.3091 4.3637 10.878 4.9339 10.878 5.6364 L 10.878 7.7631 C 10.878 8.467 10.3091 9.0359 9.6053 9.0359 + M 9.1131 14.0783 L 4.3989 14.0783 C 3.7715 14.0783 3.2624 13.5692 3.2624 12.9405 L 3.2624 12.0127 C 3.2624 10.0832 4.8266 8.519 6.756 8.519 C 8.6855 8.519 10.2497 10.0832 10.2497 12.0127 L 10.2497 12.9405 C 10.2497 13.5692 9.7406 14.0783 9.1131 14.0783 + M 7.777 16.5218 C 7.777 17.0843 7.3201 17.5425 6.7563 17.5425 C 6.1925 17.5425 5.7355 17.0843 5.7355 16.5218 C 5.7355 15.958 6.1925 15.4998 6.7563 15.4998 C 7.3201 15.4998 7.777 15.958 7.777 16.5218 + M 8.0305 2.2745 C 8.0305 2.9796 7.4603 3.5498 6.7565 3.5498 C 6.0514 3.5498 5.4813 2.9796 5.4813 2.2745 C 5.4813 1.5707 6.0514 1.0005 6.7565 1.0005 C 7.4603 1.0005 8.0305 1.5707 8.0305 2.2745`, + stroke: "none", + }), + SVG.el("path", { + d: "M 8.7564 7.404 L 4.7549 7.404 C 4.3667 7.404 4.0524 7.0896 4.0524 6.7002 C 4.0524 6.312 4.3667 5.9963 4.7549 5.9963 L 8.7564 5.9963 C 9.1458 5.9963 9.4615 6.312 9.4615 6.7002 C 9.4615 7.0896 9.1458 7.404 8.7564 7.404", + fill: "#575e75", + stroke: "none", + }), + ]), { id: "sb3-robot", }, ), - SVG.setProps( SVG.el("path", { - d: "M 0.5 5 L 5 0.5 L 9.5 5 L 6.5 5 L 6.5 9.5 L 3.5 9.5 L 3.5 5 Z", + d: "M 15 8.95 L 10.7 13.25 c -0.4 0.3 -0.9 0.4 -1.3 0.2 s -0.7 -0.6 -0.7 -1.1 v -1.6 l -6 -0.8 c -1 -0.1 -1.7 -0.9 -1.7 -1.9 v -0.2 c 0.1 -0.9 0.8 -1.5 1.6 -1.6 l 6 -0.9 v -1.6 c 0 -0.5 0.3 -0.9 0.7 -1.1 c 0.4 -0.2 0.9 -0.1 1.3 0.3 L 15 7.25 c 0.2 0.2 0.3 0.5 0.3 0.8 l -0.3 0.9 z", + stroke: "#000", + "stroke-opacity": 0.1, + "stroke-width": 2, + "paint-order": "stroke", }), { - id: "sb3-arrowUp", + id: "sb3-arrowRight", }, ), SVG.setProps( SVG.el("path", { - d: "M 0.5 5 L 5 0.5 L 9.5 5 L 6.5 5 L 6.5 9.5 L 3.5 9.5 L 3.5 5 Z", + d: "M 15.6 9.45 z M 9.2 12.15 l -5.6 -0.8 a 2.5 2.5 0 0 1 -2.1 -2.4 v -0.3 c 0.2 -1.1 1 -1.9 2 -2 l 5.6 -0.8 v -1.1 c 0 -0.7 0.4 -1.3 1 -1.6 c 0.6 -0.3 1.3 -0.1 1.8 0.4 l 4.3 4.3 c 0.3 0.3 0.5 0.7 0.5 1.2 c 0 0.4 -0.2 0.9 -0.5 1.2 L 12 14.55 c -0.5 0.5 -1.2 0.6 -1.8 0.3 c -0.6 -0.3 -1 -0.9 -1 -1.5 V 12.15 z", fill: "none", + "stroke-width": 1, + "paint-order": "stroke", }), { - id: "sb3-arrowUpOutline", + id: "sb3-arrowRightOutline", }, ), SVG.setProps( SVG.el("path", { d: "M 6.666666666666666 3.3333333333333335 L 5 1 L 3.3333333333333335 3.3333333333333335 M 5 1 L 5 9.5", + "stroke-linecap": "round", + "stroke-linejoin": "round", fill: "none", }), { @@ -839,74 +766,74 @@ export default class Style { ), SVG.setProps( SVG.el("use", { - href: "#sb3-arrowUp", - transform: "rotate(180 5 5)", + href: "#sb3-arrowRight", + transform: "rotate(180 8 8)", }), { - id: "sb3-arrowDown", + id: "sb3-arrowLeft", }, ), SVG.setProps( SVG.el("use", { - href: "#sb3-arrowUpOutline", - transform: "rotate(180 5 5)", + href: "#sb3-arrowRightOutline", + transform: "rotate(180 9 9)", }), { - id: "sb3-arrowDownOutline", + id: "sb3-arrowLeftOutline", }, ), SVG.setProps( SVG.el("use", { href: "#sb3-arrowUpThin", - transform: "rotate(180 5 5)", + transform: "rotate(-90 5 5)", }), { - id: "sb3-arrowDownThin", + id: "sb3-arrowLeftThin", }, ), SVG.setProps( SVG.el("use", { - href: "#sb3-arrowUp", - transform: "rotate(-90 5 5)", + href: "#sb3-arrowRight", + transform: "rotate(90 8 8)", }), { - id: "sb3-arrowLeft", + id: "sb3-arrowDown", }, ), SVG.setProps( SVG.el("use", { - href: "#sb3-arrowUpOutline", - transform: "rotate(-90 5 5)", + href: "#sb3-arrowRightOutline", + transform: "rotate(90 9 9)", }), { - id: "sb3-arrowLeftOutline", + id: "sb3-arrowDownOutline", }, ), SVG.setProps( SVG.el("use", { href: "#sb3-arrowUpThin", - transform: "rotate(-90 5 5)", + transform: "rotate(180 5 5)", }), { - id: "sb3-arrowLeftThin", + id: "sb3-arrowDownThin", }, ), SVG.setProps( SVG.el("use", { - href: "#sb3-arrowUp", - transform: "rotate(90 5 5)", + href: "#sb3-arrowRight", + transform: "rotate(-90 8 8)", }), { - id: "sb3-arrowRight", + id: "sb3-arrowUp", }, ), SVG.setProps( SVG.el("use", { - href: "#sb3-arrowUpOutline", - transform: "rotate(90 5 5)", + href: "#sb3-arrowRightOutline", + transform: "rotate(-90 9 9)", }), { - id: "sb3-arrowRightOutline", + id: "sb3-arrowUpOutline", }, ), SVG.setProps( @@ -922,6 +849,8 @@ export default class Style { SVG.el("path", { d: "M 6.666666666666666 3.3333333333333335 L 5 1 L 3.3333333333333335 3.3333333333333335 M 6.666666666666666 6.666666666666666 L 5 9 L 3.3333333333333335 6.666666666666666 M 5 1 L 5 9", fill: "none", + "stroke-linecap": "round", + "stroke-linejoin": "round", }), { id: "sb3-arrowUpDownThin", @@ -953,15 +882,11 @@ export default class Style { }, ), SVG.setProps( - SVG.group([ - SVG.el("path", { - d: "M 0 0 L 4 0 L 4 4 L 8 4 L 8 10 L 0 10 Z", - }), - SVG.el("path", { - d: "M 4 0 L 8 4 L 4 4 L 4 0 Z", - filter: "brightness(0.75)", - }), - ]), + SVG.el("path", { + d: "M 3.9812 1 H 14.0196 C 15.4042 1 16.6158 2.2115 16.6158 3.5962 V 10.8654 H 12.635 C 10.385 10.8654 8.6542 12.7692 8.6542 14.8462 V 18.8269 H 3.9812 C 2.5966 18.8269 1.385 17.6154 1.385 16.2308 V 3.5962 C 1.385 2.2115 2.5966 1 3.9812 1 Z M 5.0196 9.8269 H 7.7889 C 8.4812 9.8269 9.0004 9.4808 9.0004 8.7885 C 9.0004 8.0961 8.4812 7.75 7.9619 7.75 H 5.0196 C 4.5004 7.75 3.9812 8.2692 3.9812 8.7885 C 3.9812 9.3077 4.5004 9.8269 5.0196 9.8269 Z M 13.1542 5.8461 H 5.0196 C 4.3273 5.8461 3.9812 5.3269 3.9812 4.8077 C 3.9812 4.2885 4.5004 3.7692 5.0196 3.7692 H 13.1542 C 13.6735 3.7692 14.1927 4.2885 14.1927 4.8077 C 14.0196 5.3269 13.6735 5.8461 13.1542 5.8461 Z M 16.4427 12.25 H 12.4619 C 11.0773 12.25 9.8658 13.4615 9.8658 15.0192 V 19 L 16.4427 12.25 Z", + "fill-rule": "evenodd", + "clip-rule": "evenodd", + }), { id: "sb3-file", }, @@ -1103,22 +1028,6 @@ export default class Style { id: "sb3-stage", }, ), - SVG.setProps( - SVG.group([ - SVG.el("path", { - d: `M 8.181980515339465 1.8180194846605362 A 4.5 4.5 0 1 1 1.8180194846605353 1.8180194846605362`, - fill: "none", - "stroke-width": 1, - }), - SVG.el("path", { - d: `M 0 0.5 L 4 0 L 3.5 3.5 Z`, - stroke: "none", - }), - ]), - { - id: "sb3-turnAround", - }, - ), SVG.setProps( SVG.group([ SVG.el("path", { @@ -1196,9 +1105,9 @@ export default class Style { ), SVG.setProps( SVG.el("line", { - x1: 0.5, + x1: 9.5, y1: 0.5, - x2: 9.5, + x2: 0.5, y2: 9.5, "stroke-width": 1, "stroke-linecap": "round", @@ -1246,33 +1155,39 @@ export default class Style { }, ), SVG.setProps( - SVG.group([ - SVG.el("path", { - d: "M 0 5 L 8 0 L 8 10 Z", - stroke: "none", - }), - SVG.el("path", { - d: "M 13 10 A 5 5 0 0 0 8 5", - fill: "none", - "stroke-width": 2.4, - }), - ]), + SVG.el( + "path", + { + d: "M15.5581635,12.7700651 L11.8403972,16.4941315 C11.5610922,16.7671364 11.1830854,16.9211391 10.7903784,16.9211391 C10.3990715,16.9211391 10.0210647,16.7671364 9.74035971,16.4941315 L6.02399342,12.7700651 C5.5969858,12.3430574 5.47098355,11.7060461 5.70198767,11.1530362 C5.93299179,10.6000263 6.46500128,10.24302 7.06701202,10.24302 L8.40403587,10.24302 C8.36903525,9.92101423 8.27803362,9.55700774 8.12403088,9.17200087 C8.07573002,9.05999887 8.02602913,8.94799688 7.97002813,8.83599488 C7.89302676,8.70999263 7.90072689,8.67499201 7.79502501,8.52098926 C7.62702201,8.26898476 7.47301926,8.07998139 7.29031601,7.86297752 C6.9200094,7.4639704 6.47200141,7.12096429 5.99599292,6.86895979 C5.5129843,6.6169553 5.00897531,6.46295255 4.56096732,6.37895105 C4.11995945,6.30194968 3.71395221,6.29494955 3.47594796,6.29494955 C3.35694584,6.28794943 3.2029431,6.31594993 3.12594172,6.32295005 C3.04194022,6.32995018 2.99293935,6.3369503 2.99293935,6.3369503 C2.49593048,6.38595117 2.04792249,6.02194468 1.99892162,5.52493582 C1.95692087,5.10492832 2.20192524,4.72692158 2.57293186,4.58691908 C2.57293186,4.58691908 2.62193273,4.56591871 2.6989341,4.53791821 C2.78993573,4.50991771 2.87393723,4.46091684 3.06994072,4.40491584 C3.46194772,4.28591371 3.95895658,4.15991147 4.60996819,4.09691034 C5.25397968,4.04090934 6.03099354,4.05490959 6.85070816,4.22291259 C7.66902276,4.39791571 8.53003812,4.72692158 9.32805235,5.20293007 C9.7060591,5.44793444 10.1120663,5.73493956 10.427072,6.01494456 C10.5670745,6.11994643 10.8050787,6.35795068 10.9450812,6.5049533 C11.1060841,6.67295629 11.2530867,6.84095929 11.4007893,7.01596241 C11.9670994,7.7159749 12.3871069,8.47198839 12.6601118,9.15800062 C12.8211147,9.55000762 12.9331167,9.92101423 13.0171182,10.24302 L14.5151449,10.24302 C15.1171556,10.24302 15.6491651,10.6000263 15.8801692,11.1530362 C16.1111734,11.7060461 15.9851711,12.3430574 15.5581635,12.7700651", + transform: + "translate(5, 3) scale(-1, 1) rotate(-45.000000) translate(-11.994247, -10.494247) ", + stroke: "#000", + "stroke-opacity": 0.1, + "stroke-width": 2, + }, + { + paintOrder: "stroke", + }, + ), { id: "sb3-turnBack", }, ), SVG.setProps( - SVG.group([ - SVG.el("path", { - d: "M 16 5 L 8 0 L 8 10 Z", - stroke: "none", - }), - SVG.el("path", { - d: "M 3 10 A 5 5 0 0 1 8 5", - fill: "none", - "stroke-width": 2.4, - }), - ]), + SVG.el( + "path", + { + d: "M17.5581635,12.7700651 L13.8403972,16.4941315 C13.5610922,16.7671364 13.1830854,16.9211391 12.7903784,16.9211391 C12.3990715,16.9211391 12.0210647,16.7671364 11.7403597,16.4941315 L8.02399342,12.7700651 C7.5969858,12.3430574 7.47098355,11.7060461 7.70198767,11.1530362 C7.93299179,10.6000263 8.46500128,10.24302 9.06701202,10.24302 L10.4040359,10.24302 C10.3690352,9.92101423 10.2780336,9.55700774 10.1240309,9.17200087 C10.07573,9.05999887 10.0260291,8.94799688 9.97002813,8.83599488 C9.89302676,8.70999263 9.90072689,8.67499201 9.79502501,8.52098926 C9.62702201,8.26898476 9.47301926,8.07998139 9.29031601,7.86297752 C8.9200094,7.4639704 8.47200141,7.12096429 7.99599292,6.86895979 C7.5129843,6.6169553 7.00897531,6.46295255 6.56096732,6.37895105 C6.11995945,6.30194968 5.71395221,6.29494955 5.47594796,6.29494955 C5.35694584,6.28794943 5.2029431,6.31594993 5.12594172,6.32295005 C5.04194022,6.32995018 4.99293935,6.3369503 4.99293935,6.3369503 C4.49593048,6.38595117 4.04792249,6.02194468 3.99892162,5.52493582 C3.95692087,5.10492832 4.20192524,4.72692158 4.57293186,4.58691908 C4.57293186,4.58691908 4.62193273,4.56591871 4.6989341,4.53791821 C4.78993573,4.50991771 4.87393723,4.46091684 5.06994072,4.40491584 C5.46194772,4.28591371 5.95895658,4.15991147 6.60996819,4.09691034 C7.25397968,4.04090934 8.03099354,4.05490959 8.85070816,4.22291259 C9.66902276,4.39791571 10.5300381,4.72692158 11.3280524,5.20293007 C11.7060591,5.44793444 12.1120663,5.73493956 12.427072,6.01494456 C12.5670745,6.11994643 12.8050787,6.35795068 12.9450812,6.5049533 C13.1060841,6.67295629 13.2530867,6.84095929 13.4007893,7.01596241 C13.9670994,7.7159749 14.3871069,8.47198839 14.6601118,9.15800062 C14.8211147,9.55000762 14.9331167,9.92101423 15.0171182,10.24302 L16.5151449,10.24302 C17.1171556,10.24302 17.6491651,10.6000263 17.8801692,11.1530362 C18.1111734,11.7060461 17.9851711,12.3430574 17.5581635,12.7700651", + transform: + "translate(5, 4.5) rotate(-45.000000) translate(-6.994247, -5.494247) ", + stroke: "#000", + "stroke-opacity": 0.1, + "stroke-width": 2, + }, + { + paintOrder: "stroke", + }, + ), { id: "sb3-turnForward", }, @@ -1482,7 +1397,7 @@ export default class Style { SVG.setProps( SVG.el("use", { href: "#sb3-flipHorizontal", - transform: "translate(0 10) rotate(-90)", + transform: "rotate(-90 9 9)", }), { id: "sb3-flipVertical", @@ -1490,40 +1405,59 @@ export default class Style { ), SVG.setProps( SVG.group([ + SVG.el("circle", { + fill: "#575E75", + opacity: 0.5, + cx: 8, + cy: 0.7, + r: 1, + }), + SVG.el("circle", { + fill: "#575E75", + opacity: 0.5, + cx: 8, + cy: 3.875, + r: 1, + }), + SVG.el("circle", { + fill: "#575E75", + opacity: 0.5, + cx: 8, + cy: 7, + r: 1, + }), + SVG.el("circle", { + fill: "#575E75", + opacity: 0.5, + cx: 8, + cy: 10.125, + r: 1, + }), + SVG.el("circle", { + fill: "#575E75", + opacity: 0.5, + cx: 8, + cy: 13.25, + r: 1, + }), + SVG.el("path", { - d: "M 0.6666666666666666 9.666666666666666 L 4.2 9.666666666666666 L 4.2 1.3333333333333333 Z", - "stroke-width": 10 / 15, - fill: "none", + d: "M0,10.9157458 L0,3.08425423 C0,2.56573745 0.742550911,2.30430042 1.17470525,2.67176469 L5.79807074,6.58896289 C6.06730975,6.81554165 6.06730975,7.18591078 5.79807074,7.41248954 L1.17470525,11.3282353 C0.742550911,11.6956996 0,11.4342626 0,10.9157458", }), SVG.el("path", { - d: "M 9.333333333333334 9.666666666666666 L 5.8 9.666666666666666 L 5.8 1.3333333333333333 Z", - "stroke-width": 10 / 15, + d: "M16,3.08425423 L16,10.9157458 C16,11.4342626 15.2574491,11.6956996 14.8235798,11.3282353 L10.2019293,7.41103711 C9.93269025,7.18445835 9.93269025,6.81408922 10.2019293,6.58751046 L14.8235798,2.67176469 C15.2574491,2.30430042 16,2.56573745 16,3.08425423", + opacity: 0.5, }), ]), { id: "sb3-flipHorizontal", + transform: "translate(1, 1)", }, ), SVG.setProps( - SVG.group([ - SVG.el("path", { - d: `M 1 2.5 L 1.5 9.5 L 2.5 10 L 7.5 10 L 8.5 9.5 L 9 2.5 L 1 2.5 - M 2.5 4 A 0.5 0.5 0 0 1 3.5 4 L 3.5 8.5 A 0.5 0.5 0 0 1 2.5 8.5 L 2.5 4 - M 4.5 4 A 0.5 0.5 0 0 1 5.5 4 L 5.5 8.5 A 0.5 0.5 0 0 1 4.5 8.5 L 4.5 4 - M 6.5 4 A 0.5 0.5 0 0 1 7.5 4 L 7.5 8.5 A 0.5 0.5 0 0 1 6.5 8.5 L 6.5 4`, - stroke: "none", - }), - SVG.el("path", { - d: `M 0.5 1.5 L 9.5 1.5`, - "stroke-width": 1, - fill: "none", - }), - SVG.el("path", { - d: `M 3 1.5 L 4 0.25 L 6 0.25 L 7 1.5`, - "stroke-width": 0.5, - fill: "none", - }), - ]), + SVG.el("path", { + d: `M2,3.25 L14,3.25 C14.4437164,3.25 14.7904293,3.63311343 14.7462779,4.07462779 L13.6363275,15.1741315 C13.5468672,16.0687347 12.7940775,16.75 11.8950124,16.75 L4.10498756,16.75 C3.20592253,16.75 2.45313279,16.0687347 2.36367248,15.1741315 L1.25372211,4.07462779 C1.20957067,3.63311343 1.55628356,3.25 2,3.25 Z M8.75,12 L8.75,7 C8.75,6.58578644 8.41421356,6.25 8,6.25 C7.58578644,6.25 7.25,6.58578644 7.25,7 L7.25,12 C7.25,12.4142136 7.58578644,12.75 8,12.75 C8.41421356,12.75 8.75,12.4142136 8.75,12 Z M11.25,12 L11.25,7 C11.25,6.58578644 10.9142136,6.25 10.5,6.25 C10.0857864,6.25 9.75,6.58578644 9.75,7 L9.75,12 C9.75,12.4142136 10.0857864,12.75 10.5,12.75 C10.9142136,12.75 11.25,12.4142136 11.25,12 Z M6.25,12 L6.25,7 C6.25,6.58578644 5.91421356,6.25 5.5,6.25 C5.08578644,6.25 4.75,6.58578644 4.75,7 L4.75,12 C4.75,12.4142136 5.08578644,12.75 5.5,12.75 C5.91421356,12.75 6.25,12.4142136 6.25,12 Z M1.5,4 L14.5,4 L1.5,4 Z M1.5,3 L14.5,3 C15.0522847,3 15.5,3.44771525 15.5,4 C15.5,4.55228475 15.0522847,5 14.5,5 L1.5,5 C0.94771525,5 0.5,4.55228475 0.5,4 C0.5,3.44771525 0.94771525,3 1.5,3 Z M9.25,3.25 L9.25,2 C9.25,1.86192881 9.13807119,1.75 9,1.75 L7,1.75 C6.86192881,1.75 6.75,1.86192881 6.75,2 L6.75,3.25 L9.25,3.25 Z M7,0.25 L9,0.25 C9.96649831,0.25 10.75,1.03350169 10.75,2 L10.75,4.75 L5.25,4.75 L5.25,2 C5.25,1.03350169 6.03350169,0.25 7,0.25 Z`, + }), { id: "sb3-trash", }, @@ -1584,26 +1518,18 @@ export default class Style { }, ), SVG.setProps( - SVG.group([ - SVG.el("path", { - d: `M 0 3.3333333333333335 L 3.3333333333333335 3.3333333333333335 L 6.666666666666667 0 L 6.666666666666667 10 L 3.3333333333333335 6.666666666666667 L 0 6.666666666666667 Z`, - stroke: "none", - }), - SVG.el("path", { - d: `M 8.299831645537221 8.299831645537221 A 4.666666666666667 4.666666666666667 0 0 0 8.299831645537221 1.7001683544627784 - M 7.29809703885628 7.298097038856279 A 3.25 3.25 0 0 0 7.29809703885628 2.7019029611437206`, - fill: "none", - "stroke-width": 0.6666666666666666, - }), - ]), + SVG.el("path", { + d: `M 10.63 9.137 a 0.886 0.886 0 0 1 -0.755 -1.333 a 2.569 2.569 0 0 0 0 -2.6 a 0.888 0.888 0 0 1 0.31 -1.213 a 0.878 0.878 0 0 1 1.204 0.311 a 4.346 4.346 0 0 1 0 4.401 a 0.875 0.875 0 0 1 -0.758 0.434 z m 2.627 1.418 a 0.886 0.886 0 0 1 -0.755 -1.333 a 5.367 5.367 0 0 0 0 -5.437 a 0.888 0.888 0 0 1 0.309 -1.212 a 0.88 0.88 0 0 1 1.204 0.31 a 7.138 7.138 0 0 1 0 7.238 a 0.877 0.877 0 0 1 -0.758 0.434 z M 8.379 2.18 v 8.641 c 0 1.024 -1.207 1.56 -1.96 0.87 l -1.624 -1.492 a 3.112 3.112 0 0 0 -2.104 -0.82 h -0.284 A 1.41 1.41 0 0 1 1 7.964 V 5.05 c 0 -0.781 0.63 -1.414 1.407 -1.414 h 0.268 c 0.78 0 1.529 -0.293 2.104 -0.82 L 6.42 1.31 c 0.753 -0.69 1.96 -0.154 1.96 0.869 Z`, + stroke: "none", + }), { id: "sb3-speaker", }, ), SVG.setProps( SVG.el("path", { - d: `M 0 0 L 2 0 L 3 1 L 5 1 L 6 0 L 9 0 L 9 4 L 6 4 L 5 5 L 3 5 L 2 4 L 0 4 Z - M 0 5 L 2 5 L 3 6 L 5 6 L 6 5 L 10 5 L 10 9 L 6 9 L 5 10 L 3 10 L 2 9 L 0 9 Z`, + d: `M 13 9.51 a 0.5 0.5 0 0 1 -0.5 0.5 H 7.197 a 0.495 0.495 0 0 0 -0.353 0.146 l -0.698 0.698 a 0.5 0.5 0 0 1 -0.353 0.146 H 4.207 a 0.5 0.5 0 0 1 -0.353 -0.146 l -0.698 -0.698 a 0.497 0.497 0 0 0 -0.353 -0.146 H 1.5 a 0.5 0.5 0 0 1 -0.5 -0.5 V 6.5 a 0.5 0.5 0 0 1 0.5 -0.5 h 1.293 a 0.5 0.5 0 0 1 0.353 0.146 l 0.708 0.708 a 0.5 0.5 0 0 0 0.353 0.146 h 1.586 a 0.5 0.5 0 0 0 0.353 -0.146 l 0.708 -0.708 A 0.5 0.5 0 0 1 7.207 6 H 12.5 a 0.5 0.5 0 0 1 0.5 0.5 z m 2 -5 a 0.5 0.5 0 0 1 -0.5 0.5 H 7.197 a 0.495 0.495 0 0 0 -0.353 0.146 l -0.698 0.698 a 0.5 0.5 0 0 1 -0.353 0.146 H 4.207 a 0.5 0.5 0 0 1 -0.353 -0.146 l -0.698 -0.698 a 0.497 0.497 0 0 0 -0.353 -0.146 H 1.5 a 0.5 0.5 0 0 1 -0.5 -0.5 V 1.5 a 0.5 0.5 0 0 1 0.5 -0.5 h 1.293 a 0.5 0.5 0 0 1 0.353 0.146 l 0.708 0.708 A 0.5 0.5 0 0 0 4.207 2 h 1.586 a 0.5 0.5 0 0 0 0.353 -0.146 l 0.708 -0.708 A 0.5 0.5 0 0 1 7.207 1 H 14.5 a 0.5 0.5 0 0 1 0.5 0.5 Z`, + "clip-path": "evenodd", }), { id: "sb3-blocks", @@ -1999,7 +1925,7 @@ export default class Style { id: "sb3-commentArrowUp", }, ), - + // TODO: Make the outlines match the block outlines SVG.setProps( SVG.group([ SVG.el("path", { @@ -2029,12 +1955,33 @@ export default class Style { id: "sb3-turnLeft", }, ), + SVG.setProps( + SVG.group([ + SVG.el( + "path", + { + d: "M11.1795886,5.69863689 C10.0344146,5.50396503 8.8909358,5.87638076 8.11109855,6.59582023 L9.1028481,7.58526111 C9.48429024,7.97460483 9.2130425,8.63564275 8.66207052,8.63564275 L4.61878391,8.63564275 C4.27972423,8.63564275 4,8.35633095 4,8.0169248 L4,3.98044614 C4,3.42944014 4.66116637,3.15943873 5.05108499,3.53947206 L5.89873418,4.38587144 C6.67009494,3.78492788 7.56860307,3.35326419 8.50949367,3.15012834 C9.60296112,2.91398291 10.7379634,2.95630288 11.7814195,3.27793465 C13.8835895,3.91273418 15.5110759,5.6732449 15.977283,7.68767544 C16.0874774,8.17012309 15.7823237,8.66103473 15.2991637,8.77106665 C14.8499096,8.88109857 14.409132,8.62717876 14.2480787,8.21244306 L14.2480787,8.20397906 C13.7310127,6.85735764 12.4849684,5.89246235 11.1795886,5.69863689 Z M8.82041139,14.3015249 C9.96473779,14.4953503 11.1090642,14.123781 11.8889014,13.4043415 L10.8971519,12.4140542 C10.5157098,12.0247105 10.7861099,11.364519 11.3379295,11.364519 L15.3803684,11.364519 C15.7202758,11.364519 16,11.6438308 16,11.9823906 L16,16.0197156 C16,16.5698752 15.337986,16.840723 14.9480674,16.4598433 L14.1004182,15.6134439 C13.3290574,16.2143875 12.4313969,16.6460512 11.4896587,16.849187 C10.3961912,17.0861788 9.26118897,17.0438589 8.21858047,16.7222271 C6.11641049,16.0874276 4.48892405,14.3269169 4.022717,12.3124863 C3.9125226,11.8300387 4.21682866,11.339127 4.70083635,11.2290951 C5.15009042,11.1190632 5.59002034,11.372983 5.75192134,11.7877187 L5.75192134,11.7961827 C6.26813969,13.1419577 7.51503165,14.106853 8.82041139,14.3015249 Z", + transform: + "translate(10.000000, 10.000000) rotate(90.000000) translate(-12.000000, -15.000000) scale(1.4, 1.4)", + stroke: "#000", + "stroke-opacity": 0.1, + "stroke-width": 2, + }, + { + paintOrder: "stroke", + }, + ), + ]), + { + id: "sb3-turnAround", + }, + ), SVG.setProps( SVG.group([ SVG.el("path", { d: "M23.3,11c-0.3,0.6-0.9,1-1.5,1h-1.6c-0.1,1.3-0.5,2.5-1.1,3.6c-0.9,1.7-2.3,3.2-4.1,4.1 c-1.7,0.9-3.6,1.2-5.5,0.9c-1.8-0.3-3.5-1.1-4.9-2.3c-0.7-0.7-0.7-1.9,0-2.6c0.6-0.6,1.6-0.7,2.3-0.2H7c0.9,0.6,1.9,0.9,2.9,0.9 s1.9-0.3,2.7-0.9c1.1-0.8,1.8-2.1,1.8-3.5h-1.5c-0.9,0-1.7-0.7-1.7-1.7c0-0.4,0.2-0.9,0.5-1.2l4.4-4.4c0.7-0.6,1.7-0.6,2.4,0L23,9.2 C23.5,9.7,23.6,10.4,23.3,11z", - fill: "#231f20", + fill: "#cf8b17", }), SVG.el("path", { d: "M21.8,11h-2.6c0,1.5-0.3,2.9-1,4.2c-0.8,1.6-2.1,2.8-3.7,3.6c-1.5,0.8-3.3,1.1-4.9,0.8c-1.6-0.2-3.2-1-4.4-2.1 c-0.4-0.3-0.4-0.9-0.1-1.2c0.3-0.4,0.9-0.4,1.2-0.1l0,0c1,0.7,2.2,1.1,3.4,1.1s2.3-0.3,3.3-1c0.9-0.6,1.6-1.5,2-2.6 c0.3-0.9,0.4-1.8,0.2-2.8h-2.4c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.3,0.2-0.4l4.4-4.4c0.3-0.3,0.7-0.3,0.9,0L22,9.8 c0.3,0.3,0.4,0.6,0.3,0.9S22,11,21.8,11z", @@ -2216,6 +2163,14 @@ export default class Style { id: "sb3-dropdownArrow-high-contrast", }, ), + SVG.el("path", { + d: "M 1 1 L 5 5 L 1 9 Z", + id: "sb3-addInput", + }), + SVG.el("path", { + d: "M 1 5 L 5 1 L 5 9 Z", + id: "sb3-delInput", + }), SVG.setProps( SVG.el("path", { @@ -2260,6 +2215,18 @@ export default class Style { id: "sb3-turnLeft-high-contrast", }, ), + SVG.setProps( + SVG.group([ + SVG.el("path", { + d: "M11.1795886,5.69863689 C10.0344146,5.50396503 8.8909358,5.87638076 8.11109855,6.59582023 L9.1028481,7.58526111 C9.48429024,7.97460483 9.2130425,8.63564275 8.66207052,8.63564275 L4.61878391,8.63564275 C4.27972423,8.63564275 4,8.35633095 4,8.0169248 L4,3.98044614 C4,3.42944014 4.66116637,3.15943873 5.05108499,3.53947206 L5.89873418,4.38587144 C6.67009494,3.78492788 7.56860307,3.35326419 8.50949367,3.15012834 C9.60296112,2.91398291 10.7379634,2.95630288 11.7814195,3.27793465 C13.8835895,3.91273418 15.5110759,5.6732449 15.977283,7.68767544 C16.0874774,8.17012309 15.7823237,8.66103473 15.2991637,8.77106665 C14.8499096,8.88109857 14.409132,8.62717876 14.2480787,8.21244306 L14.2480787,8.20397906 C13.7310127,6.85735764 12.4849684,5.89246235 11.1795886,5.69863689 Z M8.82041139,14.3015249 C9.96473779,14.4953503 11.1090642,14.123781 11.8889014,13.4043415 L10.8971519,12.4140542 C10.5157098,12.0247105 10.7861099,11.364519 11.3379295,11.364519 L15.3803684,11.364519 C15.7202758,11.364519 16,11.6438308 16,11.9823906 L16,16.0197156 C16,16.5698752 15.337986,16.840723 14.9480674,16.4598433 L14.1004182,15.6134439 C13.3290574,16.2143875 12.4313969,16.6460512 11.4896587,16.849187 C10.3961912,17.0861788 9.26118897,17.0438589 8.21858047,16.7222271 C6.11641049,16.0874276 4.48892405,14.3269169 4.022717,12.3124863 C3.9125226,11.8300387 4.21682866,11.339127 4.70083635,11.2290951 C5.15009042,11.1190632 5.59002034,11.372983 5.75192134,11.7877187 L5.75192134,11.7961827 C6.26813969,13.1419577 7.51503165,14.106853 8.82041139,14.3015249 Z", + transform: + "translate(10.000000, 10.000000) rotate(90.000000) translate(-12.000000, -15.000000) scale(1.4, 1.4)", + }), + ]), + { + id: "sb3-turnAround-high-contrast", + }, + ), SVG.setProps( SVG.group([ SVG.el("path", {