@gedit/editor-2d 0.2.46 → 0.2.47

package/src/browser/playground/path-edit-layer-move-point.tsx

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { asVec, getLineWidth, PathChild } from '@gedit/canvas-draw';
-import { PositionSchema } from '@gedit/playground';
-
-export interface PointSchema extends PositionSchema {
-  id?: string;
-}
-export const PointDefault = ({
-  getPosFromMouseEvent,
-  paths,
-  scale,
-}: {
-  getPosFromMouseEvent: (
-    event: {
-      clientX: number;
-      clientY: number;
-    },
-    addScale?: boolean
-  ) => PointSchema;
-  paths: PathChild[];
-  scale: number;
-}) => {
-  const domRef = React.useRef<HTMLDivElement>(null);
-  const lineRef = React.useRef<HTMLDivElement>(null);
-  const pathsRef = React.useRef(paths);
-  const onMove = (e: MouseEvent) => {
-    const dom = domRef.current;
-    const line = lineRef.current;
-    if (!dom || !line) {
-      return;
-    }
-    const pos = getPosFromMouseEvent(e);
-    dom.style.transform = `translate(${pos.x}px, ${pos.y}px) scale(${
-      1 / scale
-    })`;
-    const endPoint = pathsRef.current[pathsRef.current.length - 1];
-    if (endPoint) {
-      const width = getLineWidth(endPoint, pos);
-      const { ang } = asVec(endPoint, pos);
-      line.style.width = `${width}px`;
-      line.style.height = `${1 / scale}px`;
-      line.style.transform = `translate(${endPoint.x}px, ${
-        endPoint.y
-      }px) rotate(${(ang / Math.PI) * 180}deg)`;
-    }
-  };
-  React.useEffect(() => {
-    pathsRef.current = paths;
-  }, [paths]);
-  React.useEffect(() => {
-    const dom = domRef.current;
-    const line = lineRef.current;
-    if (dom && line) {
-      window.addEventListener('mousemove', onMove);
-    }
-    return () => {
-      if (dom && line) {
-        window.removeEventListener('mousemove', onMove);
-      }
-    };
-  }, []);
-  return (
-    <>
-      <div className="gedit-path-edit-layer-line" ref={lineRef} />
-      <div
-        className="gedit-path-edit-layer-point gedit-path-edit-layer-point-move gedit-path-edit-layer-pen"
-        ref={domRef}
-      />
-    </>
-  );
-};

package/src/browser/playground/path-edit-layer-svg-path.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { getPointsToPaths, PathChild } from '@gedit/canvas-draw';
-
-export interface PathSVGProps {
-  width: number;
-  height: number;
-  scale: number;
-  paths: PathChild[];
-  pathProps?: any;
-}
-
-export const SvgPath = ({
-  width,
-  height,
-  paths,
-  scale,
-  pathProps,
-}: PathSVGProps) => {
-  // const bezier = getXYToPath(paths);
-  const pathsStringArray = getPointsToPaths(paths);
-  console.log(getPointsToPaths(paths));
-  return (
-    <svg
-      width={width || 300}
-      height={height || 300}
-      className="gedit-path-edit-layer-svg"
-    >
-      {pathsStringArray.map((p, i) => (
-        <path
-          className="gedit-path-edit-layer-path"
-          key={i.toString()}
-          {...pathProps}
-          strokeLinecap="round"
-          strokeWidth={1.5 / scale}
-          d={p}
-          onMouseDown={e => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          onDoubleClick={e => {
-            e.preventDefault();
-            e.stopPropagation();
-            // this.onPathDoubleClick(i, p);
-            console.log(3123);
-          }}
-        />
-      ))}
-    </svg>
-  );
-};