Skip to content

Commit

Permalink
Ts rewrite (#11)
Browse files Browse the repository at this point in the history
* ts

* ts rewrite

---------

Co-authored-by: devin.chenyang <devin.chenyang@grabtaxi.com>
  • Loading branch information
xx7y7xx and devin-grabtaxi committed May 21, 2023
1 parent 1dd4200 commit 3132bd6
Show file tree
Hide file tree
Showing 114 changed files with 2,888 additions and 1,915 deletions.
1,174 changes: 562 additions & 612 deletions package-lock.json

Large diffs are not rendered by default.

67 changes: 13 additions & 54 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,7 @@
"@ant-design/icons": "^5.0.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@turf/turf": "^6.5.0",
"@types/jest": "^27.5.2",
"@types/mapbox-gl": "^2.7.10",
"@types/node": "^16.18.23",
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"antd": "^5.1.4",
"axios": "^1.2.2",
"lodash": "^4.17.21",
Expand All @@ -32,8 +26,7 @@
"rete-connection-plugin": "^0.9.0",
"rete-context-menu-plugin": "^0.6.0",
"rete-react-render-plugin": "^0.3.0",
"typescript": "^4.9.5",
"web-vitals": "^3.1.1"
"typescript": "^4.9.5"
},
"scripts": {
"start": "react-scripts start",
Expand All @@ -43,48 +36,10 @@
"build-localhost": "PUBLIC_URL=/ react-scripts build"
},
"eslintConfig": {
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"react-app",
"react-app/jest",
"plugin:react/recommended",
"airbnb",
"prettier"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"settings": {
"import/resolver": {
"node": {
"paths": [
"src"
]
}
}
},
"rules": {
"no-console": "off",
"no-param-reassign": "off",
"max-len": "off",
"no-underscore-dangle": "off",
"react/prop-types": "off",
"class-methods-use-this": "off",
"no-unused-vars": "off",
"import/no-unresolved": "off",
"import/extensions": "off"
}
"react-app/jest"
]
},
"browserslist": {
"production": [
Expand All @@ -103,11 +58,15 @@
]
},
"devDependencies": {
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "^2.27.4",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.0",
"eslint-plugin-react-hooks": "^4.6.0"
"@types/geojson": "^7946.0.10",
"@types/jest": "^27.5.2",
"@types/mapbox-gl": "^2.7.10",
"@types/node": "^16.18.23",
"@types/papaparse": "^5.3.7",
"@types/prismjs": "^1.26.0",
"@types/pubsub-js": "^1.8.3",
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"@types/turf": "^3.5.32"
}
}
2 changes: 1 addition & 1 deletion src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,4 @@
position: absolute;
top: 10px;
right: 10px;
}
}
File renamed without changes.
14 changes: 8 additions & 6 deletions src/App.jsx → src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useRef, useState } from 'react';
import React, { useRef, useState, MouseEvent } from 'react';

import { Spin } from 'antd';

Expand All @@ -9,12 +9,12 @@ import Map from './map';
import './App.css';

