@magnetman103/expo-pencilkit-ui
Version:
Forked from expo-pencilkit-ui
201 lines • 8.15 kB
JavaScript
import { requireNativeModule, requireNativeViewManager, } from "expo-modules-core";
import React, { useImperativeHandle, useRef } from "react";
import { Platform, findNodeHandle } from "react-native";
let ExpoPencilKit = null;
let ExpoPencilKitViewManager = null;
if (Platform.OS === "ios") {
ExpoPencilKit = requireNativeModule("ExpoPencilKitModule");
ExpoPencilKitViewManager = requireNativeViewManager("ExpoPencilKitModule");
}
/**
* PencilKit View Component
*/
export const PencilKitView = React.forwardRef((props, ref) => {
const viewRef = useRef(null);
useImperativeHandle(ref, () => ({
setupToolPicker: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.setupToolPicker(viewTag);
}
}
},
clearDrawing: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.clearDrawing(viewTag);
}
}
},
undo: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.undo(viewTag);
}
}
},
redo: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.redo(viewTag);
}
}
},
captureDrawing: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
return await ExpoPencilKit.captureDrawing(viewTag);
}
}
return "";
},
getCanvasDataAsBase64: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
return await ExpoPencilKit.getCanvasDataAsBase64(viewTag);
}
}
return "";
},
setCanvasDataFromBase64: async (base64String) => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
return await ExpoPencilKit.setCanvasDataFromBase64(viewTag, base64String);
}
}
return false;
},
canUndo: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
return await ExpoPencilKit.canUndo(viewTag);
}
}
return false;
},
canRedo: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
return await ExpoPencilKit.canRedo(viewTag);
}
}
return false;
},
setCanvasBackgroundColor: async (colorString) => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.setCanvasBackgroundColor(viewTag, colorString);
}
}
},
getCanvasBackgroundColor: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
return await ExpoPencilKit.getCanvasBackgroundColor(viewTag);
}
}
return "#FFFFFF";
},
showColorPicker: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.showColorPicker(viewTag);
}
}
},
setZoomScale: async (zoomScale) => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.setZoomScale(viewTag, zoomScale);
}
}
},
setContentOffset: async (contentOffset, animated) => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.setContentOffset(viewTag, contentOffset, animated);
}
}
},
// New drawing tool methods implementation
setDrawingTool: async (toolType, color, width, eraserType) => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.setDrawingTool(viewTag, toolType, color, width, eraserType);
}
}
},
getCurrentDrawingTool: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
return await ExpoPencilKit.getCurrentDrawingTool(viewTag);
}
}
return { toolType: "pen", color: "#000000", width: 10 };
},
setDrawingColor: async (color) => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.setDrawingColor(viewTag, color);
}
}
},
setDrawingWidth: async (width) => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.setDrawingWidth(viewTag, width);
}
}
},
setDrawingToolType: async (toolType) => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.setDrawingToolType(viewTag, toolType);
}
}
},
setEraserTool: async (eraserType) => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.setEraserTool(viewTag, eraserType);
}
}
},
setLassoTool: async () => {
if (Platform.OS === "ios" && ExpoPencilKit && viewRef.current) {
const viewTag = findNodeHandle(viewRef.current);
if (viewTag) {
await ExpoPencilKit.setLassoTool(viewTag);
}
}
},
}), []);
if (Platform.OS !== "ios" || !ExpoPencilKitViewManager) {
return null;
}
return React.createElement(ExpoPencilKitViewManager, {
...props,
ref: viewRef,
});
});
//# sourceMappingURL=index.js.map