@gedit/editor-2d 0.1.115 → 0.2.0

package/src/browser/playground/extend-edit-layer.tsx

@@ -0,0 +1,442 @@
+import * as React from 'react';
+import {
+  able,
+  EditorStateConfigEntity,
+  Entity,
+  entity,
+  Layer,
+  Selectable,
+  SelectState,
+  TransformData,
+} from '@gedit/playground';
+import { domUtils } from '@gedit/utils/lib/browser';
+import clsx from 'clsx';
+import { DocumentEntity, Editor2dEntity, ExtendEntity } from './entities';
+import { Editor2dDocument } from '../model';
+import {
+  asVec,
+  ColorRangSchemaKeys,
+  ColorSchema,
+  colorToValue,
+  defaultGradientRange,
+  getLineWidth,
+} from '@gedit/canvas-draw';
+import PointEvent, { DifferProps } from './extend-edit-layer-point-event';
+import { deepClone, generateUuid } from '@gedit/utils';
+import { getGradientColorByPercent } from '@gedit/ui/lib/browser/form-items/utils';
+
+export const EXTEND_EDIT_STATE = 'EXTEND_EDIT_STATE';
+/**
+ * 扩展编辑
+ */
+export class ExtendEditLayer extends Layer {
+  node = domUtils.createDivWithClass('gedit-extend-edit-layer');
+  @entity(EditorStateConfigEntity)
+  protected editorState: EditorStateConfigEntity;
+  @entity(DocumentEntity) documentEntity: DocumentEntity;
+  @entity(ExtendEntity) extendEntity: ExtendEntity;
+  @able(Selectable) protected selectableNodes: Entity[];
+  protected selectKey: string;
+  get document(): Editor2dDocument | undefined {
+    return this.documentEntity.config.document;
+  }
+  get isEnabled(): boolean {
+    return this.editorState.is(EXTEND_EDIT_STATE);
+  }
+  get selectedEntity(): Editor2dEntity | undefined {
+    const nodes = this.selectableNodes.filter(
+      node => node.getData<SelectState>(SelectState)?.selected
+    );
+    // 只考虑单选模式
+    return nodes.length === 1 ? (nodes[0] as Editor2dEntity) : undefined;
+  }
+  onReady(): void {
+    this.editorState.onStateChange(({ event }: any) => {
+      this.selectKey = event ? event.key : undefined;
+    });
+  }
+  getNodeValue(): ColorSchema | null {
+    const node = this.selectedEntity;
+    if (!node) {
+      return null;
+    }
+    const keys = this.selectKey.split('.');
+    let n: any = node.node;
+    keys.forEach(c => {
+      n = n[c];
+    });
+    return colorToValue(n);
+  }
+
+  cloneData(value: any): { start: string; end: string; data: any } | null {
+    const node = this.selectedEntity;
+    if (!node) {
+      return null;
+    }
+    const keys = this.selectKey.split('.');
+    const start = keys.splice(0, 1)[0];
+    const end = keys.splice(keys.length - 1, 1)[0];
+    const data = deepClone(node.node?.[start]);
+    let n: any = data;
+    keys.forEach(c => {
+      n = n[c];
+    });
+    n[end] = value;
+    return {
+      start,
+      end,
+      data,
+    };
+  }
+
+  updateNode(data: any): void {
+    const node = this.selectedEntity;
+    if (!node) {
+      return;
+    }
+    const { start, data: d } = this.cloneData(JSON.stringify(data)) || {};
+    if (start && data) {
+      this.document?.updateNode(node.node!, { [start]: d });
+    }
+  }
+
+  protected getConicNode(
+    data: ColorSchema,
+    { width, height }: { width: number; height: number }
+  ): JSX.Element {
+    const { range, colors } = data;
+    const {
+      angle = defaultGradientRange.angle,
+      cx = defaultGradientRange.cx,
+      cy = defaultGradientRange.cy,
+    } = range || {};
+    const r2 = Math.max(width, height);
+    const r = r2 / 2;
+    return (
+      <>
+        <div
+          className="gedit-extend-radial-box gedit-extend-circle-box"
+          style={{
+            width: r2,
+            height: r2,
+            left: -r,
+            top: -r,
+            transform: `translate(${cx * width}px, ${
+              cy * height
+            }px) rotate(${angle}deg)`,
+          }}
+        >
+          <PointEvent
+            className="gedit-extend-angle-wrapper"
+            pointClassName="gedit-extend-angle"
+            style={{ transform: `translate(${r2}px, ${r}px)` }}
+            onChange={d => {
+              const sx = r + r * Math.cos((angle * Math.PI) / 180);
+              const sy = r + r * Math.sin((angle * Math.PI) / 180);
+              const nx = sx + d.x;
+              const ny = sy + d.y;
+              const newVec = asVec({ x: r, y: r }, { x: nx, y: ny });
+              const newAngle = ((newVec.ang / Math.PI) * 180 + 360) % 360;
+              const newRange = data.range || {};
+              newRange.angle = parseFloat(newAngle.toFixed(4));
+              data.range = newRange;
+              this.updateNode(data);
+            }}
+          />
+          {colors.map((item, i) => {
+            const { offset, color, uuid } = item;
+            const x = r + r * Math.cos(offset * Math.PI * 2);
+            const y = r + r * Math.sin(offset * Math.PI * 2);
+            return (
+              <PointEvent
+                key={uuid}
+                className="gedit-extend-color-point"
+                pointClassName={clsx({
+                  'gedit-extend-color-point-active': this.extendEntity.config
+                    .selectColorUUid
+                    ? item.uuid === this.extendEntity.config.selectColorUUid
+                    : !i,
+                })}
+                pointStyle={{ backgroundColor: color }}
+                style={{
+                  transform: `translate(${x}px, ${y}px)`,
+                }}
+                onChange={d => {
+                  const currentVec = asVec({ x: r, y: r }, { x, y });
+                  const sx =
+                    r + r * Math.cos(currentVec.ang + (angle * Math.PI) / 180);
+                  const sy =
+                    r + r * Math.sin(currentVec.ang + (angle * Math.PI) / 180);
+                  const nx = sx + d.x;
+                  const ny = sy + d.y;
+                  const newVec = asVec({ x: r, y: r }, { x: nx, y: ny });
+                  const newAngle =
+                    (newVec.ang - (angle * Math.PI) / 180 + Math.PI * 2) %
+                    (Math.PI * 2);
+                  const newOffset = newAngle / (Math.PI * 2);
+                  item.offset = newOffset;
+                  data.colors = colors.sort((a, b) => a.offset - b.offset);
+                  this.updateNode(data);
+                }}
+                onMouseDown={() => {
+                  this.extendEntity.updateConfig({ selectColorUUid: uuid });
+                }}
+              />
+            );
+          })}
+        </div>
+        <PointEvent
+          className="gedit-extend-origin-wrapper"
+          style={{
+            transform: `translate(${cx * width}px, ${cy * height}px)`,
+          }}
+          pointClassName="gedit-extend-origin"
+          onChange={d => {
+            const newRange = data.range || {};
+            newRange.cx = parseFloat((cx + d.x / width).toFixed(4));
+            newRange.cy = parseFloat((cy + d.y / height).toFixed(4));
+            data.range = newRange;
+            this.updateNode(data);
+          }}
+        />
+      </>
+    );
+  }
+
+  protected getLineAndRadialNode(
+    data: ColorSchema,
+    { width, height }: { width: number; height: number }
+  ): JSX.Element {
+    const { range, colors } = data;
+    const {
+      lx = defaultGradientRange.lx,
+      ly = defaultGradientRange.ly,
+      lx2 = defaultGradientRange.lx2,
+      ly2 = defaultGradientRange.ly2,
+      w = defaultGradientRange.w,
+    } = range || {};
+    const onRangeChange = (
+      p: { x: number; y: number },
+      c: { x: number; y: number },
+      keyP: { x: ColorRangSchemaKeys; y: ColorRangSchemaKeys }
+    ) => {
+      const x = c.x + p.x / width;
+      const y = c.y + p.y / height;
+      const range = data.range || {};
+      range[keyP.x] = parseFloat(x.toFixed(4));
+      range[keyP.y] = parseFloat(y.toFixed(4));
+      data.range = range;
+      this.updateNode(data);
+    };
+    const centerX = lx * width;
+    const centerY = ly * height;
+    const toX = lx2 * width;
+    const toY = ly2 * height;
+    const a = asVec({ x: centerX, y: centerY }, { x: toX, y: toY });
+    const r = (a.ang / Math.PI) * 180;
+
+    const colorPointToRender = colors.map((item, i) => {
+      const { offset, color, uuid } = item;
+      const x = lx * width + offset * (lx2 - lx) * width;
+      const y = ly * height + offset * (ly2 - ly) * height;
+      return (
+        <PointEvent
+          key={uuid}
+          className="gedit-extend-color-point"
+          pointClassName={clsx({
+            'gedit-extend-color-point-active': this.extendEntity.config
+              .selectColorUUid
+              ? item.uuid === this.extendEntity.config.selectColorUUid
+              : !i,
+          })}
+          style={{
+            transform: `translate(${x}px, ${y}px)`,
+          }}
+          pointStyle={{ backgroundColor: color }}
+          onChange={(diff: DifferProps) => {
+            // Change 用的开始的 x,y, react state管理机制
+            const sx = x || 0;
+            const sy = y || 0;
+            let nx = sx + diff.x;
+            nx =
+              a.ang < Math.PI / 2 && a.ang > -Math.PI / 2 && nx < centerX
+                ? centerX
+                : nx;
+            nx =
+              (a.ang > Math.PI / 2 || a.ang < -Math.PI / 2) && nx > centerX
+                ? centerX
+                : nx;
+            let ny = sy + diff.y;
+            ny = a.ang < Math.PI && a.ang > 0 && ny < centerY ? centerY : ny;
+            ny = (a.ang > Math.PI || a.ang < 0) && ny > centerY ? centerY : ny;
+            const newLen = getLineWidth(
+              { x: centerX, y: centerY },
+              { x: nx, y: ny }
+            );
+            let newDiffer = newLen / a.len;
+            newDiffer = newDiffer < 0 ? 0 : newDiffer;
+            newDiffer = newDiffer > 1 ? 1 : newDiffer;
+            item.offset = newDiffer;
+            data.colors = colors.sort((a, b) => a.offset - b.offset);
+            this.updateNode(data);
+          }}
+          onMouseDown={() => {
+            this.extendEntity.updateConfig({ selectColorUUid: uuid });
+          }}
+        />
+      );
+    });
+    const radialGradientBox = data.mode === 'radialGradient' && (
+      <PointEvent
+        className="gedit-extend-radial-box"
+        style={{
+          width: w * a.len * 2,
+          height: a.len * 2,
+          left: -w * a.len,
+          top: -a.len,
+          transform: `translate(${centerX}px, ${centerY}px) rotate(${
+            r - 90
+          }deg)`,
+        }}
+        pointClassName="gedit-extend-radial-point"
+        onChange={p => {
+          const px = a.len * Math.cos(a.ang + Math.PI / 2) * w;
+          const py = a.len * Math.sin(a.ang + Math.PI / 2) * w;
+          let nx = px + p.x;
+          let ny = py + p.y;
+          nx = a.ang < Math.PI && a.ang > 0 && nx > 0 ? 0 : nx;
+          nx = (a.ang > Math.PI || a.ang < 0) && nx < 0 ? 0 : nx;
+          ny = a.ang < Math.PI / 2 && a.ang > -Math.PI / 2 && ny < 0 ? 0 : ny;
+          ny = (a.ang > Math.PI / 2 || a.ang < -Math.PI / 2) && ny > 0 ? 0 : ny;
+          const newVec = asVec({ x: nx, y: ny }, { x: 0, y: 0 });
+          const newW = newVec.len / a.len;
+          const range = data.range || {};
+          range.w = newW;
+          data.range = range;
+          this.updateNode(data);
+        }}
+      />
+    );
+    const lineBar = (
+      <div
+        className="gedit-extend-range-line"
+        style={{
+          width: a.len,
+          transform: `translate(${lx * width}px, ${
+            ly * height
+          }px) rotate(${r}deg)`,
+        }}
+        onClick={(e: React.MouseEvent) => {
+          const parentNode = (e.target as HTMLDivElement)
+            .parentNode as HTMLDivElement;
+          const rect = parentNode.getBoundingClientRect();
+          const x = e.clientX - rect.x;
+          const y = e.clientY - rect.y;
+          const newLen = getLineWidth({ x: centerX, y: centerY }, { x, y });
+          const percent = newLen / a.len;
+          const startColorArray = colors.filter(c => c.offset < percent);
+          const startColor = startColorArray[startColorArray.length - 1];
+          const endColor = colors.find(c => c.offset > percent)!;
+          let newColor;
+          if (endColor && startColor) {
+            const newPercent =
+              (1 / (endColor?.offset - startColor.offset)) *
+              (percent - startColor.offset);
+            newColor = getGradientColorByPercent(
+              newPercent,
+              startColor.color,
+              endColor.color
+            );
+          } else {
+            newColor = startColor ? startColor.color : endColor.color;
+          }
+          const color = {
+            offset: percent,
+            color: newColor,
+            uuid: generateUuid(),
+          };
+          this.extendEntity.updateConfig({
+            selectColorUUid: color.uuid,
+          });
+          const newColors = [...colors];
+          newColors.splice(startColorArray.length, 0, color);
+          data.colors = newColors;
+          this.updateNode(data);
+        }}
+      />
+    );
+    return (
+      <>
+        {radialGradientBox}
+        {lineBar}
+        <PointEvent
+          className="gedit-extend-range-point gedit-extend-center-point"
+          style={{
+            transform: `translate(${lx * width}px, ${ly * height}px) rotate(${
+              r - 90
+            }deg)` /* left: `${lx * 100}%`, top: ` ${ly * 100}%` */,
+          }}
+          onChange={p => {
+            onRangeChange(p, { x: lx, y: ly }, { x: 'lx', y: 'ly' });
+          }}
+        />
+        <PointEvent
+          className="gedit-extend-range-point gedit-extend-radius-point"
+          style={{
+            transform: `translate(${lx2 * width}px, ${ly2 * height}px) rotate(${
+              r - 90
+            }deg)`,
+          }}
+          onChange={p => {
+            onRangeChange(p, { x: lx2, y: ly2 }, { x: 'lx2', y: 'ly2' });
+          }}
+        />
+        {colorPointToRender}
+      </>
+    );
+  }
+
+  draw(): JSX.Element {
+    const node = this.selectedEntity;
+    if (!this.document || !node || !this.isEnabled) return <></>;
+    const transform = node.getData<TransformData>(TransformData)!;
+    const bounds = transform.boundsWithoutRotation;
+    const rotate = transform.worldDegree;
+    const scale = this.config.finalScale; // 画布缩放比例
+    const width = bounds.width * scale;
+    const height = bounds.height * scale;
+    const style = {
+      left: bounds.x * scale,
+      top: bounds.y * scale,
+      width,
+      height,
+      transform: rotate ? `rotate(${rotate}deg)` : undefined,
+    };
+    const data = this.getNodeValue();
+
+    let child = null;
+    if (data && typeof data === 'object') {
+      switch (data?.mode) {
+        case 'lineGradient':
+        case 'radialGradient':
+          child = this.getLineAndRadialNode(data, { width, height });
+          break;
+        case 'conicGradient':
+          child = this.getConicNode(data, { width, height });
+          break;
+      }
+    }
+
+    return (
+      <div
+        className="gedit-extend-edit-item"
+        style={style}
+        onMouseDown={e => {
+          e.stopPropagation();
+        }}
+      >
+        {child}
+      </div>
+    );
+  }
+}

package/src/browser/playground/index.ts

@@ -6,3 +6,4 @@ export * from './canvas-draw';
 
 export { SelectorExtendType } from './selector-extend-icons';
 export * from './selector-extend-renderer';
+export * from './extend-edit-layer';

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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,50 @@
+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>
+  );
+};