267 |
268 |
291 |
292 |
293 | );
294 | }
295 |
--------------------------------------------------------------------------------
/src/primitives/Context.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export default createContext();
4 |
--------------------------------------------------------------------------------
/src/primitives/Img.js:
--------------------------------------------------------------------------------
1 | import {
2 | useContext,
3 | useEffect,
4 | useRef,
5 | useImperativeHandle,
6 | forwardRef,
7 | memo,
8 | } from 'react';
9 | import CanvasContext from './Context';
10 |
11 | var ID = function() {
12 | return (
13 | '_' +
14 | Math.random()
15 | .toString(36)
16 | .substr(2, 9)
17 | );
18 | };
19 |
20 | export default memo(
21 | forwardRef(function Img(props, ref) {
22 | const hasDrawn = useRef(false);
23 | const idRef = useRef(ID());
24 | const propsCache = useRef(props);
25 | const context = useContext(CanvasContext);
26 |
27 | if (!context) {
28 | throw new Error(
29 | 'CanvasRoot not found! View primitives are required to be inside of a CanvasRoot.'
30 | );
31 | }
32 |
33 | const getDims = () => {
34 | return context.getDimensions(context.parent, idRef.current);
35 | };
36 |
37 | useImperativeHandle(ref, () => ({
38 | getDimensions: getDims,
39 | }));
40 |
41 | const getProps = () => {
42 | return propsCache.current;
43 | };
44 |
45 | useEffect(() => {
46 | context.registerNode(
47 | context.parent,
48 | idRef.current,
49 | props,
50 | getProps,
51 | 'Image'
52 | );
53 | setTimeout(() => {
54 | hasDrawn.current = true;
55 | }, 0);
56 | return () => {
57 | context.unregisterNode(context.parent, idRef.current, props);
58 | };
59 | }, []);
60 |
61 | useEffect(() => {
62 | propsCache.current = props;
63 | if (hasDrawn.current === true) {
64 | context.redraw(context.parent, idRef.current, {
65 | style: props.style || {},
66 | children: props.children || '',
67 | });
68 | }
69 | }, [props.style, props.children]);
70 |
71 | return null;
72 | })
73 | );
74 |
--------------------------------------------------------------------------------
/src/primitives/ScrollView.js:
--------------------------------------------------------------------------------
1 | import View from './View';
2 | import Text from './Text';
3 | import React, {
4 | forwardRef,
5 | memo,
6 | useState,
7 | useCallback,
8 | useRef,
9 | useEffect,
10 | } from 'react';
11 |
12 | const styles = {
13 | container: {
14 | flex: 1,
15 | overflow: 'hidden',
16 | },
17 | scrollbar: {
18 | width: 10,
19 | top: 0,
20 | bottom: 0,
21 | right: 0,
22 | position: 'absolute',
23 | backgroundColor: '#00000025',
24 | },
25 | puck: {
26 | width: 10,
27 | height: 6,
28 | backgroundColor: '#00000050',
29 | position: 'absolute',
30 | },
31 | };
32 |
33 | export default memo(
34 | forwardRef(function ScrollView(props, ref) {
35 | let [pressed, setPressed] = useState(false);
36 | let [pressStart, setPressStart] = useState(0);
37 | let [y, setY] = useState(0);
38 | let [offset, setOffset] = useState(0);
39 | let [containerHeight, setContainerHeight] = useState(0);
40 | let contentRef = useRef();
41 | let containerRef = useRef();
42 | let pressedRef = useRef(false);
43 | let offsetRef = useRef(0);
44 |
45 | const handleMouseDown = e => {
46 | setPressed(true);
47 | pressedRef.current = true;
48 | setPressStart(e.clientY);
49 | };
50 |
51 | const handleMouseUp = () => {
52 | pressedRef.current = false;
53 | setPressed(false);
54 | };
55 |
56 | const handleMove = e => {
57 | if (pressedRef.current) {
58 | setY(y => {
59 | let newY = y - e.movementY;
60 | if (newY < offsetRef.current * -1) {
61 | newY = offsetRef.current * -1;
62 | }
63 | if (newY > 0) {
64 | newY = 0;
65 | }
66 | return newY;
67 | });
68 | }
69 | };
70 |
71 | const handleWheel = e => {
72 | let containerDimensions = containerRef.current.getDimensions();
73 | let contentDimensions = contentRef.current.getDimensions();
74 | let heightOffset = 0;
75 | if (containerDimensions && contentDimensions) {
76 | let contentHeight = contentDimensions.height;
77 | let containerHeight = containerDimensions.height;
78 | setContainerHeight(containerHeight);
79 | heightOffset = contentHeight - containerHeight;
80 | setOffset(contentHeight - containerHeight);
81 | offsetRef.current = heightOffset;
82 | }
83 |
84 | setY(y => {
85 | if (heightOffset <= 0) {
86 | return 0;
87 | }
88 | let newY = y + e.deltaY;
89 | if (newY < heightOffset * -1) {
90 | newY = heightOffset * -1;
91 | }
92 | if (newY > 0) {
93 | newY = 0;
94 | }
95 | return newY;
96 | });
97 | };
98 |
99 | const handleResize = size => {
100 | let containerDimensions = containerRef.current.getDimensions();
101 | let containerHeight = containerDimensions.height;
102 | setContainerHeight(containerHeight);
103 | let contentDimensions = contentRef.current.getDimensions();
104 | if (containerDimensions && contentDimensions) {
105 | let contentHeight = contentDimensions.height;
106 | setOffset(contentHeight - containerHeight);
107 | }
108 | };
109 |
110 | useEffect(() => {
111 | let containerDimensions = containerRef.current.getDimensions();
112 | let containerHeight = containerDimensions
113 | ? containerDimensions.height
114 | : 10;
115 | setContainerHeight(containerHeight);
116 | });
117 |
118 | const puckHeight =
119 | containerHeight - containerHeight * (offset / containerHeight);
120 | const puckTop = y * -1;
121 |
122 | return (
123 |