xaviergonz / js-angusj-clipper Goto Github PK

Steps to reproduce:
Create a project using Angular-cli v. 6.0.8, Angular 6.0.3, RxJS 6.2, and typescript 2.7.2.
Install the latest version of js-angusj-clipper (I tried both 0.19 and 0.18)
Run npm start

You will see the following error:
ERROR in ./node_modules/js-angusj-clipper/dist/wasm/clipper-wasm.js
Module not found: Error: Can't resolve 'fs' in 'B:\dev\github\angular5-canvas-dr
awer\node_modules\js-angusj-clipper\dist\wasm'
ERROR in ./node_modules/js-angusj-clipper/dist/wasm/clipper.js
Module not found: Error: Can't resolve 'fs' in 'B:\dev\github\angular5-canvas-dr
awer\node_modules\js-angusj-clipper\dist\wasm'
ERROR in ./node_modules/js-angusj-clipper/dist/wasm/clipper-wasm.js
Module not found: Error: Can't resolve 'path' in 'B:\dev\github\angular5-canvas-
drawer\node_modules\js-angusj-clipper\dist\wasm'
ERROR in ./node_modules/js-angusj-clipper/dist/wasm/clipper.js
Module not found: Error: Can't resolve 'path' in 'B:\dev\github\angular5-canvas-
drawer\node_modules\js-angusj-clipper\dist\wasm'

On compiling it is trying to find "fs" when compiling clipper but it doesn't seem to want to work. The clipper did work in Angular 5.2 which our application was running in before trying to update Angular. Any help or insight would be appreciated.

I'm trying to get the open paths that are inside a closed polygon. And clipper seems to support this, according to the docs.

But if I use an input that is an open path, I get a cryptic exception.

  clipper.clipToPaths({
    clipType: clipper.lib.ClipType.Intersection,
    subjectFillType: clipper.lib.PolyFillType.Positive,
    subjectInputs: [
      {
        data: [
          { x: 10, y: 10 },
          { x: 90, y: 10 },
          { x: 90, y: 90 },
        ],
        closed: false,
      },
    ],
    clipInputs: [
      {
        data: [
          { x: 0, y: 0 },
          { x: 0, y: 50 },
          { x: 50, y: 50 },
          { x: 50, y: 0 },
        ],
      },
    ],
  })

Which throws:

Uncaught 5257664 - Exception catching is disabled, this exception cannot be caught. Compile with -s DISABLE_EXCEPTION_CATCHING=0 or DISABLE_EXCEPTION_CATCHING=2 to catch.

If I changed the above so that subjectInputs[0].closed = true then it returns [] which isn't right either.

https://github.com/AngusJohnson/Clipper2

Hello,
Why this offset returns undefined?

const clipperLib = require("js-angusj-clipper")

async function main() {
const clipper = await clipperLib.loadNativeClipperLibInstanceAsync(
clipperLib.NativeClipperLibRequestedFormat.WasmWithAsmJsFallback
)

const seg = clipper.offsetToPaths({
			delta: 1200,
			offsetInputs: [{
				data: [ { x: 168111846, y: 505873449 },
					{ x: 168111360, y: 505874949 } ],
				joinType: clipperLib.JoinType.Round,
				endType: clipperLib.JoinType.Round
			}]
		})
console.log(seg)

}

main()

/web/wasm/clipper.js
/web/wasm/clipper-wasm.js

add line:

let document = {};

fix

Working on a project that has been reliant on Clipper 6.2.1. Curious (with respect to ease of system integration) if we can build the Web Assembly clipper library using the older clipper.cpp version of 6.2.1?

There's a function polyTreeToPaths, but there is no reverse of this. However, most operations just use Paths, so I can't stay on PolyTrees. How can I create a PolyTree?

In functions.scalePath the following code ends up reversing the order of the path when scaling:

    scalePath(path: ReadonlyPath, scale: number): Path {
        const sol: Path = [];
        let i = path.length;
        while (i--) {
          const p = path[i];
          sol.push({
            x: Math.round(p.x * scale),
            y: Math.round(p.y * scale),
          });
        }
        return sol;
      }

This is because it starts at the end of the array (I assume for performance reasons) and walks to the front, but then it creates the new array using push which results in reversing the direction.

While not quite as performant, the following works (and is better than using sol.unshift) as does not change the order of the path array:

    scalePath(path: ReadonlyPath, scale: number): Path {
        const sol: Path = [];
        const len = path.length;
        for (let i = 0; i < len; ++i) {
          const p = path[i];
          sol.push({
            x: Math.round(p.x * scale),
            y: Math.round(p.y * scale),
          });
        }
        return sol;
      }

The type SubjectInput is not being exported from the wrapper (its buddy ClipInput is exported). Hand editing index.d.ts to include the import:

import { ClipInput, ClipParams, SubjectInput } from "./clipFunctions";

and then exporting it:

export { ClipType, EndType, JoinType, PolyFillType, NativeClipperLibLoadedFormat, NativeClipperLibRequestedFormat, PointInPolygonResult, PolyNode, PolyTree, IntPoint, IntRect, Path, ReadonlyPath, Paths, ReadonlyPaths, ClipInput, ClipParams, OffsetInput, OffsetParams, ClipperError , SubjectInput };

Resolves the issue. Similar changes to index.ts would likely (correctly) fix this issue.

Why my result is not showing accurate

Below Image red is my original border and blue is from Clipper result.

const clipper = await clipperLib.loadNativeClipperLibInstanceAsync(
      clipperLib.NativeClipperLibRequestedFormat.AsmJsOnly
    );


    let path: clipperLib.Path = points;
    let offsetInput: clipperLib.OffsetInput = {
      data: path,
      endType: clipperLib.EndType.ClosedPolygon,
      joinType: clipperLib.JoinType.Round
    }

    let offsetInputs = Array<clipperLib.OffsetInput>();
    offsetInputs.push(offsetInput);


    let offsetParam: clipperLib.OffsetParams = {
      delta: offsetDistance,
      offsetInputs: offsetInputs,

    }

1. install ubuntu 18.04.5 with USB Non-uefi boot and press space key select language to english as default
2. sudo dpkg-reconfigure dash -> No
3. sudo apt install lightdm
4. sudo dpkg-reconfigure -> lightdm
5. sudo apt install gnome-session-flashback

update-alternatives --install /usr/bin/x-session-manager x-session-manager /usr/lib/gnome-flashback/gnome-flashback-metacity 60
7. sudo passwd root
8. sudo gedit /root/.profile
mesg n || true change -> tty -s && mesg n
9.
sudo sh -c 'echo "greeter-show-manual-login=true" >> /usr/share/lightdm/lightdm.conf.d/50-unity-greeter.conf'
10.
sudo gedit /etc/pam.d/gdm-autologin
comment # auth required pam_succeed_if.so user != root quiet_success
11.
sudo gedit /etc/pam.d/gdm-password
comment # auth required pam_succeed_if.so user != root quiet_success
12. sudo apt remove gdm3
13. reboot and root login, session select gnome-session-flashback. Still OK now
14. [Region & Language] -> [install / remove languages] -> check box enable Chinese tradition
15. logout & root login
16. [Region & Language] -> languages -> Chinese
17. reboot and login
###########Bug here##########
18. gnome-flashback-metacity failed Now, even select metacity still go to gnome-session
19. event root login, gedit need add sudo or screen messy
(both 18. 19. never happen in ubuntu 16.04.5)

//
try failed:

1. apt purge gnome-session-flashback
2. apt autoremove
3. apt autoclean
4. apt install --reinstall lightdm
5. apt install --reinstall gnome-session-flashback

//
ProblemType: Bug
DistroRelease: Ubuntu 18.04.5
Architecture: amd64
CurrentDesktop: GNOME-Flashback:GNOME

//
root login
in 18.04 x64 run failed when change english to chinese, I test many times and happened
select metacity session failed and show in gnome-session in root logiin
I try apt install compiz and select it, still show gnome-session
anyone can help, metacity session can not run in root login~~~after change language

try failed in /usr/lib/gnome-flashback/gnome-flashback-metacity

Originally posted by @fatalfeel in canonical/lightdm#289

When using preserveCollinear: true, strictlySimple: true, etc, I'm getting the following error.

TypeError {
message: 'Cannot convert "0[object Object]" to int',
}

Any idea what's going wrong?

Hello Javier,
when importing your script into typescript Angular projects, the following warning appears:

Warning: [file] depends on 'js-angusj-clipper/web'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I have reviewed the source code here and it seems like this project is not yet a ES Module.
For any modern typescript project, it would be helpful if you could provide a ES6 Module.
You can read more about the benefits of ESM here and here.

Let me know if I can help during the implementation of this.

Best,
Alexander

"ReferenceError: process is not defined" when try to "loadNativeClipperLibInstanceAsync" at:

var devMode = typeof "process" !== "undefined" && process.env && process.env.NODE_ENV !== "production";
in
(clipFunctions.js:7)

In ClipperLibWrapper I see that clipToPaths and clipToPolyTree both have return values that are the native type, plus a union for undefined:

clipToPaths(params: ClipParams): Paths | undefined { ... }
clipToPolyTree(params: ClipParams): PolyTree | undefined { ... }

However, in looking at the implementation, I see that the lower level functions (in functions.ts) do not return undefined, and appear to throw exceptions on errors. I did not look deeper to verify if this was a perhaps type error on those functions (in functions) but seeing as the other methods in ClipperLibWrapper do not return undefined I'm wondering if the undefined can be removed from ClipperLibWrapper?

clipToPaths(params: ClipParams): Paths { ... }
clipToPolyTree(params: ClipParams): PolyTree { ... }

Edit: I noticed there are other methods as well that define a union return type with undefined, but not all of them.

First: thanks for this handy and super speedy library!

I'd appreciate an example in the docs on how to do clipping of a Line and a Polygone as I'm not that knowledgeable in vector graphics (yet).

Specifically, I'd like like to clip a Line (open path) from a user-defined Polygon (rectangle, but can also be more complex polygon with holes).

Here's what I tried, and I would much appreciate some hints on how to do this correctly.

import * as clipperLib from "js-angusj-clipper"; // es6 / typescript

async function mainAsync() {
  // create an instance of the library (usually only do this once in your app)
  const clipper = await clipperLib.loadNativeClipperLibInstanceAsync(
    // let it autodetect which one to use, but also available WasmOnly and AsmJsOnly
    clipperLib.NativeClipperLibRequestedFormat.WasmWithAsmJsFallback
  );

  const line = [
    { x: 10, y: 10 },
    { x: 50, y: 50 },
    { x: 100, y: 100 }
  ];


  const rect = [
    { x: 25, y: 25 },
    { x: 25, y: 75 },
    { x: 75, y: 75 },
    { x: 75, y: 25 }
  ];


  const polyResult = clipper.clipToPaths({
    clipType: clipperLib.ClipType.Union,

    subjectInputs: [{ data: rect, closed: true }],

    clipInputs: [{ data: line, closed: false }],

    subjectFillType: clipperLib.PolyFillType.EvenOdd
  });

  console.log("polyResult", polyResult);
}

mainAsync();

The latest is 6.4.2 released in 2017 but I see this project was started before then. Does it use the latest version?

I found that when I use floating point numbers, I can also return the correct result.
I currently use the following functions: minkowskiSumPath and clipToPaths.

In addition, I feel that more detailed data is needed to explain how the wasm version should be used when the polyline is complex.