dai-shi / katachidraw

SVG based drawing tool and react-native component

Katachidraw

SVG based drawing tool and react-native component

Katachidraw means like "Let's make shapes" in Japanese.

What is this

There are two aspects: User's perspective and developer's perspective

What is this for users

This is a drawing tool that can produce an SVG file. It's primarily for mobile, but works for desktop too. One of the goals is to draw freely and create smoother shapes.

Visit https://katachidraw.vercel.app/ in your browser.

Tested with:

• iPhone Mobile Safari
• MacOS Google Chrome

What is this for developers

This is a reusable drawing library that can be embeded in your React app. It's built with following libraries:

• Expo React Native
• React Native SVG
• Jotai

It's published as npm package: https://www.npmjs.com/package/katachidraw

Community

We have a channel #katachidraw to discuss both about the usage and the development in our Discord server.

Contribution

Feel free to use the library under the MIT license. If you find bugs, please file issues. Pull requests are also welcome and there are some issues filed for a start.

katachidraw's Issues

chore: refactor with jotai/xstate

naive atom state management is so messy now.

bug: Does not change menu item and slider click on android

• In Toolbar.tsx change OnPress for OnPressIn resolved tested on 2 different androids and browser

#25

idea: svg path manipulation

cf. excalidraw/excalidraw#1905

feat: draw shapes

in advance to #9, we want rather simple shape drawing. lines, circles, rectangles.

bug: can't import images from camera roll (Mobile Safari)

Nothing happens... (promise is not resolved nor rejected.)
Not supported with https://github.com/GoogleChromeLabs/browser-fs-access ?

"Browser" works but how can we store images in folder?

React Native (Expo) - Mobile app Example

Is there an example like https://katachidraw.vercel.app/ that runs as a mobile app?
If yes, should the link to it be added in readme?

If not, do you want me to make one and where should I put it?

feat: improve history feature

• make the circle draggable
• would be nice to add a play button to auto play history
• maybe we want a commit button not to remove history accidentally?
• [performance] might be better to cache atom for shape object (in weak map), but that doesn't improve anything?

idea: animation

svg animation or js animation

cf. https://github.com/dai-shi/excalidraw-animate

[web] image shape is broken (size zero) with react-native-web v0.15

https://github.com/necolas/react-native-web/releases/tag/0.15.0

What is breaking???

idea: text support

character recognition?

feat: undo & redo capabilities

feat: rotation support for images

rotation in svg is rather easy.
what would be hard is the UI to control (that works desktop web, mobile web and RN).

idea: image matching from gallery

something like https://quickdraw.withgoogle.com

[UI] Selecting shapes in RN is not easy

while #28 isn't a technical issue, selecting shapes with fingers is not easy. maybe we should add a drag selector mode for RN. I wonder how it can be done without introducing a mode...

feat: better color picker

• alpha support
• fewer presets?
• full color with HSL

Idea: Grouped strokes.

When marks are made in rapid sequence, treat them as a group. For example, if I write an H with three strokes, I would probably want to edit / position those three together as a group.

I’ve been working this out for my Telestrator app, where related marks should fade out together. (Or else the beginning of a word will start fading out as you’re writing the end of the word). In that case, I’ve found that waiting about one second after a stroke is enough to “complete” a group of related marks.

feat: make stroke width customizable

Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager

I'm on expo 44 and everything is working fine on Expo Go.
But when I hot reload updates after expo publish, the android app crashes with the error bellow

code:

import { useSetAtom } from "jotai";
import { Canvas } from "katachidraw/src/library";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { Dimensions, Pressable } from "react-native";
import { captureRef } from "react-native-view-shot";

import { sketchUriAtom } from "@/atoms";
import Icon from "@/components/Icon";
import { useThemeColor, View } from "@/components/Themed";
import { RootStackScreenProps } from "@/types";

const width = Dimensions.get("window").width;
const height = Dimensions.get("window").height;

export default function SketchScreen({ route, navigation }: RootStackScreenProps<"About">) {
  const [isCapturing, setIsCapturing] = useState(false);
  const viewRef = useRef(null);

  const setSketchUri = useSetAtom(sketchUriAtom);
  const tintColor = useThemeColor({}, "tint");

  const onPress = useCallback(async () => {
    setIsCapturing(true);
    await new Promise((end) => setTimeout(end, 200));
    const result = await captureRef(viewRef, {
      result: "tmpfile",
      height,
      width,
      quality: 1,
      format: "png",
    });
    setSketchUri(result);
    setIsCapturing(false);
    navigation.goBack();
  }, [viewRef]);

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Pressable onPress={onPress}>
          <Icon name="check" color={tintColor} />
        </Pressable>
      ),
    });
  }, []);

  return (
    <View ref={viewRef} collapsable={false}>
      <Canvas
        width={width}
        height={height}
        sliderPosition={isCapturing ? [0, 0] : undefined}
        toolbarPosition={isCapturing ? [-100, 0] : undefined}
      />
    </View>
  );
}

versions:

"katachidraw": "^0.4.0",
"react-native": "^0.64.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-native-svg": "12.1.1",
"@xstate/inspect": "^0.6.5"

feat: two finger gesture for pan & zoom (in pen mode)

• mobile safari
• mobile chrome
• expo react-native

feat: Add Shapes tool (ellipse/circle, rectangle/square, triangle, star), Line tool, Arrow tool; Add text tool with font and color selector

In comparison to http://tbolis.github.io/showcase/react-sketch/ this has a lot of potential relying on SVG drawing.

It is missing the Shapes tools which would be useful to add.

It is also missing Text tools which would allow the user to easily create text blocks with different font stylings.

Finally, the ability to rotate and scale selected items would be awesome.

If you add these, it would be greatly appreciated and a much more powerful tool.

https://editor.method.ac/ has some great shapes to look at.

fix: make shapes more pressable in RN

currently, react-native-svg doesn't seem to handle clicking of paths very well.
we can't use rectangle like software-mansion/react-native-svg#81.
increasing storokeWidth doesn't seem to help (which does on web).

react and react-dom version conflicts

When using alongside expo compatible dependencies, the react and react-dom version is pinned to ^17.0.1
This library is pinned to 17.0.2, which causes version mismatch and crashes expo driven app.

Suggested solution:
move react and react-dom to peerDepencies and devDependencies

feat: pressure sensitive lines

Native solution:

• https://docs.expo.io/versions/latest/react-native/pressevent/#force---ios

Emulation with mouse:

• https://twitter.com/steveruizok/status/1360595571610947590 by @steveruizok
• http://paperjs.org/tutorials/interaction/working-with-mouse-vectors/

feat: shape resizing

as we don't change stroke width, we are likely that we want to resize images.

feat: improve smooth algorithm

• support sharp edge
• configurable roughness / smoothness