@gedit/editor-2d 0.3.4 → 0.3.6

package/src/browser/playground/extend-edit/gradient-node.tsx

@@ -0,0 +1,232 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import {
+  asVec,
+  ColorRangSchemaKeys,
+  ColorSchema,
+  defaultGradientRange,
+  getLineWidth,
+} from '@gedit/canvas-draw';
+import PointEvent, { DifferProps } from './gradient-edit-layer-point-event';
+import { ExtendEntity } from '../entities';
+import { generateUuid } from '@gedit/utils';
+import { getGradientColorByPercent } from '@gedit/ui/lib/browser/form-items/utils';
+
+export interface GradientNodeProps {
+  data: ColorSchema;
+  width: number;
+  height: number;
+  extendEntity: ExtendEntity;
+  isRadialDom?: boolean;
+  onChange: (d: ColorSchema) => void;
+}
+
+export const GradientNode = (props: GradientNodeProps): JSX.Element => {
+  const { data, width, height, extendEntity, onChange, isRadialDom } = props;
+  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 },
+    follow?: { v: ColorRangSchemaKeys; ref: ColorRangSchemaKeys }
+  ) => {
+    const range = data.range || {};
+    if (typeof p.x === 'number' && typeof c.x === 'number' && keyP.x) {
+      const x = c.x + p.x / width;
+      range[keyP.x] = parseFloat(x.toFixed(4));
+    } else if (keyP.x) {
+      range[keyP.x] = lx;
+    }
+    if (typeof p.y === 'number' && typeof c.y === 'number' && keyP.y) {
+      const y = c.y + p.y / height;
+      range[keyP.y] = parseFloat(y.toFixed(4));
+    } else if (keyP.y) {
+      range[keyP.y] = ly;
+    }
+    if (follow) {
+      range[follow.v] = range[follow.ref];
+    }
+    data.range = range;
+    onChange(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': extendEntity.config.selectColorUUid
+            ? item.uuid === 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);
+          onChange(data);
+        }}
+        onMouseDown={() => {
+          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;
+        onChange(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(),
+        };
+        extendEntity.updateConfig({
+          selectColorUUid: color.uuid,
+        });
+        const newColors = [...colors];
+        newColors.splice(startColorArray.length, 0, color);
+        data.colors = newColors;
+        onChange(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' },
+            isRadialDom ? { v: 'ly2', ref: 'lx2' } : undefined
+          );
+        }}
+      />
+      <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 => {
+          // isDom 下, 判断角度，0, 180 只能移动 x, 90, 270 只能移动 y
+          if (isRadialDom) {
+            onRangeChange(p, { x: lx2 }, { x: 'lx2', y: 'ly2' });
+            return;
+          }
+          onRangeChange(p, { x: lx2, y: ly2 }, { x: 'lx2', y: 'ly2' });
+        }}
+      />
+      {colorPointToRender}
+    </>
+  );
+};

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

@@ -10,22 +10,15 @@ import {
   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';
+import { ColorSchema, colorToValue } from '@gedit/canvas-draw';
+import { deepClone } from '@gedit/utils';
+import { GradientNode } from './extend-edit/gradient-node';
+import { GradientConicNode } from './extend-edit/gradient-conic-node';
 
 export const EXTEND_EDIT_STATE = 'EXTEND_EDIT_STATE';
+
 /**
  * 扩展编辑
  */
@@ -100,302 +93,6 @@ export class ExtendEditLayer extends Layer {
     }
   }
 
-  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 <></>;
@@ -410,7 +107,9 @@ export class ExtendEditLayer extends Layer {
       top: bounds.y * scale,
       width,
       height,
-      transformOrigin: `${transform.origin.x * 100}% ${transform.origin.y * 100}%`,
+      transformOrigin: `${transform.origin.x * 100}% ${
+        transform.origin.y * 100
+      }%`,
       transform: rotate ? `rotate(${rotate}deg)` : undefined,
     };
     const data = this.getNodeValue();
@@ -419,11 +118,32 @@ export class ExtendEditLayer extends Layer {
     if (data && typeof data === 'object') {
       switch (data?.mode) {
         case 'lineGradient':
-        case 'radialGradient':
-          child = this.getLineAndRadialNode(data, { width, height });
+        case 'radialGradient': {
+          const isDom =
+            node.gameObject.rendererObject.tagName?.toLocaleUpperCase() ===
+            'DIV';
+          child = (
+            <GradientNode
+              data={data}
+              extendEntity={this.extendEntity}
+              onChange={this.updateNode.bind(this)}
+              width={width}
+              height={height}
+              isRadialDom={isDom}
+            />
+          );
           break;
+        }
         case 'conicGradient':
-          child = this.getConicNode(data, { width, height });
+          child = (
+            <GradientConicNode
+              data={data}
+              extendEntity={this.extendEntity}
+              onChange={this.updateNode.bind(this)}
+              width={width}
+              height={height}
+            />
+          );
           break;
       }
     }