import { Circle, geometry } from '@progress/kendo-drawing';
const { Circle: GeomCircle } = geometry;

export default function drawCircle(surface) {
  const geometry = new GeomCircle([ window.innerWidth / 2,  window.innerHeight / 2 ], 40);
    const circle = new Circle(geometry, {
        stroke: { color: "red", width: 1 },
        fill: {color: "red"},
    });

  surface.draw(circle);
}

import * as React from 'react';
import { Zoom } from '@progress/kendo-react-animation';

class AnimateCircle extends React.Component {
    constructor(props) {
        super(props);
        this.state = { show: true };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;
        const children = show ? (<p>Effect</p>) : null;

        return (
          <div>
            <dl>
              <dt>
                Zoom:
              </dt>
              <dd>
                <button className="k-button" onClick={this.onClick}>Animate</button>
              </dd>
            </dl>

            <Zoom>
              {children}
            </Zoom>
          </div>
        );
    }
}

export default AnimateCircle;

const ReferralListSeg: React.FC<ReferralListSecProps> = (props: ReferralListSecProps) => {
    const [referrals, setReferrals] = React.useState<Referral[]>([]);
    const [gridState, setGridState] = React.useState({ filter: null, group: null, skip: 0, sort: null, take: 100, editField: undefined });

    const setGridState1 = (e) => {
        const { filter, group, skip, sort, take } = e.dataState;
        const newState = { filter, group, skip, sort, take, editField: undefined };
        setGridState(newState);
    }

    const totalRecords = (): number => {
        return referrals.length;
    }

    React.useEffect(() => {
        axios.get(apiAppendCode(apiURL('/ClientReferralsOpen/' + props.clientid)))
            .then((response) => {
                setReferrals(response.data);
            }, (error) => {
                debugger;
            });
    }, []);

    React.useEffect(() => {
    }, [gridState, setGridState]);

    return (
        <div className="container-fluid">
            {referrals &&
                <Grid
                    filterable={true}
                    sortable={true}
                    resizable={true}
                    pageable={true}
                    data={referrals}
                    total={totalRecords()}
                    {...gridState}
                    onDataStateChange={setGridState1}
                >
                    <Column sortable={true} field="createdon" title="Created" width="150px" cell={KendoGridDateCell} />
                    <Column field="name" title="Name" width="250px" />
                    <Column field="status" title="Status" cell={KendoGridRefStatusCell} />
                    <Column filterable={false} cell={KendoGridNavRefCell} width="180px" />
                </Grid>
            }
        </div>
    );
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Surface } from '@progress/kendo-drawing';

import drawCircle from './DrawCircle';

class RenderSurface extends React.Component {
  surface;
  componentDidMount() {
    drawCircle(this.createSurface());
  }
  createSurface = () => {
    const element = ReactDOM.findDOMNode(this);

    this.surface = Surface.create(element);

    return this.surface;
  }
  render() {
    return (<div id="surface" />);
  }
}

export default RenderSurface;

import { geometry } from '@progress/kendo-drawing';
const { Circle } = geometry;


export default function drawCircle(surface) {
  const circle = new Circle([100, 100], 80, {
    stroke: { color: "red", width: 1 },
    color: "rgb(255, 0, 0)",
  });

  surface.draw(circle);
}

import '@progress/kendo-theme-default/dist/all.css';
import './App.scss';
import React from 'react';
import RenderSurface from './components/RenderSurface';

function App() {
  return (
    <div className="App">
      <RenderSurface/>
    </div>
  );
}

export default App;

TypeError: _node_map__WEBPACK_IMPORTED_MODULE_4__.default[srcElement.nodeType] is not a constructor

handleTitleMenuClick = (e: any): void => {
    switch (e.itemIndex) {
        case0:
            this.openPartTypeModal();
            break;
        case1:
            this.openPartNameModal();
            break;
        case2:
            this.openAddSubPartModal();
            break;
        case3:
            this.deletePart();
            break;
        default:
            return;
    }
}

render =  () => {
    const titleMenuItems = [
        {text: "Change part type"},
        {text: "Rename part"},
        {text: "Add subpart", disabled: this.state.subParts.length >= this.state.maxSubParts},
        {text: "Delete part", disabled: this.state.subParts.length > 0}
    ];

    return (
        <div className="part-container">
            <div className="part-title">
                <div className="part-title-text">...</div>
                <div className="part-title-menu">
                    <DropDownButton buttonClass="part-title-menu-button"
                                    popupSettings={{popupClass: 'common-step-title-menu-container'}}
                                    icon={'more-vertical'}
                                    items={titleMenuItems}
                                    onItemClick={this.handleTitleMenuClick}
                    />
                </div>
            </div>
            <div className="part-content">...</div>
        </div>
    );
}

const titleMenuItems = [
    {text: "Change part type", onClick: this.openPartTypeModal()},
    {text: "Rename part", onClick: this.openPartNameModal()},
    {text: "Add subpart", disabled: this.state.subParts.length >= this.state.maxSubParts, onClick: this.openAddSubPartModal()},
    {text: "Delete part", disabled: this.state.subParts.length > 0, onClick: this.deletePart()}
];