function App() {
const layoutRef = useRef();
const layoutRef = useRef<HTMLDivElement>(null);
const [leftWidth, setLeftWidth] = useState(0);
const [isMouseDown, setIsMouseDown] = useState(false);
const [mapboxReady, setMapboxReady] = useState(false);

const mouseMoveHandler = (e) => {
const mouseMoveHandler = (e: MouseEvent<HTMLDivElement>) => {
if (!isMouseDown) return;

document.body.style.cursor = 'col-resize';
Expand All @@ -34,7 +34,10 @@ function App() {

let rightWidth = 0;
if (layoutRef.current && leftWidth !== 0) {
rightWidth = layoutRef.current.getBoundingClientRect().width - leftWidth - handlerWidth;
rightWidth =
layoutRef.current.getBoundingClientRect().width -
leftWidth -
handlerWidth;
}

return (
Expand All @@ -43,8 +46,7 @@ function App() {
className="nm-app"
ref={layoutRef}
onMouseMove={mouseMoveHandler}
onMouseUp={mouseUpHandler}
>
onMouseUp={mouseUpHandler}>
<Map width={leftWidth} onMapboxReady={setMapboxReady} />
<div
aria-hidden
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// @ts-nocheck

import Rete from 'rete';
import MyNode from './MyNode';
import NumControl from './NumControl';
Expand Down
23 changes: 0 additions & 23 deletions src/NodeEditor/ButtonControl.jsx

This file was deleted.

46 changes: 46 additions & 0 deletions src/NodeEditor/ButtonControl.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from 'react';
import { Control, NodeEditor } from 'rete';

const ButtonComponent = ({
text,
onClick,
}: {
text: string;
onClick: () => void;
}) => (
<button type="button" onClick={onClick}>
{text}
</button>
);

type ControlInternalProps = {
text: string;
onClick: () => void;
};

export default class ButtonControl extends Control {
static component = ButtonComponent;

emitter: NodeEditor;
component: typeof ButtonComponent;
props: ControlInternalProps;

constructor(
emitter: NodeEditor,
key: string,
{ text, onClick }: { text: string; onClick: () => void },
) {
super(key);
this.emitter = emitter;
this.key = key;
this.component = ButtonControl.component;

this.props = {
text,
onClick: () => {
onClick();
this.emitter.trigger('process');
},
};
}
}
12 changes: 5 additions & 7 deletions src/NodeEditor/CircleLayerComponent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@
import { Node } from 'rete';
import { NodeData, WorkerInputs } from 'rete/types/core/data';
import LayerComponent from './LayerComponent';
import InputNumberControl from './InputNumberControl.js';
import SliderAndExpressionControl from './SliderAndExpressionControl.jsx';
import ColorPickerAndExpressionControl from './ColorPickerAndExpressionControl.jsx';
import InputNumberControl from './InputNumberControl';
import SliderAndExpressionControl from './SliderAndExpressionControl';
import ColorPickerAndExpressionControl from './ColorPickerAndExpressionControl';

const layoutProperties = {
};
const layoutProperties = {};
const paintProperties = {
'circle-color': {
defaultValue: '#000000',
Expand Down Expand Up @@ -50,6 +49,5 @@ export default class CircleLayerComponent extends LayerComponent {
return null;
}

layerWorker(node: NodeData, inputs: WorkerInputs) {
}
layerWorker(node: NodeData, inputs: WorkerInputs) {}
}
41 changes: 0 additions & 41 deletions src/NodeEditor/ColorPickerAndExpressionControl.jsx

This file was deleted.

76 changes: 76 additions & 0 deletions src/NodeEditor/ColorPickerAndExpressionControl.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { Control, NodeEditor, Node } from 'rete';
import ColorPickerAndExpressionField from './components/ColorPicker/ColorPickerAndExpressionField';

declare module 'rete' {
interface ColorPickerAndExpressionControl {
update: () => void;
}
}

/**
* this.key="fill-color"
* ```json
* // expression disabled
* nodeData = {
* "fill-color": "#112233",
* "fill-color.color": "#112233",
* "fill-color.expression": "[\"get\", \"colorProp\"]",
* }
* // expression enabled
* nodeData = {
* "fill-color": ["get", "colorProp"],
* "fill-color.color": "#112233",
* "fill-color.expression": "[\"get\", \"colorProp\"]",
* }
* ```
*/
export default class ColorPickerAndExpressionControl extends Control {
static component = ColorPickerAndExpressionField;

emitter: NodeEditor;

component: typeof ColorPickerAndExpressionField;

props: any;

// `update` function for control is defined when event "rendercontrol"
// so `update` function may be undefined at the initial stage of page loading
// https://github.com/retejs/rete/blob/master/src/view/control.ts#L9
// https://github.com/retejs/react-render-plugin/blob/master/src/index.jsx#L25
update: () => void = () => {};

constructor(emitter: NodeEditor, key: string, node: Node, props: any = {}) {
super(key);
this.emitter = emitter;
this.key = key;
this.component = ColorPickerAndExpressionControl.component;

let initial = '#000';
if (node.data[key]) {
initial = node.data[key] as string;
} else if (props.defaultValue) {
initial = props.defaultValue;
}

node.data[key] = initial;
this.props = {
...props,
value: initial,
defaultValue: initial,
onChange: (v: string) => {
this.setValue(v);
this.emitter.trigger('process');
},
};
}

setValue(val: string) {
this.props.value = val;
this.putData(this.key, val);
this.update();
}

getValue() {
return this.props.value;
}
}

0 comments on commit 3132bd6

Please sign in to comment.