scratchblocks-plus 1.0.0

package/scratch2/draw.js

@@ -0,0 +1,452 @@
+/* for constructing SVGs */
+
+function assert(bool, message) {
+  if (!bool) {
+    throw new Error(`Assertion failed! ${message || ""}`)
+  }
+}
+
+// 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} ${height}`,
+    })
+  }
+
+  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
+  }
+
+  // translatePath takes a path string such as "M 0 0 L 0 10 L 10 0 Z", fins
+  // the individual X/Y components, and translates them by dx/dy, so as to
+  // "move" the path.
+  //
+  // This is not a particularly good way of doing this, but given we control
+  // the inputs to it it works well enough I guess?
+  static translatePath(dx, dy, path) {
+    let isX = true
+    const parts = path.split(/\s+/)
+    const out = []
+    for (let i = 0; i < parts.length; i++) {
+      let part = parts[i]
+      if (part === "A") {
+        const j = i + 5
+        out.push("A")
+        while (i < j) {
+          out.push(parts[++i])
+        }
+        continue
+      } else if (/[A-Za-z]/.test(part)) {
+        // This assertion means the path was not a valid sequence of
+        // [operation, X coordinate, Y coordinate, ...].
+        //
+        // It could indicate missing whitespace between the coordinates and the
+        // operation.
+        assert(isX, "translatePath: invalid argument")
+      } else {
+        part = +part
+        part += isX ? dx : dy
+        isX = !isX
+      }
+      out.push(part)
+    }
+    return out.join(" ")
+  }
+
+  /* shapes */
+
+  static rect(w, h, props) {
+    return SVG.el("rect", { ...props, x: 0, y: 0, width: w, height: h })
+  }
+
+  static ellipse(w, h, props) {
+    return SVG.el("ellipse", {
+      ...props,
+      cx: w / 2,
+      cy: h / 2,
+      rx: w / 2,
+      ry: h / 2,
+    })
+  }
+
+  static arc(p1x, p1y, p2x, p2y, rx, ry) {
+    return `L ${p1x} ${p1y} A ${rx} ${ry} 0 0 1 ${p2x} ${p2y}`
+  }
+
+  static arcw(p1x, p1y, p2x, p2y, rx, ry) {
+    return `L ${p1x} ${p1y} A ${rx} ${ry} 0 0 0 ${p2x} ${p2y}`
+  }
+
+  static roundedPath(w, h) {
+    const r = h / 2
+    return [
+      "M",
+      r,
+      0,
+      SVG.arc(w - r, 0, w - r, h, r, r),
+      SVG.arc(r, h, r, 0, r, r),
+      "Z",
+    ]
+  }
+
+  static roundedRect(w, h, props) {
+    return SVG.path({ ...props, path: SVG.roundedPath(w, h) })
+  }
+
+  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 getTop(w) {
+    return `M 0 3
+      L 3 0
+      L 13 0
+      L 16 3
+      L 24 3
+      L 27 0
+      L ${w - 3} 0
+      L ${w} 3`
+  }
+
+  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 - 3, "L", w - 3, y]
+    if (hasNotch) {
+      arr = arr.concat([
+        "L",
+        inset + 27,
+        y,
+        "L",
+        inset + 24,
+        y + 3,
+        "L",
+        inset + 16,
+        y + 3,
+        "L",
+        inset + 13,
+        y,
+      ])
+    }
+    if (inset > 0) {
+      arr = arr.concat(["L", inset + 2, y, "L", inset, y + 2])
+    } else {
+      arr = arr.concat(["L", inset + 3, y, "L", 0, y - 3])
+    }
+    return arr.join(" ")
+  }
+
+  static getArm(w, armTop) {
+    return `L 15 ${armTop - 2}
+      L 17 ${armTop}
+      L ${w - 3} ${armTop}
+      L ${w} ${armTop + 3}`
+  }
+
+  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 hatRect(w, h, props) {
+    return SVG.path({
+      ...props,
+      path: [
+        "M",
+        0,
+        12,
+        SVG.arc(0, 12, 80, 10, 80, 80),
+        "L",
+        w - 3,
+        10,
+        "L",
+        w,
+        10 + 3,
+        SVG.getRightAndBottom(w, h, true),
+        "Z",
+      ],
+    })
+  }
+
+  static curve(p1x, p1y, p2x, p2y, roundness) {
+    roundness = roundness || 0.42
+    const midX = (p1x + p2x) / 2.0
+    const midY = (p1y + p2y) / 2.0
+    const cx = Math.round(midX + roundness * (p2y - p1y))
+    const cy = Math.round(midY - roundness * (p2x - p1x))
+    return `${cx} ${cy} ${p2x} ${p2y}`
+  }
+
+  static procHatBase(w, h, archRoundness, props) {
+    // TODO use arc()
+    archRoundness = Math.min(0.2, 35 / w)
+    return SVG.path({
+      ...props,
+      path: [
+        "M",
+        0,
+        15,
+        "Q",
+        SVG.curve(0, 15, w, 15, archRoundness),
+        SVG.getRightAndBottom(w, h, true),
+        "M",
+        -1,
+        13,
+        "Q",
+        SVG.curve(-1, 13, w + 1, 13, archRoundness),
+        "Q",
+        SVG.curve(w + 1, 13, w, 16, 0.6),
+        "Q",
+        SVG.curve(w, 16, 0, 16, -archRoundness),
+        "Q",
+        SVG.curve(0, 16, -1, 13, 0.6),
+        "Z",
+      ],
+    })
+  }
+
+  static procHatCap(w, h, archRoundness) {
+    // TODO use arc()
+    // TODO this doesn't look quite right
+    return SVG.path({
+      path: [
+        "M",
+        -1,
+        13,
+        "Q",
+        SVG.curve(-1, 13, w + 1, 13, archRoundness),
+        "Q",
+        SVG.curve(w + 1, 13, w, 16, 0.6),
+        "Q",
+        SVG.curve(w, 16, 0, 16, -archRoundness),
+        "Q",
+        SVG.curve(0, 16, -1, 13, 0.6),
+        "Z",
+      ],
+      class: "sb-define-hat-cap",
+    })
+  }
+
+  static procHatRect(w, h, props) {
+    const q = 52
+    const y = h - q
+
+    const archRoundness = Math.min(0.2, 35 / w)
+
+    return SVG.move(
+      0,
+      y,
+      SVG.group([
+        SVG.procHatBase(w, q, archRoundness, props),
+        SVG.procHatCap(w, q, archRoundness),
+      ]),
+    )
+  }
+
+  static mouthRect(w, h, isFinal, lines, props) {
+    let y = lines[0].height
+    const p = [SVG.getTop(w), SVG.getRightAndBottom(w, y, true, 15)]
+    for (let i = 1; i < lines.length; i += 2) {
+      const isLast = i + 2 === lines.length
+
+      y += lines[i].height - 3
+      p.push(SVG.getArm(w, y))
+
+      const hasNotch = !(isLast && isFinal)
+      const inset = isLast ? 0 : 15
+      y += lines[i + 1].height + 3
+      p.push(SVG.getRightAndBottom(w, y, hasNotch, inset))
+    }
+    return SVG.path({ ...props, path: p })
+  }
+
+  static ringRect(w, h, cy, cw, ch, shape, props) {
+    const r = 8
+    const func =
+      shape === "reporter"
+        ? SVG.roundedPath
+        : shape === "boolean"
+          ? SVG.pointedPath
+          : SVG.capPath
+    return SVG.path({
+      ...props,
+      path: [
+        "M",
+        r,
+        0,
+        SVG.arcw(r, 0, 0, r, r, r),
+        SVG.arcw(0, h - r, r, h, r, r),
+        SVG.arcw(w - r, h, w, h - r, r, r),
+        SVG.arcw(w, r, w - r, 0, r, r),
+        "Z",
+        SVG.translatePath(4, cy || 4, func(cw, ch).join(" ")),
+      ],
+      "fill-rule": "even-odd",
+    })
+  }
+
+  static commentRect(w, h, props) {
+    const r = 6
+    return SVG.path({
+      ...props,
+      class: "sb-comment",
+      path: [
+        "M",
+        r,
+        0,
+        SVG.arc(w - r, 0, w, r, r, r),
+        SVG.arc(w, h - r, w - r, h, r, r),
+        SVG.arc(r, h, 0, h - r, r, r),
+        SVG.arc(0, r, r, 0, r, r),
+        "Z",
+      ],
+    })
+  }
+
+  static commentLine(width, props) {
+    return SVG.move(
+      -width,
+      9,
+      SVG.rect(width, 2, { ...props, class: "sb-comment-line" }),
+    )
+  }
+
+  static strikethroughLine(w, props) {
+    return SVG.path({
+      ...props,
+      path: ["M", 0, 0, "L", w, 0],
+      class: "sb-diff sb-diff-del",
+    })
+  }
+}

