120 | this.setState({ renderData: renderEvent.detail })
121 | }
122 |
123 | public render = (): ReactNode => {
124 | // If our wrapped component threw an error, display it.
125 | if (this.state.componentError != null) {
126 | return (
127 |
128 |
Component Error
129 | {this.state.componentError.message}
130 |
131 | )
132 | }
133 |
134 | // Don't render until we've gotten our first RENDER_EVENT from Streamlit.
135 | if (this.state.renderData == null) {
136 | return null
137 | }
138 |
139 | return (
140 |
145 | )
146 | }
147 | }
148 |
149 | return hoistNonReactStatics(ComponentWrapper, WrappedComponent)
150 | }
151 |
--------------------------------------------------------------------------------
/streamlit_cropper/frontend/src/streamlit/index.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @license
3 | * Copyright 2018-2020 Streamlit Inc.
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | */
17 |
18 | // Workaround for type-only exports:
19 | // https://stackoverflow.com/questions/53728230/cannot-re-export-a-type-when-using-the-isolatedmodules-with-ts-3-2-2
20 |
21 | import { ComponentProps as ComponentProps_ } from "./StreamlitReact"
22 | import { RenderData as RenderData_ } from "./streamlit"
23 |
24 | export {
25 | StreamlitComponentBase,
26 | withStreamlitConnection,
27 | } from "./StreamlitReact"
28 | export { Streamlit } from "./streamlit"
29 | export type ComponentProps = ComponentProps_
30 | export type RenderData = RenderData_
31 |
--------------------------------------------------------------------------------
/streamlit_cropper/frontend/src/streamlit/streamlit.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @license
3 | * Copyright 2018-2020 Streamlit Inc.
4 | *
5 | * Licensed under the Apache License, Version 2.0 (the "License");
6 | * you may not use this file except in compliance with the License.
7 | * You may obtain a copy of the License at
8 | *
9 | * http://www.apache.org/licenses/LICENSE-2.0
10 | *
11 | * Unless required by applicable law or agreed to in writing, software
12 | * distributed under the License is distributed on an "AS IS" BASIS,
13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 | * See the License for the specific language governing permissions and
15 | * limitations under the License.
16 | */
17 |
18 | // Safari doesn't support the EventTarget class, so we use a shim.
19 | // Simple EventTarget polyfill for browser compatibility
20 | class SimpleEventTarget {
21 | private listeners: { [type: string]: Function[] } = {}
22 | addEventListener(type: string, callback: Function) {
23 | if (!this.listeners[type]) this.listeners[type] = []
24 | this.listeners[type].push(callback)
25 | }
26 | removeEventListener(type: string, callback: Function) {
27 | if (!this.listeners[type]) return
28 | this.listeners[type] = this.listeners[type].filter(fn => fn !== callback)
29 | }
30 | dispatchEvent(event: any) {
31 | if (!this.listeners[event.type]) return
32 | for (const fn of this.listeners[event.type]) fn(event)
33 | }
34 | }
35 |
36 | /** Data sent in the custom Streamlit render event. */
37 | export interface RenderData {
38 | args: any
39 | disabled: boolean
40 | }
41 |
42 | /** Messages from Component -> Streamlit */
43 | enum ComponentMessageType {
44 | // A component sends this message when it's ready to receive messages
45 | // from Streamlit. Streamlit won't send any messages until it gets this.
46 | // Data: { apiVersion: number }
47 | COMPONENT_READY = "streamlit:componentReady",
48 |
49 | // The component has a new widget value. Send it back to Streamlit, which
50 | // will then re-run the app.
51 | // Data: { value: any }
52 | SET_COMPONENT_VALUE = "streamlit:setComponentValue",
53 |
54 | // The component has a new height for its iframe.
55 | // Data: { height: number }
56 | SET_FRAME_HEIGHT = "streamlit:setFrameHeight",
57 | }
58 |
59 | /**
60 | * Streamlit communication API.
61 | *
62 | * Components can send data to Streamlit via the functions defined here,
63 | * and receive data from Streamlit via the `events` property.
64 | */
65 | export class Streamlit {
66 | /**
67 | * The Streamlit component API version we're targetting.
68 | * There's currently only 1!
69 | */
70 | public static readonly API_VERSION = 1
71 |
72 | public static readonly RENDER_EVENT = "streamlit:render"
73 |
74 | /** Dispatches events received from Streamlit. */
75 | public static readonly events = new SimpleEventTarget()
76 |
77 | private static registeredMessageListener = false
78 | private static lastFrameHeight?: number
79 |
80 | /**
81 | * Tell Streamlit that the component is ready to start receiving data.
82 | * Streamlit will defer emitting RENDER events until it receives the
83 | * COMPONENT_READY message.
84 | */
85 | public static setComponentReady = (): void => {
86 | if (!Streamlit.registeredMessageListener) {
87 | // Register for message events if we haven't already
88 | window.addEventListener("message", Streamlit.onMessageEvent)
89 | Streamlit.registeredMessageListener = true
90 | }
91 |
92 | Streamlit.sendBackMsg(ComponentMessageType.COMPONENT_READY, {
93 | apiVersion: Streamlit.API_VERSION,
94 | })
95 | }
96 |
97 | /**
98 | * Report the component's height to Streamlit.
99 | * This should be called every time the component changes its DOM - that is,
100 | * when it's first loaded, and any time it updates.
101 | */
102 | public static setFrameHeight = (height?: number): void => {
103 | if (height === undefined) {
104 | // `height` is optional. If undefined, it defaults to scrollHeight,
105 | // which is the entire height of the element minus its border,
106 | // scrollbar, and margin.
107 | height = document.body.scrollHeight
108 | }
109 |
110 | if (height === Streamlit.lastFrameHeight) {
111 | // Don't bother updating if our height hasn't changed.
112 | return
113 | }
114 |
115 | Streamlit.lastFrameHeight = height
116 | Streamlit.sendBackMsg(ComponentMessageType.SET_FRAME_HEIGHT, { height })
117 | }
118 |
119 | /**
120 | * Set the component's value. This value will be returned to the Python
121 | * script, and the script will be re-run.
122 | *
123 | * For example:
124 | *
125 | * JavaScript:
126 | * Streamlit.setComponentValue("ahoy!")
127 | *
128 | * Python:
129 | * value = st.my_component(...)
130 | * st.write(value) # -> "ahoy!"
131 | *
132 | * The value must be serializable into JSON.
133 | */
134 | public static setComponentValue = (value: any): void => {
135 | Streamlit.sendBackMsg(ComponentMessageType.SET_COMPONENT_VALUE, { value })
136 | }
137 |
138 | /** Receive a ForwardMsg from the Streamlit app */
139 | private static onMessageEvent = (event: MessageEvent): void => {
140 | const type = event.data["type"]
141 | switch (type) {
142 | case Streamlit.RENDER_EVENT:
143 | Streamlit.onRenderMessage(event.data)
144 | break
145 | }
146 | }
147 |
148 | /**
149 | * Handle an untyped Streamlit render event and redispatch it as a
150 | * StreamlitRenderEvent.
151 | */
152 | private static onRenderMessage = (data: any): void => {
153 | let args = data["args"]
154 | if (args == null) {
155 | console.error(
156 | `Got null args in onRenderMessage. This should never happen`
157 | )
158 | args = {}
159 | }
160 |
161 | // No ArrowTable/dataframe parsing needed. args should contain imageData as base64 string.
162 | const disabled = Boolean(data["disabled"])
163 |
164 | // Dispatch a render event!
165 | const eventData = { disabled, args }
166 | const event = new CustomEvent(Streamlit.RENDER_EVENT, {
167 | detail: eventData,
168 | })
169 | Streamlit.events.dispatchEvent(event)
170 | }
171 |
172 |
173 |
174 | /** Post a message to the Streamlit app. */
175 | private static sendBackMsg = (type: string, data?: any): void => {
176 | window.parent.postMessage(
177 | {
178 | isStreamlitMessage: true,
179 | type: type,
180 | ...data,
181 | },
182 | "*"
183 | )
184 | }
185 | }
186 |
187 |
188 |
--------------------------------------------------------------------------------
/streamlit_cropper/frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "noEmit": true,
16 | "jsx": "react"
17 | },
18 | "include": ["src"]
19 | }
20 |
--------------------------------------------------------------------------------