diff --git a/packages/board/examples/test/wheel.html b/packages/board/examples/test/wheel.html
index fc26fa1..2b179ab 100644
--- a/packages/board/examples/test/wheel.html
+++ b/packages/board/examples/test/wheel.html
@@ -30,7 +30,6 @@
contextWidth: 1000,
contextHeight: 900,
devicePixelRatio: 4,
- canScroll: true,
}
const board = new Board(mount, opts);
board.on('wheelX', (deltaX) => {
diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts
index d6cb6e8..f0d2764 100644
--- a/packages/board/src/index.ts
+++ b/packages/board/src/index.ts
@@ -25,7 +25,6 @@ type Options = {
contextWidth: number;
contextHeight: number;
devicePixelRatio?: number;
- canScroll?: boolean;
}
type PrivateOptions = Options & {
@@ -132,6 +131,10 @@ class Board {
this[_watcher].off(name, callback);
}
+ getScreenInfo() {
+ return this[_calcScreen]();
+ }
+
private [_render]() {
if (this[_hasRendered] === true) {
return;
diff --git a/packages/core/examples/test/scroll.html b/packages/core/examples/test/scroll.html
new file mode 100644
index 0000000..e117b98
--- /dev/null
+++ b/packages/core/examples/test/scroll.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 2db5fb5..ff91012 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -69,16 +69,22 @@ class Core {
this[_board] = new Board(mount, this[_opts]);
this[_renderer] = new Renderer(this[_board]);
this[_element] = new Element(this[_board].getContext());
- this[_helper] = new Helper(this[_board].getContext(), this[_config]);
+ this[_helper] = new Helper(this[_board], this[_config]);
this._initEvent();
this[_hasInited] = true;
}
draw(): void {
+ const transfrom = this[_board].getTransform();
this[_helper].updateConfig(this[_data], {
+ width: this[_opts].width,
+ height: this[_opts].height,
+ canScroll: this[_opts].canScroll === true,
selectedUUID: this[_selectedUUID],
devicePixelRatio: this[_opts].devicePixelRatio,
- scale: this[_board].getTransform().scale,
+ scale: transfrom.scale,
+ scrollX: transfrom.scrollX,
+ scrollY: transfrom.scrollY,
});
this[_renderer].render(this[_data], this[_helper].getConfig());
}
diff --git a/packages/core/src/lib/draw/index.ts b/packages/core/src/lib/draw/index.ts
index d9d33b5..1f25075 100644
--- a/packages/core/src/lib/draw/index.ts
+++ b/packages/core/src/lib/draw/index.ts
@@ -12,7 +12,10 @@ import { drawRect } from './rect';
import { drawImage } from './image';
import { drawSVG } from './svg';
import { drawText } from './text';
-import { drawElementWrapper } from './wrapper';
+import {
+ drawElementWrapper,
+ drawDisplayContextScrollWrapper,
+} from './wrapper';
const { isColorStr } = util.color;
@@ -55,5 +58,6 @@ export function drawContext(
}
}
drawElementWrapper(ctx, helperConfig);
+ drawDisplayContextScrollWrapper(ctx, helperConfig)
}
diff --git a/packages/core/src/lib/draw/wrapper.ts b/packages/core/src/lib/draw/wrapper.ts
index 0c67b4b..02dfed2 100644
--- a/packages/core/src/lib/draw/wrapper.ts
+++ b/packages/core/src/lib/draw/wrapper.ts
@@ -55,3 +55,11 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) {
});
}
+
+
+export function drawDisplayContextScrollWrapper(ctx: TypeContext, config: TypeHelperConfig) {
+ console.log('config?.displayContextScrollWrapper = ', config?.displayContextScrollWrapper);
+ if (!config?.displayContextScrollWrapper) {
+ return;
+ }
+}
\ No newline at end of file
diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts
index f53b449..1d5ebea 100644
--- a/packages/core/src/lib/helper.ts
+++ b/packages/core/src/lib/helper.ts
@@ -10,17 +10,23 @@ import {
TypePoint,
TypeConfigStrict,
} from '@idraw/types';
+import Board from '@idraw/board';
+import util from '@idraw/util';
import { parseAngleToRadian, calcElementCenter } from './calculate';
import { rotateContext, } from './transform';
+const { deepClone } = util.data;
+
export class Helper implements TypeHelper {
private _helperConfig: TypeHelperConfig;
private _coreConfig: TypeConfigStrict;
private _ctx: TypeContext;
+ private _board: Board;
- constructor(ctx: TypeContext, config: TypeConfigStrict) {
- this._ctx = ctx;
+ constructor(board: Board, config: TypeConfigStrict) {
+ this._board = board;
+ this._ctx = this._board.getContext();
this._coreConfig = config;
this._helperConfig = {
elementIndexMap: {}
@@ -33,11 +39,11 @@ export class Helper implements TypeHelper {
): void {
this._updateElementIndex(data);
this._updateSelectedElementWrapper(data, opts);
+ this._updateDisplayContextScrollWrapper(data, opts);
}
getConfig(): TypeHelperConfig {
- // TODO
- return JSON.parse(JSON.stringify(this._helperConfig));
+ return deepClone(this._helperConfig);
}
getElementIndexByUUID(uuid: string): number | null {
@@ -159,4 +165,53 @@ export class Helper implements TypeHelper {
this._helperConfig.selectedElementWrapper = wrapper;
}
+
+ private _updateDisplayContextScrollWrapper(data: TypeData, opts: TypeHelperUpdateOpts) {
+ if (opts.canScroll !== true) {
+ return;
+ }
+ const { width, height } = opts;
+ const sliderMinSize = 50;
+ const lineSize = 16;
+ const { position } = this._board.getScreenInfo();
+ let xSize = 0;
+ let ySize = 0;
+ if (position.left <= 0 || position.right <= 0) {
+ xSize = Math.max(
+ sliderMinSize, width - (
+ Math.abs(position.left < 0 ? position.left : 0) + Math.abs(position.right < 0 ? position.right : 0)
+ )
+ );
+ if (xSize >= width) xSize = 0;
+ }
+ if (position.top <= 0 || position.bottom <= 0) {
+ ySize = Math.max(
+ sliderMinSize, height - (
+ Math.abs(position.top < 0 ? position.top : 0) + Math.abs(position.bottom < 0 ? position.bottom : 0)
+ )
+ );
+ if (ySize >= height) ySize = 0;
+ }
+
+ let translateX = 0;
+ if (xSize > 0) {
+ translateX = width * Math.abs(position.left) / (Math.abs(position.left) + Math.abs(position.right));
+ translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize);
+ }
+
+ let translateY = 0;
+ if (ySize > 0) {
+ translateY = height * Math.abs(position.top) / (Math.abs(position.top) + Math.abs(position.bottom));
+ translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize);
+ }
+ this._helperConfig.displayContextScrollWrapper = {
+ lineSize,
+ xSize,
+ ySize,
+ translateY,
+ translateX,
+ color: '#e0e0e0'
+ };
+
+ }
}
\ No newline at end of file
diff --git a/packages/types/src/lib/core.ts b/packages/types/src/lib/core.ts
index 47660f5..1ff3046 100644
--- a/packages/types/src/lib/core.ts
+++ b/packages/types/src/lib/core.ts
@@ -4,6 +4,7 @@ type TypeCoreOptions = {
devicePixelRatio: number;
contextWidth: number;
contextHeight: number;
+ canScroll?: boolean;
}
export {
diff --git a/packages/types/src/lib/helper.ts b/packages/types/src/lib/helper.ts
index c02d33d..06ab97b 100644
--- a/packages/types/src/lib/helper.ts
+++ b/packages/types/src/lib/helper.ts
@@ -28,13 +28,26 @@ type TypeHelperConfig = {
color: string;
radian?: number;
translate?: TypePoint;
+ },
+ displayContextScrollWrapper?: {
+ lineSize: number,
+ xSize: number,
+ ySize: number,
+ translateY: number,
+ translateX: number,
+ color: string,
}
}
type TypeHelperUpdateOpts = {
+ width: number;
+ height: number;
selectedUUID?: string | null;
devicePixelRatio: number;
scale: number;
+ canScroll: boolean;
+ scrollX: number;
+ scrollY: number;
}
interface TypeHelper {