package/scratch2/filter.js

@@ -0,0 +1,78 @@
+import SVG from "./draw.js"
+
+export default class Filter {
+  constructor(id, props) {
+    this.el = SVG.el("filter", {
+      ...props,
+      id: id,
+      x0: "-50%",
+      y0: "-50%",
+      width: "200%",
+      height: "200%",
+    })
+    this.highestId = 0
+  }
+
+  fe(name, props, children) {
+    const shortName = name.toLowerCase().replace(/gaussian|osite/, "")
+    const id = `${shortName}-${++this.highestId}`
+    this.el.appendChild(
+      SVG.withChildren(
+        SVG.el(`fe${name}`, { ...props, result: id }),
+        children || [],
+      ),
+    )
+    return id
+  }
+
+  comp(op, in1, in2, props) {
+    return this.fe("Composite", { ...props, operator: op, in: in1, in2: in2 })
+  }
+
+  subtract(in1, in2) {
+    return this.comp("arithmetic", in1, in2, { k2: +1, k3: -1 })
+  }
+
+  offset(dx, dy, in1) {
+    return this.fe("Offset", {
+      in: in1,
+      dx: dx,
+      dy: dy,
+    })
+  }
+
+  flood(color, opacity, in1) {
+    return this.fe("Flood", {
+      in: in1,
+      "flood-color": color,
+      "flood-opacity": opacity,
+    })
+  }
+
+  blur(dev, in1) {
+    return this.fe("GaussianBlur", {
+      in: in1,
+      stdDeviation: `${dev} ${dev}`,
+    })
+  }
+
+  colorMatrix(in1, values) {
+    return this.fe("ColorMatrix", {
+      in: in1,
+      type: "matrix",
+      values: values.join(" "),
+    })
+  }
+
+  merge(children) {
+    this.fe(
+      "Merge",
+      {},
+      children.map(name =>
+        SVG.el("feMergeNode", {
+          in: name,
+        }),
+      ),
+    )
+  }
+}

