qt5base-lts/util/gradientgen/gradientgen.js
Giuseppe D'Angelo 5b4b437b30 WebGradients: redo implementation
The previous implementation was *extremely* expensive. It
relied on loading a binary JSON file from resources (which
involved decompressing it), then extracting information out of
it to build a gradient.  Already-loaded gradients were kept in
a local cache, which had to be mutex protected.

Instead, this patch extends the gradient generator to build
static arrays filled with the web gradient data, sitting in
.rodata.

These arrays are used when building QGradient objects with a
web gradient. No explicit mutex protection is necessary, since
accesses will just read from the arrays.

As benefits, this patch removes:

* the binary json representation from QtGui's resources (~4KB
compressed, ~50KB uncompressed)
* the overhead of reading from the JSON for each used web
gradient;
* the startup costs of registering the webgradients in the
resources;
* all the overhead of mutex locking when building such
gradients;
* all the runtime memory allocations to load, parse and cache
the web gradients (including the memory + CPU spike on first
load due to the uncompression of the JSON data, as well as a
couple of deep copies).

Change-Id: If5c3d704430df76ce8faf55ee75ebd4639ba09c4
Reviewed-by: Tor Arne Vestbø <tor.arne.vestbo@qt.io>
Reviewed-by: Ulf Hermann <ulf.hermann@qt.io>
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>
Reviewed-by: Thiago Macieira <thiago.macieira@intel.com>
Reviewed-by: Edward Welbourne <edward.welbourne@qt.io>
2019-12-14 11:31:46 +01:00

134 lines
4.3 KiB
JavaScript
Executable File

#! /usr/bin/env node
/****************************************************************************
**
** Copyright (C) 2018 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the utils of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:GPL-EXCEPT$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
** $QT_END_LICENSE$
**
****************************************************************************/
const _ = require('lodash');
const fs = require('fs');
const postcss = require('postcss');
const minifyGradients = require('postcss-minify-gradients');
const valueParser = require('postcss-value-parser');
const parseColor = require('parse-color');
const math = require('mathjs');
const argc = process.argv.length;
if (argc < 3) {
console.log("usage: gradientgen [mode] <filename>");
process.exit(1);
}
const filename = process.argv[argc - 1];
const mode = argc > 3 ? process.argv[argc - 2] : 'json';
fs.readFile(filename, (err, css) => {
postcss([minifyGradients]).process(css)
.then(result => {
let enums = [];
let gradients = [];
result.root.walkRules(rule => {
gradients.push(null); // Placeholder
const name = _.startCase(rule.selector).replace(/\s/g, '');
if (enums.indexOf(name) >= 0)
return; // Duplicate entry
// We can only support single gradient declarations
if (rule.nodes.length > 1)
return;
valueParser(rule.nodes[0].value).walk(node => {
if (node.type !== 'function')
return;
if (node.value !== 'linear-gradient')
return;
const args = node.nodes.reduce((args, arg) => {
if (arg.type === 'div')
args.push([]);
else if (arg.type !== 'space')
args[args.length - 1].push(arg.value);
return args;
}, [[]]);
let angle = valueParser.unit(args[0][0]);
if (angle.unit !== 'deg')
return;
angle = parseInt(angle.number);
if (angle < 0)
angle += 360;
// Angle is in degrees, but we need radians
const radians = angle * math.pi / 180;
const gradientLine = (math.abs(math.sin(radians)) + math.abs(math.cos(radians)));
const cathetus = fn => math.round(fn(radians - math.pi / 2) * gradientLine / 2, 10);
const x = cathetus(math.cos);
const y = cathetus(math.sin);
const start = { x: 0.5 - x, y: 0.5 - y };
const end = { x: 0.5 + x, y: 0.5 + y };
let stops = []
let lastPosition = 0;
args.slice(1).forEach((arg, index) => {
let [color, position = !index ? '0%' : '100%'] = arg;
position = parseInt(position) / 100;
if (position < lastPosition)
position = lastPosition;
lastPosition = position;
color = parseColor(color).hex;
color = parseInt(color.slice(1), 16)
stops.push({ color, position })
});
gradients[gradients.length - 1] = { name, start, end, stops };
});
if (!gradients[gradients.length - 1])
return; // Not supported
enums.push(name);
if (mode == 'debug')
console.log(name, args, gradients[gradients.length - 1])
else if (mode == 'enums')
console.log(`${name} = ${gradients.length},`)
});
// Done walking declarations
if (mode == 'json')
console.log(JSON.stringify(gradients, undefined, 4));
});
});