Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Base64Png Editor Initial
import * as React from "react";
import { useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
import { EditorApi, KogitoEditorEnvelopeContextType } from "@kogito-tooling/editor/dist/api";
import { DEFAULT_RECT } from "@kogito-tooling/guided-tour/dist/api";
import { Base64PngEdit, Base64PngStateControl } from "./Base64PngStateControl";
import "./styles.scss";
interface Props {
envelopeContext: KogitoEditorEnvelopeContextType;
}
export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwardedRef) => {
const [originalContent, setOriginalContent] = useState("");
const [editorContent, setEditorContent] = useState("");
const imageRef = useRef<HTMLImageElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
props.envelopeContext.channelApi.notifications.receive_ready();
}, []);
const getContent = useCallback(() => {
return editorContent;
}, [editorContent]);
const getPreview = useCallback(() => {
const width = imageRef.current!.width;
const height = imageRef.current!.height;
return `
<svg version="1.1" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="${width}" height="${height}" xlink:href="data:image/png;base64,${editorContent}" />
</svg>`;
}, [editorContent]);
const setContent = useCallback((path: string, content: string) => {
setOriginalContent(content);
}, []);
useImperativeHandle(forwardedRef, () => {
return {
getContent: () => Promise.resolve(getContent()),
getPreview: () => Promise.resolve(getPreview()),
setContent: (path: string, content: string) => Promise.resolve(setContent(path, content)),
undo: () => Promise.resolve(),
redo: () => Promise.resolve(),
getElementPosition: (selector: string) => Promise.resolve(DEFAULT_RECT),
};
});
useEffect(() => {
const ctx = canvasRef.current?.getContext("2d")!;
canvasRef.current!.width = 0;
canvasRef.current!.height = 0;
imageRef.current!.onload = () => {
canvasRef.current!.width = imageRef.current!.width;
canvasRef.current!.height = imageRef.current!.height;
ctx.drawImage(imageRef.current!, 0, 0);
setEditorContent(canvasRef.current!.toDataURL().split(",")[1]);
};
return () => {
imageRef.current!.onload = null;
};
}, []);
return (
<div className={"base64png-editor--viewport"}>
<img
ref={imageRef}
className={"base64png-editor--image"}
src={`data:image/png;base64,${originalContent}`}
alt={"Original"}
/>
<canvas ref={canvasRef} className={"base64png-editor--canvas"} />
</div>
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment