@lincle/react-native-base 0.4.0-next.12 → 0.4.0-next.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -43
- package/dist/components/Edges/Marker.d.ts +1 -1
- package/dist/components/Edges/Paths/Path/index.js +1 -1
- package/dist/components/Edges/Paths/index.d.ts +1 -1
- package/dist/components/Edges/index.js +17 -7
- package/dist/components/Graph/Grid/index.js +18 -8
- package/dist/components/Node/index.js +1 -1
- package/dist/shared.d.ts +2 -2
- package/package.json +91 -91
package/README.md
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
|
|
2
|
+
<h1><code>lincle</code>: A <i>reactive</i> React node and edge generator</h1>
|
|
3
3
|
</div>
|
|
4
4
|
|
|
5
5
|
<div align="center">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
<a href="https://www.npmjs.org/package/@lincle/react-web-base"><img alt="NPM Version" src="https://img.shields.io/npm/v/@lincle/react-web-base.svg" /></a>
|
|
7
|
+
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html"><img alt="License" src="https://img.shields.io/npm/l/@lincle/react-web-base.svg" /></a>
|
|
8
|
+
<a href="https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgitlab.com%2Flincle%2Flincle?ref=badge_shield"><img alt="FOSSA Status" src="https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgitlab.com%2Flincle%2Flincle.svg?type=shield" /></a>
|
|
9
9
|
</div>
|
|
10
10
|
|
|
11
11
|
<div align="center">
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
<a href="https://github.com/gajus/canonical"><img alt="Canonical Code Style" src="https://img.shields.io/badge/code%20style-canonical-blue.svg" /></a>
|
|
13
|
+
<a href="https://commitizen.github.io/cz-cli/"><img alt="Commitizen Friendly" src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" /></a>
|
|
14
|
+
<a href="https://gitlab.com/hyper-expanse/semantic-release-gitlab#readme"><img alt="Semantic Release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" /></a>
|
|
15
15
|
</div>
|
|
16
16
|
|
|
17
17
|
<div align="center">
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
<a href="https://gitlab.com/digested/lincle/commits/master"><img alt="Build Status" src="https://gitlab.com/digested/lincle/badges/master/pipeline.svg" /></a>
|
|
19
|
+
<a href="https://lincle.gitlab.io/lincle/stats/react-web-base/coverage/lcov-report/"><img alt="Coverage Report" src="https://gitlab.com/digested/lincle/badges/master/coverage.svg" /></a>
|
|
20
|
+
<a href="https://lincle.gitlab.io/lincle/stats/react-web-base/webpack/"><img alt="Build Analysis" src="https://img.shields.io/badge/webpack-stats-blue.svg" /></a>
|
|
21
21
|
</div>
|
|
22
22
|
|
|
23
23
|
**lincle** generates a reactive graph.
|
|
@@ -45,9 +45,9 @@ import '@lincle/react-web-base/dist/main.min.css';
|
|
|
45
45
|
The following example will generate this diagram:
|
|
46
46
|
|
|
47
47
|
<div align="center">
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
<a href="https://gitlab.com/digested/lincle/-/raw/master/static/simple.png">
|
|
49
|
+
<img src="https://gitlab.com/digested/lincle/-/raw/master/static/simple.png" alt="resulting screenshot of simple example" style="max-width:100%;">
|
|
50
|
+
</a>
|
|
51
51
|
</div>
|
|
52
52
|
|
|
53
53
|
> [<h3>CodeSandbox</h4>](https://codesandbox.io/s/react-ag-simple-example-8p38n)
|
|
@@ -56,25 +56,25 @@ The following example will generate this diagram:
|
|
|
56
56
|
/* styles.css */
|
|
57
57
|
|
|
58
58
|
.App {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
position: absolute;
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: 100%;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.node {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
width: calc(100% - 2px);
|
|
70
|
+
height: calc(100% - 2px);
|
|
71
|
+
border: 1px solid black;
|
|
72
|
+
background-color: white;
|
|
73
|
+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
.node-oval {
|
|
77
|
-
|
|
77
|
+
border-radius: 50%;
|
|
78
78
|
}
|
|
79
79
|
```
|
|
80
80
|
|
|
@@ -186,23 +186,23 @@ Instead of using the `@lincle/react-web-base` provided edges (`curve`, `line`, &
|
|
|
186
186
|
|
|
187
187
|
```ts
|
|
188
188
|
(
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
189
|
+
source: {
|
|
190
|
+
height: number,
|
|
191
|
+
id: string | number,
|
|
192
|
+
shape: 'oval' | 'rectangle',
|
|
193
|
+
width: number,
|
|
194
|
+
x: number,
|
|
195
|
+
y: number
|
|
196
|
+
},
|
|
197
|
+
target: {
|
|
198
|
+
height: number,
|
|
199
|
+
id: string | number,
|
|
200
|
+
shape: 'oval' | 'rectangle',
|
|
201
|
+
width: number,
|
|
202
|
+
x: number,
|
|
203
|
+
y: number
|
|
204
|
+
},
|
|
205
|
+
children?: ReactNode
|
|
206
206
|
) => Component<SVG type>
|
|
207
207
|
```
|
|
208
208
|
|
|
@@ -47,7 +47,7 @@ const RegisterEdge = ({ id: edgeId, line: givenLine, markerEnd, markerStart, pat
|
|
|
47
47
|
]);
|
|
48
48
|
if (source &&
|
|
49
49
|
target) {
|
|
50
|
-
return customPath !== null && customPath !== void 0 ? customPath : (
|
|
50
|
+
return customPath !== null && customPath !== void 0 ? customPath : (0, jsx_runtime_1.jsx)(Path_1.default, { center: true, edgeId: edgeId, line: line, markerEnd: markerEnd, markerStart: markerStart, source: pathSource, target: pathTarget });
|
|
51
51
|
}
|
|
52
52
|
else {
|
|
53
53
|
return null;
|
|
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
25
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
37
|
};
|
|
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
25
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
36
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
27
37
|
const shared_1 = require("../../../shared");
|
|
@@ -36,7 +46,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
36
46
|
}
|
|
37
47
|
});
|
|
38
48
|
const SIZE = 0.4;
|
|
39
|
-
const Circle = (
|
|
49
|
+
const Circle = (0, jsx_runtime_1.jsx)(react_native_svg_1.Circle, { cx: SIZE, cy: SIZE, fill: 'black', r: SIZE });
|
|
40
50
|
const Grid = ({ children, scale = 1, xOffset: givenXOffset = 0, yOffset: givenYOffset = 0 }) => {
|
|
41
51
|
const diagramId = (0, shared_1.useDiagramId)();
|
|
42
52
|
const [givenGridX, givenGridY] = (0, shared_1.useGrid)() || [
|
|
@@ -30,7 +30,7 @@ const Node = (_a, ref) => {
|
|
|
30
30
|
const { x, y } = (0, react_1.useMemo)(() => {
|
|
31
31
|
var _a;
|
|
32
32
|
if (!(givenX || givenY)) {
|
|
33
|
-
const getNumber = /(-?\d+(\.\d+)?)/
|
|
33
|
+
const getNumber = /(-?\d+(\.\d+)?)/gu;
|
|
34
34
|
const transform = nodeStyle === null || nodeStyle === void 0 ? void 0 : nodeStyle.transform;
|
|
35
35
|
const [translateX, translateY] = transform ?
|
|
36
36
|
(_a = transform.match(getNumber)) !== null && _a !== void 0 ? _a : [
|
package/dist/shared.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type EdgesProps as EdgesPartialProps, type EdgeProps as SharedEdgeProps, type NodeProps as SharedNodeProps, type PathProps as SharedPathProps } from '@lincle/react-shared';
|
|
2
2
|
import { type ViewStyle } from 'react-native';
|
|
3
3
|
export type EdgeProps = SharedEdgeProps & {
|
|
4
4
|
style?: {
|
|
5
5
|
edge?: ViewStyle;
|
|
6
6
|
};
|
|
7
7
|
};
|
|
8
|
+
export type EdgesProps = EdgesPartialProps & {};
|
|
8
9
|
export type NodeProps = SharedNodeProps & {
|
|
9
10
|
style?: {
|
|
10
11
|
node?: ViewStyle;
|
|
@@ -13,5 +14,4 @@ export type NodeProps = SharedNodeProps & {
|
|
|
13
14
|
export type PathProps = SharedPathProps & {
|
|
14
15
|
style?: ViewStyle;
|
|
15
16
|
};
|
|
16
|
-
export type EdgesProps = EdgesPartialProps & {};
|
|
17
17
|
export { type EdgeNodeProps, generateOrigins, type GraphProps, type GridProps, type Line, type NodesProps, Providers, useDefaultLine, useDefaultNodeHeight, useDefaultNodeWidth, useDefaultShape, useDiagramId, useEdge, useEdges, useEdgeSubscriber, useGrid, useNodePositions, useRemoveEdge, useUpdateEdge } from '@lincle/react-shared';
|
package/package.json
CHANGED
|
@@ -1,93 +1,93 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
2
|
+
"name": "@lincle/react-native-base",
|
|
3
|
+
"title": "lincle react native base",
|
|
4
|
+
"license": "LGPL-3.0-or-later",
|
|
5
|
+
"version": "0.4.0-next.13",
|
|
6
|
+
"private": false,
|
|
7
|
+
"description": "A 'reactive' React node and edge generator",
|
|
8
|
+
"author": "wallzero @wallzeroblog (http://wallzero.com)",
|
|
9
|
+
"contributors": [
|
|
10
|
+
{
|
|
11
|
+
"name": "Connor Schlesiger",
|
|
12
|
+
"email": "connor@schlesiger.ca",
|
|
13
|
+
"position": "Initial and Lead Developer"
|
|
14
|
+
}
|
|
15
|
+
],
|
|
16
|
+
"main": "dist/index.js",
|
|
17
|
+
"types": "dist/index.d.ts",
|
|
18
|
+
"files": [
|
|
19
|
+
"dist/",
|
|
20
|
+
"COPYING.md",
|
|
21
|
+
"COPYING.LESSER.md"
|
|
22
|
+
],
|
|
23
|
+
"homepage": "https://gitlab.com/digested/lincle/tree/master/packages/react-native-base/",
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "https://gitlab.com/digested/lincle.git"
|
|
27
|
+
},
|
|
28
|
+
"bugs": {
|
|
29
|
+
"url": "https://gitlab.com/digested/lincle/issues"
|
|
30
|
+
},
|
|
31
|
+
"scripts": {
|
|
32
|
+
"build": "run-s clean:dist build:prod",
|
|
33
|
+
"build:prod": "tsc -p ./tsconfig.json",
|
|
34
|
+
"build:watch": "run-s clean:dist build:prod build:watch:tsc",
|
|
35
|
+
"build:watch:tsc": "tsc -p ./tsconfig.json --watch --pretty --preserveWatchOutput",
|
|
36
|
+
"----------------------------------------------------------------": "",
|
|
37
|
+
"build:prod:config": "",
|
|
38
|
+
"---------------------------------------------------------------": "",
|
|
39
|
+
"lint": "run-p lint:es",
|
|
40
|
+
"lint:es": "eslint",
|
|
41
|
+
"clean": "run-s clean:dist clean:node_modules",
|
|
42
|
+
"clean:node_modules": "rimraf node_modules yarn.lock package-lock.json",
|
|
43
|
+
"clean:dist": "rimraf dist"
|
|
44
|
+
},
|
|
45
|
+
"devDependencies": {
|
|
46
|
+
"@digest/eslint-config-jest": "^4.13.0",
|
|
47
|
+
"@digest/eslint-config-react": "^4.13.0",
|
|
48
|
+
"@digest/eslint-config-typescript": "^4.13.0",
|
|
49
|
+
"@digest/jest-junit": "^4.13.0",
|
|
50
|
+
"@digest/jest-react": "^4.13.0",
|
|
51
|
+
"@digest/jest-typescript": "^4.13.0",
|
|
52
|
+
"@digest/typescript": "^4.13.0",
|
|
53
|
+
"@types/jest": "^29.5.14",
|
|
54
|
+
"@types/node": "^22.10.1",
|
|
55
|
+
"@types/react": "^18.3.12",
|
|
56
|
+
"@types/react-native": "^0.73.0",
|
|
57
|
+
"@types/react-test-renderer": "^18.3.0",
|
|
58
|
+
"cross-env": "^7.0.3",
|
|
59
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
60
|
+
"jest-environment-jsdom-global": "^4.0.0",
|
|
61
|
+
"ncp": "^2.0.0",
|
|
62
|
+
"npm-run-all": "^4.1.5",
|
|
63
|
+
"react": "^18.3.1",
|
|
64
|
+
"react-native": "^0.76.3",
|
|
65
|
+
"react-native-svg": "^15.9.0",
|
|
66
|
+
"react-test-renderer": "^18.3.1",
|
|
67
|
+
"rimraf": "^6.0.1"
|
|
68
|
+
},
|
|
69
|
+
"dependencies": {
|
|
70
|
+
"@lincle/react-shared": "^0.4.0-next.13"
|
|
71
|
+
},
|
|
72
|
+
"peerDependencies": {
|
|
73
|
+
"react": "^18.0.0",
|
|
74
|
+
"react-native": "^0.76.0",
|
|
75
|
+
"react-native-svg": "^15.0.0"
|
|
76
|
+
},
|
|
77
|
+
"keywords": [
|
|
78
|
+
"library",
|
|
79
|
+
"lincle",
|
|
80
|
+
"typescript",
|
|
81
|
+
"react",
|
|
82
|
+
"reactjs",
|
|
83
|
+
"react-dom",
|
|
84
|
+
"react-native",
|
|
85
|
+
"reactive",
|
|
86
|
+
"graph",
|
|
87
|
+
"diagram",
|
|
88
|
+
"dag",
|
|
89
|
+
"acyclical graph",
|
|
90
|
+
"cyclical graph"
|
|
91
|
+
],
|
|
92
|
+
"gitHead": "84d45ca98dd0d6589c697cc7457a897fa777340f"
|
|
93
93
|
}
|