Method render

packages/editor/src/components/node_block.tsx:100–305

()

  }

  render() {
    const { block, selectionState, isInvalidBlamed, placeholder, isInsideBreadcrumbs } = this.props
    const isSelected = selectionState !== NodeSelectionState.UNSELECTED

    if (block === null) {
      return null
    }

    const width = block.blockWidth
    const leftPos = block.x + block.marginLeft
    const topPos = block.y + block.marginTop
    let internalLeftPos = leftPos + NODE_INLINE_SPACING

    let loopAnnotation = null
    if (block.node.isRepeatableBlock) {
      loopAnnotation = <RepeatedBlockAnnotation nodeBlock={block} />
    }

    const isValid = (block.isValid || block.invalidChildsetID) && !isInvalidBlamed
    const classname = 'svgsplootnode' + (isSelected ? ' selected' : '') + (isValid ? '' : ' invalid')

    let shape: ReactElement
    let placeholderLabel: ReactElement

    if (block.layout.boxType === NodeBoxType.STRING) {
      return (
        <StringNode
          block={block}
          selectionState={selectionState}
          isInsideBreadcrumbs={isInsideBreadcrumbs}
          isInvalidBlamed={isInvalidBlamed}
        />
      )
    }

    if (block.layout.boxType === NodeBoxType.INVISIBLE || block.layout.boxType === NodeBoxType.BRACKETS) {
      internalLeftPos = leftPos
      if (block.node.isEmpty()) {
        placeholderLabel = <PlaceholderLabel x={block.x} y={block.y} label={placeholder} />
      }
      if (!isValid) {
        shape = (
          <rect
            className={'invisible-splootnode-invalid'}
            x={leftPos}
            y={topPos}
            height={NODE_BLOCK_HEIGHT}
            width={width}
            rx="4"
          />
        )
      } else {
        shape = null
      }
    } else if (block.layout.boxType === NodeBoxType.SMALL_BLOCK) {
      shape = getNodeShape(
        classname,
        leftPos,