Last active
October 5, 2020 18:33
-
-
Save ljmotta/8631d727bd7e1cc93c9c252be2a5cccf to your computer and use it in GitHub Desktop.
WebApp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<style> | |
html, | |
body, | |
div#envelope-app { | |
margin: 0; | |
border: 0; | |
padding: 0; | |
overflow: hidden; | |
height: 100%; | |
width: 100%; | |
} | |
</style> | |
<title></title> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
</head> | |
<body> | |
<div id="envelope-app"></div> | |
<script src="base64-editor.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { init } from "@kogito-tooling/editor/dist/envelope"; | |
import { ChannelType, getOperatingSystem } from "@kogito-tooling/channel-common-api"; | |
import { CompositeEditorFactory } from "@kogito-tooling/editor/dist/envelope"; | |
import { EnvelopeBusMessage } from "@kogito-tooling/envelope-bus/dist/api"; | |
import { Base64PngEditorFactory } from "base64png-editor"; | |
init({ | |
container: document.getElementById("envelope-app")!, | |
bus: { | |
postMessage<D, Type>(message: EnvelopeBusMessage<D, Type>, targetOrigin?: string, _?: any) { | |
window.parent.postMessage(message, "*", _); | |
} | |
}, | |
editorFactory: new CompositeEditorFactory([new Base64PngEditorFactory()]), | |
editorContext: { channel: ChannelType.EMBEDDED, operatingSystem: getOperatingSystem() } | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { EditorEnvelopeLocator } from "@kogito-tooling/editor/dist/api"; | |
export function Base64PngPage() { | |
... | |
const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => { | |
return { | |
targetOrigin: window.location.origin, | |
mapping: new Map([ | |
[ | |
"base64png", | |
{ | |
resourcesPathPrefix: `envelope/`, | |
envelopePath: `envelope/base64-editor.html`, | |
}, | |
], | |
]), | |
}; | |
}, []); | |
... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { File } from "@kogito-tooling/editor/dist/embedded"; | |
export function Base64PngPage() { | |
const [file, setFile] = useState<File>({ | |
fileName: "new-file", | |
fileExtension: "base64png", | |
getFileContents: () => Promise.resolve(""), | |
isReadOnly: false, | |
}); | |
... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { EditorEnvelopeLocator } from "@kogito-tooling/editor/dist/embedded"; | |
export function Base64PngPage() { | |
... | |
return ( | |
<Page> | |
<div className={"webapp--page-main-div"}> | |
<Base64PngGallery setFile={setFile} /> | |
<EmbeddedEditor | |
file={file} | |
editorEnvelopeLocator={editorEnvelopeLocator} | |
channelType={ChannelType.EMBEDDED} | |
locale={"en"} | |
/> | |
</div> | |
</Page> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => { | |
return { | |
targetOrigin: window.location.origin, | |
mapping: new Map([ | |
[ | |
"bpmn", | |
{ | |
resourcesPathPrefix: "https://kiegroup.github.io/kogito-online/editors/0.6.1/bpmn", | |
envelopePath: "https://kiegroup.github.io/kogito-online/editors/0.6.1/envelope", | |
}, | |
], | |
[ | |
"bpmn2", | |
{ | |
resourcesPathPrefix: "https://kiegroup.github.io/kogito-online/editors/0.6.1/bpmn2", | |
envelopePath: "https://kiegroup.github.io/kogito-online/editors/0.6.1/envelope", | |
}, | |
], | |
]), | |
}; | |
}, []); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { EditorEnvelopeLocator } from "@kogito-tooling/editor/dist/api"; | |
export function DmnPage() { | |
const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => { | |
return { | |
targetOrigin: window.location.origin, | |
mapping: new Map([ | |
[ | |
"dmn", | |
{ | |
resourcesPathPrefix: "../gwt-editors/dmn/", | |
envelopePath: "envelope/gwt-editors.html", | |
}, | |
], | |
]), | |
}; | |
}, []); | |
... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { File } from "@kogito-tooling/editor/dist/embedded"; | |
export function DmnPage() { | |
const [file, setFile] = useState<File>({ | |
fileName: "new-file", | |
fileExtension: "dmn", | |
getFileContents: () => Promise.resolve(""), | |
isReadOnly: false, | |
}); | |
... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEditorRef } from "../../__copied-from-kogito-tooling/Hooks"; | |
import { EmbeddedEditor } from "../../__copied-from-kogito-tooling/EmbeddedEditor"; | |
export function DmnPage() { | |
... | |
const { editor, ref } = useEditorRef(); | |
return ( | |
<Page> | |
<div className={"webapp--page-main-div"}> | |
<Sidebar | |
editor={editor} | |
editorEnvelopeLocator={editorEnvelopeLocator} | |
file={file} | |
setFile={setFile} | |
fileExtension={"dmn"} | |
accept={".dmn"} | |
/> | |
<EmbeddedEditor | |
ref={ref} | |
file={file} | |
editorEnvelopeLocator={editorEnvelopeLocator} | |
channelType={ChannelType.EMBEDDED} | |
locale={"en"} | |
/> | |
</div> | |
</Page> | |
); | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
editorFactory: new CompositeEditorFactory([new GwtEditorWrapperFactory()]) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
pingPongViewFactory: new PingPongReactImplFactory() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { PingPongChannelApi } from "ping-pong-view/dist/api"; | |
let pings = 0; | |
let pongs = 0; | |
export function PingPongViewsPage() { | |
const [lastPing, setLastPing] = useState<string>("-"); | |
const [lastPong, setLastPong] = useState<string>("-"); | |
const api: PingPongChannelApi = useMemo(() => { | |
return { | |
pingPongView__ping(source: string) { | |
pings++; | |
setLastPing(source); | |
}, | |
pingPongView__pong(source: string, replyingTo: string) { | |
pongs++; | |
setLastPong(source); | |
}, | |
}; | |
}, [pings, pongs]); | |
... | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<EmbeddedPingPong | |
{...api} | |
name={"React 1"} | |
targetOrigin={window.location.origin} | |
mapping={{ title: "Ping-Pong Page in React", envelopePath: "envelope/ping-pong-view-react-impl.html" }} | |
/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { init } from "todo-list-view/dist/envelope"; | |
import { EnvelopeBusMessage } from "@kogito-tooling/envelope-bus/dist/api"; | |
init({ | |
container: document.getElementById("envelope-app")!, | |
bus: { | |
postMessage<D, Type>(message: EnvelopeBusMessage<D, Type>, targetOrigin?: string, transfer?: any) { | |
window.parent.postMessage(message, "*", transfer); | |
}, | |
}, | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function TodoListViewPage() { | |
const todoListViewRef = useRef<TodoListApi>(null); | |
return ( | |
<Page> | |
<div className={"webapp--page-main-div"}> | |
<ActionsSidebar todoListViewRef={todoListViewRef} /> | |
<PageSection> | |
<EmbeddedTodoList | |
ref={todoListViewRef} | |
targetOrigin={window.location.origin} | |
envelopePath={"envelope/todo-list-view.html"} | |
todoList__itemRemoved={(item) => window.alert(`Item '${item}' removed successfully!`)} | |
/> | |
</PageSection> | |
</div> | |
</Page> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment