From 4ae0a836fbdaaf151f83e7565e1e7fb5b8871c75 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Thu, 16 Jul 2020 14:48:14 +0800 Subject: [PATCH 1/4] fix(scene): update container size --- packages/core/src/services/scene/SceneService.ts | 10 +++++++--- stories/Layers/components/AnimatePoint.tsx | 3 ++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 2f6ee4c7df..adafc538e6 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -285,9 +285,11 @@ export default class Scene extends EventEmitter implements ISceneService { let w = window.innerWidth; let h = window.innerHeight; if (this.$container !== document.body) { - const bounds = this.$container.getBoundingClientRect(); - w = bounds.right - bounds.left; - h = bounds.bottom - bounds.top; + // const bounds = this.$container.getBoundingClientRect(); + // w = bounds.right - bounds.left; + // h = bounds.bottom - bounds.top; + w = this.$container.clientWidth || 400; + h = this.$container.clientHeight || 300; } const canvas = this.$container?.getElementsByTagName('canvas')[0]; // this.$container. @@ -303,6 +305,8 @@ export default class Scene extends EventEmitter implements ISceneService { if (canvas) { canvas.width = w * pixelRatio; canvas.height = h * pixelRatio; + canvas.style.width = `${w}px`; + canvas.style.height = `${h}px`; } // repaint layers this.render(); diff --git a/stories/Layers/components/AnimatePoint.tsx b/stories/Layers/components/AnimatePoint.tsx index b68a68d83d..286315de26 100644 --- a/stories/Layers/components/AnimatePoint.tsx +++ b/stories/Layers/components/AnimatePoint.tsx @@ -14,7 +14,7 @@ export default class AnimatePoint extends React.Component { public async componentDidMount() { const scene = new Scene({ id: document.getElementById('map') as HTMLDivElement, - map: new GaodeMap({ + map: new Mapbox({ pitch: 0, style: 'dark', center: [112, 23.69], @@ -61,6 +61,7 @@ export default class AnimatePoint extends React.Component { left: 0, right: 0, bottom: 0, + transform: 'scale(1.5)', }} /> ); From cfc10cf9b2ee76b42ae39c14b43e1529bc619cb0 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 20 Jul 2020 11:35:40 +0800 Subject: [PATCH 2/4] chore: update version --- docs/api/scene.en.md | 5 ++++- docs/api/scene.zh.md | 5 ++++- packages/l7/src/version.ts | 2 +- stories/Layers/components/polygon.tsx | 4 ++-- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/api/scene.en.md b/docs/api/scene.en.md index 9202e30952..15bdd418f1 100644 --- a/docs/api/scene.en.md +++ b/docs/api/scene.en.md @@ -320,7 +320,10 @@ scene.setPitch(pitch); - `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]] ```javascript -scene.fitBounds([[112, 32], [114, 35]]); +scene.fitBounds([ + [112, 32], + [114, 35], +]); ``` ### getContainer diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md index d3b4955e49..751ede9225 100644 --- a/docs/api/scene.zh.md +++ b/docs/api/scene.zh.md @@ -354,7 +354,10 @@ scene.setPitch(pitch); - `extent` { array} 经纬度范围 [[minlng,minlat],[maxlng,maxlat]] ```javascript -scene.fitBounds([[112, 32], [114, 35]]); +scene.fitBounds([ + [112, 32], + [114, 35], +]); ``` ### removeLayer diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index 7e0e17310c..082c98c34c 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.2.22'; +const version = '2.2.23'; export { version }; diff --git a/stories/Layers/components/polygon.tsx b/stories/Layers/components/polygon.tsx index 9b6301401a..b098683fa9 100644 --- a/stories/Layers/components/polygon.tsx +++ b/stories/Layers/components/polygon.tsx @@ -141,8 +141,8 @@ export default class TextLayerDemo extends React.Component { }); scene.addLayer(layer); this.scene = scene; - layer.on('remapping', ()=>{ - console.log('remapinbg event') + layer.on('remapping', () => { + console.log('remapinbg event'); }); const gui = new dat.GUI(); this.gui = gui; From 1810d90304be9adabc773adebb01e79712d6d17f Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 20 Jul 2020 17:40:24 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix(scene):=20=E9=80=9A=E8=BF=87client=20si?= =?UTF-8?q?ze=E8=AE=BE=E7=BD=AE=E7=94=BB=E5=B8=83=E5=A4=A7=E5=B0=8F,?= =?UTF-8?q?=E6=94=AF=E6=8C=81css=20scale?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../interaction/InteractionService.ts | 8 ++- .../services/interaction/PickingService.ts | 26 +++++-- .../src/services/renderer/IRendererService.ts | 2 +- .../core/src/services/scene/SceneService.ts | 69 +++++++++++-------- packages/renderer/src/regl/index.ts | 20 +++--- stories/Layers/components/PointImage.tsx | 1 + 6 files changed, 77 insertions(+), 49 deletions(-) diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts index 2126e13405..6859cd3e89 100644 --- a/packages/core/src/services/interaction/InteractionService.ts +++ b/packages/core/src/services/interaction/InteractionService.ts @@ -33,9 +33,12 @@ export default class InteractionService extends EventEmitter private clickTimer: number; + private $containter: HTMLElement; + public init() { // 注册事件在地图底图上 this.addEventListenerOnMap(); + this.$containter = this.mapService.getMapContainer() as HTMLElement; } public destroy() { @@ -147,7 +150,10 @@ export default class InteractionService extends EventEmitter const lngLat = this.mapService.containerToLngLat([clientX, clientY]); return { x: clientX, y: clientY, lngLat, type }; } - private onHover = ({ x, y, type }: MouseEvent) => { + private onHover = (event: MouseEvent) => { + let { x, y } = event; + const type = event.type; + const $containter = this.mapService.getMapContainer(); if ($containter) { const { top, left } = $containter.getBoundingClientRect(); diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 336262509d..459293de29 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -46,8 +46,12 @@ export default class PickingService implements IPickingService { createTexture2D, createFramebuffer, getViewportSize, + getContainer, } = this.rendererService; - const { width, height } = getViewportSize(); + const { + width, + height, + } = (getContainer() as HTMLElement).getBoundingClientRect(); this.pickBufferScale = this.configService.getSceneConfig(id).pickBufferScale || 1; // 创建 picking framebuffer，后续实时 resize @@ -76,9 +80,16 @@ export default class PickingService implements IPickingService { this.alreadyInPicking = false; } private async pickingLayers(target: IInteractionTarget) { - const { getViewportSize, useFramebuffer, clear } = this.rendererService; - const { width, height } = getViewportSize(); - + const { + getViewportSize, + useFramebuffer, + clear, + getContainer, + } = this.rendererService; + const { + width, + height, + } = (getContainer() as HTMLElement).getBoundingClientRect(); if (this.width !== width || this.height !== height) { this.pickingFBO.resize({ width: Math.round(width / this.pickBufferScale), @@ -113,8 +124,11 @@ export default class PickingService implements IPickingService { { x, y, lngLat, type }: IInteractionTarget, ) => { let isPicked = false; - const { getViewportSize, readPixels } = this.rendererService; - const { width, height } = getViewportSize(); + const { getViewportSize, readPixels, getContainer } = this.rendererService; + const { + width, + height, + } = (getContainer() as HTMLElement).getBoundingClientRect(); const { enableHighlight, enableSelect } = layer.getLayerConfig(); const xInDevicePixel = x * window.devicePixelRatio; diff --git a/packages/core/src/services/renderer/IRendererService.ts b/packages/core/src/services/renderer/IRendererService.ts index bf6c9de393..1480a30544 100644 --- a/packages/core/src/services/renderer/IRendererService.ts +++ b/packages/core/src/services/renderer/IRendererService.ts @@ -42,7 +42,7 @@ export interface IReadPixelsOptions { } export interface IRendererService { - init($container: HTMLDivElement, cfg: IRenderConfig): Promise; + init(canvas: HTMLCanvasElement, cfg: IRenderConfig): Promise; clear(options: IClearOptions): void; createModel(options: IModelInitializationOptions): IModel; createAttribute(options: IAttributeInitializationOptions): IAttribute; diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index adafc538e6..0cdf457612 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -100,6 +100,8 @@ export default class Scene extends EventEmitter implements ISceneService { */ private $container: HTMLDivElement | null; + private canvas: HTMLCanvasElement; + private hooks: { init: AsyncParallelHook; }; @@ -170,11 +172,17 @@ export default class Scene extends EventEmitter implements ISceneService { this.configService.getSceneConfig(this.id).id || '', ); this.$container = $container; + if ($container) { + this.canvas = DOM.create('canvas', '', $container) as HTMLCanvasElement; + this.setCanvas(); await this.rendererService.init( - $container, + // @ts-ignore + this.canvas, this.configService.getSceneConfig(this.id) as IRenderConfig, ); + // this.initContainer(); + // window.addEventListener('resize', this.handleWindowResized); elementResizeEvent( this.$container as HTMLDivElement, this.handleWindowResized, @@ -279,39 +287,42 @@ export default class Scene extends EventEmitter implements ISceneService { this.emit('resize'); // @ts-check if (this.$container) { - // recalculate the viewport's size and call gl.viewport - // @see https://github.com/regl-project/regl/blob/master/lib/webgl.js#L24-L38 - const pixelRatio = window.devicePixelRatio; - let w = window.innerWidth; - let h = window.innerHeight; - if (this.$container !== document.body) { - // const bounds = this.$container.getBoundingClientRect(); - // w = bounds.right - bounds.left; - // h = bounds.bottom - bounds.top; - w = this.$container.clientWidth || 400; - h = this.$container.clientHeight || 300; - } - const canvas = this.$container?.getElementsByTagName('canvas')[0]; - // this.$container. - this.rendererService.viewport({ - x: 0, - y: 0, - width: pixelRatio * w, - height: pixelRatio * h, - }); - // 触发 Map， canvas - DOM.triggerResize(); + this.initContainer(); this.coordinateSystemService.needRefresh = true; - if (canvas) { - canvas.width = w * pixelRatio; - canvas.height = h * pixelRatio; - canvas.style.width = `${w}px`; - canvas.style.height = `${h}px`; - } + // repaint layers this.render(); } }; + private initContainer() { + const pixelRatio = window.devicePixelRatio; + const w = this.$container?.clientWidth || 400; + const h = this.$container?.clientHeight || 300; + const canvas = this.canvas; + if (canvas) { + canvas.width = w * pixelRatio; + canvas.height = h * pixelRatio; + canvas.style.width = `${w}px`; + canvas.style.height = `${h}px`; + } + this.rendererService.viewport({ + x: 0, + y: 0, + width: pixelRatio * w, + height: pixelRatio * h, + }); + } + + private setCanvas() { + const pixelRatio = window.devicePixelRatio; + const w = this.$container?.clientWidth || 400; + const h = this.$container?.clientHeight || 300; + const canvas = this.canvas; + canvas.width = w * pixelRatio; + canvas.height = h * pixelRatio; + canvas.style.width = `${w}px`; + canvas.style.height = `${h}px`; + } private handleMapCameraChanged = (viewport: IViewport) => { this.cameraService.update(viewport); diff --git a/packages/renderer/src/regl/index.ts b/packages/renderer/src/regl/index.ts index 43dc6f1027..5e40310639 100644 --- a/packages/renderer/src/regl/index.ts +++ b/packages/renderer/src/regl/index.ts @@ -36,19 +36,21 @@ import ReglTexture2D from './ReglTexture2D'; export default class ReglRendererService implements IRendererService { private gl: regl.Regl; private $container: HTMLDivElement | null; + private canvas: HTMLCanvasElement; private width: number; private height: number; private isDirty: boolean; public async init( - $container: HTMLDivElement, + canvas: HTMLCanvasElement, cfg: IRenderConfig, ): Promise { - this.$container = $container; + // this.$container = $container; + this.canvas = canvas; // tslint:disable-next-line:typedef this.gl = await new Promise((resolve, reject) => { regl({ - container: $container, + canvas: this.canvas, attributes: { alpha: true, // use TAA instead of MSAA @@ -141,13 +143,6 @@ export default class ReglRendererService implements IRendererService { }) => { // use WebGL context directly // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch - const renderCanvas = this.$container?.getElementsByTagName('canvas')[0]; - if (renderCanvas) { - renderCanvas.width = width; - renderCanvas.height = height; - renderCanvas.style.width = width / 2 + 'px'; - renderCanvas.style.height = height / 2 + 'px'; - } this.gl._gl.viewport(x, y, width, height); this.width = width; this.height = height; @@ -176,11 +171,12 @@ export default class ReglRendererService implements IRendererService { }; public getContainer = () => { - return this.$container; + return this.canvas.parentElement; }; public getCanvas = () => { - return this.$container?.getElementsByTagName('canvas')[0] || null; + // return this.$container?.getElementsByTagName('canvas')[0] || null; + return this.canvas; }; public getGLContext = () => { diff --git a/stories/Layers/components/PointImage.tsx b/stories/Layers/components/PointImage.tsx index e6fbdbc964..c92e44bcd0 100644 --- a/stories/Layers/components/PointImage.tsx +++ b/stories/Layers/components/PointImage.tsx @@ -72,6 +72,7 @@ export default class PointImage extends React.Component { left: 0, right: 0, bottom: 0, + transform: 'scale(0.8)', }} /> ); From 8e0fb84b3aca985b52ac2132a559956b62d40503 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 20 Jul 2020 17:40:24 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix(scene):=20=E9=80=9A=E8=BF=87client=20si?= =?UTF-8?q?ze=E8=AE=BE=E7=BD=AE=E7=94=BB=E5=B8=83=E5=A4=A7=E5=B0=8F,?= =?UTF-8?q?=E6=94=AF=E6=8C=81css=20scale?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../interaction/InteractionService.ts | 8 ++- .../services/interaction/PickingService.ts | 26 +++++-- .../src/services/renderer/IRendererService.ts | 2 +- .../core/src/services/scene/SceneService.ts | 69 +++++++++++-------- packages/renderer/src/regl/index.ts | 20 +++--- stories/Layers/components/PointImage.tsx | 1 + 6 files changed, 77 insertions(+), 49 deletions(-) diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts index 2126e13405..6859cd3e89 100644 --- a/packages/core/src/services/interaction/InteractionService.ts +++ b/packages/core/src/services/interaction/InteractionService.ts @@ -33,9 +33,12 @@ export default class InteractionService extends EventEmitter private clickTimer: number; + private $containter: HTMLElement; + public init() { // 注册事件在地图底图上 this.addEventListenerOnMap(); + this.$containter = this.mapService.getMapContainer() as HTMLElement; } public destroy() { @@ -147,7 +150,10 @@ export default class InteractionService extends EventEmitter const lngLat = this.mapService.containerToLngLat([clientX, clientY]); return { x: clientX, y: clientY, lngLat, type }; } - private onHover = ({ x, y, type }: MouseEvent) => { + private onHover = (event: MouseEvent) => { + let { x, y } = event; + const type = event.type; + const $containter = this.mapService.getMapContainer(); if ($containter) { const { top, left } = $containter.getBoundingClientRect(); diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index 336262509d..459293de29 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -46,8 +46,12 @@ export default class PickingService implements IPickingService { createTexture2D, createFramebuffer, getViewportSize, + getContainer, } = this.rendererService; - const { width, height } = getViewportSize(); + const { + width, + height, + } = (getContainer() as HTMLElement).getBoundingClientRect(); this.pickBufferScale = this.configService.getSceneConfig(id).pickBufferScale || 1; // 创建 picking framebuffer，后续实时 resize @@ -76,9 +80,16 @@ export default class PickingService implements IPickingService { this.alreadyInPicking = false; } private async pickingLayers(target: IInteractionTarget) { - const { getViewportSize, useFramebuffer, clear } = this.rendererService; - const { width, height } = getViewportSize(); - + const { + getViewportSize, + useFramebuffer, + clear, + getContainer, + } = this.rendererService; + const { + width, + height, + } = (getContainer() as HTMLElement).getBoundingClientRect(); if (this.width !== width || this.height !== height) { this.pickingFBO.resize({ width: Math.round(width / this.pickBufferScale), @@ -113,8 +124,11 @@ export default class PickingService implements IPickingService { { x, y, lngLat, type }: IInteractionTarget, ) => { let isPicked = false; - const { getViewportSize, readPixels } = this.rendererService; - const { width, height } = getViewportSize(); + const { getViewportSize, readPixels, getContainer } = this.rendererService; + const { + width, + height, + } = (getContainer() as HTMLElement).getBoundingClientRect(); const { enableHighlight, enableSelect } = layer.getLayerConfig(); const xInDevicePixel = x * window.devicePixelRatio; diff --git a/packages/core/src/services/renderer/IRendererService.ts b/packages/core/src/services/renderer/IRendererService.ts index bf6c9de393..1480a30544 100644 --- a/packages/core/src/services/renderer/IRendererService.ts +++ b/packages/core/src/services/renderer/IRendererService.ts @@ -42,7 +42,7 @@ export interface IReadPixelsOptions { } export interface IRendererService { - init($container: HTMLDivElement, cfg: IRenderConfig): Promise; + init(canvas: HTMLCanvasElement, cfg: IRenderConfig): Promise; clear(options: IClearOptions): void; createModel(options: IModelInitializationOptions): IModel; createAttribute(options: IAttributeInitializationOptions): IAttribute; diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index adafc538e6..0cdf457612 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -100,6 +100,8 @@ export default class Scene extends EventEmitter implements ISceneService { */ private $container: HTMLDivElement | null; + private canvas: HTMLCanvasElement; + private hooks: { init: AsyncParallelHook; }; @@ -170,11 +172,17 @@ export default class Scene extends EventEmitter implements ISceneService { this.configService.getSceneConfig(this.id).id || '', ); this.$container = $container; + if ($container) { + this.canvas = DOM.create('canvas', '', $container) as HTMLCanvasElement; + this.setCanvas(); await this.rendererService.init( - $container, + // @ts-ignore + this.canvas, this.configService.getSceneConfig(this.id) as IRenderConfig, ); + // this.initContainer(); + // window.addEventListener('resize', this.handleWindowResized); elementResizeEvent( this.$container as HTMLDivElement, this.handleWindowResized, @@ -279,39 +287,42 @@ export default class Scene extends EventEmitter implements ISceneService { this.emit('resize'); // @ts-check if (this.$container) { - // recalculate the viewport's size and call gl.viewport - // @see https://github.com/regl-project/regl/blob/master/lib/webgl.js#L24-L38 - const pixelRatio = window.devicePixelRatio; - let w = window.innerWidth; - let h = window.innerHeight; - if (this.$container !== document.body) { - // const bounds = this.$container.getBoundingClientRect(); - // w = bounds.right - bounds.left; - // h = bounds.bottom - bounds.top; - w = this.$container.clientWidth || 400; - h = this.$container.clientHeight || 300; - } - const canvas = this.$container?.getElementsByTagName('canvas')[0]; - // this.$container. - this.rendererService.viewport({ - x: 0, - y: 0, - width: pixelRatio * w, - height: pixelRatio * h, - }); - // 触发 Map， canvas - DOM.triggerResize(); + this.initContainer(); this.coordinateSystemService.needRefresh = true; - if (canvas) { - canvas.width = w * pixelRatio; - canvas.height = h * pixelRatio; - canvas.style.width = `${w}px`; - canvas.style.height = `${h}px`; - } + // repaint layers this.render(); } }; + private initContainer() { + const pixelRatio = window.devicePixelRatio; + const w = this.$container?.clientWidth || 400; + const h = this.$container?.clientHeight || 300; + const canvas = this.canvas; + if (canvas) { + canvas.width = w * pixelRatio; + canvas.height = h * pixelRatio; + canvas.style.width = `${w}px`; + canvas.style.height = `${h}px`; + } + this.rendererService.viewport({ + x: 0, + y: 0, + width: pixelRatio * w, + height: pixelRatio * h, + }); + } + + private setCanvas() { + const pixelRatio = window.devicePixelRatio; + const w = this.$container?.clientWidth || 400; + const h = this.$container?.clientHeight || 300; + const canvas = this.canvas; + canvas.width = w * pixelRatio; + canvas.height = h * pixelRatio; + canvas.style.width = `${w}px`; + canvas.style.height = `${h}px`; + } private handleMapCameraChanged = (viewport: IViewport) => { this.cameraService.update(viewport); diff --git a/packages/renderer/src/regl/index.ts b/packages/renderer/src/regl/index.ts index 43dc6f1027..95b798ccb7 100644 --- a/packages/renderer/src/regl/index.ts +++ b/packages/renderer/src/regl/index.ts @@ -36,19 +36,21 @@ import ReglTexture2D from './ReglTexture2D'; export default class ReglRendererService implements IRendererService { private gl: regl.Regl; private $container: HTMLDivElement | null; + private canvas: HTMLCanvasElement; private width: number; private height: number; private isDirty: boolean; public async init( - $container: HTMLDivElement, + canvas: HTMLCanvasElement, cfg: IRenderConfig, ): Promise { - this.$container = $container; + // this.$container = $container; + this.canvas = canvas; // tslint:disable-next-line:typedef this.gl = await new Promise((resolve, reject) => { regl({ - container: $container, + canvas: this.canvas, attributes: { alpha: true, // use TAA instead of MSAA @@ -141,13 +143,6 @@ export default class ReglRendererService implements IRendererService { }) => { // use WebGL context directly // @see https://github.com/regl-project/regl/blob/gh-pages/API.md#unsafe-escape-hatch - const renderCanvas = this.$container?.getElementsByTagName('canvas')[0]; - if (renderCanvas) { - renderCanvas.width = width; - renderCanvas.height = height; - renderCanvas.style.width = width / 2 + 'px'; - renderCanvas.style.height = height / 2 + 'px'; - } this.gl._gl.viewport(x, y, width, height); this.width = width; this.height = height; @@ -176,11 +171,12 @@ export default class ReglRendererService implements IRendererService { }; public getContainer = () => { - return this.$container; + return this.canvas?.parentElement; }; public getCanvas = () => { - return this.$container?.getElementsByTagName('canvas')[0] || null; + // return this.$container?.getElementsByTagName('canvas')[0] || null; + return this.canvas; }; public getGLContext = () => { diff --git a/stories/Layers/components/PointImage.tsx b/stories/Layers/components/PointImage.tsx index e6fbdbc964..c92e44bcd0 100644 --- a/stories/Layers/components/PointImage.tsx +++ b/stories/Layers/components/PointImage.tsx @@ -72,6 +72,7 @@ export default class PointImage extends React.Component { left: 0, right: 0, bottom: 0, + transform: 'scale(0.8)', }} /> );