Collapsed, maybe.jsx

import React, { Component } from 'react';
import { isEqual, debounce } from 'lodash';
import yaml from 'js-yaml';
import Measure from 'react-measure';
import styled from 'styled-components';
import uuid from 'uuid/v1';
import md5 from 'md5';

import { Transformation2DMatrix } from './TransformationMatrix.js';
import { DocumentEvent, Absolute, Whitespace, Layer } from './Elements.js';
import Canvas from './Canvas.js';
import CanvasItem from './CanvasItem.js';
import { Dataurl, Dimensions, Bloburl, get_image_info } from './GetFile.js';
import { Droptarget } from './Components/Droptarget.js';
import { component_map } from './PresentifyComponents';

let SidebarTitle = styled.div`...`;

let ComponentButton = styled.div`...`;

let JSON_parse_safe = (json) => {...};

export let FilesContext = React.createContext({
  getFile: () => {...},
});
export let LoadFile = ({ url, children }) => {...};

class Workspace extends Component {
  state = {
    transform: new Transformation2DMatrix(),
    next_id: 1,
    items: [],
    canvas: {
      height: 500,
      width: 500,
    },
    selected_id: null,

    // Just keeping in mind that clipboard history is awesome
    clipboard: [],

    // Keep these separate from the canvas, so they can be used multiple times for example
    // TODO We also need ways to check these both ways (canvas item -> files, but also file -> canvas items)
    files: [],
  };

  add_component = (
    { type, ...info },
    { viewportWidth = 100, viewportHeight = 100 } = {}
  ) => {...};

  add_file = async (file) => {...};

  change_item = (id, change) => {...};

  select_item = (id) => {...};

  render() {
    let { selected_id, items, clipboard, transform } = this.state;
    let { add_component, change_item, select_item } = this;

    return (
      <Droptarget onDrop={async (e) => {...}}>
        {(is_dragging) => (
          <div style={...}>
            <Layer style={...}>
              <div style={...}>
                Add image to your canvas
              </div>
            </Layer>

            <DocumentEvent name="keydown" handler={...} passive />

            {/* Left sidebar */}
            <div style={...}>
              {/* Adding layers */}
              <SidebarTitle> Add layer </SidebarTitle>
              <Whitespace height={16} />
              <div style={{ flexShrink: 0 }}>
                {Object.entries(component_map).map(([key, comp]) => (
                  <ComponentButton
                    style={...}
                    onClick={() => add_component({ type: key })}
                  >
                    <span>{comp.icon}</span>
                    <div style={{ width: 16 }} />
                    <span>{comp.name}</span>
                  </ComponentButton>
                ))}
              </div>
              <Whitespace height={16} />

              {/* Layer list */}
              <div style={...} />
              <SidebarTitle> Layer list </SidebarTitle>
              <div style={{ maxHeight: '30%', overflowY: 'auto' }}>
                {items.map((item) => (
                  <div
                    onClick={() => select_item(item.id)}
                    style={...}
                  >
                    {item.name}
                  </div>
                ))}
              </div>
            </div>

            {/* Canvas */}
            <FilesContext.Provider value={...}>
              <Measure bounds>
                {({ measureRef, contentRect }) => (
                  <div style={...} ref={measureRef}>
                    {contentRect.bounds.height && (
                      <Canvas
                        transform={transform}
                        onTransformChange={...}
                        select_item={select_item}
                        initialTranslation={...}
                      >
                        {items.map((item) => {
                          let component_info = component_map[item.type];
                          return (
                            <CanvasItem
                              key={item.id}
                              item={item}
                              selected={selected_id === item.id}
                              onSelect={() => select_item(item.id)}
                              onChange={...}
                            >
                              <Absolute
                                top={0}
                                left={0}
                                bottom={0}
                                right={0}
                                style={...}
                              >
                                <component_info.Component
                                  size={item}
                                  options={item.options || {}}
                                />
                              </Absolute>
                            </CanvasItem>
                          );
                        })}
                      </Canvas>
                    )}
                  </div>
                )}
              </Measure>
            </FilesContext.Provider>

            {/* Right sidebar */}
            <div style={...}>
              {/* Edit layer */}
              <SidebarTitle> Edit layer </SidebarTitle>
              <Whitespace height={50} />
              {items.filter((x) => x.id === selected_id).map((item) => {
                let component_info = component_map[item.type];

                let unsaved =
                  item.options_unsaved || JSON.stringify(item.options, null, 2);
                let is_the_same = isEqual(
                  JSON_parse_safe(unsaved)[1],
                  item.options
                );

                return (
                  <div style={{ overflowY: 'auto' }}>
                    {component_info.ConfigScreen && (
                      <component_info.ConfigScreen
                        value={item.options}
                        onChange={...}
                      />
                    )}
                    <textarea
                      style={...}
                      value={unsaved}
                      onChange={...}
                    />
                  </div>
                );
              })}
              <Whitespace height={50} />
            </div>
          </div>
        )}
      </Droptarget>
    );
  }
}

export default Workspace;