scratchblocks-plus 1.0.0

package/scratch3/draw.js

@@ -0,0 +1,334 @@
+/* for constructing SVGs */
+
+// set by SVG.init
+let document
+let xml
+
+const directProps = {
+  textContent: true,
+}
+
+export default class SVG {
+  static init(window) {
+    document = window.document
+    const DOMParser = window.DOMParser
+    xml = new DOMParser().parseFromString("<xml></xml>", "application/xml")
+    SVG.XMLSerializer = window.XMLSerializer
+  }
+
+  static makeCanvas() {
+    return document.createElement("canvas")
+  }
+
+  static cdata(content) {
+    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 setProps(el, props) {
+    for (const key in props) {
+      const value = String(props[key])
+      if (directProps[key]) {
+        el[key] = value
+      } else if (
+        props[key] != null &&
+        Object.prototype.hasOwnProperty.call(props, key)
+      ) {
+        el.setAttributeNS(null, key, value)
+      }
+    }
+    return el
+  }
+
+  static withChildren(el, children) {
+    for (const child of children) {
+      el.appendChild(child)
+    }
+    return el
+  }
+
+  static group(children) {
+    return SVG.withChildren(SVG.el("g"), children)
+  }
+
+  static newSVG(width, height, scale) {
+    return SVG.el("svg", {
+      version: "1.1",
+      width: width * scale,
+      height: height * scale,
+      viewBox: `0 0 ${width * scale} ${height * scale}`,
+    })
+  }
+
+  static polygon(props) {
+    return SVG.el("polygon", { ...props, points: props.points.join(" ") })
+  }
+
+  static path(props) {
+    return SVG.el("path", { ...props, path: null, d: props.path.join(" ") })
+  }
+
+  static text(x, y, content, props) {
+    const text = SVG.el("text", { ...props, x: x, y: y, textContent: content })
+    return text
+  }
+
+  static symbol(href) {
+    return SVG.el("use", {
+      href: href,
+    })
+  }
+
+  static move(dx, dy, el) {
+    SVG.setProps(el, {
+      transform: `translate(${dx} ${dy})`,
+    })
+    return el
+  }
+
+  /* shapes */
+
+  static rect(w, h, props) {
+    return SVG.el("rect", { ...props, x: 0, y: 0, width: w, height: h })
+  }
+
+  static roundRect(w, h, props) {
+    return SVG.rect(w, h, { ...props, rx: 4, ry: 4 })
+  }
+
+  static pillRect(w, h, props) {
+    const r = h / 2
+    return SVG.rect(w, h, { ...props, rx: r, ry: r })
+  }
+
+  static pointedPath(w, h) {
+    const r = h / 2
+    return [
+      `M ${r} 0`,
+      `L ${w - r} 0 ${w} ${r}`,
+      `L ${w} ${r} ${w - r} ${h}`,
+      `L ${r} ${h} 0 ${r}`,
+      `L 0 ${r} ${r} 0`,
+      "Z",
+    ]
+  }
+
+  static pointedRect(w, h, props) {
+    return SVG.path({ ...props, path: SVG.pointedPath(w, h) })
+  }
+
+  static topNotch(w, y) {
+    return `c 2 0 3 1 4 2
+      l 4 4
+      c 1 1 2 2 4 2
+      h 12
+      c 2 0 3 -1 4 -2
+      l 4 -4
+      c 1 -1 2 -2 4 -2
+      L ${w - 4} ${y}
+      a 4 4 0 0 1 4 4`
+  }
+
+  static getTop(w) {
+    return `M 0 4
+      A 4 4 0 0 1 4 0
+      H 12 ${SVG.topNotch(w, 0)}`
+  }
+
+  static getRingTop(w) {
+    return `M 0 3
+      L 3 0
+      L 7 0
+      L 10 3
+      L 16 3
+      L 19 0
+      L ${w - 3} 0
+      L ${w} 3`
+  }
+
+  static getRightAndBottom(w, y, hasNotch, inset) {
+    if (typeof inset === "undefined") {
+      inset = 0
+    }
+
+    let arr = [`L ${w} ${y - 4}`, `a 4 4 0 0 1 -4 4`]
+
+    if (hasNotch) {
+      arr = arr.concat([
+        `L ${inset + 48} ${y}`,
+        "c -2 0 -3 1 -4 2",
+        "l -4 4",
+        "c -1 1 -2 2 -4 2",
+        "h -12",
+        "c -2 0 -3 -1 -4 -2",
+        "l -4 -4",
+        "c -1 -1 -2 -2 -4 -2",
+      ])
+    }
+    if (inset === 0) {
+      arr.push("L", inset + 4, y)
+      arr.push("a 4 4 0 0 1 -4 -4")
+    } else {
+      arr.push("L", inset + 4, y)
+      arr.push("a 4 4 0 0 0 -4 4")
+    }
+    return arr.join(" ")
+  }
+
+  static getArm(w, armTop) {
+    return `L 16 ${armTop - 4}
+      a 4 4 0 0 0 4 4
+      L 28 ${armTop} ${SVG.topNotch(w, armTop)}`
+  }
+
+  static getArmNoNotch(w, armTop) {
+    return `L 16 ${armTop - 4}
+      a 4 4 0 0 0 4 4
+      L 28 ${armTop} L ${w - 4} ${armTop}
+      a 4 4 0 0 1 4 4`
+  }
+
+  static stackRect(w, h, props) {
+    return SVG.path({
+      ...props,
+      path: [SVG.getTop(w), SVG.getRightAndBottom(w, h, true, 0), "Z"],
+    })
+  }
+
+  static capPath(w, h) {
+    return [SVG.getTop(w), SVG.getRightAndBottom(w, h, false, 0), "Z"]
+  }
+
+  static capRect(w, h, props) {
+    return SVG.path({ ...props, path: SVG.capPath(w, h) })
+  }
+
+  static getHatTop(w) {
+    return `M 0 16 c 25,-22 71,-22 96,0 L ${w - 4} 16 a 4 4 0 0 1 4 4`
+  }
+
+  static getCatTop(w) {
+    return `M 0 32
+      c2.6,-2.3 5.5,-4.3 8.5,-6.2c-1,-12.5 5.3,-23.3 8.4,-24.8c3.7,-1.8 16.5,13.1 18.4,15.4c8.4,-1.3 17,-1.3 25.4,0c1.9,-2.3 14.7,-17.2 18.4,-15.4c3.1,1.5 9.4,12.3 8.4,24.8c3,1.8 5.9,3.9 8.5,6.1
+      L ${w - 4} 32
+      a 4 4 0 0 1 4 4`
+  }
+
+  static hatRect(w, h, props) {
+    return SVG.path({
+      ...props,
+      path: [SVG.getHatTop(w), SVG.getRightAndBottom(w, h, true, 0), "Z"],
+    })
+  }
+
+  static catHat(w, h, props) {
+    return SVG.group([
+      SVG.path({
+        ...props,
+        path: [SVG.getCatTop(w), SVG.getRightAndBottom(w, h, true, 0), "Z"],
+      }),
+      SVG.move(
+        0,
+        32,
+        SVG.setProps(
+          SVG.group([
+            SVG.el("circle", {
+              cx: 29.1,
+              cy: -3.3,
+              r: 3.4,
+            }),
+            SVG.el("circle", {
+              cx: 59.2,
+              cy: -3.3,
+              r: 3.4,
+            }),
+            SVG.el("path", {
+              d: "M45.6,0.1c-0.9,0-1.7-0.3-2.3-0.9c-0.6,0.6-1.3,0.9-2.2,0.9c-0.9,0-1.8-0.3-2.3-0.9c-1-1.1-1.1-2.6-1.1-2.8c0-0.5,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1c0,0.4,0.1,1.7,1.4,1.7c0.5,0,0.7-0.2,0.8-0.3c0.3-0.3,0.4-1,0.4-1.3c0-0.1,0-0.1,0-0.2c0-0.5,0.5-1,1-1l0,0c0.5,0,1,0.4,1,1c0,0,0,0.1,0,0.2c0,0.3,0.1,0.9,0.4,1.2C44.8-2.2,45-2,45.5-2s0.7-0.2,0.8-0.3c0.3-0.4,0.4-1.1,0.3-1.3c0-0.5,0.4-1,0.9-1.1c0.5,0,1,0.4,1.1,0.9c0,0.2,0.1,1.8-0.8,2.8C47.5-0.4,46.8,0.1,45.6,0.1z",
+            }),
+          ]),
+          {
+            fill: "#000",
+            "fill-opacity": 0.6,
+          },
+        ),
+      ),
+      SVG.move(
+        0,
+        32,
+        SVG.el("path", {
+          d: "M73.1-15.6c1.7-4.2,4.5-9.1,5.8-8.5c1.6,0.8,5.4,7.9,5,15.4c0,0.6-0.7,0.7-1.1,0.5c-3-1.6-6.4-2.8-8.6-3.6C72.8-12.3,72.4-13.7,73.1-15.6z",
+          fill: "#FFD5E6",
+          transform: "translate(0, 32)",
+        }),
+      ),
+      SVG.move(
+        0,
+        32,
+        SVG.el("path", {
+          d: "M22.4-15.6c-1.7-4.2-4.5-9.1-5.8-8.5c-1.6,0.8-5.4,7.9-5,15.4c0,0.6,0.7,0.7,1.1,0.5c3-1.6,6.4-2.8,8.6-3.6C22.8-12.3,23.2-13.7,22.4-15.6z",
+          fill: "#FFD5E6",
+          transform: "translate(0, 32)",
+        }),
+      ),
+    ])
+  }
+
+  static getProcHatTop(w) {
+    return `M 0 20 a 20 20 0 0 1 20 -20 L ${w - 20} 0 a 20,20 0 0,1 20,20`
+  }
+
+  static procHatRect(w, h, props) {
+    return SVG.path({
+      ...props,
+      path: [SVG.getProcHatTop(w), SVG.getRightAndBottom(w, h, true, 0), "Z"],
+    })
+  }
+
+  static mouthRect(w, h, isFinal, lines, props) {
+    let y = lines[0].height
+    const p = [SVG.getTop(w), SVG.getRightAndBottom(w, y, true, 16)]
+    for (let i = 1; i < lines.length; i += 2) {
+      const isLast = i + 2 === lines.length
+
+      const line = lines[i]
+      y += line.height - 3
+
+      if (line.isFinal) {
+        p.push(SVG.getArmNoNotch(w, y))
+      } else {
+        p.push(SVG.getArm(w, y))
+      }
+
+      const hasNotch = !(isLast && isFinal)
+      const inset = isLast ? 0 : 16
+      y += lines[i + 1].height + 3
+      p.push(SVG.getRightAndBottom(w, y, hasNotch, inset))
+    }
+    p.push("Z")
+    return SVG.path({ ...props, path: p })
+  }
+
+  static commentRect(w, h, props) {
+    return SVG.roundRect(w, h, { ...props, class: "sb3-comment" })
+  }
+
+  static commentLine(width, props) {
+    return SVG.move(
+      -width,
+      9,
+      SVG.rect(width, 2, { ...props, class: "sb3-comment-line" }),
+    )
+  }
+
+  static strikethroughLine(w, props) {
+    return SVG.path({
+      ...props,
+      path: ["M", 0, 0, "L", w, 0],
+      class: "sb3-diff sb3-diff-del",
+    })
+  }
+}

package/scratch3/index.js

@@ -0,0 +1,12 @@
+import SVG from "./draw.js"
+import { LabelView } from "./blocks.js"
+import style from "./style.js"
+
+export function init(window) {
+  SVG.init(window)
+
+  LabelView.measuring = SVG.makeCanvas().getContext("2d")
+}
+
+export const makeStyle = style.makeStyle
+export { newView } from "./blocks.js"

package/scratch3/style.css.js

@@ -0,0 +1,280 @@
+// Processed by Rollup
+
+const common = `
+.sb3-label {
+  font: 500 12pt Helvetica Neue, Helvetica, sans-serif;
+}
+
+.sb3-literal-number,
+.sb3-literal-string,
+.sb3-literal-number-dropdown,
+.sb3-literal-dropdown {
+  word-spacing: 0;
+}
+
+.sb3-diff {
+  fill: none;
+  stroke: #000;
+}
+.sb3-diff-ins {
+  stroke-width: 2px;
+}
+.sb3-diff-del {
+  stroke-width: 3px;
+}
+
+/* Block highlight styles */
+/* Classic highlight mode (default): yellow fill */
+.sb3-highlight:not(.sb3-blink):not(.sb3-highlight-colorShift) {
+  fill: #FBF883 !important;
+}
+
+/* ColorShift highlight mode: uses alternate style colors, defined per style in create() */
+
+/* Blinking animation for jump-to-block */
+.sb3-blink {
+  animation: sb3-blink-animation 0.5s 3;
+}
+
+@keyframes sb3-blink-animation {
+  0% {
+    fill: #FBF883;
+  }
+  50% {
+    fill: #FBF883;
+    animation-timing-function: step-start;
+  }
+  100% {
+  }
+}
+`
+
+// These override colors defined per style
+const commonOverride = `
+/* Note: comment colors are different from Scratch. */
+
+.sb3-comment {
+  fill: #ffffa5;
+  stroke: #d0d1d2;
+  stroke-width: 1;
+}
+.sb3-comment-line {
+  fill: #ffff80;
+}
+/* specificity */
+.sb3-comment-label, .sb3-label.sb3-comment-label {
+  font: 400 12pt Helvetica Neue, Helvetica, sans-serif;
+  fill: #000;
+  word-spacing: 0;
+}`
+
+const createRule = (category, name, style) => `
+svg${name} .sb3-${category} {
+  fill: ${style[category + "Primary"]};
+  stroke: ${style[category + "Tertiary"]};
+}
+svg${name} .sb3-${category}-alt {
+  fill: ${style[category + "Secondary"]};
+}
+svg${name} .sb3-${category}-dark {
+  fill: ${style[category + "Tertiary"]};
+}
+`
+
+// Create highlight rule for colorShift mode using the alternate style's colors
+const createHighlightRule = (category, name, alternateStyle) => `
+svg${name} .sb3-highlight.sb3-highlight-colorShift:not(.sb3-blink).sb3-${category} {
+  fill: ${alternateStyle[category + "Primary"]} !important;
+  stroke: ${alternateStyle[category + "Tertiary"]} !important;
+}
+`
+
+const create = (name, style, alternateStyle) => `
+${createRule("motion", name, style)}
+${createRule("looks", name, style)}
+${createRule("sound", name, style)}
+${createRule("control", name, style)}
+${createRule("events", name, style)}
+${createRule("sensing", name, style)}
+${createRule("operators", name, style)}
+${createRule("variables", name, style)}
+${createRule("list", name, style)}
+${createRule("custom", name, style)}
+${createRule("extension", name, style)}
+${createRule("obsolete", name, style)}
+${createRule("grey", name, style)}
+
+${createHighlightRule("motion", name, alternateStyle)}
+${createHighlightRule("looks", name, alternateStyle)}
+${createHighlightRule("sound", name, alternateStyle)}
+${createHighlightRule("control", name, alternateStyle)}
+${createHighlightRule("events", name, alternateStyle)}
+${createHighlightRule("sensing", name, alternateStyle)}
+${createHighlightRule("operators", name, alternateStyle)}
+${createHighlightRule("variables", name, alternateStyle)}
+${createHighlightRule("list", name, alternateStyle)}
+${createHighlightRule("custom", name, alternateStyle)}
+${createHighlightRule("extension", name, alternateStyle)}
+${createHighlightRule("obsolete", name, alternateStyle)}
+${createHighlightRule("grey", name, alternateStyle)}
+
+svg${name} .sb3-label {
+  fill: ${style.label};
+}
+
+svg${name} .sb3-input-color {
+  stroke: ${style.inputColorStroke};
+}
+
+svg${name} .sb3-input-number,
+svg${name} .sb3-input-string {
+  fill: ${style.inputFill};
+}
+svg${name} .sb3-literal-number,
+svg${name} .sb3-literal-string {
+  fill: ${style.literal};
+}
+
+svg${name} .sb3-custom-arg {
+  fill: ${style.customPrimary};
+  stroke: ${style.customTertiary};
+}
+
+svg${name} .sb3-extension-line {
+  stroke: ${style.extensionSecondary};
+}
+`
+
+const originalStyle = {
+  label: "#fff",
+  inputColorStroke: "#fff",
+  inputFill: "#fff",
+  /* Blockly color: text */
+  literal: "#575e75",
+
+  motionPrimary: "#4c97ff",
+  motionSecondary: "#4280d7",
+  motionTertiary: "#3373cc",
+
+  looksPrimary: "#9966ff",
+  looksSecondary: "#855cd6",
+  looksTertiary: "#774dcb",
+
+  soundPrimary: "#cf63cf",
+  soundSecondary: "#c94fc9",
+  soundTertiary: "#bd42bd",
+
+  controlPrimary: "#ffab19",
+  controlSecondary: "#ec9c13",
+  controlTertiary: "#cf8b17",
+
+  eventsPrimary: "#ffbf00",
+  eventsSecondary: "#e6ac00",
+  eventsTertiary: "#cc9900",
+
+  sensingPrimary: "#5cb1d6",
+  sensingSecondary: "#47a8d1",
+  sensingTertiary: "#2e8eb8",
+
+  operatorsPrimary: "#59c059",
+  operatorsSecondary: "#46b946",
+  operatorsTertiary: "#389438",
+
+  variablesPrimary: "#ff8c1a",
+  variablesSecondary: "#ff8000",
+  variablesTertiary: "#db6e00",
+
+  listPrimary: "#ff661a",
+  listSecondary: "#ff5500",
+  listTertiary: "#e64d00",
+
+  customPrimary: "#ff6680",
+  customSecondary: "#ff4d6a",
+  customTertiary: "#ff3355",
+
+  extensionPrimary: "#0fbd8c",
+  extensionSecondary: "#0da57a",
+  extensionTertiary: "#0b8e69",
+
+  /**
+   * Custom color types. Not defined by Scratch.
+   */
+  obsoletePrimary: "#ed4242",
+  obsoleteSecondary: "#db3333",
+  obsoleteTertiary: "#ca2b2b",
+
+  /* From early prototype colors */
+  greyPrimary: "#bfbfbf",
+  greySecondary: "#b2b2b2",
+  greyTertiary: "#909090",
+}
+
+const highContrastStyle = {
+  label: "#000",
+  inputColorStroke: "#fff",
+  inputFill: "#fff",
+  literal: "#000",
+
+  motionPrimary: "#80b5ff",
+  motionSecondary: "#b3d2ff",
+  motionTertiary: "#3373cc",
+
+  looksPrimary: "#ccb3ff",
+  looksSecondary: "#ddccff",
+  looksTertiary: "#774dcb",
+
+  soundPrimary: "#e19de1",
+  soundSecondary: "#ffb3ff",
+  soundTertiary: "#bd42bd",
+
+  controlPrimary: "#ffbe4c",
+  controlSecondary: "#ffda99",
+  controlTertiary: "#cf8b17",
+
+  eventsPrimary: "#ffd966",
+  eventsSecondary: "#ffecb3",
+  eventsTertiary: "#cc9900",
+
+  sensingPrimary: "#85c4e0",
+  sensingSecondary: "#aed8ea",
+  sensingTertiary: "#2e8eb8",
+
+  operatorsPrimary: "#7ece7e",
+  operatorsSecondary: "#b5e3b5",
+  operatorsTertiary: "#389438",
+
+  variablesPrimary: "#ffa54c",
+  variablesSecondary: "#ffcc99",
+  variablesTertiary: "#db6e00",
+
+  listPrimary: "#ff9966",
+  listSecondary: "#ffcab0",
+  listTertiary: "#e64d00",
+
+  customPrimary: "#ff99aa",
+  customSecondary: "#ffccd5",
+  customTertiary: "#ff3355",
+
+  extensionPrimary: "#13ecaf",
+  extensionSecondary: "#75f0cd",
+  extensionTertiary: "#0b8e69",
+
+  /* Manually picked to be readable on black text */
+  obsoletePrimary: "#fc6666",
+  obsoleteSecondary: "#fcb0b0",
+  obsoleteTertiary: "#d32121",
+
+  greyPrimary: "#bfbfbf",
+  greySecondary: "#b2b2b2",
+  /* Changed to be AAA against #000000, was AA */
+  greyTertiary: "#959595",
+}
+
+export default common +
+  create("", originalStyle, highContrastStyle) +
+  create(
+    ".scratchblocks-style-scratch3-high-contrast",
+    highContrastStyle,
+    originalStyle,
+  ) +
+  commonOverride