psychobolt / react-paperjs Goto Github PK

// @flow
...

const PAPER = {
 ...
Raster: 'Raster',
};

...

const TYPES: Types = {
 ...
 [CONSTANTS.Raster]: (props, paper) => {const temp = new paper.Raster(props.source);
	console.log(temp)},
};

...

export const {
...
 Raster,
} = components;

import React from "react"
import PropTypes from "prop-types"

import { Resizable } from 're-resizable'

import { PaperContainer, Layer, Circle, renderWithPaperScope, Raster } from '@psychobolt/react-paperjs'
import { Grid, PanAndZoom } from '@psychobolt/react-paperjs-editor'
import map from '../assets/map.png'
const ref = instanceRef => { console.log(instanceRef) }

class AppCanvas extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      width: '100%',
      height: '100%',
    }

    this.container = React.createRef()
  }

  onResizeStop = (event, direction, refToElement) => {
    const width = refToElement.clientWidth;
    const height = refToElement.clientHeight;
    Object.assign(this.container.current.props.paper.view.viewSize, { width, height });
  }

  render() {
    const { width, height } = this.state

    return (
      <Resizable defaultSize={{ width: '100%', height: '100%' }} onResizeStop={this.onResizeStop}>
        <PaperContainer
          ref={this.container}
          canvasProps={{ resize: 'true', style: { width, height } }}
          // onMount={paper => paper.view.element.focus()}
          viewProps={paper => ({
            onResize: () => {
              const { width: vWidth, height: vHeight } = paper.view.viewSize
              this.setState({ width: `${vWidth}px`, height: `${vHeight}px` })
            }
          })}
        >
          <PanAndZoom
            center={[0, 0]}
            prepanStyle={{ cursor: '-webkit-grab' }}
            panStyle={{ cursor: '-webkit-grabbing' }}
            onPanEnabled={() => { console.log('Pan enabled') }}
            onPanDisabled={() => { console.log('Pan disabled') }}
            onZoom={level => { console.log(`Zoom: ${level}`) }}
          >
            {renderWithPaperScope(paper => {
              const { top, left, right, bottom } = paper.view.bounds
              return (
                <Grid
                  ref={ref}
                  width={width}
                  height={height}
                  top={top}
                  left={left}
                  right={right}
                  bottom={bottom}
                  strokeWidth={1 / paper.view.zoom}
                />
              )
            })}
            <Layer ref={ref}>
              <Raster
              source={map}/>
            </Layer>
          </PanAndZoom>
        </PaperContainer>
      </Resizable>
    )
  }
}

AppCanvas.propTypes = {
  app: PropTypes.object
};


export default AppCanvas

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `AppCanvas`.

ERROR Generating SSR bundle failed

If you're trying to use a package make sure that 'jsdom/lib/jsdom/living/generated/utils' is installed. If you're trying to use a local file make sure that the path is correct.

Can't resolve 'jsdom/lib/jsdom/living/generated/utils' in '/usr/src/app/www/node_modules/paper/dist/node'

Uncaught NS_ERROR_FAILURE:
    _setElementSize paper-core.js:13597
    setViewSize paper-core.js:13053
    resize paper-core.js:12856
    add paper-core.js:12749
    View paper-core.js:12854
    CanvasView paper-core.js:13575
    create paper-core.js:13212
    Project paper-core.js:2892
    setup paper-core.js:855
    componentDidMount Paper.container.js:41
    React 12
    SizeAwareComponent with-size.js:220
    SizeAwareComponent with-size.js:289
    exec throttle.js:67
    wrapper throttle.js:93
    addListener element-resize-detector.js:163
    onElementDetectable element-resize-detector.js:238
    ready scroll.js:611
    process batch-processor.js:124
    processBatch batch-processor.js:37
    setTimeout handler*raf batch-processor.js:82
    requestFrame batch-processor.js:83
    processBatchAsync batch-processor.js:64
    addFunction batch-processor.js:24
    install scroll.js:619
    makeDetectable scroll.js:640
    attachListenerToElement element-resize-detector.js:231
    forEach collection-utils.js:14
    listenTo element-resize-detector.js:199
    handleDOMNode with-size.js:238
    componentDidMount with-size.js:174
    React 19

if (paper.view) {
    paper.view.remove();
}

TypeError: Cannot read property 'alternate' of undefined
getNearestMountedFiber
node_modules/react-reconciler/cjs/react-reconciler.development.js:360
  357 | var node = fiber;
  358 | var nearestMounted = fiber;
  359 | 
> 360 | if (!fiber.alternate) {
      | ^  361 |   // If there is no alternate, this might be a new tree that isn't inserted
  362 |   // yet. If it is, then it will have a pending insertion effect on it.
  363 |   var nextNode = node;