package/scratch2/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/scratch2/style.css.js

@@ -0,0 +1,148 @@
+// Processed by Rollup
+export default `
+.sb-label {
+  font-family: Lucida Grande, Verdana, Arial, DejaVu Sans, sans-serif;
+  font-weight: bold;
+  fill: #fff;
+  font-size: 10px;
+  word-spacing: +1px;
+}
+
+.sb-obsolete {
+  fill: #d42828;
+}
+.sb-motion {
+  fill: #4a6cd4;
+}
+.sb-looks {
+  fill: #8a55d7;
+}
+.sb-sound {
+  fill: #bb42c3;
+}
+.sb-pen {
+  fill: #0e9a6c;
+}
+.sb-events {
+  fill: #c88330;
+}
+.sb-control {
+  fill: #e1a91a;
+}
+.sb-sensing {
+  fill: #2ca5e2;
+}
+.sb-operators {
+  fill: #5cb712;
+}
+.sb-variables {
+  fill: #ee7d16;
+}
+.sb-list {
+  fill: #cc5b22;
+}
+.sb-custom {
+  fill: #632d99;
+}
+.sb-custom-arg {
+  fill: #5947b1;
+}
+.sb-extension {
+  fill: #4b4a60;
+}
+.sb-grey {
+  fill: #969696;
+}
+
+.sb-bevel {
+  filter: url(#bevelFilter);
+}
+
+.sb-input {
+  filter: url(#inputBevelFilter);
+}
+.sb-input-number,
+.sb-input-string,
+.sb-input-number-dropdown {
+  fill: #fff;
+}
+.sb-literal-number,
+.sb-literal-string,
+.sb-literal-number-dropdown,
+.sb-literal-dropdown {
+  font-weight: normal;
+  font-size: 9px;
+  word-spacing: 0;
+}
+.sb-literal-number,
+.sb-literal-string,
+.sb-literal-number-dropdown {
+  fill: #000;
+}
+
+.sb-darker {
+  filter: url(#inputDarkFilter);
+}
+
+.sb-outline {
+  stroke: #fff;
+  stroke-opacity: 0.2;
+  stroke-width: 2;
+  fill: none;
+}
+
+.sb-define-hat-cap {
+  stroke: #632d99;
+  stroke-width: 1;
+  fill: #8e2ec2;
+}
+
+.sb-comment {
+  fill: #ffffa5;
+  stroke: #d0d1d2;
+  stroke-width: 1;
+}
+.sb-comment-line {
+  fill: #ffff80;
+}
+.sb-comment-label {
+  font-family: Helvetica, Arial, DejaVu Sans, sans-serif;
+  font-weight: bold;
+  fill: #5c5d5f;
+  word-spacing: 0;
+  font-size: 12px;
+}
+
+.sb-diff {
+  fill: none;
+  stroke: #000;
+}
+.sb-diff-ins {
+  stroke-width: 2px;
+}
+.sb-diff-del {
+  stroke-width: 3px;
+}
+
+/* Block highlight styles */
+.sb-highlight:not(.sb-blink) {
+  fill: #FBF883 !important;
+}
+
+/* Blinking animation for jump-to-block */
+.sb-blink {
+  animation: sb-blink-animation 0.5s 3;
+}
+
+@keyframes sb-blink-animation {
+  0% {
+    fill: #FBF883;
+  }
+  50% {
+    fill: #FBF883;
+    animation-timing-function: step-start;
+  }
+  100% {
+  }
+}
+`