fix: fix patterns vertical offset

Author: pyatyispyatil

example/src/components/app.tsx

@@ -23,7 +23,7 @@ import { SelectedData } from './charts/selected-data';
 import { WaterfallSettings } from './settings/waterfall-settings';
 import { MarksSettings } from './settings/marks-settings';
 import { TimeseriesSettings } from './settings/timeseries-settings';
-import { defaultPatterns, PatternsSettings } from './settings/patterns-settings';
+import { examplePatterns, PatternsSettings } from './settings/patterns-settings';
 
 enum ChartType {
     Default = 'default',
@@ -44,7 +44,7 @@ const flameChartVariants = [
 export const App = () => {
     const [treeConfig, setTreeConfig] = useState<TreeConfig>();
     const [stylesSettings, setStylesSettings] = useState({});
-    const [patternsSettings, setPatternsSettings] = useState(defaultPatterns);
+    const [patternsSettings, setPatternsSettings] = useState(examplePatterns);
     const [currentChart, setCurrentChart] = useState(ChartType.Default);
     const [isGenerating, setIsGenerating] = useState(false);
     const [flameChartData, setFlameChartData] = useState<FlameChartNode[] | null>(null);

example/src/components/settings/patterns-settings.module.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: 500px;
+    height: 400px;
     padding: 8px;
 }
 
@@ -12,10 +12,16 @@
 
 .input {
     width: 100%;
-    height: 400px;
+    height: 350px;
     box-sizing: border-box;
 }
 
+.select {
+    width: 100%;
+    margin: 8px 0;
+    font-size: 1rem;
+}
+
 .sectionsWrapper {
     flex: 1;
     overflow: auto;

example/src/components/settings/patterns-settings.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useState } from 'react';
 import styles from './patterns-settings.module.css';
 import { Button } from '../shared/button';
-import { DefaultPatterns } from '../../../../src';
+import { defaultPatterns, DefaultPatterns } from '../../../../src';
 
-export const defaultPatterns: DefaultPatterns[] = [
+export const examplePatterns: DefaultPatterns[] = [
     {
-        name: 'example-stripes-pattern',
+        name: 'example-pattern-1',
         type: 'triangles',
         config: {
             color: 'rgb(255,206,71)',
@@ -14,7 +14,7 @@ export const defaultPatterns: DefaultPatterns[] = [
         },
     },
     {
-        name: 'example-combined-pattern',
+        name: 'example-pattern-2',
         type: 'combined',
         config: [
             {
@@ -66,7 +66,7 @@ export const defaultPatterns: DefaultPatterns[] = [
     },
 ];
 
-export const defaultPatternsNames = defaultPatterns.map((pattern) => pattern.name);
+export const examplePatternsNames = examplePatterns.map((pattern) => pattern.name);
 
 export const PatternsSettings = ({
     value = [],
@@ -92,8 +92,28 @@ export const PatternsSettings = ({
         <div className={styles.root}>
             <div className={styles.sectionsWrapper}>
                 {patterns.map(({ name, type, config }, index) => (
-                    <div key={(name || type) + index} className={styles.section}>
-                        <div className={styles.sectionHeader}>{name || type}</div>
+                    <div key={name} className={styles.section}>
+                        <div className={styles.sectionHeader}>{name}</div>
+                        type:{' '}
+                        <select
+                            value={type}
+                            className={styles.select}
+                            onChange={(e) => {
+                                const newValue = e.target.value as keyof typeof defaultPatterns;
+
+                                setPatterns(
+                                    patterns.map((pattern, i) =>
+                                        i === index ? { ...pattern, type: newValue } : pattern,
+                                    ),
+                                );
+                            }}
+                        >
+                            {Object.keys(defaultPatterns).map((type) => (
+                                <option key={type} value={type}>
+                                    {type}
+                                </option>
+                            ))}
+                        </select>
                         <textarea
                             className={styles.input}
                             value={config}

example/src/test-data.ts

@@ -1,6 +1,6 @@
 import { FlameChartNode, Mark, WaterfallIntervals, WaterfallItems } from '../../src';
 import { ChartPoints } from '../../src/plugins/utils/chart-render';
-import { defaultPatternsNames } from './components/settings/patterns-settings';
+import { examplePatternsNames } from './components/settings/patterns-settings';
 
 const chars = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
 
@@ -202,7 +202,7 @@ export const generateRandomTree = ({
     let currentType = types[typesCounter];
 
     rootNodes.forEach((item) => {
-        item.pattern = rndItem(defaultPatternsNames);
+        item.pattern = rndItem(examplePatternsNames);
 
         item.children?.forEach(
             (item) =>

src/engines/basic-render-engine.ts

@@ -350,7 +350,7 @@ export class BasicRenderEngine extends EventEmitter {
 
                 items.forEach((rect) => {
                     if (pattern) {
-                        pattern.setTransform(matrix.translate(rect.x * scale, 0));
+                        pattern.setTransform(matrix.translate(rect.x * scale, rect.y * scale));
                     }
 
                     this.renderBlock(rect.x, rect.y, rect.w, rect.h);

src/index.ts

@@ -23,3 +23,5 @@ export type {
     CombinedPatternConfig,
     DotsPatternConfig,
 } from './patterns';
+
+export { defaultPatterns } from './patterns';

src/patterns/combined-pattern.ts

@@ -59,7 +59,7 @@ export const combinedPattern =
             return combinedPatterns[pattern.type](pattern.config as any)(engine);
         });
 
-        const height = (engine.blockHeight + 1) * scale;
+        const height = engine.blockHeight * scale;
         const width = findNumber(
             renderedPatterns.map(({ width = 1, scale: patternScale = 1 }) => width * (scale / patternScale)),
             engine.width * scale,

src/patterns/dots-pattern.ts

@@ -31,7 +31,7 @@ export const dotsPattern =
         const realVerticalSpacing = verticalSpicing * scale;
         const realHorizontalSpacing = horizontalSpicing * scale;
         const width = (size + realHorizontalSpacing / 4) * scale;
-        const height = (engine.blockHeight + 1) * scale;
+        const height = engine.blockHeight * scale;
         const rowsCount = rows ? rows : Math.floor(height / (realSize + realVerticalSpacing));
 
         ctx.setTransform(scale, 0, 0, scale, 0, 0);

src/patterns/gradient-pattern.ts

@@ -10,7 +10,7 @@ export const gradientPattern =
         const scale = 4;
 
         const width = scale;
-        const height = (engine.blockHeight + 1) * scale;
+        const height = engine.blockHeight * scale;
 
         ctx.setTransform(scale, 0, 0, scale, 0, 0);
 

src/patterns/stripes-pattern.ts

@@ -24,7 +24,7 @@ export const stripesPattern =
         const scale = 4;
 
         ctx.setTransform(scale, 0, 0, scale, 0, 0);
-        canvas.height = (engine.blockHeight + 1) * scale;
+        canvas.height = engine.blockHeight * scale;
 
         const realLineWidth = lineWidth * scale;
         const realSpacing = spacing * scale + realLineWidth;

src/patterns/triangles-pattern.ts

@@ -33,7 +33,7 @@ export const trianglesPattern =
         const maxHeight = Math.max(...points.map(({ y }) => y));
 
         const fullWidth = maxWidth + spacing * scale;
-        const fullHeight = (engine.blockHeight + 1) * scale;
+        const fullHeight = engine.blockHeight * scale;
 
         const delta = align === 'center' ? (fullHeight - maxHeight) / 2 : align === 'top' ? 0 : fullHeight - maxHeight;